jqgrid - 如何在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; }

该演示展示了所有可能性：

更新：您可以另外使用答案中的技巧。如果您定义例如 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" }

你会得到以下结果

（见演示）。

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