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.14.1/css/ui.jqgrid.min.css">
<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"];

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 (item.Error_Cells_Count == null || item.Error_Cells_Count <= 0) &&
                	$.inArray(item.color_name, hilightcolorcell) >= 0 &&
                    $.inArray(item.character_name, hilightcahractercell) >= 0;
            },
        	edittype:"select",editoptions:{value:"Approve:Approve"}},
        {name:'note',width:100, sortable:false,editable: true,
        	edittype:"textarea", editoptions:{rows:"2",cols:"10"}},
        {name:'color_name',
        	cellattr: function (rowid,...