代码篇——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);                                                             }                         }

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