JQuery JQGrid - Как установить выравнивание ячеек заголовка сетки?

Можно ли выровнять заголовки столбцов сетки в 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.

Обратите внимание, что он говорит "не в ячейке заголовка". Как это сделать для ячейки заголовка (ячейка заголовка сетки)? В документации не упоминается эта небольшая деталь....

Ответы

Ответ 1

Лучшим документированным способом изменения выравнивания заголовка столбца является использование метода 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'});

вы можете изменить имя заголовка на "Имя продукта" и установить "Моя подсказка для заголовка столбца названия продукта" в качестве подсказки для соответствующего заголовка столбца.

Вы также можете определить некоторые классы в своем CSS и установить его для заголовков столбцов также по методу setLabel.

Кстати, имя функции 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 как дополнение, чтобы увидеть результаты лучше. Вы можете выбрать значение дополнения, которое вы найдете лучше в своем случае).

Ответ 2

Просто перейдите в свой файл css вашего jqgrid.

Ищите:

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

И измените выравнивание по тексту.

Я не нашел его с регулярными настройками.

Надеюсь, это поможет вам.

Бруно

Ответ 3

Пожалуйста, попробуйте

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

Ответ 4

Хотя использование метода 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'}, ...]

Ответ 5

см. источник, чтобы узнать, что css ссылается на вашу сетку и затем вы можете попробовать следующее:

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

Ответ 6

Вы можете просто добавить атрибут align в свой столбец в ColModel:

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