easyui datagrid 批量编辑和提交

最新推荐文章于 2020-06-19 18:59:16 发布

chenxianda-3

最新推荐文章于 2020-06-19 18:59:16 发布

阅读量463

点赞数

分类专栏： easyui

本文链接：https://blog.csdn.net/qq_37611061/article/details/94415957

版权

easyui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前台主要代码：

<script type="text/javascript"> 
$(function() { 
var $dg = $("#dg"); 
$dg.datagrid({ 
url : "servlet/list", 
width : 700, 
height : 250, 
columns : [ [ { 
field : 'code', 
title : 'Code', 
width : 100, 
editor : "validatebox" 
}, { 
field : 'name', 
title : 'Name', 
width : 200, 
editor : "validatebox" 
}, { 
field : 'price', 
title : 'Price', 
width : 200, 
align : 'right', 
editor : "numberbox" 
} ] ], 
toolbar : [ { 
text : "添加", 
iconCls : "icon-add", 
handler : function() { 
$dg.datagrid('appendRow', {}); 
var rows = $dg.datagrid('getRows'); 
$dg.datagrid('beginEdit', rows.length - 1); 
} 
}, { 
text : "编辑", 
iconCls : "icon-edit", 
handler : function() { 
var row = $dg.datagrid('getSelected'); 
if (row) { 
var rowIndex = $dg.datagrid('getRowIndex', row); 
$dg.datagrid('beginEdit', rowIndex); 
} 
} 
}, { 
text : "删除", 
iconCls : "icon-remove", 
handler : function() { 
var row = $dg.datagrid('getSelected'); 
if (row) { 
var rowIndex = $dg.datagrid('getRowIndex', row); 
$dg.datagrid('deleteRow', rowIndex); 
} 
} 
}, { 
text : "结束编辑", 
iconCls : "icon-cancel", 
handler :endEdit 
}, { 
text : "保存", 
iconCls : "icon-save", 
handler : function() { 
endEdit(); 
if ($dg.datagrid('getChanges').length) { 
var inserted = $dg.datagrid('getChanges', "inserted"); 
var deleted = $dg.datagrid('getChanges', "deleted"); 
var updated = $dg.datagrid('getChanges', "updated"); 

var effectRow = new Object(); 
if (inserted.length) { 
effectRow["inserted"] = JSON.stringify(inserted); 
} 
if (deleted.length) { 
effectRow["deleted"] = JSON.stringify(deleted); 
} 
if (updated.length) { 
effectRow["updated"] = JSON.stringify(updated); 
} 

$.post("servlet/commit", effectRow, function(rsp) { 
if(rsp.status){ 
$.messager.alert("提示", "提交成功！"); 
$dg.datagrid('acceptChanges'); 
} 
}, "JSON").error(function() { 
$.messager.alert("提示", "提交错误了！"); 
}); 
} 
} 
} ] 
}); 

function endEdit(){ 
var rows = $dg.datagrid('getRows'); 
for ( var i = 0; i < rows.length; i++) { 
$dg.datagrid('endEdit', i); 
} 
} 
}); 
</script> 
<body> 
<table id="dg" title="批量操作"></table> 
</body> 
</html>

Java版本后台处理

//设置请求编码 
req.setCharacterEncoding("UTF-8"); 
//获取编辑数据 这里获取到的是json字符串 
String deleted = req.getParameter("deleted"); 
String inserted = req.getParameter("inserted"); 
String updated = req.getParameter("updated"); 

if(deleted != null){ 
//把json字符串转换成对象 
List<Bean> listDeleted = JSON.parseArray(deleted, Bean.class); 
//TODO 下面就可以根据转换后的对象进行相应的操作了 
} 

if(inserted != null){ 
//把json字符串转换成对象 
List<Bean> listInserted = JSON.parseArray(inserted, Bean.class); 
} 

if(updated != null){ 
//把json字符串转换成对象 
List<Bean> listUpdated = JSON.parseArray(updated, Bean.class); 
} 

Bean.java 
public class Bean { 
private String code; 
private String name; 
private Double price; 
public String getCode() { 
return code; 
} 
public void setCode(String code) { 
this.code = code; 
} 
public String getName() { 
return name; 
} 
public void setName(String name) { 
this.name = name; 
} 
public Double getPrice() { 
return price; 
} 
public void setPrice(Double price) { 
this.price = price; 
} 
} 
JSON.stringify 

里面用到的JSON.stringify，主要是把对象转换为字符串的作用。原代码在这里 
注意下载这个js后，如果运行出错就去掉最后几行代码。如下删除 

if (!Object.prototype.toJSONString) { 
       Object.prototype.toJSONString = function (filter) { 
           return JSON.stringify(this, filter); 
       }; 
       Object.prototype.parseJSON = function (filter) { 
           return JSON.parse(this, filter); 
       }; 
   }

chenxianda-3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui datagrid 批量编辑和提交

前台主要代码：<script type="text/javascript"> $(function() { var $dg = $("#dg"); $dg.datagrid({ url : "servlet/list", width : 700, height : 250, columns : [ [ { field : 'code', title : 'Co...
复制链接

扫一扫

专栏目录