easyui datagrid 批量编辑和提交

最新推荐文章于 2019-06-20 17:11:16 发布

zhaohui530

最新推荐文章于 2019-06-20 17:11:16 发布

阅读量194

点赞数

文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/zhaohui530/article/details/84422934

版权

前台主要代码：
<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);
};
}

zhaohui530

关注

0
点赞
踩
0

收藏

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

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

扫一扫