EasyUI学习之easyui datagrid 批量编辑和提交

最新推荐文章于 2021-09-30 09:03:24 发布

li_xiao_ming

最新推荐文章于 2021-09-30 09:03:24 发布

阅读量3.5w

点赞数 1

分类专栏：开发笔记系列之三：Java基础

开发笔记系列之三：Java基础专栏收录该内容

50 篇文章 1 订阅

订阅专栏

前台主要代码：

     
   001<script type="text/javascript"> 
 
   002    $(function() { 
 
   003        var $dg = $("#dg"); 
 
   004        $dg.datagrid({ 
 
   005            url : "servlet/list", 
 
   006            width : 700, 
 
   007            height : 250, 
 
   008            columns : [ [ { 
 
   009                field : 'code',  
 
   010                title : 'Code',  
 
   011                width : 100, 
 
   012                editor : "validatebox"
 
   013            }, { 
 
   014                field : 'name',  
 
   015                title : 'Name',  
 
   016                width : 200, 
 
   017                editor : "validatebox"
 
   018            }, { 
 
   019                field : 'price',  
 
   020                title : 'Price',  
 
   021                width : 200, 
 
   022                align : 'right',  
 
   023                editor : "numberbox"
 
   024            } ] ], 
 
   025            toolbar : [ { 
 
   026                text : "添加",  
 
   027                iconCls : "icon-add", 
 
   028                handler : function() { 
 
   029                    $dg.datagrid('appendRow', {}); 
 
   030                    var rows = $dg.datagrid('getRows'); 
 
   031                    $dg.datagrid('beginEdit', rows.length - 1); 
 
   032                } 
 
   033            }, { 
 
   034                text : "编辑",  
 
   035                iconCls : "icon-edit", 
 
   036                handler : function() { 
 
   037                    var row = $dg.datagrid('getSelected'); 
 
   038                    if (row) { 
 
   039                        var rowIndex = $dg.datagrid('getRowIndex', row); 
 
   040                        $dg.datagrid('beginEdit', rowIndex); 
 
   041                    } 
 
   042                } 
 
   043            }, { 
 
   044                text : "删除",  
 
   045                iconCls : "icon-remove", 
 
   046                handler : function() { 
 
   047                    var row = $dg.datagrid('getSelected'); 
 
   048                    if (row) { 
 
   049                        var rowIndex = $dg.datagrid('getRowIndex', row); 
 
   050                        $dg.datagrid('deleteRow', rowIndex); 
 
   051                    } 
 
   052                } 
 
   053            }, { 
 
   054                text : "结束编辑",  
 
   055                iconCls : "icon-cancel", 
 
   056                handler :endEdit 
 
   057            }, { 
 
   058                text : "保存",  
 
   059                iconCls : "icon-save", 
 
   060                handler : function() { 
 
   061                    endEdit(); 
 
   062                    if ($dg.datagrid('getChanges').length) { 
 
   063                        var inserted = $dg.datagrid('getChanges', "inserted"); 
 
   064                        var deleted = $dg.datagrid('getChanges', "deleted"); 
 
   065                        var updated = $dg.datagrid('getChanges', "updated"); 
 
   066                          
 
   067                        var effectRow = new Object(); 
 
   068                        if (inserted.length) { 
 
   069                            effectRow["inserted"] = JSON.stringify(inserted); 
 
   070                        } 
 
   071                        if (deleted.length) { 
 
   072                            effectRow["deleted"] = JSON.stringify(deleted); 
 
   073                        } 
 
   074                        if (updated.length) { 
 
   075                            effectRow["updated"] = JSON.stringify(updated); 
 
   076                        } 
 
   077  
 
   078                        $.post("servlet/commit", effectRow, function(rsp) { 
 
   079                            if(rsp.status){ 
 
   080                                $.messager.alert("提示", "提交成功！");  
 
   081                                $dg.datagrid('acceptChanges'); 
 
   082                            } 
 
   083                        }, "JSON").error(function() { 
 
   084                            $.messager.alert("提示", "提交错误了！"); 
 
   085                        }); 
 
   086                    } 
 
   087                } 
 
   088            } ] 
 
   089        }); 
 
   090          
 
   091        function endEdit(){ 
 
   092            var rows = $dg.datagrid('getRows'); 
 
   093            for ( var  i = 0; i < rows.length; i++) { 
 
   094                $dg.datagrid('endEdit', i); 
 
   095            } 
 
   096        } 
 
   097    }); 
 
   098</script> 
 
   099<body> 
 
   100    <table id="dg" title="批量操作"></table> 
 
   101</body> 
 
   102</html>

后台commit接收类：

Java版本

 
   01//设置请求编码 
 
   02req.setCharacterEncoding("UTF-8"); 
 
   03//获取编辑数据 这里获取到的是json字符串 
 
   04String deleted = req.getParameter("deleted"); 
 
   05String inserted = req.getParameter("inserted"); 
 
   06String updated = req.getParameter("updated"); 
 
   07  
 
   08if(deleted != null){ 
 
   09    //把json字符串转换成对象 
 
   10    List<Bean> listDeleted = JSON.parseArray(deleted, Bean.class); 
 
   11    //TODO 下面就可以根据转换后的对象进行相应的操作了 
 
   12} 
 
   13  
 
   14if(inserted != null){ 
 
   15    //把json字符串转换成对象 
 
   16    List<Bean> listInserted = JSON.parseArray(inserted, Bean.class); 
 
   17} 
 
   18  
 
   19if(updated != null){ 
 
   20    //把json字符串转换成对象 
 
   21    List<Bean> listUpdated = JSON.parseArray(updated, Bean.class); 
 
   22}

Bean.java

      
   01public  class Bean { 
 
   02    private String code; 
 
   03    private String name; 
 
   04    private Double price; 
 
   05    public String getCode() { 
 
   06        return code; 
 
   07    }  
 
   08    public void setCode(String code) { 
 
   09        this.code = code; 
 
   10    }  
 
   11    public String getName() { 
 
   12        return name; 
 
   13    }  
 
   14    public void setName(String name) { 
 
   15        this.name = name; 
 
   16    }  
 
   17    public Double getPrice() { 
 
   18        return price; 
 
   19    }  
 
   20    public void setPrice(Double price) { 
 
   21        this.price = price; 
 
   22    }  
 
   23}

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

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

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

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

li_xiao_ming

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
4
评论
EasyUI学习之easyui datagrid 批量编辑和提交

前台主要代码： 001"text/javascript">002 $(function() {003 var$dg = $("#dg");004 $dg.datagrid({
复制链接

扫一扫