您的位置：首页 > 产品设计 > UI/UE

easyui datagrid 批量编辑和提交

2015-08-25 09:07 495 查看

<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>

后台commit接收类：

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;
	}
}

PHP版本处理:

<?php

if(isset($_POST["deleted"])){
	$deleted = $_POST["deleted"];//这里获取到的是一个json数组样子字符串，eg：[{code:'1',name:'name',price:323},{..},....]
	$listDeleted = json_decode($deleted); //把这个json数组转化成array对象
}

if(isset($_POST["inserted"])){
	$inserted = $_POST["inserted"];
	$listInserted = json_decode($inserted);
}

if(isset($_POST["updated"])){
	$updated = $_POST["updated"];
	$listUpdated = json_decode($updated);
}

ASP.NET
MVC3版本

//获取编辑数据 这里获取到的是json字符串
string deleted = Request.Form["deleted"];
string inserted = Request.Form["inserted"];
string updated = Request.Form["updated"];

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

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

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

JsonDeserialize方法：

private T JsonDeserialize<T>(string jsonString)<pre name="code" class="javascript">if (!Object.prototype.toJSONString) {
       Object.prototype.toJSONString = function (filter) {
           return JSON.stringify(this, filter);
       };
       Object.prototype.parseJSON = function (filter) {
           return JSON.parse(this, filter);
       };
   }

里面用到的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);
       };
   }

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航