【发布时间】：2013-01-06 10:35:12
【问题描述】：
我将如何在列之间注入垂直空间，如下面的粗略模型所示（如果可能的话）。再次请原谅我在这张图片上的粗心大意，但我认为它传达了我想要做的事情。基本上我希望在网格中有“组”列，然后在组的任一侧都有空间。
例如
【问题讨论】：
标签： jqgrid jqgrid-asp.net jqgrid-formatter
【发布时间】：2013-01-06 10:35:12
【问题描述】：
您有多种可能性来实现您的要求。最简单的方法似乎是对选定列使用自定义padding-right 或padding-left。例如，您可以像下面这样定义 CSS
.ui-jqgrid tr.ui-row-ltr td.myCustomColumnClass { padding-right: 10px; }
并通过使用classes: "myCustomColumnClass" 为colModel 中的列定义将类"myCustomColumnClass" 分配给列的所有单元格。我想它是你需要的。
另一种可能性是只包括空列，如
{ 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 函数插入空字符串。
【讨论】：
-
在将 JSon 传递到网格时，我需要做些什么来“跳过”这些空白列，还是只需要提供一个空白数据来填充空白柱子？我在我的 JSon 提要中添加了两个“”字段，以暂时容纳两个空白的垂直列，但我想知道是否有更好的方法。
-
@Mark：这取决于您使用的 JSON 数据的格式。如果您使用
jsonReader: {repeatitems: false}并发送命名数据，那么您无需执行任何操作。如果您使用 jqGrid 的标准 JSON 格式，那么您必须在数据中包含额外的""，或者最好在beforeProcessing回调中执行此操作。顺便说一句，你为什么不只使用我建议的第一种方法（增加padding）？它最简单，但它没有提供垂直分隔符。空白列与删除单元格之间水平线的 CSS 结合使用效果很好。 -
我确实添加了垂直线来建立一个空白列，并且真的很喜欢它以及它为网格提供的外观和分离。正如我所提到的，我确实提供了
""数据元素来让事情顺利进行，但我会考虑提供命名数据。任何关于使用命名数据的批量添加到 JSONon 数据的任何 cmets ？再次感谢您，如果没有您对 SO 的回答，我的项目就不会是现在的样子 -
@Mark：我在答案中添加了“更新”部分，以更详细地解释我在以前的 cmets 中尝试解释的内容。