zoukankan      html  css  js  c++  java
  • [转]easyui datagrid 批量编辑和提交

    web前台主要代码:

    <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)
    {
       DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T));
       MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(jsonString));
       T obj = (T)ser.ReadObject(ms);
       return obj;
    }

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

    转:http://www.jeasyuicn.com/easyui-datagrid-batch-edit-and-submit.html

  • 相关阅读:
    Binary Search Tree Iterator 解答
    Invert Binary Tree 解答
    Min Stack 解答
    Trapping Raining Water 解答
    Candy 解答
    Jump Game II 解答
    Implement Hash Map Using Primitive Types
    Gas Station 解答
    Bucket Sort
    HashMap 专题
  • 原文地址:https://www.cnblogs.com/xiangzhong/p/5074703.html
Copyright © 2011-2022 走看看