jqGrid: so ändern Sie Zelle Polsterung

Ich bin mit jqGrid3.6.5 auf google gehostet jQueryUI1.8.2 und jQuery1.4.2

Möchte ich ändern Sie den Textabstand von jqGrid. Für Testzwecke möchte ich es so einrichten, 10px alles rund um jede Zelle.

Ist die einzige option die ich habe über kommen, während googeln ist folgende:

"padding mit CSS. zB. #grid-id td, #grid-id th { padding:10px; }
set cellLayout option 21 (paddingleft + paddingright + borderleft)

Wenn ich keine Breite festlegen auf eine der Spalten in meiner colModel, funktioniert das wie erwartet. Obwohl, wenn ich die Größe eines der Kopfzeilen, oder legen Sie die Spaltenbreite in der colModel, Kopfzeilen und Zellen sind nicht mehr ausgerichtet.

Weiss jemand wie man das beheben kann oder weiß eine alternative Art und Weise zu verändern Textabstand?

InformationsquelleAutor Maurice | 2010-06-10

Fügen Sie eine neue CSS-Klasse zu den Spalten, die Sie brauchen, um Stil:

$("#dataTable").jqGrid({

...

  colModel:[
    {name:"name",index:"name", width:600, align:"left", classes:"grid-col"},
    {name:"price",index:"price", width:100, align:"right", classes:"grid-col"}
  ],

...

});

Hinweis classes:"grid-col" in diesem snippet.

Dann Stil die Spalten mit CSS durch !important geben diese Regeln die höchste Priorität hat:

.grid-col {
  padding-right: 5px !important;
  padding-left: 5px !important;
}

Funktioniert es für mich in jqGrid 4.5.4 mit keine Spalte Größenanpassung Probleme.

InformationsquelleAutor Alexey

2

Entsprechend der jqGrid-Entwickler, die cellLayout option ist die bevorzugte Art und Weise. Leider ist die Dokumentation ist ein bisschen kryptisch:

Diese option bestimmt die padding + border Breite der Zelle. In der Regel sollte dies nicht geändert werden, aber wenn Sie benutzerdefinierte änderungen an td-element sind in der grid-css-Datei das geändert werden muss. Der anfängliche Wert von 5 bedeutet paddingLef⇒2+paddingRight⇒2+borderLeft⇒1=5
- Dies ist, was meine Frage basiert. (und was ich kann nicht wie erwartet funktioniert)
- Hmm... wenn dies ist, was Tony (der Entwickler) empfohlen, dann weiß ich nicht, was anderes zu sagen. Sie müssen möglicherweise ändern Sie jqGrid-Dateien, um diese zu arbeiten.
- Danke für den Hinweis cellLayout aus. Es löste ein ähnliches problem ich hatte.
InformationsquelleAutor Justin Ethier
2

Habe ich die Lösung gefunden und bin ein bisschen schämen, es nicht zu finden früher 😛

Offenbar die grid-Header SIND th ' s, aber nicht in derselben Tabelle wie die raster selbst.
Also durch ändern #grid-id th {...} zu body .ui-jqgrid .ui-jqgrid-htable th {...} ich habe es wie erwartet funktioniert.
- es si nicht genug, um zu ändern, nur th style für einigen Fällen, zum Beispiel für einen Zeilenumbruch, auch Sie müssen gelten die gleichen Stil-Regeln für die Verpackung auf .ui-jqgrid .ui-jqgrid-htable th div..cheers
InformationsquelleAutor Maurice
1

Ich löste ein ähnlicher Fall durch die Verpackung den Inhalt jeder Zelle mit einem div, die ich wiederum gepolstert. Es wird Ihnen ein korrektes Verhalten, da die Spalte bleibt fest auf Ihrem jqgrid-Konfiguration.
```
$("tr.jqgrow td").each(function(){
  $(this).wrapInner("<div class=\"cell\"/>")
})
```
Und Stil der div.Zelle wie dieser (.sass).
```
table td .cell
  padding-left: 8px
  padding-right: 8px
```
InformationsquelleAutor aslakjo
1
```
 tr.jqgrow td { padding: 0px 2px 0px !important; }
```
Wird diese Zelle erstellen-Polsterung für Kopf-und content-Zellen.

InformationsquelleAutor Vishy
0

Habe ich endlich herausgefunden, wie die Polsterung an der jqGrid th und td richtig. Dies ist meine Lösung:

1.Überschreiben .ui-jqgrid .ui-jqgrid-htable th div css-Klasse
```
.ui-jqgrid .ui-jqgrid-htable th div { padding: 10px; }
```
NICHT hinzufügen Polsterung an der die .ui-jqgrid .ui-jqgrid-htable th Klasse.

2.Nachdem Sie das getan haben vor, können Sie das hinzufügen Polsterung an den jqgrid-Daten Zeile.
```
.ui-jqgrid tr.jqgrow td{
     height: auto;
     white-space: normal;
     padding: 10px;
}
```
InformationsquelleAutor schrodinger's code

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.