关于jqgrid多选框“各种问题”

        经过我将近一天的时间终于解决了，jqgrid复选框的问题，废话不多说。（底部有代码）

本文解决的问题分为：

1.复选分页，翻页后前一页选中的行不在被选中。

2.点全选按钮，只能选中当前页，第二页第三页等都不会被选中。

3.点击行，复选框会被选中问题（如果有删除操作的话容易导致误选）

4.复选框错位。

解决：

//解决复选框错位（可以根据自己具体情况适当修改里面的值）
if($("tr .jqg-third-row-header")){
    $(".ui-jqgrid .ui-jqgrid-htable th").css("padding","0 1px 0 3px");
}

注：checkBox[ ]  贯穿全局，是核心。

还有一个没有解决的问题，希望各位大佬帮忙解决一下：

当全部选中后翻页或翻回来，标题栏的复选框都不会被选中。

全选：

第二页：选不中

返回第一页：也选不中

开始：

一、复选分页

jqGrid表格插件按照正常情况下，设置multiselect:true,，就可以实现多选。但是当数据分页显示时，翻页后，之前已经选择的就会失效。

这里通过设置一个全局变量(checkBox),缓存已经选中的数据项，来实现翻页后保持选中。再定义一个全局全局变量(cPage),重新加载的时候清空checkBox,在翻页事件中运用这个cPage变量;

二、点击全选

全选必需要知道所有数据的id,存入checkBox[ ] 中在翻页时才会被遍历选中。翻页加载时触发 loadComplete 方法

三、解决点击行，复选框不被选中（beforeSelectRow）

全部代码：

前端代码：

 <div class="row" style="margin-top:15px;margin-left: 15px;">
            <div class="col-md-11">
                //主要是这个table
                <table id="gridBody" class="scroll" cellpadding="0" cellspacing="0"</table>
                <div id="toolBar"></div>
            </div>
        </div>

 <script type="text/javascript">
        var ids = new Array();
        $(function () {
            showList();
            //给序号列添加标题栏
            jQuery("#gridBody").jqGrid('setLabel',0, '序号', 'labelstyle');
            //allId 是在访问list页面时获取的全部ID
            //循环之后把id赋在ids这个数组中
            var index = 0;
            <#list allId as ids>
                ids[index] = '${ids[0]}';
                index++;
            </#list>
            //解决复选框错位
            if($("tr .jqg-third-row-header")){
                $(".ui-jqgrid .ui-jqgrid-htable th").css("padding","0 1px 0 3px");
            }
        });
        function reloadGrid() {
            var resourceName = $("#resourceName").val();
            $("#gridBody").jqGrid('setGridParam', {
                postData: {resourceName: resourceName},
                page: 1
            }).trigger("reloadGrid", [{page: 1}]);
        }
        var checkBox = [];//设置全局变量
        var cPage = 0;//设置翻页标志
        function showList() {
            var resourceName = $("#resourceName").val();
            $("#gridBody").jqGrid({
                url: '/resource/list/data',
                styleUI: 'Bootstrap',
                mtype: 'POST',
                sortorder: "asc",
                postData: {resourceName: resourceName},
                colModel: [
                    {label: 'id', name: 'id', align: 'center', width: 30, hidden: true,key:true},
                    {label: '资源名称', name: 'resourceName', align: 'center', width: 30},
                    {label: '资源类型', name: 'resourceType', align: 'center', width: 30},
                    {label: '来源系统', name: 'sourceSystemId', align: 'center', width: 30},
                    /*{label: '共享属性', name: 'description', align: 'center', width: 30},*/
                    {label: '归集方式', name: 'reportType', align: 'center', width: 30},
                    /* {label: '数据量', name: 'description', align: 'center', width: 30},*/
                    {label: '更新时间', name: 'updatedDate', align: 'center', width: 30}
                    /*{label: '状态', name: 'description', align: 'center', width: 30}*/
                ],
                rowNum: 1,
                rowList: [1, 2, 3],
                viewrecords : true,
                multiselect: true,//复选框
                onPaging: function (pgButton) {
                    cPage++; //翻页事件
                },
                loadComplete: function (data) {
                    if (cPage == 0) {
                        checkBox = [];//每次加载清空选中状态
                    }
                    cPage = 0;
                    var rowArr = data.rows;
                    var rowArrId;
                    var checkBoxId;
                    if (checkBox.length > 0) {
                        for (var i = 0; i < rowArr.length; i++) {
                            //为了清楚才这样写，完全可以直接在if中判断
                            rowArrId = rowArr[i].id;
                            for (var j = 0; j < checkBox.length; j++) {
                            //为了清楚才这样写，完全可以直接在if中判断
                                checkBoxId = checkBox[j];
                                if (rowArrId == checkBoxId) {
                                    $("#gridBody").jqGrid('setSelection', rowArr[i].id);
                                    break;
                                }
                            }
                        }
                    }
                },
                onSelectRow: function (rowId, status) {
                    if (status) {
                        if (checkBox.indexOf(rowId) == -1) {
                            checkBox.push(rowId);
                        }
                    } else {
                        deleteCheckBox(rowId);
                    }
                },
                rownumbers: true,//序号列
                //全选的解决方法（onSelectAll）,用到了上面的ids数组
                onSelectAll:function(rowids,statue){
                    if (statue) {
                        for (var i = 0; i < ids.length; i++) {
                            if(checkBox.indexOf(ids[i]) == -1){
                                checkBox.push(ids[i]);
                            }
                        }
                    }else {
                        for (var i = 0; i < ids.length; i++) {
                            deleteCheckBox(ids[i]);
                        }
                    }
                },
                //点击行复选框会被选中的问题，防误操作（beforeSelectRow）
                beforeSelectRow: function (rowid, e) {
                    var $myGrid = $(this),
                            i = $.jgrid.getCellIndex($(e.target).closest('td')[0]),
                            cm = $myGrid.jqGrid('getGridParam', 'colModel');
                    return (cm[i].name === 'cb');
                }
        });
        }
        function deleteCheckBox(rowId){
            for(var i = 0; i < checkBox.length; i++){
                if (checkBox[i] == rowId){
                    //根据索引值删除checkBox中的数据
                    checkBox.splice(i,1);
                }
            }
        }
    </script>

后端代码：

 /**
     * 资源登记list，跳转
     *
     * @return
     */
    @RequestMapping(value = "/resource/list", method = RequestMethod.GET)
    public ModelAndView List() {
        ModelAndView mav = new ModelAndView("/resource/list");
        //为了全选的操作
        List<String> allId = resourceRepository.findAllId();
        mav.addObject("allId",allId);
        return mav;
    }

    @RequestMapping(value = "/resource/list/data", method = RequestMethod.POST)
    @ResponseBody
    @Transactional(readOnly = true)
    public Map<String, Object> getData(@RequestParam int page, @RequestParam int rows,
                                       @RequestParam String sord, @RequestParam String sidx,String resourceName) {
        PageRequest pageRequest = new PageRequest(page - 1, rows,
                sord.equals("asc") ? Sort.Direction.ASC : Sort.Direction.DESC,
                !StringUtils.isEmpty(sidx) ? sidx : "createdDate");
        Specification specification = Specifications.where(ResourceSpecifications.filterByName(resourceName));
        Page pageData =  resourceRepository.findAll(specification,pageRequest);
        return JqGridDataGenerator.getDataJson(pageData);
    }