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,
'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', 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', 100},  
{field:'spec',title: ' 物料规格',align: 'center', 100},  
{field:'pattern',title: '物料型号',align: 'center', 100},
{field:'itemCategory',title: '类别',align: 'center', 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', 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', 100}就可以载入数据。

但处理复杂数据,比方     

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

则须要使用formatter属性来载入。代码例如以下:

{field:'itemCategory',title: '类别',align: 'center', 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', 80,
			formatter: function(value,row,index){
				if (row.user){
					return row.user.name;
				} else {
					return value;
				}
			}
		}
	]]
});

原文地址:https://www.cnblogs.com/llguanli/p/6758334.html