Jquery JQGrid - 如何设置网格标题单元格的对齐方式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3003187/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery JQGrid - How to set alignment of grid header cells?
提问by JK.
Is it possible to align grid column headers in jqgrid? eg align left right or center?
是否可以在 jqgrid 中对齐网格列标题？例如左对齐或居中对齐？
In the jqrid documents http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_optionsit says:
在 jqrid 文件http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options它说：
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....
请注意，它说“不在标题单元格中”。如何为标题单元格（网格标题单元格）执行此操作？文档没有提到这个小细节......
采纳答案by Oleg
The best documented way to change column header alignment is the usage of setLabelmethod of jqGrid (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods).
更改列标题对齐的最佳记录方法是使用setLabeljqGrid的方法（请参阅http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods）。
You can change alignment of the column identified by 'name': 'Name'with the following code:
您可以'name': 'Name'使用以下代码更改标识的列的对齐方式：
grid.jqGrid ('setLabel', 'Name', '', {'text-align':'right'});
With the code
随着代码
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.
您可以将标题名称更改为“产品名称”并将“产品名称列标题的我的工具提示”设置为相应列标题的工具提示。
You can also define some classes in your CSS and set it for the column headers also with respect of setLabelmethod.
您还可以在 CSS 中定义一些类，并在setLabel方法方面为列标题设置它。
By the way the name of the function 'setLabel' is choosed because you can not define colNamesparameter of the jqGrid, but use additional 'label'option in the colModelto define a column header other as the 'name'value.
顺便说一下，选择函数 'setLabel' 的名称是因为您不能定义colNamesjqGrid 的参数，而是使用附加'label'选项colModel来定义列标题其他作为'name'值。
UPDATED: You can do able to use classes to define 'text-align'or 'padding'. Just try following
更新：您可以使用类来定义'text-align'或'padding'。试试看
.textalignright { text-align:right !important; }
.textalignleft { text-align:left !important; }
.textalignright div { padding-right: 5px; }
.textalignleft div { padding-left: 5px; }
and
和
grid.jqGrid ('setLabel', 'Name', '', 'textalignright');
grid.jqGrid ('setLabel', 'Description', '', 'textalignleft');
(I defined 5px as the padding to see results better. You can choose the padding value which you will find better in your case).
（我将 5px 定义为填充以更好地查看结果。您可以选择在您的情况下会更好的填充值）。
回答by bruno
Just go to your css file of your jqgrid.
只需转到 jqgrid 的 css 文件即可。
Look for:
寻找：
ui-th-column,.ui-jqgrid .ui-jqgrid-htable th.ui-th-column
{overflow:hidden;white-space:nowrap;text-align:center; ...
And change the text-align.
并更改文本对齐。
I didn't find it eather with regular options.
我没有发现它有常规选择。
I hope this will help you.
我希望这能帮到您。
Bruno
布鲁诺
回答by Shailesh R
Please try this
请试试这个
loadBeforeSend: function () {
$(this).closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable>thead>tr>th").css("text-align", "left");
}
回答by Stefan
While using the 'setLabel' method seems feasible, I always want to have my header-cells aligned the same way as the cells. So I just use this function:
虽然使用 'setLabel' 方法似乎可行，但我总是希望我的标题单元格与单元格的对齐方式相同。所以我只使用这个函数：
function pimpHeader(gridObj) {
var cm = gridObj.jqGrid("getGridParam", "colModel");
for (var i=0;i<cm.length;i++) {
gridObj.jqGrid('setLabel', cm[i].name, '',
{'text-align': (cm[i].align || 'left')},
(cm[i].titletext ? {'title': cm[i].titletext} : {}));
}
}
This uses the alignment of the cells to align the header. To be called like this:
这使用单元格的对齐方式来对齐标题。被这样称呼：
pimpHeader(jQuery("#grid"));
If you want, you can extend your Column-Model with 'titletext', which is shown as a tooltip-header, like so:
如果需要，您可以使用“titletext”扩展列模型，它显示为工具提示标题，如下所示：
colModel: [{ name: 'name', label: 'Name', align: 'right', titletext: 'Name-Tooltip'}, ...]
回答by Mehdi Souregi
You can simply add the alignattribute to your Column in ColModel:
您可以简单地将align属性添加到 ColModel 中的列：
colModel: [
{name: 'MyColumn', index: 'MyColumn', align: 'center'}
],
回答by user3404584
see the source to find out the css that your grid refer to and then you can try this:
查看源代码以找出您的网格引用的 css，然后您可以尝试以下操作：
setTimeout(function(){
jQuery('.ui-th-column').css('text-align','center');
},1);
