EasyUI datagrid 行编辑 批量保存

时间:13-05-25 栏目:EasyUI 作者:zongyan86 评论:0 点击: 6,597 次

今天做批量添加成绩的功能,默认出来数据框全部启动编辑状态,提交时批量保存。

代码参考如下:

002    $(function() {
003        var $dg = $("#dg");
004        $dg.datagrid({
005            url : "……",
006            width : 700,
007            height : 250,
008            columns : [ [ {
009                field : 'code',
010                title : 'Code',
011                width : 100,
012                editor : "validatebox"
013            }, {
014                field : 'name',
015                title : 'Name',
016                width : 200,
017                editor : "validatebox"
018            }, {
019                field : 'scope',
020                title : 'scope',
021                width : 200,
022                align : 'right',
023                editor : "numberbox"
024            } ] ],
025            toolbar : [ {
026                text : "添加",
027                iconCls : "icon-add",
028                handler : function() {
029                    $dg.datagrid('appendRow', {});
030                    var rows = $dg.datagrid('getRows');
031                    $dg.datagrid('beginEdit', rows.length - 1);
032                }
033            }, {
034                text : "编辑",
035                iconCls : "icon-edit",
036                handler : function() {
037                    var row = $dg.datagrid('getSelected');
038                    if (row) {
039                        var rowIndex = $dg.datagrid('getRowIndex', row);
040                        $dg.datagrid('beginEdit', rowIndex);
041                    }
042                }
043            }, {
044                text : "删除",
045                iconCls : "icon-remove",
046                handler : function() {
047                    var row = $dg.datagrid('getSelected');
048                    if (row) {
049                        var rowIndex = $dg.datagrid('getRowIndex', row);
050                        $dg.datagrid('deleteRow', rowIndex);
051                    }
052                }
053            }, {
054                text : "结束编辑",
055                iconCls : "icon-cancel",
056                handler :endEdit
057            }, {
058                text : "保存",
059                iconCls : "icon-save",
060                handler : function() {
061                    endEdit();//结束编辑  用getData方法 ,其实就可以得到所有的数据了
062                    if ($dg.datagrid('getChanges').length) {
063                        var inserted = $dg.datagrid('getChanges', "inserted");
064                        var deleted = $dg.datagrid('getChanges', "deleted");
065                        var updated = $dg.datagrid('getChanges', "updated");
066                         
067                        var effectRow = new Object();
068                        if (inserted.length) {
069                            effectRow["inserted"] = JSON.stringify(inserted);
070                        }
071                        if (deleted.length) {
072                            effectRow["deleted"] = JSON.stringify(deleted);
073                        }
074                        if (updated.length) {
075                            effectRow["updated"] = JSON.stringify(updated);
076                        }
077  
078                        $.post("……", effectRow, function(rsp) {
079                            if(rsp.status){
080                                $.messager.alert("提示", "提交成功!");
081                                $dg.datagrid('acceptChanges');
082                            }
083                        }, "JSON").error(function() {
084                            $.messager.alert("提示", "提交错误了!");
085                        });
086                    }
087                }
088            } ]
089        });
090         
091        function endEdit(){
092            var rows = $dg.datagrid('getRows');
093            for ( var i = 0; i < rows.length; i++) {
094                $dg.datagrid('endEdit', i);
095            }
096        }
097    });

当然,这是一个一个编辑的。代码稍微改下就可以了。

web开发分享



声明: 本文由( zongyan86 )原创编译,转载请保留链接: EasyUI datagrid 行编辑 批量保存

EasyUI datagrid 行编辑 批量保存:等您坐沙发呢!

发表评论



热搜关键词: easyui   开发   web开发
广告虚位以待

读者排行

关注我们