jqGrid: cómo cambiar el relleno de celdas

Question

que estoy usando jqGrid3.6.5 en Google organizadas jQueryUI1.8.2 y jQuery1.4.2

que quieren cambiar el relleno de las celdas de un jqGrid. Para propósitos de prueba, quiero configurarlo a 10px alrededor de cada celda.

La única opción que he encontrado mientras que buscando en Google es la siguiente: el acolchado

1. complemento con CSS. p.ej. #grid-id td, #grid-id th { padding:10px; }
2. establecer cellLayout opción de 21 (+ paddingLeft paddingRight + borderleft)

Cuando no tengo ni ancho establecido en cualquiera de las columnas en mi colModel, esto funciona como se esperaba. Sin embargo, cuando cambio el tamaño de uno de los encabezados o establezco un ancho de columna en el colModel, los encabezados y las celdas ya no están alineados.

¿Alguien sabe cómo solucionar esto o conoce una forma alternativa de alterar el relleno de células?

Answer 1

he encontrado la solución y soy un poco de vergüenza de no encontrar más pronto paddingLef⇒2: P

Al parecer, los encabezados de cuadrícula ARE TH's pero no están en la misma mesa que la grilla en sí. Cambiando #grid-id th {...} a body .ui-jqgrid .ui-jqgrid-htable th {...}, lo puse a funcionar como esperaba.

Answer 2

De acuerdo con jqGrid developer, la opción cellLayout es la opción preferida. Desafortunadamente el documentation es un poco críptico:

Esta opción determina el relleno + el ancho del borde de la celda. Por lo general, esto no debe modificarse, pero si se realizan cambios personalizados en el elemento td en el archivo css de la cuadrícula, esto tendrá que cambiarse. El valor inicial de 5 significa + paddingRight⇒2 + borderLeft⇒1 = 5

Answer 3

Finalmente descubrí cómo configurar correctamente el relleno en jqGrid th y td. Esta es mi solución:

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

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

no agregue el relleno a la de la clase .ui-jqgrid .ui-jqgrid-htable th.

2.Después de haber hecho lo anterior, puede agregar relleno a la fila de datos jqgrid.

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

Answer 4

Resolví un caso similar envolviendo el contenido de cada celda con un div que a su vez rellenaba. Le dará un comportamiento correcto ya que la columna con permanece fija a su configuración jqgrid.

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

Y diseñó la div.cell como esta (.sass).

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

Answer 5

Agregar una nueva clase CSS a las columnas que debe tener en el estilo:

$("#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" en este fragmento.

A continuación, el estilo de las columnas con CSS usando !important para dar estas reglas la más alta prioridad:

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

Funciona para mí en jqGrid 4.5.4 sin problemas de la columna de cambio de tamaño.

Answer 6

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

Esto creará relleno de celda para el encabezado y las celdas de contenido.