ui easyui datagrid 批量编辑和提交

最新推荐文章于 2018-07-12 16:14:58 发布

eagelangel

最新推荐文章于 2018-07-12 16:14:58 发布

阅读量8.2k

点赞数

分类专栏：计算机

计算机专栏收录该内容

93 篇文章 0 订阅

订阅专栏

摘自 http://easyui.btboys.com/easyui-datagrid-batch-edit-and-submit.html

前台主要代码：

<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版本处理：

 
   01<?php
 
   02 
 
   03if(isset($_POST["deleted"])){
 
   04    $deleted= $_POST["deleted"];//这里获取到的是一个json数组样子字符串，eg：[{code:'1',name:'name',price:323},{..},....]
 
   05    $listDeleted= json_decode($deleted);//把这个json数组转化成array对象
 
   06}
 
   07 
 
   08if(isset($_POST["inserted"])){
 
   09    $inserted= $_POST["inserted"];
 
   10    $listInserted= json_decode($inserted);
 
   11}
 
   12 
 
   13if(isset($_POST["updated"])){
 
   14    $updated= $_POST["updated"];
 
   15    $listUpdated= json_decode($updated);
 
   16}

ASP.NET MVC3版本

 
   01//获取编辑数据 这里获取到的是json字符串
 
   02string  deleted = Request.Form["deleted"];
 
   03string  inserted = Request.Form["inserted"];
 
   04string  updated = Request.Form["updated"];
 
   05 
 
   06if(deleted !=null){
 
   07    //把json字符串转换成对象
 
   08    List<Bean> listDeleted = JsonDeserialize<List<Bean>>(deleted);
 
   09    //TODO 下面就可以根据转换后的对象进行相应的操作了
 
   10}
 
   11 
 
   12if(inserted !=null){
 
   13    //把json字符串转换成对象
 
   14    List<Bean> listInserted = JsonDeserialize<List<Bean>>(inserted);
 
   15}
 
   16 
 
   17if(updated !=null){
 
   18    //把json字符串转换成对象
 
   19    List<Bean> listUpdated = JsonDeserialize<List<Bean>>(updated);
 
   20}

JsonDeserialize方法：

 
   1private  T JsonDeserialize<T>(string  jsonString)
 
   2{
 
   3   DataContractJsonSerializer ser =new DataContractJsonSerializer(typeof(T));
 
   4   MemoryStream ms =new MemoryStream(Encoding.UTF8.GetBytes(jsonString));
 
   5   T obj = (T)ser.ReadObject(ms);
 
   6   returnobj;
 
   7}

里面用到的JSON.stringify，主要是把对象转换为字符串的作用。原代码在这里

注意下载这个js后，如果运行出错就去掉最后几行代码。如下删除

 
   1if  (!Object.prototype.toJSONString) {
 
   2       Object.prototype.toJSONString =function (filter) {
 
   3           returnJSON.stringify(this, filter);
 
   4       };
 
   5       Object.prototype.parseJSON =function (filter) {
 
   6           returnJSON.parse(this, filter);
 
   7       };
 
   8   }

eagelangel

关注

0
点赞
踩
5

收藏

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

摘自 http://easyui.btboys.com/easyui-datagrid-batch-edit-and-submit.html前台主要代码： $(function() { var $dg = $("#dg"); $dg.datagrid({ url : "servlet/list",
复制链接

扫一扫