easyui datagrid 批量编辑和提交

最新推荐文章于 2021-02-06 17:53:40 发布

shangdiyisi

最新推荐文章于 2021-02-06 17:53:40 发布

阅读量1.5k

点赞数

分类专栏： J2EE

J2EE 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

前台主要代码：

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