jquery jqgrid-如何设置网格头单元格的对齐方式?

更改列标题对齐方式的最好记录方法是使用 setLabel jqgrid方法(见 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'});

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

您还可以在CSS中定义一些类,并为列标题设置它 设置标签 方法。

另外,选择函数“setlabel”的名称是因为无法定义 colNames jqgrid的参数,但使用附加的 '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作为填充,以便更好地查看结果。您可以选择填充值,在这种情况下会发现更好的填充值)。

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

寻找:

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

并更改文本对齐方式。

我没有发现它有固定的选择。

我希望这对你有帮助。

布鲁诺

请试试这个

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

虽然使用“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} : {}));
    }
}

这将使用单元格的对齐方式来对齐页眉。 这样称呼:

pimpHeader(jQuery("#grid"));

如果需要,可以使用“titleText”扩展列模型,它显示为工具提示标题,如下所示:

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

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

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

您可以简单地添加 排列 colmodel中列的属性:

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