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

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

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

Answer 2

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

Найдите:

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

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

Я не нашел егоeather с обычными опциями.

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

Bruno

Answer 3

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

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

Answer 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'}, ...]

Answer 5

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

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

Answer 6

см. Источник, чтобы узнать CSS, к которому относится ваша сетка, а затем вы можете попробовать это: