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

  • 相关阅读:
    2021年1月1日 AutoCAD.Net/C#.Net QQ群:193522571 按顺序等距排列平行直线
    2021年1月1日 AutoCAD.Net/C#.Net QQ群:193522571GS标记子实体
    2021年1月1日 AutoCAD.Net/C#.Net QQ群:193522571获取和修改摘要信息
    2021年1月1日 AutoCAD.Net/C#.Net QQ群:193522571长事务
    2021年1月1日 AutoCAD.Net/C#.Net QQ群:193522571按表走呵呵!(延时死循环)
    2021年1月1日 AutoCAD.Net/C#.Net QQ群:193522571修改多段线的凸度
    2021年1月1日 AutoCAD.Net/C#.Net QQ群:193522571临时反应器的简单应用
    2021年1月1日 AutoCAD.Net/C#.Net QQ群:193522571自创实体类从AcDbCurve派生,实现一些类方法并动态绘制
    2021年1月1日 AutoCAD.Net/C#.Net QQ群:193522571多段线动态切割闭合区域
    动态块
  • 原文地址:https://www.cnblogs.com/xiangzhong/p/5074703.html
Copyright © 2011-2022 走看看