首页 > 代码库 > easyUI——datagrid表格批量操作
easyUI——datagrid表格批量操作
对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").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的扩展,当然这种方式也有一定局限性,比如传值只能传单个值,不灵活。后期还会进一步优化。
easyUI——datagrid表格批量操作
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。