想要在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>