JQuery EasyUI datagrid 批量编辑和提交

来源：互联网发布：软件可靠性工程手册编辑：程序博客网时间：2024/05/21 14:49

前台主要代码：

<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接收类：

//设置请求编码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;    }}