easyUI——datagrid表格批量操作
阿新 • • 發佈:2019-01-30
對datagrid表格進行批量的操作,是每個系統都會遇到的,通過一下小例項總結一下。其實 原理很簡單:獲取選中的資料的主鍵,傳值到後臺,對資料進行操作。
HTML
<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px" url="GetUserData" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="false"> <thead> <tr> <th data-options="field:'ck',checkbox:true"></th> <th field="UserId" width="50">使用者ID</th> <th field="UserName" width="50">使用者名稱</th> <th field="CouserName" width="50">課程名</th> </tr> </thead> </table> <div id="toolbar"> <a href="javascript:void(0)" id="delete" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a> </div>
JS函式
js函式主要是獲取選中行的ID,利用ajax將資料傳值到後臺的delete方法中。
後臺delete方法$("#delete").click(function () { //獲取表格選擇行 var rows = $('#dg').datagrid('getSelections'); //判斷是否選擇行 if (!rows || rows.length == 0) { return; } var strId; //迴圈ID,新增到idList中 $.each(rows, function (i, n) { if (i == 0) { strId = "idList=" + n.UserId; } else { strId += "&idList=" + n.UserId; } }); //提交 $.post('Delete', strId, function (data) { //Delete是後臺的方法 $('#dg').datagrid('reload'); }); });
總結[HttpPost] public ActionResult Delete(IList<int> idList) { //判斷判斷是否刪除多行資料 if (idList.Count >= 1) { foreach (int i in idList) { //新增刪除方法 } } return Json(idList); //這裡返回的還是在前臺選中的資料ID list集合,可以返回其他資料 }
對easyUI的擴充套件,當然這種方式也有一定侷限性,比如傳值只能傳單個值,不靈活。後期還會進一步優化。