Colorize Specific jqGrid Cell Text

by Azim Khan

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="grid"></table>

JavaScript

var data = [
  [1, "1010", "", "02200220", "Bad/Good/Good/Bad"], 
  [2, "2020", "", "77733337", "Good/Bad/Good/Bad"]];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['ID', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'thingy',
        index: 'thingy',
        width: 90,
        sorttype: "date"
    },
    {
        name: 'blank',
        index: 'blank',
        width: 30},
    {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float"},
    {
        name: 'status',
        index: 'status',
        formatter:colorFormatter}
    ],
    caption: "Change color",
});

var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}

function colorFormatter (cellvalue, options, rowObject)
{
   var data = cellvalue.split('/');
   var length = data.length; 
   var new_format_value='', text, color, separator='/'; 
    
    for(var i=0; i<length; i++) {
      text=data[i];     
      text=='Good'?
          color='style="color:green;"':
          color='style="color:red;"';
      if(i==length-1) separator='';    
      
       new_format_value+='<span '+color+'>'+text+'</span>'+separator;
   }
    
   return new_format_value
}