jqGrid 复选框在跨页中的状态保持

最近在维护一个老系统时,用到jqGrid 跨页的时候需要选择值的保存问题,记录下。

思路:定义全局的array(selectedIds),当列表选中的时候就push进去,当列表取消选中时,将该项从selectedIds中删除

重点:1.列表加载完成时为列表增加复选框,并给每一个checkbox赋name;

           2.回显时模拟checkbox的click事件,复选框勾选;

先定义:

///定义
var selectedIds = [];

jqGrid中添加

//加载完成模拟复选框的点击事件
     loadComplete: function (xhr) {
                var rowArray = xhr.rows;
                if (selectedIds.length > 0) {
                    var count = 0;
                    $.each(rowArray, function (i, item) {                        
                        if (selectedIds.indexOf(item.cell[1].toString()) > -1) {
                            //判断arrayNewList中存在item.cell[1]值时,选中前面的复选框,item.cell[1]为需要的值的字段
                            $("[name='jqg_startech_table_jqgrid_" + (i + 1) + "']").trigger('click');
                            $("[name='jqg_startech_table_jqgrid_" + (i + 1) + "']").prop("checked", true);
                            count++;
                        }
                    });
                    if (rowArray.length == count) {
                        $("#cb_startech_table_jqgrid").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_startech_table_jqgrid").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;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值