Jquery easyui 批量處理datagrid的資料

阿新 • • 發佈：2019-01-18

最近用JQuery EasyUI做專案時,需要在客戶端批量處理資料,根據官方的Demo,使用json傳遞資料到後臺,後臺通過接收到的json資料,反序列化成一系列model物件,然而進行增刪查改操作.現整理如下:

  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             }

MVC程式碼

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         }

JsonDeserialize程式碼

嘴拙,見笑了

Jquery easyui 批量處理datagrid的資料,批量增刪改

Jquery easyui datagrid控制可以獲取受影響的行，從上一次的提交獲取改變的所有行。型別引數指明用哪些型別改變的行，可以使用的值有：inserted,deleted,updated等。當型別引數未配置的時候返回所有改變的行。將改變行傳到服務端，通過引數分別做批

Jquery easyui 批量處理datagrid的資料

最近用JQuery EasyUI做專案時,需要在客戶端批量處理資料,根據官方的Demo,使用json傳遞資料到後臺,後臺通過接收到的json資料,反序列化成一系列model物件,然而進行增刪查改操作.現整理如下: 1 <html> 2 <head> 3

EasyUI之移動DataGrid資料中圖片實現放大功能

最終效果滑鼠移動至圖片上，彈出預覽視窗，滑鼠移出圖片，關閉彈出視窗圖片預覽的dialog  <div id="dialog" class="easyui-dialog" title="圖片預覽" d

Hibernate批量處理海量資料的方法(轉)

本文例項講述了Hibernate批量處理海量資料的方法。分享給大家供大家參考，具體如下： Hibernate批量處理海量其實從效能上考慮，它是很不可取的，浪費了很大的記憶體。從它的機制上講，Hibernate它是先把符合條件的資料查出來，放到記憶體當中，然後再進行操作。實際

自定義將easyui中的datagrid資料框中的資料通過excel匯出到本地

1.js程式碼（給easyui的datagrid新增匯出excel表格的方法） //自定義匯出excel表格 $.extend($.fn.datagrid.methods, { toExcel: function(jq, filename){ ret

jquery easyui-datagrid 如何清空資料

//清空原有資料方法1： var item = $('#filegrid').datagrid('getRows'); if (item) { for (var i = item.length - 1; i >= 0; i--

Jquery EasyUI +Ajax +Json +一般處理程式實現資料的前臺與後臺的互動 --- 善良公社專案

經過上一篇部落格，本節主要是來看實現的功能是後臺的資料通過json資料傳過來，前臺修改的資料再傳回資料庫之後頁面再次更新table中的資料；圖示：例項：前臺的程式碼 <%--表格顯示區--%> <table id="tt" " ti

Hibernate批量儲存前臺傳遞的EasyUI-datagrid資料

上一篇部落格批量儲存EasyUI-datagrid中的資料中分析瞭如何將Easyui-datagrid中的資料轉換為Json字串，以及如何使用ajax方法將該json字串傳遞到後臺。接上一篇，本篇將說明我是如何將前臺傳來的json字串解析為實體類物件，並將它

jquery easyui datagrid 遠端載入資料----javascript法

jquery easyui有三種辦法生成datagrid（資料網格），本篇專門討論javascript藉助jquey easy ui實現的方式 html部分 <main role="main" class="container"> <div

jquery easyui datagrid 遠端載入資料----把主鍵渲染為值遇到的問題及解決方案

起因：資料庫中一些欄位存的是代表具體值的數字，需要渲染為具體值 monggodb中的字典 mysql中存放的值為：expertin代表教練擅長的搏擊技能 jquery easyui中的相關程式碼如下：用於載入字典中的資料，注意：這一ajax請求必須設定為同步（async:false），

jquery-easyui中列表控制元件datagrid沒有資料時顯示列表為空資訊

jquery-easyui控制元件datagrid下，如果有資料，會顯示按照列表顯示，如果沒有資料，那麼會顯示如下的介面。沒有任何提示。為了讓沒有資料的情況下，提示“列表為空”，我們需要設定datagrid屬性。這個屬性就是emptyMsg。預設情況下，這個屬性是為空，沒有值。

jQuery EasyUI DataGrid Checkbox 資料設定與取值

純粹做個記錄，以免日後忘記該怎麼設定。這一篇將會說明兩種使用 jQuery EasyUI DataGrid 的 Checkbox 設定方式，以及在既有資料下將 checked 為 true 的該筆資料列的 Checkbox 設定為 Checked，另外就是兩種 Check

JQuery EasyUI datagrid 批量編輯和提交

js--easyUI----jQuery easyui datagrid 點選某個單元格即進入編輯狀態，焦點移開後，儲存資料

以上為轉載內容，以下為自己驗證程式碼： function _createTable(data){ //對漢字進行轉碼 $.each(data.data, function(i, obj){ var eventName = unescape(ob

easyui datagrid資料批量刪除

js頁面 //批量刪除 function deleteStampdef(ctx) { var selRow = $("#dg").datagrid('getSelections

【顆粒歸倉】（一）jQuery easyui datagrid 的資料載入

其實easyuidatagrid載入資料只有兩種方式：一種是ajax載入目標url返回的json資料；另一種是載入js物件，也就是使用loadDate方法，這種方法用於載入本地js資料（非url呼叫）。在專案中我用到的以及研究別人程式碼中用到的普遍是第一種，下

jquery easyui datagrid 資料繫結java版本

前端設定datagrid程式碼 $("#invitation").datagrid({ width:"auto", height:"auto", nowrap: false, striped: true, //url:"datagrid_data.

動態控制jQuery easyui datagrid工具欄顯示隱藏

第一條 button 一個按鈕 yui query 控制 show disable //隱藏第一個按鈕 $(‘div.datagrid-toolbar a‘).eq(0).hide(); //隱藏第一條分隔線 $(‘div.datagrid-toolbar div‘).e

jquery easyui grid 表格特殊字符處理

數據庫字段一個 cti enc formatter val 提示 ddr 特殊字符 grid 獲取的數據中，如果數據存在測試的字符，或者js語句，會導致頁面布局錯亂，如下方法，讓獲取到的數據全部當成文本進行顯示此操作主要防止以下亮點 1. 由於業務需要，查詢的數據中

jQuery EasyUI---DataGrid

ebo out xmlns tar utf select 基本 yui round <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DataGrid</t

Jquery easyui 批量處理datagrid的資料

相關推薦