如何在jqGrid中的列之间插入垂直空间 [英] How to insert Vertical Space between columns in jqGrid

问题描述

我如何在列之间注入垂直空间，如下面的粗略模型所示(如果可能的话).再次请您原谅我在这张图片上的工作，但我认为它传达了我正在尝试做的事情.基本上，我想在网格中具有列的组"，然后在组的任一侧留有空间.

Ex

解决方案

您有很多实现需求的可能性.最简单的方法似乎是对选定列使用自定义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; }
 

该演示显示了所有可能性:

已更新:您还可以使用答案中的技巧.如果您定义例如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.您可以使用 splice 函数枚举从服务器返回的项目并插入空字符串. /p>

How would I inject vertical space between columns as demonstrated in my crude mockup below (if at all possible). Again please forgive my hatchet job on this image but I think it conveys what I'm trying to do. Basically I'm wanting to have "groups" of columns in the grid which then have space to either side of the group.

Ex

解决方案

You have many possibilities to implement your requirements. The most easy way seems me the usage of custom padding-right or padding-left for selected columns. For example you can define CSS like below

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

and assign class "myCustomColumnClass" to all cells of the column by usage classes: "myCustomColumnClass" for the column definition in colModel. I suppose that it's want you need.

Another possibility will be just including empty column like

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

in the grid. If it's needed you can additionally remove partition (vertical lines) between the empty column and the previous/next one by assigning classes: "noVerticalLines" to the previous column. You can define CSS for the class "noVerticalLines" like below

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

The demo shows all the possibilities:

UPDATED: You can use additionally the tricks from the answer. If you define for example CSS

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

and add "noHorizLines" class to the column "empty1"

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

you will get the following results

(see the demo).

Additionally, if you get the data from the server, it could be required to add one more empty string "" in the array of the data returned from the server. It's better to do such insertion of empty string on the client side instead of modifying the server code. So I recommend you to use beforeProcessing for the purpose. You can just enumerate items returned from the server and insert empty string using splice function.

这篇关于如何在jqGrid中的列之间插入垂直空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！