jqGrid: Wie Zelle ändern padding

Question

Ich verwende jqGrid3.6.5 auf Google gehostete jQueryUI1.8.2 und jQuery1.4.2

ich die Zelle Appretur eines jqGrid ändern möchten. Zu Testzwecken möchte ich es um jede Zelle herum auf 10px setzen.

Die einzige Option, die ich kenne, während Googeln ist die folgende:

1. Add Polsterung mit CSS. z.B. #grid-id td, #grid-id th { padding:10px; }
2. gesetzt cellLayout Option bis 21 (paddingLeft + paddingRight + borderleft)

Wenn ich keine feste Breite auf eine der Spalten in meinem colModel haben, das ist wie erwartet funktioniert. Wenn ich die Größe eines der Header ändere oder im colModel eine Spaltenbreite festlege, werden Header und Zellen nicht mehr ausgerichtet.

Wer weiß, wie man das repariert oder eine alternative Methode zur Änderung der Zellauffüllung kennt?

Answer 1

ich die Lösung gefunden zu haben und bin ein wenig beschämt zu finden, es nicht früher: P

Offenbar die Raster Header SIND aber nicht in der gleichen Tabelle wie das Gitter selbst. Also durch Ändern von #grid-id th {...} zu body .ui-jqgrid .ui-jqgrid-htable th {...} habe ich es wie erwartet funktionieren.

Answer 2

Entsprechend der jqGrid developer ist die cellLayout Option der bevorzugte Weg. Leider ist die documentation ein bisschen kryptisch:

Diese Option bestimmt die Padding + Rahmenbreite der Zelle. Normalerweise sollte dies nicht geändert werden, aber wenn benutzerdefinierte Änderungen am td-Element in der CSS-Datei vorgenommen werden, muss dies geändert werden. Der Anfangswert von 5 bedeutet paddingLef⇒2 + paddingRight⇒2 + borderLeft⇒1 = 5

Answer 3

Ich fand schließlich heraus, wie man das Auffüllen zum jqGrid th und td richtig einstellt. Dies ist meine Lösung:

1.Override .ui-jqgrid .ui-jqgrid-htable th div CSS-Klasse

.ui-jqgrid .ui-jqgrid-htable th div { padding: 10px; } 

NICHT Polsterung an den der .ui-jqgrid .ui-jqgrid-htable th Klasse hinzufügen Sie.

2.Nachdem Sie die oben genannten Schritte ausgeführt haben, können Sie der Datenzeile jqgrid einen Abstand hinzufügen.

Answer 4

Ich löste einen ähnlichen Fall, indem ich den Inhalt in jeder Zelle mit einem div umwickelte, das wiederum gepolstert wurde. Es wird Ihnen ein korrektes Verhalten geben, da die Spalte mit den Stakes an Ihrer jqgrid-Konfiguration fixiert ist.

$("tr.jqgrow td").each(function(){ 
    $(this).wrapInner("<div class=\"cell\"/>") 
}) 

Und gestylt die div.cell wie diese (.sass).

table td .cell 
    padding-left: 8px 
    padding-right: 8px 

Answer 5

eine neue CSS-Klasse zu den Spalten hinzufügen, die Sie Stil benötigen:

$("#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 Code-Schnipsel.

dann die Spalten mit CSS-Style !important mit diesen Regeln die höchste Priorität geben:

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

Es funktioniert für mich in jqGrid 4.5.4 ohne Spalte Redimensionierung Probleme.

Answer 6

tr.jqgrow td { padding: 0px 2px 0px !important; } 

Dadurch wird Zellauffüllung für Header- und Inhaltszellen erstellt.