JQ grid关于多级表头CheckBox居中及多选

JQ常规添加CheckBox是设置 multiselect: true即可；常规设置多级表头如下：

      var gridHeaderArr = [];//需要设置的表头
                $.each(data.mutiModel, function (index, item) {
                    gridHeaderArr.push({ startColumnName: item.FIELD, numberOfColumns: 1, titleText: item.Means })
                });
                $gridList.jqGrid('setGroupHeaders', {
                    useColSpanStyle: true, 
                    groupHeaders: gridHeaderArr
                });

此时二级表头及CheckBox复选框已完毕，不过check是在下方，查看HTML代码，表头为th设置rowspan=2，显示效果如下：

且点击效果不行，此时我们需要找到对应的th的ID，然后手动添加CSS及定义多选事件，代码如下：

 $('#gridList_cb').css("vertical-align","middle").html("<a href='#' οnclick='checkAll()' style=\" display:'block' ; margin-top:5px; \"><i class='far fa-square'  style=\"margin-left:5px;margin-top:5px;\" id='checkTitle' align='center' ></i></a>");

通过HTML代码会发现已经将CheckBox由div包裹更改为i标签，并添加了checkAll事件，另外使复选框居中的细节为$('#gridList_cb').css("vertical-align","middle")
另外再附上checkAll全选方法具体实现：

 //实现多选的全选
    function checkAll() {
        selectedIds = [];
        var checkState = false;
        if ($("#checkTitle").attr("class") == "far fa-check-square") {
            checkState = true;  //判断class是否是far fa-check-square 注：框架提供类名
        }
        var selected = $("#gridList").jqGrid("getGridParam", "selarrrow");
        if (checkState) {
            $("#checkTitle").attr("class", "far fa-square");
            var rowIds = jQuery("#gridList").jqGrid('getDataIDs');
            for (var row = 0; row < rowIds.length; row++) {
                if (selected.indexOf(rowIds[row]) >= 0) {
                    try {
                        //当执行到rowIds.length-1次时，这一行报错导致程序抛错，无法继续执行；
                        $("#gridList").jqGrid('setSelection', rowIds[row]);
                    } catch (e) {
                    }
                    var cellCheckBox = $("#gridList").find("#" + rowIds[row] + "").find("#chk_" + rowIds[row]);
                    cellCheckBox.parent().html("<i id=\"chk_" + rowIds[row] + "\" class=\"far fa-square\" style=\"margin-left:5px;margin-top:5px;\">");
                }
                selectedIds.splice(selectedIds.indexOf($('#gridList').getRowData(rowIds[row]).TESTNO), 1);
            }
        }
        else {
            $("#checkTitle").attr("class", "far fa-check-square");
            var rowIds = jQuery("#gridList").jqGrid('getDataIDs');
            for (var row = 0; row < rowIds.length; row++) {
                if (selected.indexOf(rowIds[row]) < 0) {
                    $("#gridList").jqGrid('setSelection', rowIds[row]);
                    var cellCheckBox = $("#gridList").find("#" + rowIds[row] + "").find("#chk_" + rowIds[row]);
                    cellCheckBox.parent().html("<i id=\"chk_" + rowIds[row] + "\" class=\"far fa-check-square\" style=\"margin-left:5px;margin-top:5px;\">");
                }
                selectedIds.push($('#gridList').getRowData(rowIds[row]).ID);
            }
        }
    }

转载请注明出处，3Q ！ power by 小伍丶

标签：CheckBox,jqGrid,及多选,rowIds,表头,gridList,var,row
来源： https://blog.csdn.net/QinYHJ/article/details/110222150