标签：function jqGrid 回显 跨页 item rowData selectedIds var ID

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

标签：function,jqGrid,回显,跨页,item,rowData,selectedIds,var,ID
来源： https://www.cnblogs.com/teng-0802/p/10905384.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。