1、JSON数据为:
{
"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;
//getter and setter methods
}
注意:由于EasyUI中的datagrid组件处理该数据时,默认都是使用rows.length参数的,所以为了保证数组的key为rows,java类中的list属性名比如为rows。
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; } } } ]] });