【EasyUi DataGrid】批量刪除
DataGrid是我們做網頁經常使用到的組件之中的一個,對它的操作也無非是增刪改查操作。單條數據的增刪改相對來說比較簡單。添加、改動能夠直接在DataGrid中進行,也能夠用彈出框的形式把數據裝載在文本框等各種控件中呈現給用戶,讓用戶自己主動填寫或改動。刪除的事稍後再說。個人覺得“查”是最難的。由於它涉及到了表格的各種載入問題等等。假設你覺得這是危言聳聽。那就我的期待興許博客吧!
不知道上邊在說什麽的能夠忽略不計。接下來進行正文部分。這次的DataGrid分三部分來寫:批量刪除、批量改動。動態載入列。
本文先以最簡單的刪除操作來開刀,事實上刪除操作的重點(不是難點,搞不清楚為什麽非常多人非把這兩個相提並論)就在傳遞字符串or傳遞拼接字符串(≈數組小功能),這兩個一個是單條數據的刪除。一個就是批量刪除了。
一、先來看下效果圖
1.選中兩項後。點擊刪除。呈現例如以下效果
2.點擊確定後。這兩條數據將被刪除
本來打算讓大家看下數據庫的,沒想到把數據庫的截圖貼到這兒來……太影響眼睛的審美了,也沒什麽必要,所以憑借你的高智商水準,用上邊兩幅圖全然能夠說明效果了
二、代碼實現
在項目中。client我們用的是MVC框架,當中僅僅用到了視圖和控制器。然後通過控制器把數據傳遞給服務端。
1.在HTML頁面中主要就是設置幾個DataGrid的屬性,這些不用我多說。大家查看幫助文檔就OK了。
當數據載入到表格中,選擇了要刪除的數據後,我們僅僅須要在js中獲取這些選中行。然後把標識這些數據行的字符串傳遞給Controller,代碼例如以下:
//刪除評分項操作 function DeleteJudgeItem() { //獲取選中行的數據,返回的是數組 //獲取選中行的數據 var selectRows = $("#dg").datagrid("getSelections"); //假設沒有選中行的話,提示信息 if (selectRows.length < 1) { $.messager.alert("提示消息", "請選擇要刪除的記錄。", ‘info‘); return; } //假設選中行了,則要進行推斷 $.messager.confirm("確認消息", "確定要刪除所選記錄嗎?", function (isDelete) { //假設為真的話 if (isDelete) { //定義變量值 var strIds = ""; //拼接字符串,這裏也能夠使用數組,作用一樣 for (var i = 0; i < selectRows.length; i++) { strIds += selectRows[i].JudgeId + ","; } //循環分割 strIds = strIds.substr(0, strIds.length - 1); $.post(‘/JudgeItem/DeleteJudgeItem?id=‘ + strIds, function (jsonObj) { if (jsonObj > 0) { $.messager.alert(‘提示‘, ‘刪除成功!‘); $("#dg").datagrid("reload"); //刪除成功後 刷新頁面 } else { $.messager.alert(‘提示信息‘, ‘刪除失敗,請聯系管理員。‘, ‘warning‘); } }, "JSON"); } }); }
2.在Controller中接收View傳過來的信息,然後對這個信息進行解析。變成我們須要的數據,最後調用服務端方法對數據庫進行改動
#region 刪除評分項 + DeleteJudgeItem() + 王靜娜 2015-5-30 18:01:02 public int DeleteJudgeItem() { try { //獲得要刪除的評分項JudgeId string delJudgeId = Request.QueryString["id"]; //通過分割的方式。把要刪除的評分項編號取出 string[] judgeId = delJudgeId.Split(‘,‘); //循環調用後臺方法刪除 for (int i = 0; i < judgeId.Length; i++) { //創建新的評分項 Guid JudgeId = new Guid(judgeId[i]); judgeItemService.DeleteJudgeItem(JudgeId); } return 1; } catch (Exception) { throw new Exception("刪除失敗,請聯系管理員。"); } } #endregion以上就是批量刪除的內容了,當中用到的js、jQuery、ajax是學習網頁設計不可缺少的東西,再者就是要學會看文檔。文檔相當於一部字典,遇到想做而不會做的時候多番幾遍大有裨益
【EasyUi DataGrid】批量刪除