我看了下面这篇文章,但没能让它为我工作:jqGrid change background color of specific column headers
我试过以下css条目,但没有一个工作。颜色永远不会变成黄色。
.ui-jqgrid-htable .ford {
background-color: yellow !important;
background-image: none;
}
.ui-jqgrid .ui-jqgrid-htable .ford {
background-color: yellow !important;
background-image: none;
}
.ui-jqgrid .ui-jqgrid-htable th.ui-th-column-header .ford {
background-color: yellow !important;
background-image: none;
}
.ui-jqgrid .ui-jqgrid-htable .ui-jqgrid-hbox .ford {
background-color: yellow !important;
background-image: none;
}
.ui-jqgrid .ui-jqgrid-htable th .ford {
background-color: yellow !important;
background-image: none;
}
下面是我如何创建网格:
$('#list').jqGrid({
url: "/User/GetGridData",
mtype: "GET",
datatype: "json",
colNames: ['', 'ID', 'Name', 'Email', 'ford Browser', 'ford Team', 'ford Director', 'chevy Browser', 'chevy Editor','chevy Team','Tool Admin',''],
colModel: [
{ name: 'edit', index: 'edit', width: 5, sortable: false, search: false, formatter: editRow },
{ name: 'id', index: 'id', width: 1, hidden: true, editable: false, key: true },
{ name: 'userName', index: 'userName', width: 75, align: 'left', editable: true, searchoptions: { sopt: ['eq', 'cn'] } },
{ name: 'userEmail', index: 'userEmail', width: 100, align: 'left', editable: true, search: false },
{ name: 'fordBrowser', index: 'fordBrowser', classes: 'ford', width: 35, align: 'center', editable: true, searchoptions: { sopt: ['eq', 'cn'] }, formatter: checkboxFormatter, formatoptions: { disabled: false } },
{ name: 'fordTeam', index: 'fordTeam', classes: 'ford', width: 35, align: 'center', editable: true, searchoptions: { sopt: ['eq', 'cn'] }, formatter: checkboxFormatter, formatoptions: { disabled: false }},
{ name: 'fordDirector', index: 'fordDirector',classes: 'ford', width: 35, align: 'center', editable: true, searchoptions: { sopt: ['eq', 'cn'] }, formatter: checkboxFormatter, formatoptions: { disabled: false }},
{ name: 'chevyBrowser', index: 'chevyBrowser', classes: 'chevy' , width: 35, align: 'center', editable: true, searchoptions: { sopt: ['eq', 'cn'] }, formatter: checkboxFormatter, formatoptions: { disabled: false }},
{ name: 'chevyEditor', index: 'chevyEditor', classes: "chevy" , width: 35, align: 'center', editable: true, searchoptions: { sopt: ['eq', 'cn'] }, formatter: checkboxFormatter, formatoptions: { disabled: false }},
{ name: 'chevyTeam', index: 'chevyTeam', classes: 'chevy' , width: 35, align: 'center', editable: true, searchoptions: { sopt: ['eq', 'cn'] }, formatter: checkboxFormatter, formatoptions: { disabled: false }},
{ name: 'adminInd', index: 'adminInd', classes: 'admin', width: 35, align: 'center', editable: true, searchoptions: { sopt: ['eq', 'cn'] }, formatter: checkboxFormatter, formatoptions: { disabled: false } },
{ name: 'delete', index: 'delete', width: 8, sortable: false, search: false, formatter: deleteRow }
],
emptyrecords: 'No records',
pager: "#pager",
rowNum: 1000,
rowList: [],
pgbuttons: false,
pgtext: null,
recordtext: 'Total Records {2}',
sortname: 'userName',
sortorder: 'asc',
viewrecords: true,
caption: '',
gridComplete: function () {
},
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
width: 1500,
height: 400,
_search: true
});
如何更改列标题颜色?
2条答案
按热度按时间8aqjt8rx1#
您需要
labelClasses
,而不是在colModel中使用classes
。tuwxkamq2#
就像Alberhartley说的,它是这样使用labelClasses的:
我做了一个工作示例:jsfiddle