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 class ItemUnit {

 

private String id; 



private String name;

//getter and setter methods

}

4、SpringMVC中处理showJSON的Controller：

@ResponseBody

protected 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=showJson

queryParams:{

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属性来载入。代码例如以下：

{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;

}



},

关于datagrid formatter属性的描写叙述參考：http://www.jeasyui.com/documentation/index.php#

The cell formatter function, take three parameters:

value: the field value.表示当前field相应的值。能够是一个简单对象。如一个字符串，也能够是一个复杂对象。相应一个java类

row: the row record data.表示当前行相应的整个对象，相当于json数据中的rows[i]对象（i为当前行的index），能够使用row.itemNo訪问JSON数据中的rows[i].itemNo对象。使用row.itemCategory.id訪问JSON数据中的rows[i].itemCategory.id对象。

index: the row index.行号。第一行的行号为0

Code example:

$('#dg').datagrid({
	columns:[[
		{field:'userId',title:'User', width:80,
			formatter: function(value,row,index){
				if (row.user){
					return row.user.name;
				} else {
					return value;
				}
			}
		}
	]]
});