如何在jqGrid中的列之间插入垂直空间

Question

如何在列之间注入垂直空间，如下面的原始模型中所示（如果可能的话）。请再次请原谅我对此图片的苛刻工作，但我认为它传达了我想要做的事情。基本上我想在网格中有“组”列，然后在组的任何一侧都有空格。

实施例

Answer 1

您有很多可能来实现您的要求。对于选定的列，最简单的方法是使用自定义padding-right或padding-left。例如，您可以像下面那样定义CSS

.ui-jqgrid tr.ui-row-ltr td.myCustomColumnClass { padding-right: 10px; }

并使用"myCustomColumnClass"为classes: "myCustomColumnClass"中的列定义将列colModel分配给列的所有单元格。我想这是你想要的。

另一种可能性就是包括像

这样的空列

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

在网格中。如果需要，您还可以通过将classes: "noVerticalLines"分配给上一列来删除空列与上一个/下一个列之间的分区（垂直线）。您可以为类“noVerticalLines”定义CSS，如下所示

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

The demo显示了所有可能性：

更新：您可以使用the answer中的其他技巧。如果您定义例如CSS

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

并将“noHorizLines”类添加到“empty1”列

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

您将获得以下结果

（见the demo）。

此外，如果从服务器获取数据，则可能需要在从服务器返回的数据数组中再添加一个空字符串“”。最好在客户端插入空字符串，而不是修改服务器代码。因此，我建议您使用beforeProcessing。您可以枚举从服务器返回的项目，并使用splice函数插入空字符串。