Jquery JQGrid - Jak ustawić wyrównanie komórek nagłówka siatki?

Question

Czy można wyrównać nagłówki kolumn siatki w jqgrid? np. wyrównanie w lewo w prawo lub w środku?

W jqrid dokumentów http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options mówi:

align: Defines the alignment of the cell in the Body layer, not in header cell. 
Possible values: left, center, right. 

Zauważ, że mówi "nie w komórce nagłówka". Jak mogę to zrobić dla komórki nagłówka (komórki tytułu siatki)? Dokumentacja nie wspomina o tym małym szczególe ...

Answer 1

Najlepiej udokumentowanym sposobem na zmianę nagłówka ustawienie kolumny jest stosowanie setLabel metody jqGrid (patrz http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods).

Można zmienić ustawienie kolumny zidentyfikowane przez 'name': 'Name' z następującego kodu:

grid.jqGrid ('setLabel', 'Name', '', {'text-align':'right'}); 

Z kodu

grid.jqGrid ('setLabel', 'Name', 'Product Name', {'text-align':'right'}, 
      {'title':'My ToolTip for the product name column header'}); 

można zmienić nazwę nagłówka do „Nazwa” i ustaw ' My ToolTip dla nagłówka kolumny nazwy produktu "jako końcówka narzędzia dla odpowiedniego nagłówka kolumny.

Można również zdefiniować niektóre klasy w CSS i ustawić dla nagłówków kolumn również w odniesieniu do metody setLabel.

Przy okazji nazwa funkcji „” jest setLabel choosed ponieważ nie można zdefiniować colNames parametr jqGrid, ale wykorzystywać dodatkowe 'label' opcję w colModel zdefiniować nagłówek kolumny innego jak wartość 'name'.

ZAKTUALIZOWANY: Możesz używać klas do zdefiniowania 'text-align' lub 'padding'. Wystarczy spróbować następujących

.textalignright { text-align:right !important; } 
.textalignleft { text-align:left !important; } 
.textalignright div { padding-right: 5px; } 
.textalignleft div { padding-left: 5px; } 

i

grid.jqGrid ('setLabel', 'Name', '', 'textalignright'); 
grid.jqGrid ('setLabel', 'Description', '', 'textalignleft'); 

(I zdefiniowane 5px jak padding, aby zobaczyć wyniki lepsze. Można wybrać wartość dopełnienia, który można znaleźć lepsze w Twoim przypadku).

Answer 2

Po prostu przejdź do pliku css twojego jqgrid.

zwrócić uwagę:

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

i zmienić text-align.

Nie znalazłem tego ze zwykłymi opcjami.

Mam nadzieję, że to ci pomoże.

Bruno

Answer 3

Spróbuj tego

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

Answer 4

zobaczyć źródło, aby dowiedzieć się css że siatka odnieść do a następnie można spróbować to:

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

Answer 5

Podczas korzystania z „setLabel” metodę wydaje wykonalne, zawsze chcę, aby moje komórki nagłówkowe były wyrównane w taki sam sposób jak komórki. Więc po prostu skorzystać z tej funkcji:

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

używa wyrównanie komórek, aby wyrównać nagłówek. Aby nazwać tak:

pimpHeader(jQuery("#grid")); 

Jeśli chcesz, możesz przedłużyć swój Column model z 'titletext', który jest pokazany jako podpowiedzi nagłówku, tak:

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

Answer 6

You można po prostu dodać align atrybut do swojej kolumnie w ColModel:

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