代码篇——EasyUI中DataGrid选中多行提交和删除

本文主要是介绍代码篇——EasyUI中DataGrid选中多行提交和删除，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

基础代码进行整理，让我们的效率更快的提高。

需求：

俩个表格，第一个表格为班级，里面有具体的一班二班，另一个表是该班级的学生。实现的功能是：选中第一个表的班级，从数据库中查询该班级的学生，显示在另外的一个表格中。点击移除，就可以将选中学生从考生信息列表中移除。也就是多行数据在俩个datagrid中进行传递。

对一个表格进行单行选中的代码：

<span style="font-family:FangSong_GB2312;font-size:18px;"><span style="font-size:18px;"><span style="font-size:24px;">var rowInfo = $("#id").datagrid('getSelected');
if(rowInfo){alert("已经选中的行");
}</span></span></span>

对一个表格进行多行选中的代码：

<span style="font-family:FangSong_GB2312;font-size:18px;"><span style="font-size:18px;"><span style="font-size:24px;">var ids = [];
var rows = $('#tt').datagrid('getSelections');
for(var i=0; i<rows.length; i++){ids.push(rows[i].itemid);
}
alert(ids.join('
'));</span></span></span>

遇到问题：

看着这些代码，是不是觉得很简单啊，但是在具体的多行传值得过程中，出现了仅仅可以传一行的值得现象，我们的表格在没有用分页的情况下，可以实现多行选中并把值弹出来，但是在分页的情况下，仅仅可以显示一行的值。为什么？

以下的代码是我考试班绑定的表格代码:

<span style="font-family:FangSong_GB2312;font-size:18px;"><span style="font-size:18px;">   <table id="Chapter1" title="考试班" class="easyui-datagrid" style="width: 600px; height: 300px;" idfield="itemid" pagination="true" data-options="iconCls:'icon-save',rownumbers:true,url:'/AddStudent/QueryClassByCourseID',pageSize:5, pageList:[10,20,30,40],method:'get',toolbar:'#tb',striped:true" fitcolumns="true"><thead><tr><th data-options="field:'ck',checkbox:true"></th><th data-options="field:'StudentNo',width:80">班号</th><th data-options="field:'StudentName',width:100">班级名称</th></tr></thead></table></span></span>

其中有一个idfield="itemid",这句话是什么意思呢？

这句话就标示了主键，也就是相当于标示了一个ID值（唯一的），所以在后面的传值过程中仅仅传一行的值。

代码：

多行选中传值，定义一个数组，让该数组进行传值，然后在后台的时候对该数组进行分割，实现该功能的JS代码：

   function AddExamInformation() {var ids = [];var rows = $('#ExamClass').datagrid('getSelections');var strStudentNos = "";for (var i = 0; i < rows.length; i++) {if (strStudentNos == '') {strStudentNos = rows[i].StudentNo;} else {strStudentNos += ',' + rows[i].StudentNo;}}$('#StudentInfo').datagrid({url: '/AddStudent/QueryStudentInfoByClassNo?strStudentNos=' + strStudentNos,//success: function (data) {columns: [[{ field: 'ck', checkbox: true },{ field: 'StudentNo', title: '学生ID', align: 'center', width: 100 },{ field: 'StudentName', title: '学生姓名', align: 'center', width: 100 }]]});}

control中的代码：

用Regex.Split来分割字符串，实现循环。

 public ActionResult QueryStudentInfoByClassNo(){int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]);int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]);int total = 0;string[] ArrayStudentNo = Regex.Split(Request["strStudentNos"].ToString(), ",", RegexOptions.IgnoreCase);List<StudentViewModel> StudentViewModel = new List<StudentViewModel>();List<StudentViewModel> listStudent = new List<StudentViewModel>();List<StudentViewModel> student = new List<StudentViewModel>();foreach (string studentNo in ArrayStudentNo){student = basicQueryStudentInfo.QueryStudentInfoByClassNo(studentNo, pageSize, pageIndex, out total);if (student.Count == 0){return null;}else{listStudent.Add(student[0]);}}return Json(listStudent, JsonRequestBehavior.AllowGet);}

多行代码进行移除的JS

 function ClearExamInformation() {var rows = $('#StudentInfo').datagrid("getSelections");	    //获取你选择的所有行	 //循环所选的行	for (var i = 0; i < rows.length; i++) {var index = $('#StudentInfo').datagrid('getRowIndex', rows[i]);//获取某行的行号	    $('#StudentInfo').datagrid('deleteRow', index);}}

基础性的代码，需要的是多多积累。