最后一更了，时间间隔有点久了~~
EasyUI作为一个成熟的前端框架，封装了ajax,对于数据的处理配合datagrid组件的使用，使其非常适合后台管理界面的开发（目前来说界面有点过时了）。
通过ajax向后台请求数据，只要将返回的json数据处理成easyui所需要的数据格式，datagrid可以自行处理进行数据展示。
下面介绍，datagrid表格和treegrid树表两种表格形式。
DataGrid
可以在EasyUI文件夹下 demo-->datagrid 找到datagrid需要的json格式，可以参考datagrid_data1.json的json格式
datagrid_data1.json格式如下：
{"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]} 我们直接从数据库查询返回的list转化为json后一般是这样一种格式
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"} 但是这种格式传递到前台不能easyui识别，easyui datagrid 需要的json为一个封装了total,rows属性的json对象，对于json数组是不能被接收的。
后台要对查询的数据做一个处理：
1 public String selDatagrid(){ 2 try { 3 String ename = new String(request.getParameter("ename").getBytes("ISO-8859-1"),"UTF-8"); 4 String proname = new String(request.getParameter("proname").getBytes("ISO-8859-1"),"UTF-8"); 5 List<QueryInfoDto> resultNodeList = proInfomaService.selData(proname, ename); 6 int total = resultNodeList.size(); 7 resultMap.put("total", total); //将total添加到map中，total为list的size() 8 resultMap.put("rows", resultNodeList); //将rows添加到map中 9 dataroot = JSONObject.fromObject(resultMap); 10 } catch (UnsupportedEncodingException e) { 11 e.printStackTrace(); 12 } 13 return "success"; 14 }
前端ajax请求代码：
1 $('#'+qnode).bind('click',function(){ 2 $('#'+proInfo).treegrid({ 3 url:'query_node_list.action?proName='+proname+'&ename='+ename, 4 lines:true, 5 rownumbers: true, 6 cache : false, 7 animate: true, 8 checkbox:true, 9 collapsible: true, 10 onlyLeafCheck:true, 11 fitColumns: true, 12 checkOnSelect:true, 13 }); 14 });
下面贴出treegrid需要的json格式
[{ "id":1, "name":"C", "size":"", "date":"02/19/2010", "children":[{ "id":2, "name":"Program Files", "size":"120 MB", "date":"03/20/2010", "children":[{ "id":21, "name":"Java", "size":"", "date":"01/13/2010", "state":"closed", "children":[{ "id":211, "name":"java.exe", "size":"142 KB", "date":"01/13/2010" },{ "id":212, "name":"jawt.dll", "size":"5 KB", "date":"01/13/2010" }] },{ "id":22, "name":"MySQL", "size":"", "date":"01/13/2010", "state":"closed", "children":[{ "id":221, "name":"my.ini", "size":"10 KB", "date":"02/26/2009" },{ "id":222, "name":"my-huge.ini", "size":"5 KB", "date":"02/26/2009" },{ "id":223, "name":"my-large.ini", "size":"5 KB", "date":"02/26/2009" }] }] },{ "id":3, "name":"eclipse", "size":"", "date":"01/20/2010", "children":[{ "id":31, "name":"eclipse.exe", "size":"56 KB", "date":"05/19/2009" },{ "id":32, "name":"eclipse.ini", "size":"1 KB", "date":"04/20/2010" },{ "id":33, "name":"notice.html", "size":"7 KB", "date":"03/17/2005" }] }] }]
{"total":9,"rows":[
{"id":1,"region":"Wyoming"},
{"id":11,"region":"Albin","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":1},
{"id":12,"region":"Canon","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":1},
{"id":13,"region":"Egbert","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":1},
{"id":2,"region":"Washington"},
{"id":21,"region":"Bellingham","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":2},
{"id":22,"region":"Chehalis","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":2},
{"id":23,"region":"Ellensburg","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":2},
{"id":24,"region":"Monroe","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":2}
],"footer":[
{"region":"Total","f1":14000,"f2":12600,"f3":13321,"f4":15281,"f5":14931,"f6":13461,"f7":14126,"f8":12866}
]} 关于treegrid数据json的返回，使用easyui要添加两个参数idField，treeField，这两个字段是节点ID与节点名称，具体代码如下：
1 $('#'+qnode).bind('click',function(){ 2 $('#'+proInfo).treegrid({ 3 url:'query_node_list.action?proName='+proname+'&ename='+ename, 4 lines:true, 5 rownumbers: true, 6 cache : false, 7 animate: true, 8 checkbox:true, 9 collapsible: true, 10 onlyLeafCheck:true, 11 fitColumns: true, 12 checkOnSelect:true, 13 idField:'id', 14 treeField:'typename', 15 columns:[[ 16 {field:'id',title:'typeid',width:30,align:'center',hidden:false}, 17 {field:'typename',title:'交易名称',width:400,align:'left'}, 18 ]], 19 }); 20 });
这两种json格式都可以处理成树状表，第一种需要转换，把json直接转换为树状json,第二种不需要树状json，需要一个 "_parentId" 字段来进行关联，把树表之间的层级关系做一个关联，而且字段必须是_parentId,这就需要我们在处理后台数据的时候在dto类中封装好这个属性，属性本身不需要有具体意义。
EasyUI作为一个成熟的前端框架，在json数据处理方面的能力很强，只要按照官方文档给的要求，参考demo里面不同组件要求的json格式，easyui就能帮我们处理数据。
京公网安备 11010502036488号