首页 > 代码库 > jqGrid设置指定行的背景色
jqGrid设置指定行的背景色
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 = http://www.mamicode.com/$("#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 =http://www.mamicode.com/= true) return"是"; if (cellvalue =http://www.mamicode.com/= false) return"否"; } }, { label: ‘点击量‘, name: ‘Hits‘, index: ‘Hits‘, width: 80 }, { label: ‘允许评论‘, name: ‘IsComment‘, index: ‘IsComment‘, width: 80 , formatter: function (cellvalue, options, rowObject) { if (cellvalue =http://www.mamicode.com/= true) return"是"; if (cellvalue =http://www.mamicode.com/= false) return"否"; } }, { label: ‘审核‘, name: ‘Audit‘, index: ‘Audit‘, width: 80 , formatter: function (cellvalue, options, rowObject) { if (cellvalue =http://www.mamicode.com/="1") return "<font color=‘blue‘>等待审核</font>"; if (cellvalue =http://www.mamicode.com/="2") return "<font color=‘green‘>通过审核</font>"; //if (cellvalue =http://www.mamicode.com/="3") return "<font color=‘red‘>不通过</font>"; if (cellvalue =http://www.mamicode.com/="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 = http://www.mamicode.com/rowid;"/School/SitesDetails/Form?KeyValue="http://www.mamicode.com/+ KeyValue;"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设置指定行的背景色
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。