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

2021/01/19 05:31 · jquery ·  · 0评论

是否可以在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.

请注意,它说“不在标题单元格中”。如何为标题单元格(网格标题单元格)执行此操作?该文档没有提及这个小细节。

记录最详细的更改列标题对齐方式是使用setLabeljqGrid方法(请参阅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'的名称是因为您无法定义colNamesjqGrid的参数,但可以使用中的附加'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'扩展Column-Model,将其显示为工具提示标题,如下所示:

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

查看源代码以找出网格所引用的css,然后可以尝试以下操作:

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

您可以简单地将align属性添加到ColModel中的Column中:

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

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

有关更多详细信息,请参见上可能的其他功能jqGrid

本文地址:http://jquery.askforanswer.com/jquery-jqgrid-ruheshezhiwanggebiaotidanyuangededuiqifangshi.html
文章标签: ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!