easyui datagrid数据表格加载复杂json数据

在easyui官网上给出的json数据是比较基础的一种json的数据格式，但是在实际的项目中，会出现许多复杂的json格式，这个就需要利用一些其他的方法了，主要方法是采用formatter函数来解决。

  由于本人语言表达不够精确，先上一个json案例。

{
    "total": 2,
    "rows": [
        {
            "delStatus": 0,
            "cRoules": {
                "id": null,
                "delStatus": null,
                "remark": null,
                "roulesID": null,
                "motorcadeID": null,
                "roulesName": "518",
                "startAdress": null,
                "endAdress": null
            }, 
            "busTypetemplate": {
                "bustemplateID": null,
                "templateName": null,
                "busType": "比来迪5",
                "busBrand": "奔跑",
                "seatCount": "23",
                "wheelCount": 56
            },
            "leaveFactoryTime": null
        },
        {
            "delStatus": 0,
            "cRoules": {
                "id": null,
                "delStatus": null,
                "remark": null,
                "roulesID": null,
                "motorcadeID": null,
                "roulesName": "304",
                "startAdress": null,
                "endAdress": null
            },
            "busTypetemplate": {
                "bustemplateID": null,
                "templateName": null,
                "busType": "比来迪6",
                "busBrand": "奔跑",
                "seatCount": "23",
                "wheelCount": 56
            },
            "leaveFactoryTime": null
        }
    ]
}

这个就是比较复杂的json例子了。通常我们所看到的也就是这样的：

{
    "total": 2,
    "rows": [
        {
            "busCode": null,
            "durationTime": null,
            "leaveFactoryTime": null
        },
        { 
            "busCode": null,
            "durationTime": null,
            "leaveFactoryTime": null
        }
    ]
}

对于这种格式，使用easyui简直不要太过简单，一句$('#xx').datagrid('loadData',data.rows);就轻松搞定。
但是在这里就会发现这种方法对于busTypetemplate和cRoules这种键值的就不行了，原因很简单，代码不是人。
在这里就需要使用formatter这个函数了。
具体做法如下：

 $('#cmanage').datagrid({
        height: 490,
        width: 1665,
        toolbar:'#toolbar',
        pagination:'true',
        striped:'false',
        singleSelect:'true',
        fitColumns:'true',
        columns: [[{title: '没门', field: 'busID',width:'9%',align:'center'},
            {title: '看这里', field: 'cRoules',width:'9%',align:'center',formatter:function (value,row,index) {
              var ret='';
              console.log('hhhhhaaa',value);
              if(value!=null){
                  ret=value.roulesName;//主要是使用value值，通过console打印可以看到"cRoules": //{
               // "id": null,
               // "delStatus": null,
                //"remark": null,
                //"roulesID": null,
               // "motorcadeID": null,
               // "roulesName": "304",
               // "startAdress": null,
               // "endAdress": null
           // },

              }
              return ret;
            }},
            {title: '哈哈', field: 'plate_No',width:'8%',align:'center'},
            {title: '不告诉你', field: 'Plate_No',width:'8%',align:'center'},

        ],
        ],

    });

通过该方法便能够处理这种json格式的数据了。

但是这种方法对于

 "busTypetemplate": {
                "bustemplateID": null,
                "templateName": null,
                "busType": "比来迪6",
                "busBrand": "奔跑",
                "seatCount": "23",
                "wheelCount": 56
            },

这种就无能为力了。
在一个jsonobject中取多个字段的时候，如果使用上面的方法是不可行的

 {title: '哈哈', field: 'busTypetemplate',width:'8%',align:'center'},
            {title: '不告诉你', field: 'busTypetemplate',width:'8%',align:'center'},

这样不会显示数据，只会显示[object,object]这种。显然不是我们想要的。这时就需要采用formatter函数中的row属性。
通过console打印可以看到row是指的行数据。

{title: '哈哈', field: 'seatCount',width:'8%',align:'center'，formatter:function(row,value,index){
if(row){
retrun row.busTypetemplate.seatCount;
}
}},
            {title: '不告诉你', field: 'wheelCount',width:'8%',align:'center',formatter:function(row,value,index){
if(row){
retrun row.busTypetemplate.wheelCount;
}
}},

通过这种方法可以实现。

写的不清晰的地方，欢迎留言。加以指证

easyui datagrid数据表格加载复杂json数据

猜你喜欢