webentwicklung-frage-antwort-db.com.de

Jquery JQGrid - Wie kann ich die Ausrichtung der Gitterkopfzeilen festlegen?

Ist es möglich, Spaltenkopfzeilen in jqgrid auszurichten? zB links rechts ausrichten oder zentrieren?

In den jqrid-Dokumenten http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options heißt es:

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

Beachten Sie, dass "nicht in der Kopfzeile" steht. Wie mache ich das für die Kopfzelle (Rastertitelzelle)? In der Dokumentation wird dieses kleine Detail nicht erwähnt.

23
JK.

Die beste dokumentierte Methode zum Ändern der Spaltenkopf-Ausrichtung ist die Verwendung der setLabel-Methode von jqGrid (siehe http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods ).

Sie können die Ausrichtung der durch 'name': 'Name' identifizierten Spalte mit dem folgenden Code ändern:

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

Mit dem Code 

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

sie können den Headernamen in 'Product Name' ändern und 'My ToolTip' für die Spaltenüberschrift des Produktnamens 'als QuickInfo für die entsprechende Spaltenüberschrift festlegen.

Sie können auch einige Klassen in Ihrem CSS definieren und für die Spaltenüberschriften auch in Bezug auf die setLabel-Methode festlegen.

Übrigens wird der Name der Funktion 'setLabel' gewählt, da Sie den Parameter colNames des jqGrid nicht definieren können. Verwenden Sie jedoch die zusätzliche Option 'label' in der Variable colModel, um einen anderen Spaltenkopf als den Wert 'name' zu definieren.

AKTUALISIERT: Sie können Klassen verwenden, um 'text-align' oder 'padding' zu definieren. Versuchen Sie es einfach mit

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

und

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

(Ich habe 5px als Auffüllung definiert, um die Ergebnisse besser zu sehen. Sie können den Auffüllwert auswählen, den Sie in Ihrem Fall besser finden werden).

23
Oleg

Gehen Sie einfach zu Ihrer CSS-Datei von Ihrem Jqgrid.

Suchen:

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

Und ändern Sie die Textausrichtung.

Ich habe es nicht mit regulären Optionen gefunden.

Ich hoffe, dies wird dir helfen.

Bruno

6
bruno

Bitte versuchen Sie das 

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

Die Verwendung der 'setLabel'-Methode erscheint zwar machbar, aber ich möchte, dass meine Kopfzellen immer auf dieselbe Weise wie die Zellen ausgerichtet werden. Daher benutze ich diese Funktion:

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

Dabei wird die Ausrichtung der Zellen verwendet, um die Kopfzeile auszurichten.

pimpHeader(jQuery("#grid"));

Wenn Sie möchten, können Sie Ihr Spaltenmodell mit 'titletext' erweitern, der als Tooltip-Header angezeigt wird:

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

Sie können einfach das Attribut align zu Ihrer Spalte in ColModel hinzufügen:

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

sehen Sie sich die Quelle an, um die CSS herauszufinden, auf die sich Ihr Grid bezieht Dann können Sie Folgendes versuchen:

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