jqGrid: come modificare l'imbottitura cellulare

Sto utilizzando jqGrid3.6.5 su google ospitato jQueryUI1.8.2 e jQuery1.4.2

Voglio cambiare l'imbottitura cellulare di un jqGrid. Per scopi di prova voglio impostarla a 10px intorno a each cella.

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

  1. aggiungere imbottitura con CSS. per esempio. #grid-id td, #grid-id th { padding:10px; }
  2. impostare cellLayout opzione cellLayout a 21 (paddingleft + paddingright + borderleft)

Quando non ho alcuna width impostata su nessuna delle colonne del mio colModel, questo funziona come previsto. Anche se ridimensionare una delle intestazioni o impostare una width di colonna nel colModel, le intestazioni e le celle non sono più allineate.

Chiunque sa saperlo risolvere o conosce un modo alternativo per modificare l'imbottitura cellulare?

Aggiungere una nuova class CSS alle colonne che devi creare:

 $("#dataTable").jqGrid({ ... colModel:[ {name:"name",index:"name", width:600, align:"left", classs:"grid-col"}, {name:"price",index:"price", width:100, align:"right", classs:"grid-col"} ], ... }); 

classs:"grid-col" nota classs:"grid-col" in questo snippet.

Quindi definire le colonne con CSS utilizzando !importnt per dare a queste regole la massima priorità:

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

Funziona per me in jqGrid 4.5.4 senza problemi di ridimensionamento della colonna .

Secondo lo sviluppatore jqGrid , l'opzione cellLayout è il modo preferito. Purtroppo la documentazione è un po 'criptica:

Questa opzione determina l'imbottitura + width del bordo della cella. Di solito questo non dovrebbe essere modificato, ma se le modifiche personalizzate all'elemento td vengono eseguite nel file css della griglia, questo deve essere modificato. Il valore iniziale di 5 significa paddingLef⇒2 + paddingRight⇒2 + borderLeft⇒1 = 5

Ho trovato la soluzione e sono un po 'vergognoso di non trovarlo prima: P

A quanto pare le intestazioni della griglia sono TH, ma non nello stesso tavolo della griglia stessa. Così cambiando #grid-id th {...} al body .ui-jqgrid .ui-jqgrid-htable th {...} Ho funzionato come previsto.

Ho risolto un caso simile, avvolgendo il contenuto in each cella con un div che io a sua volta sono imbottito. Ti darà un comportmento corretto poiché la colonna rimarrà fissata alla configuration jqgrid.

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

E ha designato la div.cell come questo (.sass).

 table td .cell padding-left: 8px padding-right: 8px 
  tr.jqgrow td { padding: 0px 2px 0px !importnt; } 

Questo creerà imbottiture per celle di intestazione e di contenuto.

Ho finalmente capito come impostare l'imbottitura al jqGrid th e td correttamente. Questa è la mia soluzione:

1.Override .ui .ui-jqgrid .ui-jqgrid-htable th div class .ui-jqgrid .ui-jqgrid-htable th div css

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

NON aggiungere un riempimento alla class .ui-jqgrid .ui-jqgrid-htable th .

2.After aver fatto quanto sopra, è ansible aggiungere l'imbottitura alla row dati jqgrid.

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