对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" οnclick="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的扩展,当然这种方式也有一定局限性,比如传值只能传单个值,不灵活。后期还会进一步优化。