随笔 - 432  文章 - 0  评论 - 15  阅读 - 63万

easyui datagrid 批量编辑和提交

easyui datagrid 批量编辑和提交

前台主要代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<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接收类:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//获取编辑数据 这里获取到的是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方法:

1
2
3
4
5
6
7
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;
}

  

posted on   狼来了  阅读(641)  评论(0编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示