Comment puis-je modifier la couleur d'arrière-plan d'une cellule dans un formateur personnalisé jqgrid?

Question

je peux changer la couleur du texte en faisant cela dans formatter jqGrid personnalisé:

function YNFormatter(cellvalue, options, rowObject) 
{ 
    var color = (cellvalue == "Y") ? "green" : "red"; 
    var cellHtml = "<span style='color:" + color + "' originalValue='" + 
           cellvalue + "'>" + cellvalue + "</span>"; 

    return cellHtml; 
} 

mais je veux changer maintenant la couleur d'arrière-plan de la cellule entière (au lieu de la couleur du texte).

Est-ce possible?

Answer 1

Si vous voulez utiliser l'élément <span> à l'intérieur de la formatter cellulaire personnalisée, vous pouvez retourner dans le formatter personnalisé

return '<span class="cellWithoutBackground" style="background-color:' + 
     color + ';">' + cellvalue + '</span>'; 

où le style de span.cellWithoutBackground vous pouvez définir par exemple comme suit

span.cellWithoutBackground 
{ 
    display:block; 
    background-image:none; 
    margin-right:-2px; 
    margin-left:-2px; 
    height:14px; 
    padding:4px; 
} 

Comment ça marche, vous pouvez voir en direct here:

mise à jour: La réponse est ancienne. La meilleure pratique consiste à utiliser le rappel cellattr dans colModel au lieu des formateurs personnalisés d'utilisation. La modification de la couleur d'arrière-plan de la cellule attribue généralement l'attribut style ou class aux cellules de la colonne (<td> éléments). Le rappel cellattr défini dans la colonne colModel permet exactement de le faire. On peut toujours utiliser formateurs prédéfinis comme formatter: "checkbox", formatter: "currency", formatter: "date" et ainsi de suite, mais toujours changer la couleur de fond dans la colonne. De la même manière, le rappel rowattr, qui peut être défini comme l'option jqGrid (en dehors de la colonne spécifique de colModel), permet d'affecter style/classe de la ligne entière (<tr> éléments).

Plus d'informations sur cellattr peuvent être trouvés here et here, par exemple. Another answer explique rowattr.

Answer 2

Ici

$("#cell").setCell(Row , Column, Value, { background: '#888888'}); 

En fait, vous même pas besoin formatter personnalisé, si vous avez l'intention juste de le faire pour le réglage des couleurs. Vous pouvez même définir la valeur de couleur d'ici comme,

var color = (Value == "Y") ? "green" : "red"; 
$("#cell").setCell(Row , Column, Value, { background: '#888888', color: color}); 

Bonne programmation.

Answer 3

Voici ce que je faisais:

jQuery("#grid_id").jqGrid({ 
    ... 
     colModel: [ 
      ... 
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:myFmatter}, 
      ... 
     ], 
     afterInsertRow: function(rowId, data) 
     { 
      $("#grid_id").setCell(rowId, 'price', '', {'background-color':'#' + data.colorHEX}); 
     } 
... 
});