EasyUI + ajax + treegrid/datagrid 接收 json 数据，显示树状/网状表结构

最后一更了，时间间隔有点久了~~

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数组是不能被接收的。

后台要对查询的数据做一个处理：

 public String selDatagrid(){
         try {
             String ename = new String(request.getParameter("ename").getBytes("ISO-8859-1"),"UTF-8");
             String proname = new String(request.getParameter("proname").getBytes("ISO-8859-1"),"UTF-8");
             List<QueryInfoDto> resultNodeList = proInfomaService.selData(proname, ename);
             int total = resultNodeList.size();
             resultMap.put("total", total);　　　　　　　　  //将total添加到map中，total为list的size()
             resultMap.put("rows", resultNodeList);　　　　 //将rows添加到map中
             dataroot = JSONObject.fromObject(resultMap);
         } catch (UnsupportedEncodingException e) {
             e.printStackTrace();
         }
         return "success";
     }

前端ajax请求代码：

 $('#'+qnode).bind('click',function(){
         $('#'+proInfo).treegrid({
             url:'query_node_list.action?proName='+proname+'&ename='+ename,
             lines:true,
             rownumbers: true,
             cache : false,
             animate: true,
             checkbox:true,
             collapsible: true,
             onlyLeafCheck:true,
             fitColumns: true,
             checkOnSelect:true,
         });
     });

下面贴出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与节点名称，具体代码如下：

 $('#'+qnode).bind('click',function(){
         $('#'+proInfo).treegrid({
             url:'query_node_list.action?proName='+proname+'&ename='+ename,
             lines:true,
             rownumbers: true,
             cache : false,
             animate: true,
             checkbox:true,
             collapsible: true,
             onlyLeafCheck:true,
             fitColumns: true,
             checkOnSelect:true,
             idField:'id',
             treeField:'typename',
             columns:[[
                 {field:'id',title:'typeid',width:30,align:'center',hidden:false},
                 {field:'typename',title:'交易名称',width:400,align:'left'},
                 ]],
         });
     });

这两种json格式都可以处理成树状表，第一种需要转换，把json直接转换为树状json,第二种不需要树状json，需要一个 "_parentId" 字段来进行关联，把树表之间的层级关系做一个关联，而且字段必须是_parentId,这就需要我们在处理后台数据的时候在dto类中封装好这个属性，属性本身不需要有具体意义。

EasyUI作为一个成熟的前端框架，在json数据处理方面的能力很强，只要按照官方文档给的要求，参考demo里面不同组件要求的json格式，easyui就能帮我们处理数据。