Jquery easyui 批量處理datagrid的數據

時間 2019-11-10

標籤 jquery easyui 批量處理 datagrid 數據欄目 JQuery 简体版

原文原文鏈接

原文轉自：http://www.cnblogs.com/lanyunhua/p/3285457.htmljavascript

Jquery easyui 批量處理datagrid的數據

最近用JQuery EasyUI作項目時,須要在客戶端批量處理數據,根據官方的Demo,使用json傳遞數據到後臺,後臺經過接收到的json數據,反序列化成一系列model對象,然而進行增刪查改操做.現整理以下:css

  1 <html>
  2 <head>
  3     <meta name="viewport" content="width=device-width" />
  4     <title>Index</title>
  5     <link href="~/themes/Easyui/default/easyui.css" rel="stylesheet" />
  6     <link href="~/themes/Easyui/icon.css" rel="stylesheet" />
  7     <script src="~/scripts/jquery-1.9.1.min.js"></script>
  8     <script src="~/scripts/jquery.easyui.min.js"></script>
  9     <script src="~/scripts/easyui-lang-zh_CN.js"></script>
 10     <script type="text/javascript">
 11         var editIndex = undefined;
 12         $(function () {
 13             bindData();
 14             bindAddButton();
 15             bindDelButton();
 16             bindSaveButton();
 17         });
 18 
 19       
 20         function bindData() {
 21             $('#dg').datagrid({
 22                 title: '部門管理',
 23                 url: '/Home/GetBranch',
 24                 pagination: true,
 25                 singleSelect: true,
 26                 rownumbers: true,
 27                 pageNumber: 1,
 28                 height: 420,
 29                 pageSize: 10,
 30                 onClickRow: onClickRow,
 31                 pageList: [10, 15, 20, 25, 30],
 32                 columns: [[
 33                     { field: 'ID', title: 'ID', hidden: true },
 34                     { field: 'BrcName', title: '部門名稱' ,editor:"text"},
 35                     { field: 'BrcComment', title: '備註', editor: "text" }
 36                 ]],
 37                 toolbar: '#tb'
 38             });
 39         }
 40 
 41         //編輯狀態
 42         function endEditing() {
 43             if (editIndex == undefined) { return true }
 44             if ($('#dg').datagrid('validateRow', editIndex)) {
 45                 var ed = $('#dg').datagrid('getEditor', { index: editIndex, field: 'productid' });
 46                 $('#dg').datagrid('endEdit', editIndex);
 47                 editIndex = undefined;
 48                 return true;
 49             } else {
 50                 return false;
 51             }
 52         }
 53 
 54         //單擊某行進行編輯
 55         function onClickRow(index) {
 56             if (editIndex != index) {
 57                 if (endEditing()) {
 58                     $('#dg').datagrid('selectRow', index)
 59                             .datagrid('beginEdit', index);
 60                     editIndex = index;
 61                 } else {
 62                     $('#dg').datagrid('selectRow', editIndex);
 63                 }
 64             }
 65         }
 66 
 67         //添加一行
 68         function append() {
 69             if (endEditing()) {
 70                 $('#dg').datagrid('appendRow', {  });
 71                 editIndex = $('#dg').datagrid('getRows').length - 1;
 72                 $('#dg').datagrid('selectRow', editIndex)
 73                         .datagrid('beginEdit', editIndex);
 74             }
 75         }
 76         //刪除一行
 77         function remove() {
 78             if (editIndex == undefined) { return }
 79             $('#dg').datagrid('cancelEdit', editIndex)
 80                     .datagrid('deleteRow', editIndex);
 81             editIndex = undefined;
 82         }
 83         //撤銷編輯
 84         function reject() {
 85             $('#dg').datagrid('rejectChanges');
 86             editIndex = undefined;
 87         }
 88 
 89         //得到編輯後的數據,並提交到後臺
 90         function saveChanges() {
 91             if (endEditing()) {
 92                 var $dg = $('#dg');
 93                 var rows = $dg.datagrid('getChanges');
 94                 if (rows.length) {
 95                     var inserted = $dg.datagrid('getChanges', "inserted");
 96                     var deleted = $dg.datagrid('getChanges', "deleted");
 97                     var updated = $dg.datagrid('getChanges', "updated");
 98                     var effectRow = new Object();
 99                     if (inserted.length) {
100                         effectRow["inserted"] = JSON.stringify(inserted);
101                     }
102                     if (deleted.length) {
103                         effectRow["deleted"] = JSON.stringify(deleted);
104                     }
105                     if (updated.length) {
106                         effectRow["updated"] = JSON.stringify(updated);
107                     }
108                 }
109             }
110             $.post("/Home/Commit", effectRow, function (rsp) {
111                 if (rsp) {
112                     $dg.datagrid('acceptChanges');
113                     bindData();
114                 }
115             }, "JSON").error(function () {
116                 $.messager.alert("提示", "提交錯誤了！");
117             });
118 
119         }
120 
121         function bindSaveButton() {
122             $("#saveButton").click(function () {
123                 saveChanges();
124             });
125         }
126         function bindAddButton() {
127             $("#addButton").click(function () {
128                 append();
129                 });
130         }
131         function bindDelButton() {
132             $("#delButton").click(function () {
133                 remove();
134             });
135         }
136     </script>
137 </head>
138 <body>
139     <table id="dg">
140     </table>
141     <div id="tb">
142         <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" id="addButton">新增</a>
143         <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" id="delButton">刪除</a>
144         <a href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'" id="saveButton">保存</a>
145     </div>
146 </body>
147 </html>

 1         public ActionResult Commit() {
 2             string deleted = Request.Form["deleted"];
 3             string inserted = Request.Form["inserted"];
 4             string updated = Request.Form["updated"];
 5             if (deleted != null)
 6             {
 7                 //把json字符串轉換成對象
 8                 List<Model.Branch> listDeleted = JsonDeserialize<List<Branch>>(deleted);
 9                 //下面就能夠根據轉換後的對象進行相應的操做了
10             }
11 
12             if (inserted != null)
13             {
14                 //把json字符串轉換成對象
15                 List<Model.Branch> listInserted = JsonDeserialize<List<Model.Branch>>(inserted);
16                 //下面就能夠根據轉換後的對象進行相應的操做了
17             }
18 
19             if (updated != null)
20             {
21                 //把json字符串轉換成對象
22                 List<Branch> listUpdated = JsonDeserialize<List<Branch>>(updated);
23                 //
24             }

1         private T JsonDeserialize<T>(string jsonString)
2         {
3        
4             DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T));
5             MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(jsonString));
6             T obj = (T)ser.ReadObject(ms);
7             return obj;
8         }