jqGrid设置指定行的背景色

时间:2021-10-27 13:19:26

1.在页面中加样式

<style type="text/css">
.SelectBG
{
background-color
:#AAAAAA;
}
</style>

2.在js中

  gridComplete:function(){
var ids = $("#gridTable").getDataIDs();
for(var i=0;i
<ids.length;i++){
var rowData
= $("#gridTable").getRowData(ids[i]);
if(rowData.overdueDays==0){//如果天数等于0,则背景色置灰显示
$('#'+ids[i]).find("td").addClass("SelectBG");
}
}
}

案例:

 shrinkToFit: true,//此属性用来说明当初始化列宽度时候的计算类型,如果为ture,则按比例初始化列宽度。如果为false,则列宽度使用colModel指定的宽度
 multiselect: true, multiboxonly: true,//只有当multiselect = true.起作用,当multiboxonly 为ture时只有选择checkbox才会起作用
gridComplete: function () {
var ids = $("#gridTable").getDataIDs();
for (var i = 0; i < ids.length; i++) {
var rowData = $("#gridTable").getRowData(ids[i]);
if (rowData.Audit == "不通过") {//如果审核不通过,则背景色置于红色
$('#' + ids[i]).find("td").addClass("SelectBG");
}
}

$("#" + this.id).jqGrid('setSelection', SelectRowIndx);
}
    //加载表格
function GetGrid() {
var SelectRowIndx;
$("#gridTable").jqGrid({
url: "@Url.Content("~/School/SitesDetails/GridPageListJson")",
datatype: "json",
height: $(window).height() - 178,
autowidth: true,
colModel: [
{ label: '主键', name: 'Id', index: "Id", hidden: true, key: true,},
{ label: '所属栏目', name: 'Name', index: "Name", width: 100 },
{ label: '标题名称', name: 'Title', index: "Title", width: 320 },
//{label:'文章来源',name:'origin',index:'origin',width:100},
{
label: '置顶', name: 'IsTop', index: 'IsTop', width: 80
,
formatter: function (cellvalue, options, rowObject) {
if (cellvalue == true) return "是";
if (cellvalue == false) return "否";
}
},
{ label: '点击量', name: 'Hits', index: 'Hits', width: 80 },
{
label: '允许评论', name: 'IsComment', index: 'IsComment', width: 80
,
formatter: function (cellvalue, options, rowObject) {
if (cellvalue == true) return "是";
if (cellvalue == false) return "否";
}
},
{
label: '审核', name: 'Audit', index: 'Audit', width: 80
,
formatter: function (cellvalue, options, rowObject) {
if (cellvalue == "1") return "
<font color='blue'>等待审核</font>";
if (cellvalue == "2") return "
<font color='green'>通过审核</font>";
//if (cellvalue == "3") return "
<font color='red'>不通过</font>";
if (cellvalue == "3") return "不通过";
}
},
{ label: '文章标签', name: 'ArticleFlag', index: 'ArticleFlag', width: 80 },
{ label: '创建者', name: 'CreateUserName', index: 'CreateUserName', width: 80 },
{
label: '创建日期', name: 'CreateDate', index: 'CreateDate', width: 120,
formatter: function (cellvalue, options, rowObject) {
return formatDate(cellvalue, 'yyyy-MM-dd hh:mm');
}
},
{ label: '修改者', name: 'ModifyUserName', index: 'ModifyUserName', width: 80 },
{
label: '修改日期', name: 'ModifyDate', index: 'ModifyDate', width: 120,
formatter: function (cellvalue, options, rowObject) {
return formatDate(cellvalue, 'yyyy-MM-dd hh:mm');
}
},
{ label: '审核人', name: 'AuditUserName', index: 'AuditUserName', width: 80 },
{
label: '审核日期', name: 'AuditDate', index: 'AuditDate', width: 120,
formatter: function (cellvalue, options, rowObject) {
return formatDate(cellvalue, 'yyyy-MM-dd hh:mm');
}
}
],
viewrecords: true,
rowNum: 30,
rowList: [30, 50, 100, 500, 1000],
pager: "#gridPager",
sortname: 'CreateDate',
sortorder: 'Desc',
rownumbers: true,
shrinkToFit: true,//此属性用来说明当初始化列宽度时候的计算类型,如果为ture,则按比例初始化列宽度。如果为false,则列宽度使用colModel指定的宽度
multiselect: true,
multiboxonly: true,//只有当multiselect = true.起作用,当multiboxonly 为ture时只有选择checkbox才会起作用
ondblClickRow: function (rowid) {
var KeyValue = rowid;
if (IsChecked(KeyValue)) {
var url = "/School/SitesDetails/Form?KeyValue=" + KeyValue;
openDialog(url, "Form", "编辑文章", 900, 450, function (iframe) {
top.frames[iframe].AcceptClick();
});
}
},
onSelectRow: function () {
SelectRowIndx = GetJqGridRowIndx("#" + this.id);
},
gridComplete: function () {
var ids = $("#gridTable").getDataIDs();
for (var i = 0; i
< ids.length; i++) {
var rowData
= $("#gridTable").getRowData(ids[i]);
if (rowData.Audit == "不通过") {//如果审核不通过,则背景色置于红色
$('#' + ids[i]).find("td").addClass("SelectBG");
}
}

$("#" + this.id).jqGrid('setSelection', SelectRowIndx);
}
});
columnModelData("#gridTable");
//自应高度
$(window).resize(function () {
$("#gridTable").setGridHeight($(window).height() - 178);
});
}

效果图如下:

jqGrid设置指定行的背景色