jquery easyUI分析报告
设计目的
使得开发web网站更容易.
- easyui收集了许多基于jquery的用户界面插件.
- 开发者可以编写更少的javascript代码,而只需要编写一些html标志定义好用户界面.
- easyui非常简单但是非常强大.
相关资源
(如果你注意到域名中有wiki,那么你肯定是个搞IT的.哈..) wiki至少说明了一点:
- 它是有活力的,任何人都可以参与编写,定制和扩展.
优点
- 相比extjs组件级的开发,easyui更接近于html.不仅适合通用网站开发,也可以用来开发企业级的网站.
- 如果说extjs是航空母舰,那么easyui就是瑞士军刀.
- 效率要比extjs要好.
缺点
- 在ie6下会有一些兼容性的问题.
- 它不是开源的,发布的代码混淆并压缩过.一旦出了问题,会让人抓狂的.看这里
- 它的文档太少,论坛也比较冷清.支撑easyUI的人就那么官方的几个.
- 它的走向不确定,以后可能会商业收费
- 它的布局组件也比较少,如果让开发人员自己来布局,那么很考开发人员的前端基本功哦.
开源问题的说明: 通过搜索引擎还是能找到的.在这里. 问题在于为什么被遮盖起来呢？所有的地方都没有任何关于源代码的说明。这个地址也是被关上了。要不是有搜索引擎，你根本找不到。我估计如果不是无法彻底关闭非登录用户，我估计你就是看到了也进不去。
数据模型与技术分析
数据模型是多样的,所有的控件统一支持json格式的数据.如果使用这个框架,那么后台的代码基本不用动.
开发人员定义好html标志后,再编写少量的js代码.easyui会根据html标志,调用相关的组件生成程序.绑定相关的样式和事件.
下面是一个easyui官方提供的可编辑列表的示例.
列表的数据结构是这样的:
{"total":28,"rows":[
{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}
代码如下所示:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
var products = [
{productid:'FI-SW-01',name:'Koi'},
{productid:'K9-DL-01',name:'Dalmation'},
{productid:'RP-SN-01',name:'Rattlesnake'},
{productid:'RP-LI-02',name:'Iguana'},
{productid:'FL-DSH-01',name:'Manx'},
{productid:'FL-DLH-02',name:'Persian'},
{productid:'AV-CB-01',name:'Amazon Parrot'}
];
function productFormatter(value){
for(var i=0; i<products.length; i++){
if (products[i].productid == value) return products[i].name;
}
return value;
}
$(function(){
var lastIndex;
$('#tt').datagrid({
toolbar:[{
text:'append',
iconCls:'icon-add',
handler:function(){
$('#tt').datagrid('endEdit', lastIndex);
$('#tt').datagrid('appendRow',{
itemid:'',
productid:'',
listprice:'',
unitprice:'',
attr1:'',
status:'P'
});
var lastIndex = $('#tt').datagrid('getRows').length-1;
$('#tt').datagrid('beginEdit', lastIndex);
}
},'-',{
text:'delete',
iconCls:'icon-remove',
handler:function(){
var row = $('#tt').datagrid('getSelected');
if (row){
var index = $('#tt').datagrid('getRowIndex', row);
$('#tt').datagrid('deleteRow', index);
}
}
},'-',{
text:'accept',
iconCls:'icon-save',
handler:function(){
$('#tt').datagrid('acceptChanges');
}
},'-',{
text:'reject',
iconCls:'icon-undo',
handler:function(){
$('#tt').datagrid('rejectChanges');
}
},'-',{
text:'getChanges',
iconCls:'icon-search',
handler:function(){
var rows = $('#tt').datagrid('getChanges');
alert('changed rows: ' + rows.length + ' lines');
}
}],
onBeforeLoad:function(){
$(this).datagrid('rejectChanges');
},
onClickRow:function(rowIndex){
if (lastIndex != rowIndex){
$('#tt').datagrid('endEdit', lastIndex);
$('#tt').datagrid('beginEdit', rowIndex);
}
lastIndex = rowIndex;
}
});
});
</script>
</head>
<body>
<h1>Editable DataGrid</h1>
<table id="tt" style="650px;height:auto"
title="Editable DataGrid" iconCls="icon-edit" singleSelect="true"
idField="itemid" url="datagrid_data2.json">
<thead>
<tr>
<th field="itemid" width="80">Item ID</th>
<th field="productid" width="100" formatter="productFormatter" editor="{type:'combobox',options:{valueField:'productid',textField:'name',data:products,required:true}}">Product</th>
<th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
<th field="unitcost" width="80" align="right" editor="numberbox">Unit Cost</th>
<th field="attr1" width="150" editor="text">Attribute</th>
<th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>
</tr>
</thead>
</table>
</body>
</html>
简要说明一下:
- 上例子定义了一个标志为table的dom元素,调用js代码 $('#tt').datagrid() 会生成一个grid列表,它还可以传递一个object级的对象充当配置元素.
如上例中配置的就是一个工具栏.