如何用easyui+JAVA 实现动态拼凑datagrid表格
2016-08-11 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI&UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
展开全部
首先datagrid表格式智能显示的只要你的json字符串符合特定格式就可以正确显示。所以你需要做的就是在后台拼接好字符串发送到前台就行了,datagrid会自动显示。
json字符格式:注意格式一定要正确。
{"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
]}
上面是后台拼接好的字符串,可以使用fastjson-1.1.28.jar架包;架包只能将类或list或map转为json字符串,而我们要的数据中多了两个字段:total和rows,所以还要建立一个封装类。类中定义两个变量:total和rows,rows是一个我们的数据集合,将这个类转换成json字符串发送到前台就可以了。
如果前台要特定格式或样式显示可以使用datagrid的属性来设置:
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,
formatter: function(value,row,index){
if (row.user){
return row.user.name;
} else {
return value;
}
}
}
]]
});
这样基本上就可以实现我们所需要的了。
json字符格式:注意格式一定要正确。
{"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
]}
上面是后台拼接好的字符串,可以使用fastjson-1.1.28.jar架包;架包只能将类或list或map转为json字符串,而我们要的数据中多了两个字段:total和rows,所以还要建立一个封装类。类中定义两个变量:total和rows,rows是一个我们的数据集合,将这个类转换成json字符串发送到前台就可以了。
如果前台要特定格式或样式显示可以使用datagrid的属性来设置:
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,
formatter: function(value,row,index){
if (row.user){
return row.user.name;
} else {
return value;
}
}
}
]]
});
这样基本上就可以实现我们所需要的了。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询