jquery - full - jqGrid con colores de celda personalizados

jqgrid search example

Question

¿Es posible en jqGrid (jquery grid http://www.trirand.com/blog/ ) tener colores de texto de celda personalizados, por ejemplo, en la columna de precios quiero rojo si el precio es> 100 $ y verde si el precio es <50 $ else gris?

En general, hacer

1. jqGrid proporciona ganchos para cambiar la vista de celda de la grilla, por ejemplo, puedo registrar una devolución de llamada cuando se crean o modifican las celdas de la columna de precios.

2. o es posible tener un modelo y una vista por separado (lado del cliente), por ejemplo, desde el servidor, puedo enviar dos datos para cada fila, es decir, cómo mostrar y qué mostrar

Editar: así que aquí hay un ejemplo que muestra el formateador de muestra, que colorea la celda en función del valor

function infractionInFormatter(el, cellval, opts)
{
    $(el).html(cellval).css(''color'',infraction_color_map[cellval]);
}

colModel :[ 
    ...
    {name:''date'', index:''date'', width:120, date:true}, 
    {name:''inf_out'', index:''inf_out'', width:60, formatter:infractionInFormatter,},
    ...
],

Answer 1

Si tu puedes hacerlo. Escribe un formateador personalizado . Esta es solo una función a la que hace referencia en su colModel. Obtiene una referencia al selector de celda final en la función, por lo que cualquier cosa que pueda hacer con jQuery lo puede hacer en un formateador. Incluyendo cambiar el color / estilo.

Answer 2

Establecería un color de fondo rojo si una celda tiene un valor xxx, sino un fondo verde si el valor es yyy.

He escrito este código:

.....
colModel:[
    {name:''id'',index:''id'', width:15,hidden:true, align:"center"},
    {name:''title'',index:''title'', width:150, align:"center"},
    {name:''start'',index:''start'', width:350, align:"center", sorttype:"date"},
    {name:''fine'',index:''fine'', width:350, align:"center", sorttype:"date"},
    {name:''completed'',index:''completed'', width:120, align:"center",formatter:infractionInFormatter},        
    ],
.....

Y esta función como tu ejemplo:

function infractionInFormatter(el, cellval, opts)
        {
            .....
        }

¿Cómo tengo que configurarlo?

Muchas gracias.

Answer 3

También puede especificar la clase en colModel:

colModel: [
           {
            name:''field_x'', 
            index:''field_x'',  
            align: ''left'',  
            width:  35, 
            classes: ''cvteste''
           },
          .....
          ]