Jquery easyUI datagrid加载复杂JSON数据方法

1、JSON数据为:

{ "total":28, "rows": [ { "itemNo": "1", "itemName": "12", "spec": "", "pattern": "", "itemCategory": { "id": "A01", "name": "中药" }, "itemUnit": { "id": "B01", "name": "公斤" }, "uploadFileName": null }, ],}

2、其对应的java类为:

public class PageModel<T> {//结果集private List<T> rows;

private int total;//getter and setter methods}

注意:由于EasyUI中的datagrid组件处理该数据时,默认都是使用rows属性和total属性的,,所以为了json数据符合要求,java类中的list属性名比如为rows,list个数的属性名必须为total。

for(var i=0;i<rows.length;i++){

}

3、List中的class如下:

public class Item {private String itemNo;private String itemName;private String spec;private String pattern;private ItemCategory itemCategory;private ItemUnit itemUnit;private String uploadFileName;

//getter and setter methods

}

public class ItemCategory{private String id;private String name;

//getter and setter methods

}

public classItemUnit{private String id;private String name;

//getter and setter methods

}

4、SpringMVC中处理showJSON的Controller:

@ResponseBodyprotected Object showJson(HttpServletRequest request, HttpServletResponse response)throws Exception {PageModel pageModel = get_page_model_from_database();return pageModel;}

直接返回PageModel 对象,@ResponseBody注解会自动调用JSON库将其转换成JSON格式的数据,即本文开头的数据;

5、datagrid中加载数据

//加载数据 $(‘#Ajax’).datagrid({fit:true,fitColumns:true,width: ‘auto’, height:300, striped: true, singleSelect : true, url:’item.do’, //POST parameters: command=showJsonqueryParams:{command: ‘showJson’}, loadMsg:’数据加载中请稍后……’, pagination: true, rownumbers: true, columns:[[ {field:’itemNo’,title: ‘物料代码’,align: ‘center’,width: 100, formatter:function(value,row,index){ //alert("itemNo: "+value+" "+row.itemNo+" "+index); return "<a href=’item.do?command=showDetail&itemNo="+value+"’>"+value+"</a>"; } }, {field:’itemName’,title: ‘物料名称’,align: ‘center’,width: 100}, {field:’spec’,title: ‘ 物料规格’,align: ‘center’,width: 100}, {field:’pattern’,title: ‘物料型号’,align: ‘center’,width: 100},{field:’itemCategory’,title: ‘类别’,align: ‘center’,width: 100,formatter:function(value,row,index){var ret="";if(value != null) {ret = value.name;//alert("itemCategory.id="+value.id+" name="+value.name);}return ret;}},{field:’itemUnit’,title: ‘计量单位’,align: ‘center’,width: 100,formatter:function(value,row,index){var ret="";if(value != null) {ret = value.name;//alert("itemCategory.id="+value.id+" name="+value.name);}return ret;}}, ]] });

处理简单数据,比如"itemNo": "1"时直接使用{field:’itemNo’,title: ‘物料代码’,align: ‘center’,width: 100}即可加载数据;

但处理复杂数据,比如

"itemCategory": { "id": "A01", "name": "中药" },

则需要使用formatter属性来加载,代码如下:

所有的胜利,与征服自己的胜利比起来,都是微不足道

Jquery easyUI datagrid加载复杂JSON数据方法

相关文章:

你感兴趣的文章:

标签云: