2009-04-20 13 views
6

E 'possibile in jqGrid (griglia jquery http://www.trirand.com/blog/) avere colori di testo cella personalizzati, ad es. nella colonna del prezzo voglio rosso se il prezzo> 100 $ e il verde se il prezzo è < 50 $ altrimenti grigio?jqGrid con colori cella personalizzati

Più generalmente

  1. jqGrid fornisce ganci per cambiare CellView griglia, ad esempio Posso registrare una richiamata ogni volta che vengono create o modificate le celle della colonna del prezzo.

  2. oppure è possibile avere un modello e una vista separati (lato client) ad es. dal server posso trasmettere due dati per ogni riga cioè come visualizzare e cosa visualizzare

Edit: ecco un esempio che mostra il formattatore di esempio, che colora la cella basato sul valore

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,}, 
    ... 
], 

risposta

8

Sì, puoi farlo. Scrivi un custom formatter. Questa è solo una funzione alla quale si passa un riferimento nel colModel. Ottieni un riferimento al selettore di celle finale nella funzione, quindi tutto ciò che puoi fare con jQuery puoi farlo in un formattatore. Compreso cambiare il colore/stile.

-1

Vorrei impostare un colore di sfondo rosso se una cella ha valore xxx, altrimenti uno sfondo verde se il valore è yyy.

Ho scritto questo codice:

..... 
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},   
    ], 
..... 

E questa funzione come il tuo esempio:

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

Come devo impostarlo?

Grazie mille.

+1

Questa non è una risposta a tutti. Vai [qui] (http://stackoverflow.com/questions/ask) se vuoi fare una domanda. – FastTrack

2

è anche possibile specificare la classe nella colModel:

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