Jquery JQGrid - Wie wird die Ausrichtung von Grid-Header-Zellen festgelegt?

Ist es möglich, Grid-Spaltenüberschriften in jqgrid auszurichten? zB nach links rechts oder Mitte ausrichten?Jquery JQGrid - Wie wird die Ausrichtung von Grid-Header-Zellen festgelegt?

In den jqrid Dokumente 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 es heißt "nicht in der Header-Zelle". Wie kann ich das für die Header-Zelle (Rastertitelzelle) tun? Die Dokumentation versäumt, dieses kleine Detail zu erwähnen.

Quelle

2010-06-09 JK.

Die besten dokumentierten Weg Spaltenkopf Ausrichtung zu ändern, ist die Verwendung von setLabel Methode von jqGrid (siehe http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods).

Sie können die Ausrichtung der von 'name': 'Name' mit dem folgenden Code identifiziert Spalt ä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 den Header-Namen zu ‚Produktnamen‘ und setzen Sie ändern kann " Meine QuickInfo für den Produktnamen Spaltenkopf 'als QuickInfo für die entsprechende Spaltenüberschrift.

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

Durch die Art und Weise der Name der Funktion ‚setLabel‘ choosed ist, weil Sie nicht colNames Parameter des jqGrid definieren kann, aber verwenden, um zusätzliche 'label' Option im colModel einen Spaltenkopf andere als 'name' Wert zu definieren.

AKTUALISIERT: Sie können Klassen verwenden, um 'text-align' oder 'padding' zu definieren. Folgende Versuche mal

.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');

(I 5px als Polsterung definiert Ergebnisse besser zu sehen. Sie können die Polsterung Wert wählen, die Sie besser in Ihrem Fall finden).

Quelle

2010-06-09 14:38:21 Oleg

Dank - {'text-align': 'richtig'} funktioniert, aber ich würde lieber eine CSS-Klasse verwenden. Hinzufügen eines CSS mit .jqGrid ('setLabel', 'Name', '', 'css-class-name'); hat nicht funktioniert - ist das die falsche Syntax? –

Tatsächlich platziert {'text-align': 'left'} den Header-Text zu hart nach links: Er berührt die Gitterlinie. Ich habe versucht: {'text-align': 'left', 'padding-left': '1px'}, aber das hat die Gitterlinie am Ende der Zelle ebenfalls um 1px verschoben. Ich möchte nur, dass meine Header die gleiche Ausrichtung wie die Datenzellen haben. –

kann dies in der Spaltenmodelldefinition getan werden? – Jake

Gehen Sie einfach zu Ihrem CSS-Datei Ihres jqgrid.

sucht:

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

Und die text-align ändern.

Ich habe es nicht gefunden mit regelmäßigen Optionen.

Ich hoffe, das wird Ihnen helfen.

Bruno

Quelle

2010-06-09 07:31:01 bruno

Dies wird die Ausrichtung der einzelnen Header-Zelle ändern, die nicht nützlich ist. Die Header müssen dieselbe Ausrichtung wie die Datenzellen haben. –

Ausgezeichnete Antwort :) –

Bitte versuchen Sie diese

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

Quelle

2013-12-04 06:39:34

die Quelle finden Sie in der CSS, um herauszufinden, dass Ihr Netz zu beziehen und dann können Sie dies versuchen:

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

Quelle

2014-03-11 04:55:52 user3404584

Während die ‚setLabel‘ Methode scheint machbar, ich möchte immer meine Header-Zellen auf die gleiche Weise wie die Zellen ausgerichtet haben. So verwende ich nur 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} : {})); 
    } 
}

Dies verwendet die Ausrichtung der Zellen, die den Kopf auszurichten. Um wie folgt aufgerufen werden:

pimpHeader(jQuery("#grid"));

Wenn Sie möchten, können Sie Ihre Column-Modell mit 'titletext' erstrecken kann, die als Tooltip-Header angezeigt wird, etwa so:

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

Quelle

2016-01-30 12:27:41 Stefan

-1

Sie die align Attribut auf Ihre Spalte in ColModel einfach hinzufügen:

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

Quelle

2017-03-14 13:39:46

Jquery JQGrid - Wie wird die Ausrichtung von Grid-Header-Zellen festgelegt?

Antwort

Verwandte Themen