思路:定义全局的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;
}

jqGrid 跨页选择以及回显的处理的更多相关文章

  1. 关于【vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据】的优化

    之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...

  2. vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据。

    业务的需要:我要对与会人员勾选,记录所选的与会人员,并且点击到别的页面上时也要记录所勾选的.第一次尝试,每次点击下一页数据都会清空.然后我就去element ui官网查看了api.实现如下: 在tab ...

  3. 选择company回显appname

    function showSupCompany() { var obj = {}; obj.label = ScompanyId.getSelectedLabel(); obj.value = Sco ...

  4. easyui datagrid 跨页选择

    $.fn.extend( memberList ,{ quickSearch : function() { var time1 = new Date(); /* this.datagrid.datag ...

  5. elementUITable的多选框:分页选择数据回显,分页保存选中的数据。

    <template> <el-table @selection-change="handleSelectionChange" :row-key="get ...

  6. JSP页面批量选择&全选操作&选择回显

    效果如下: js验证部分: 页面body部分: 附:控制器Controller中验证批量选择条件回显:

  7. jsp页面数据回显(select下拉选择框)

    1.静态变量方式: <!-- 实现select标签回显 --> 1.<select name="curStatus" value="${curStatu ...

  8. layui table 跨页记忆选择

    layui 表格功能目前默认不支持跨页记忆选择 下面来实现layui table跨页记忆选择实现 基于layui版本 1.4.5 表格跨页通用方法 //表格分页复选框 layui.define(['j ...

  9. Vue ElementUI Tree组件 回显问题(设置选择父级时会全选所有的子级,有此业务场景是不适合的)

    业务场景下有这样的问题 业务需求需要保存前端 半选节点 解决方案 let checked = this.$refs.menuTree.getCheckedKeys(); //此方法获取半选节点 let ...

随机推荐

  1. 分享知识-快乐自己:Liunx—Maven 部署步骤

    第一步: 点我下载 Liunx—Maven Linux命令下载:wget [下载文件存放路径]   [下载文件地址] 第二步: 上传 Maven 并解压到 指定的目录:(上传方式 xftp 或 rz ...

  2. thinkphp微信开发(消息加密解密)

    使用thinkphp官方的WeChat包,使用不同模式可以成功,但是安全模式就是不行,现将分析解决结果做下记录. 分析问题: 解密微信服务器消息老是不成功,下载下微信公众平台官方给出的解密文件和Wec ...

  3. json与jsonp详解

     前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域 ...

  4. 一篇 jQuery 常用方法及函数的文章留存备忘。

    jQuery 常见操作实现方式 $("标签名") //取html元素 document.getElementsByTagName("") $("#ID ...

  5. CTreeCtrl控件

    一.HTREEITEM HTREEITEM是树中节点的句柄,也就是一个DWORD值.在树中唯一标识一个节点.它的值对于程序员其实没有什么意义,只是可以通过它找到一个节点,从而取得节点的属性,如 Get ...

  6. 本地windows安装memcached服务

    1.安装到系统服务中: 在doc中:执行此软件 memcached.exe -d install(如果提示错误,要找到cmd.exe用管理员身份打开) 安装后在,服务里吗就有个服务了,如果没有启动,点 ...

  7. Java基础 之 System.getProperty()方法

    Java基础 之 System.getProperty()方法大全 public static void main(String[] args) { System.out.println(" ...

  8. 【QT】对Qt项目开发中遇到的问题的总结

    1. QMessageBox中文乱码 这里的中文乱码是指只有QMessageBox才出现中文乱码,其他都可以正常使用的情况.有些博客中提到使用QString::fromUtf8()函数, 实测有些情况 ...

  9. spark提交异常日志分析

    java.lang.NoSuchMethodError: org.apache.spark.sql.SQLContext.sql(Ljava/lang/String;)Lorg/apache/spar ...

  10. 51nod 1250 排列与交换——dp

    题目:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1250 仔细思考dp. 第一问,考虑已知 i-1 个数有多少种方案. ...