Jquery JQGrid - 如何设置网格标题单元格的对齐方式? [英] Jquery JQGrid - How to set alignment of grid header cells?

问题描述

是否可以在 jqgrid 中对齐网格列标题?例如左对齐还是居中?

Is it possible to align grid column headers in jqgrid? eg align left right or center?

在 jqrid 文档中 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options 它说:

In the jqrid documents http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options it says:

align: Defines the alignment of the cell in the Body layer, not in header cell. 
Possible values: left, center, right.

请注意，它说不在标题单元格中".如何为标题单元格(网格标题单元格)执行此操作?文档没有提到这个小细节......

Note that it says "not in the header cell". How can I do this for the header cell (grid title cell)? The documentation fails to mention this little detail....

推荐答案

更改列标题对齐的最佳记录方法是使用 jqGrid 的 setLabel 方法(参见 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods).

The best documented way to change column header alignment is the usage of setLabel method of jqGrid (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods).

您可以使用以下代码更改由 'name': 'Name' 标识的列的对齐方式:

You can change alignment of the column identified by 'name': 'Name' with the following code:

grid.jqGrid ('setLabel', 'Name', '', {'text-align':'right'});

附上代码

grid.jqGrid ('setLabel', 'Name', 'Product Name', {'text-align':'right'},
             {'title':'My ToolTip for the product name column header'});

您可以将标题名称更改为产品名称"，并将产品名称列标题的我的工具提示"设置为相应列标题的工具提示.

you can change the header name to 'Product Name' and set 'My ToolTip for the product name column header' as a tool tip for the corresponding column header.

您还可以在 CSS 中定义一些类，并根据 setLabel 方法为列标题设置它.

You can also define some classes in your CSS and set it for the column headers also with respect of setLabel method.

顺便选择函数'setLabel'的名字是因为你不能定义jqGrid的colNames参数，而是在'label'colModel 将列标题定义为 'name' 值.

By the way the name of the function 'setLabel' is choosed because you can not define colNames parameter of the jqGrid, but use additional 'label' option in the colModel to define a column header other as the 'name' value.

更新:您可以使用类来定义 'text-align' 或 'padding'.只需尝试关注

UPDATED: You can do able to use classes to define 'text-align' or 'padding'. Just try following

.textalignright { text-align:right !important; }
.textalignleft { text-align:left  !important; }
.textalignright div { padding-right: 5px; }
.textalignleft div { padding-left: 5px; }

和

grid.jqGrid ('setLabel', 'Name', '', 'textalignright');
grid.jqGrid ('setLabel', 'Description', '', 'textalignleft');

(我将 5px 定义为填充以更好地查看结果.您可以选择您会发现更好的填充值).

(I defined 5px as the padding to see results better. You can choose the padding value which you will find better in your case).

这篇关于Jquery JQGrid - 如何设置网格标题单元格的对齐方式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！