前端jQuery EasyUI DataGrid数据通过JSON传至后台Controller的完整实现

前端jQuery EasyUI DataGrid数据通过JSON传至后台Controller的完整实现

业务场景要求将前端jQuery EasyUI DataGrid中用户选中的多行数据完整传递至后台，以便执行批量更新操作。 常规做法通常是仅提取选中行的ID，通过循环拼接成字符串传回，再由Service层根据ID查询实例后逐一更新。但本次需求要求将整个对象群完整传输至后台，其数据结构如所示。为此，我们选择结合使用谷歌的GSON插件与json2.js来实现这一功能。

 
var rows = $('#dg1').datagrid('getSelections');
$.ajax({
cache : false,
type : "POST",
url : _basePath + '/sectionGroup/pair',
data : {rows : JSON.stringify(rows), group_id : group_id, group_name : group_name},
success : function(data) {
if(data.success == true){
$.messager.confirm('配置成功','是否刷新列表？', function(r){
if (r){
$('#dg').datagrid('reload');
$('#dg1').datagrid('reload');
$('#dg2').datagrid('reload');
} 
}); 
}else{
$.messager.show({
title:'提示',msg:'配置失败',
showType:'fade',style:{right:'',bottom:''}
}); 
} 
} 
}); 

此页面中需要引入json2.js

后台Controller中接收如下：

后台Controller中接收如下：

 
@RequestMapping(value = "/pair")
@ResponseBody
public ResponseData pair(String rows, String group_name, String group_id, HttpServletRequest request) {
User user = (User) SecurityContextUtil.getCurrentUser();
if (user == null) {
user = (User) request.getSession().getAttribute(Constants.USER_OS);
} 
Gson gson = new Gson();
List<SectionGroup> list = gson.fromJson(rows, new TypeToken<List<SectionGroup>>() {}.getType());
for (SectionGroup sectionGroup : list) {
sectionGroup.setRegion(user.getRegion_id());
sectionGroup.setCompany_id(user.getOrg_id());
sectionGroup.setGroup_id(group_id);
sectionGroup.setGroup_name(group_name);
service.insertEntity(sectionGroup);
} 
return ResponseData.SUCCESS_NO_DATA;
} 

其中GSON及TypeToken为GSON包中引入类

入参rows应为String型

经过Gson转换后List依旧为普通接口，内部装载前台完整的Object对象

PS：关于json操作，这里再为大家推荐几款比较实用的json在线工具供大家参考使用：

在线JSON代码检验、检验、美化、格式化工具： http://tools.jb51.net/code/json

JSON在线格式化工具： http://tools.jb51.net/code/jsonformat

在线XML/JSON互相转换工具： http://tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具： http://tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具：

http://tools.jb51.net/code/json_yasuo_trans

C语言风格/HTML/CSS/json代码格式化美化工具： http://tools.jb51.net/code/ccode_html_css_json