working jqGrid Example

by Oleg Kiriljuk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.1/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.1/jquery.jqgrid.src.js"></script>
<table id="rowed5"></table>

CSS

.redcells {
    color: white;
    weightfont: bold;
    background-color: red;
    background-image: none;
}
.greencells {
    color: white;
    weightfont: bold;
    background-color: #00B050;
    background-image: none;
}

JavaScript

var mydata=[
    {id:"1",Error_Cells_Count:"1",status:"",note:"",color_name:"PRUPLE",character_name:"Character 1",v_id:"123456"},
    {id:"2",Error_Cells_Count:"1",status:"",note:"",color_name:"PURPLE",character_name:"Character  1",v_id:"234567"},
	{id:"3",Error_Cells_Count:"2",status:"",note:"",color_name:"Pink",character_name:"character 3",v_id:"345678"},
    {id:"4",Error_Cells_Count:"0",status:"",note:"",color_name:"GREEN",character_name:"Character 2",v_id:"456789"}
];
var hilightcolorcell=["PURPLE","PINK","GREEN"];
var hilightcahractercell=["Character 1","Character 2","Character 3"];

var errorInfo = {id: "Errors:", Error_Cells_Count: 0, color_name: 0, character_name: 0};
var i, item;
for (i = 0; i < mydata.length; i++) {
	item = mydata[i];
	if (item.Error_Cells_Count != null && item.Error_Cells_Count > 0) {
    	errorInfo.Error_Cells_Count++;
    }
    if ($.inArray(item.color_name, hilightcolorcell) < 0) {
    	errorInfo.color_name++;
    }
    if ($.inArray(item.character_name, hilightcahractercell) < 0) {
    	errorInfo.character_name++;
    }
}

jQuery("#rowed5").jqGrid({
    datatype: "local",
    shrinkToFit: false,
    data: mydata,
    //height: 320,
    autowidth:true,
    colNames:['RowID','Error_Cells_Count','status','note','color_name','character_name','Variant ID'],
    colModel: [ 
        {name:'id', width:55, sorttype:"int",align:"center",frozen:true},
        {name:'Error_Cells_Count', width:100, sorttype:"int",
        	align:"center",frozen:true,
            cellattr: function (rowid, cellValue) {
            	if (cellValue != null) {
                    var value = parseInt(cellValue, 10);
                    return " class='" +
                    	(value > 0 ? "redcells" : "greencells") +
                        "'";
                }
            }},
        {name:'status', width:100,
        	editable: function (options) {
                var item = $(this).jqGrid("getLocalRow", options.rowid);
                return...