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,显示效果如下:
JQ grid关于多级表头CheckBox居中及多选

且点击效果不行,此时我们需要找到对应的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>");

JQ grid关于多级表头CheckBox居中及多选
通过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 小伍丶

上一篇:关于使用elementUI中的CheckBox或者radio绑定清空对象的问题


下一篇:Element实现checkbox多选