jqGrid avec des couleurs de cellule personnalisées

Question

Est-il possible dans jqGrid (jquery grid http://www.trirand.com/blog/) d'avoir des couleurs de texte de cellule personnalisées, par ex. dans la colonne des prix je veux rouge si prix> 100 $ et vert si prix < 50 $ sinon gris?

Plus généralement pas

1. jqGrid fournit des crochets pour changer la grille CELLview, par exemple Je peux enregistrer un rappel quand des cellules de la colonne de prix sont créées ou modifiées.

2. ou est-il possible d'avoir un modèle et une vue séparés (côté client) par ex. du serveur je peux envoyer deux données pour chaque ligne à savoir comment afficher et quoi afficher

Edit: alors voici un exemple montrant l'formatter échantillon qui colore la cellule basée sur la valeur

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

Oui, vous pouvez le faire. Ecrivez un custom formatter. C'est juste une fonction à laquelle vous passez une référence dans votre colModel. Vous obtenez une référence au sélecteur de cellule final dans la fonction, donc tout ce que vous pouvez faire avec jQuery, vous pouvez le faire dans un formateur. Y compris changer la couleur/le style.

Answer 2

Je définirais une couleur d'arrière-plan rouge si une cellule a une valeur xxx, sinon un arrière-plan vert si la valeur est yyy.

J'ai écrit ce code:

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

Et cette fonction comme votre exemple:

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

Comment je dois le mettre?

Merci beaucoup.

Answer 3

Vous pouvez également spécifier la classe dans le colModel:

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