jqGrid 跨页选择以及回显的处理
思路:定义全局的array(selectedIds),当列表选中的时候就push进去,当列表取消选中时,将该项从selectedIds中删除
重点:1.列表加载完成时为列表增加复选框,并给每一个checkbox赋name;
2.回显时模拟checkbox的click事件;
代码如下:
var selectedIds = []; $(function () { InitChooseCourseList(); //绑定搜索 $("#SearchCourseForChoose").click(function () { SearchForChoose(); }); }); //页面列表初始化 function InitChooseCourseList() { var $gridList = $("#gridList"); var postData = $('#CourseForm').formSerialize(); var classId = $("#ClassId").val(); postData["ClassId"] = classId; $gridList.Grid({ mtype: 'Post', postData: postData, url: "/TopOnline/Class/ChooseCourseGrid", height: ($(window).height() - 145), colModel: [ { label: 'ID', name: 'ID', hidden: true }, { label: 'CourseSubjectId', name: 'CourseSubjectId', hidden: true }, { label: '课程名称', name: 'Name', width: fixJqgridColumnWidthByPercent(0.45), align: 'center' }, { label: '所属科目', name: 'CourseSubjectName', width: fixJqgridColumnWidthByPercent(0.45), align: 'center' } ], pager: '#gridPager', viewrecords: true, multiselect: true, //为表格增加复选框 gridComplete: function () { var rowIds = jQuery("#gridList").jqGrid('getDataIDs'); for (var k = 0; k < rowIds.length; k++) { var curRowData = jQuery("#gridList").jqGrid('getRowData', rowIds[k]); var curChk = $("#" + rowIds[k] + "").find(":checkbox"); curChk.attr('name', 'check_box_' + curRowData['ID']); //给每一个checkbox赋名字 curChk.attr('value', curRowData['ID']); //给checkbox赋值 curChk.attr('style', 'margin:7px;'); } },
//加载完成模拟复选框的点击事件 loadComplete: function (xhr) { var rowArray = xhr.rows; if (selectedIds.length > 0) { var count = 0; $.each(rowArray, function (i, item) { if (selectedIds.indexOf(item.ID.toString()) > -1) { //判断arrayNewList中存在item.Id值时,选中前面的复选框, $("[name='check_box_" + item.ID + "']").trigger('click'); count++; } }); if (rowArray.length == count) { $("#cb_gridList").prop("checked", true); } } },
//全选触发事件 onSelectAll: function (aRowids, status) { var rowData = $(this).jqGridRowValue();//操作行 var pageRowData = $(this).getRowData();//当前列表所有行 if (status == true) { //循环aRowids数组,将Id放入selectedIds数组中 saveData(rowData); } else { deleteIndexData(rowData, pageRowData); } },
//选中某行触发事件 onSelectRow: function (aRowids, status) { var rowData = $(this).jqGridRowValue();//操作行 var pageRowData = $(this).getRowData();//当前列表所有行 if (status == true) { if (rowData.length == $(this)[0].rows.length - 1) { $("#cb_gridList").prop("checked", true); } saveData(rowData); } else { deleteIndexData(rowData, pageRowData); } } }); }; //将Id放入selectedIds数组中 function saveData(obj) { $.each(obj, function (i, item) { if (selectedIds.indexOf(item.ID) < 0) selectedIds.push(item.ID); }); } //将Id从selectedIds中删除 (仅删除当前页面列表中的数据) function deleteIndexData(obj,pageObj) { var rowDataIds = []; var pageRowDataIds = []; $.each(obj, function (i, item) { rowDataIds.push(item.ID); }); $.each(pageObj, function (i, item) { pageRowDataIds.push(item.ID); }); $.each(selectedIds, function (i, sItem) { if (pageRowDataIds.indexOf(sItem)>0 && rowDataIds.indexOf(sItem) < 0) { selectedIds.splice(i, 1); i--; } }); }
辅助代码:
$.fn.jqGridRowValue = function () { var $grid = $(this); var selectedRowIds = $grid.jqGrid("getGridParam", "selarrrow"); var json = []; var rowData; if (selectedRowIds != "") { var len = selectedRowIds.length; for (var i = 0; i < len; i++) { rowData = $grid.jqGrid('getRowData', selectedRowIds[i]); json.push(rowData); } } else { if (!!$grid.jqGrid('getGridParam', 'selrow')) { rowData = $grid.jqGrid('getRowData', $grid.jqGrid('getGridParam', 'selrow')); json.push(rowData); } }; return json; }