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

最新推荐文章于 2024-07-25 09:32:15 发布

原创最新推荐文章于 2024-07-25 09:32:15 发布 · 1.1w 阅读

0 ·

CC 4.0 BY-SA版权

坚持写博客

本文介绍如何实现两个表之间的数据联动，包括多行数据的选中、传递及移除功能，并解决了分页情况下多选只显示一行的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

需求：

俩个表格，第一个表格为班级，里面有具体的一班二班，另一个表是该班级的学生。实现的功能是：选中第一个表的班级，从数据库中查询该班级的学生，显示在另外的一个表格中。点击移除，就可以将选中学生从考生信息列表中移除。也就是多行数据在俩个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);
                                
                             }
                         }

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