jqgrid改變某一行的背景顏色
阿新 • • 發佈：2018-12-22
想要在jqgrid表格中更改某些行的背景顏色，比如改變“提示”是0的這些行的背景顏色為紅色。
<!DOCTYPE html> <html> <head> <title>jqGrid 例項</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css"> <link rel="stylesheet" type="text/css" style="white-space:pre" href="jqgrid/jquery.ui/jquery-ui.css"> <script type="text/javascript" src="jqgrid/js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script> <script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script> <script type="text/javascript" src="jqgrid/jquery.ui/jquery-ui.js"></script> </head> <body> <div> <table id="list9"></table> <div id="pager9"></div> </div> </body> <script> $(function(){ pageInit(); }); function pageInit(){ jQuery("#list9").jqGrid( { url : 'data/JSONData.json', datatype : "json", colNames : [ '序號', '狀態', '名字', '數量', '提示','總計', '備註' ], colModel : [ {name : 'id',index : 'id',width : 55}, {name : 'state',index : 'state',width : 90}, {name : 'name',index : 'name',width : 100}, {name : 'amount',index : 'amount',width : 80,align : "right"}, {name : 'tax',index : 'tax',width : 80,align : "right"}, {name : 'total',index : 'total',width : 80,align : "right"}, {name : 'note',index : 'note', width : 150,sortable : false} ], rowNum : 10, rowList : [ 10, 20, 30 ], pager : '#pager9', sortname : 'id', recordpos : 'left', viewrecords : true, sortorder : "desc", multiselect : true, caption : "Multi Select Example", loadComplete: function () { //debugger; //在表格載入完成後執行 var ids = $("#list9").jqGrid("getDataIDs");//獲取所有行的id var rowDatas = $("#list9").jqGrid("getRowData");//獲取所有行的資料 for(var ii=0;ii < rowDatas.length;ii++){ var rowData = rowDatas[ii]; if(rowData.tax == 0){//如果某一行中的“tax”為0，那就把這一整行的背景顏色設為紅色 $("#"+ids[ii]+ " td").css("background-color","red"); } } } }); jQuery("#list9").jqGrid('navGrid', '#pager9', { add : false, del : false, edit : false, position : 'right' }); jQuery("#m1").click(function() { var s; s = jQuery("#list9").jqGrid('getGridParam', 'selarrrow'); alert(s); }); jQuery("#m1s").click(function() { jQuery("#list9").jqGrid('setSelection', "13"); }); } </script> </html>