jqgrid: Cómo establecer la clase css específica de la celda en el momento de la generación

Estoy construyendo una jqgrid que necesita diferentes valores de fondo (o, en general, una clase CSS diferente) para celdas específicas. Sé qué células necesitan la clase aplicada en el momento de la generación de los datos que se envían a jqgrid. Lo que me gustaría es poder indicar una clase dentro de la estructura de filas jqgrid para cada celda específica:

        1.00 15.00 9.00 …   1.00 2.00 1.15 …  …  

Sé que puedo hacer este formateo después de enviar los datos, pero me gustaría ver la cuadrícula dibujada con el formato en lugar de después.

He logrado algo así como lo que quiero al configurar usando una etiqueta dentro de la celda:

 3.00 

Pero no establece la clase para toda la celda, solo datos dentro, con solo el texto resaltado y no toda la celda.

Me interesa tu pregunta, así que hice la demostración por ti.

enter image description here

Si desea establecer algunos atributos personalizados en las celdas de la cuadrícula (elementos

) como class , title , colspan , style , el cellattr es la mejor manera de hacerlo (vea aquí para más detalles). cellattr está cerca de la función de formateador personalizado , pero permite definir los atributos de la celda y no la celda que contiene.

En la demostración utilicé la siguiente entrada XML:

   112  1.00 15.00 9.00   1.00 2.00 1.15   

y el cellattr como el siguiente

 cellattr: function () { var c = $('cell:eq(1)', arguments[2]).attr('class'); return c ? " class='" + c + "'": ""; } 

En el caso, el atributo ‘clase’ de la segunda celda (‘: eq (1)’) se usará para el formateo.

Desde el punto de vista del diseño, recomendaría que no use los nombres de clase directamente como los atributos. Un atributo alternativo como format="error" que se convertirá como class='ui-state-error' tiene algunas ventajas. Podría hacer que la separación de la información, como los consejos de formato de la instrucción HTML directa.

Utilizando la respuesta de Oleg, armé y probé lo siguiente para mi situación usando un colModel creado dinámicamente (colM):

 for each (var colModelItem in colM) { colModelItem.cellattr = function (rowId, val, rawObject, cm, rdata){ var pos = findColModelInList(cm, colM); var srchText = 'cell:eq(' + pos + ')'; var c = jQuery(srchText, arguments[2]).attr('class'); return c ? " class='" + c + "'": ""; }; } 

dónde

 function findColModelInList(colModel, modelList) { var index = 0; var retval = -1; for each (var modelItem in modelList) { if (modelItem.name == colModel.name) { retval = index; } index++; } return retval; }