Question

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

在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.

请注意，它表示“不在标题单元格中”。如何为标题单元格（网格标题单元格）执行此操作？文档没有提到这个小细节......

Answer 1

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

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

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'});

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

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

顺便说一下，选择函数'setLabel'的名称是因为你不能定义jqGrid的colNames参数，而是在'label'中使用额外的colModel选项来定义列标题，其他为'name'值。

更新：您可以使用类来定义'text-align'或'padding'。试试看

.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定义为填充以更好地查看结果。您可以选择在您的情况下更好找到的填充值。）

Answer 2

只需转到你的jqgrid的css文件。

寻找：

ui-th-column,.ui-jqgrid .ui-jqgrid-htable th.ui-th-column
{overflow:hidden;white-space:nowrap;text-align:center; ...

并更改text-align。

我没有发现常规选项。

我希望这会对你有所帮助。

布鲁诺

Answer 3

请试试这个

loadBeforeSend: function () {
    $(this).closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable>thead>tr>th").css("text-align", "left");
}

Answer 4

使用＆＃39; setLabel＆＃39;方法似乎可行，我总是希望我的标题单元格与单元格对齐方式。所以我只使用这个功能：

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} : {}));
    }
}

这使用单元格的对齐来对齐标题。被称为这样：

pimpHeader(jQuery("#grid"));

如果需要，可以使用＆＃39; titletext＆＃39;扩展Column-Model，它显示为工具提示标题，如下所示：

colModel: [{ name: 'name', label: 'Name', align: 'right', titletext: 'Name-Tooltip'}, ...]

Answer 5

查看源代码，找出网格引用的css 然后你可以试试这个：

setTimeout(function(){
   jQuery('.ui-th-column').css('text-align','center');
},1);

Answer 6

您只需将对齐属性添加到ColModel中的列：

colModel: [
          {name: 'MyColumn', index: 'MyColumn', align: 'center'}
      ],

Answer 7

如果jqGrid表的格式为colModel: [{name: 'ColumnName', index: 'ColumnIndex',...}]，则只需添加参数align: 'center'使其居中对齐即可。

有关更多详细信息，请参见other functionalities possible on jqGrid。

Jquery JQGrid - 如何设置网格标题单元格的对齐方式？

7 个答案: