0

当我将分组添加到网格中时，除了一个问题之外，它的效果很好。包含分组信息的行正在使用网格“宽度”的 colspan 构建，这意味着它位于我在网格中构建的一些垂直列的顶部，以帮助添加视觉分隔在此处输入图像描述。

有没有办法让这一行不跳过那一列，这样我就可以在网格中的各个部分之间保持良好的视觉中断？

更新： 我通过以下方法过程添加这些垂直“间隔”列：-在 jqGrid 设置中

    beforeProcessing: function (data, status, xhr) {
        //add the spaces to the returned data to allow for the blank vertical columns in the grid
        for (var x = 0, length = data.rows.length; x < length; x++) {
            data.rows[x].cell.splice(6, 0, "");
        } //for
    }, //beforeProcessing

-colmodel 设置匹配将包含“空格”的单元格

{ name: "empty1" ,width: 10, sortable: false, hidedlg: true, search: false, resizable: false, fixed: true, classes: 'NoHorizontalGridBorders' },

-css

.NoHorizontalGridBorders { border-bottom-color: transparent !important; background-color: White !important;}
4

1 回答 1

1

如果我正确理解您需要什么，您必须修改loadComplete. 例如下面的demo，是对答案demo的修改，显示如下网格

在此处输入图像描述

代码非常简单：

loadComplete: function () {
    var $groupingHeaders = $(this).find(">tbody>tr.jqgroup");
    $groupingHeaders.find(">td").addClass("noVerticalLines").attr("colspan", "1");
    $groupingHeaders.append("<td class='noHorizLines noVerticalLines'>&nbsp;</td>" +
        "<td colspan='3' class='noVerticalLines'>&nbsp;</td>" +
        "<td class='noHorizLines noVerticalLines'>&nbsp;</td>" +
        "<td colspan='2'>&nbsp;</td>");
}

其中CSS在类上noHorizLines并noVerticalLines定义为

.ui-jqgrid tr.ui-row-ltr td.noVerticalLines { border-right-color: transparent; }
.ui-jqgrid tr.ui-row-ltr td.noHorizLines { border-bottom-color: transparent; }

以同样的方式，您可以修改上面的代码以制作一些其他效果（在您想要的位置上的水平或垂直线）。

于 2013-07-09T19:14:58.947 回答