EASYUI datagrid批量修改与提交

http://www.cnblogs.com/szytwo/archive/2012/08/29/2662169.html

前台主要代码:

<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>

后台接收主要代码:

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

时间: 2024-10-03 20:38:35

EASYUI datagrid批量修改与提交的相关文章

easyui datagrid 批量编辑和提交

前台主要代码: <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 : "vali

[转]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 : "v

Eary UI datagrid 批量编辑和提交

1 <script type="text/javascript"> 2 $(function() { 3 var $dg = $("#dg"); 4 $dg.datagrid({ 5 url : "servlet/list", 6 width : 700, 7 height : 250, 8 columns : [ [ { 9 field : 'code', 10 title : 'Code', 11 width : 100, 12

EasyUI DataGrid动态修改列标题

var option = $('#tt').datagrid("getColumnOption", "列名") option.title = "新的列名"; $('#tt').datagrid(); 其实就是先获取到列的数据信息,修改,重置. 看下官方的说明,如下,

git批量修改已经提交的commit的姓名和邮箱

首先,我们创建change.sh脚本,并根据个人信息复制以下脚本. #!/bin/sh git filter-branch --env-filter ' OLD_EMAIL="填写原来的邮箱" CORRECT_NAME="填写现在的名称" CORRECT_EMAIL="填写现在的邮箱" if [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ] then     export

Easy-ui Datagrid表格数据的编辑与提交

前言 jQuery EasyUI是一组基于jQuery的UI 插件集合体,而jQuery EasyUI可以打造出功能更加丰富且美观的UI界面.开发者不需要了解复杂的javascript和css样式,只需要了解html标签. 一.    easy-ui基本知识 1.            easy-ui引用js顺序详解 引用Jquery的js文件: <script src="jquery-easyui-1.3.4/jquery-1.8.0.min.js" type="te

Git批量修改提交历史

有些时候我们可能需要批量修改提交历史,当然了,最近一次的提交历史很简单我们可以利用 git commit --amend 来进行最近一次提交的修改,如果你此时想要更新作者提交时间等也可以在amend之后加上 --date="$(date -R)" 但是很多时候我们需要更改的往往不是一条两条提交信息,有些时候需要批量更改提交历史,这个时候我们就可以用到git rebase -i(--interactive)这个选项了. 首先第一步,你需要确定你需要更改历史的范围,比如A-B-C-D,你此

动态修改easyui datagrid 列宽度

$("#table").datagrid('hideColumn','a');//a表示列名,隐藏此列 var dg = $('#table');//table表id var col = dg.datagrid('getColumnOption','NAME');//获得该列属性 col.width = document.body.clientWidth*0.22;//调整该列宽度 col.align = 'center'; dg.datagrid(); 动态修改easyui data

easyui datagrid中datetime字段的显示和增删改查问题

datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借助于formatter来格式化时间格式 { title: '活动开始时间', field: 'BeginTime', width: 300, editor: { type: 'datetimebox', options: { required: true }, formatter: function