jqGrid: come cambiare imbottitura cella

Question

sto usando jqGrid3.6.5 su google ospitati jQueryUI1.8.2 e jQuery1.4.2

voglio cambiare l'imbottitura cella di un jqGrid. A scopo di test, voglio impostarlo su 10px su ogni cella.

L'unica opzione che ho incontrato mentre googling è il seguente: imbottitura

1. add con i CSS. per esempio. #grid-id td, #grid-id th { padding:10px; }
2. impostare cellLayout opzione per 21 (paddingLeft + paddingRight + borderleft)

Quando ho larghezza impostata su una delle colonne nel mio colModel, questo funziona come previsto. Anche se ridimensiono una delle intestazioni o imposta una larghezza di colonna nel colModel, le intestazioni e le celle non sono più allineate.

Qualcuno sa come risolvere questo problema o conosce un modo alternativo per modificare il riempimento delle celle?

Answer 1

ho trovato la soluzione e sono un po 'di vergogna di non trovarlo più presto: P

A quanto pare le intestazioni della griglia SIAMO, ma non nella stessa tabella della griglia stessa. Quindi, modificando #grid-id th {...} a body .ui-jqgrid .ui-jqgrid-htable th {...}, ho funzionato come previsto.

Answer 2

In base allo , l'opzione cellLayout è il metodo preferito. Sfortunatamente lo documentation è un po 'criptico:

Questa opzione determina il riempimento + larghezza del bordo della cella. Di solito questo non dovrebbe essere cambiato, ma se le modifiche personalizzate all'elemento td sono fatte nel file css della griglia, questo dovrà essere cambiato. Il valore iniziale di 5 significa paddingLef⇒2 + paddingRight⇒2 + borderLeft⇒1 = 5

Answer 3

Ho finalmente capito come impostare correttamente il padding su jqGrid e td. Questa è la mia soluzione:

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

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

non aggiungono padding alla classe il .ui-jqgrid .ui-jqgrid-htable th.

2.Dopo aver eseguito quanto sopra, è possibile aggiungere il riempimento alla riga di dati jqgrid.

.ui-jqgrid tr.jqgrow td{ 
    height: auto; 
    white-space: normal; 
    padding: 10px; 
} 

Answer 4

ho risolto un caso simile avvolgendo il contenuto di ciascuna cella con un div quale a sua volta imbottito. Ti darà un comportamento corretto poiché la colonna con rimane fissa alla tua configurazione di jqgrid.

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

E designato il div.cell come questo (.sass).

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

Answer 5

aggiungere una nuova classe CSS per le colonne che avete bisogno di stile:

$("#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"} 
    ], 

... 

}); 

Nota classes:"grid-col" in questo frammento.

Poi lo stile delle colonne con i CSS utilizzando !important per dare queste regole la massima priorità:

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

Funziona per me in jqGrid 4.5.4 senza problemi ridimensionamento delle colonne.

Answer 6

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

Questo creerà il riempimento delle celle per le celle di intestazione e di contenuto.