如何修改jqGrid表格指定列表头的背景颜色？

我参考了相关帖子尝试修改标注ford类的列头背景为黄色，但试了多段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;
}

我的jqGrid初始化代码如下：

$('#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
});

问题原因 #

你在colModel里设置的classes: 'ford'是给数据行的单元格添加类，而非列头（th元素），所以之前的CSS选择器无法定位到列头元素。

解决方案 #

方案1：直接给列头指定类（推荐）

修改colModel中对应列，添加headerclass属性指定列头的类：

// 以fordBrowser列为例，其他ford列同理
{ 
    name: 'fordBrowser', 
    index: 'fordBrowser', 
    classes: 'ford', 
    headerclass: 'ford-header', // 新增这行
    width: 35, 
    align: 'center', 
    editable: true, 
    searchoptions: { sopt: ['eq', 'cn'] }, 
    formatter: checkboxFormatter, 
    formatoptions: { disabled: false } 
}

然后添加对应的CSS：

.ui-jqgrid .ui-jqgrid-htable th.ford-header {
    background-color: yellow !important;
    background-image: none; /* 覆盖jqGrid默认的渐变背景图 */
}

方案2：通过列头ID定位

jqGrid的列头th会自动生成id="jqgh_表格ID_列name"的属性，比如你的表格ID是list，fordBrowser列的列头ID是jqgh_list_fordBrowser。可以用属性选择器批量匹配：

/* 匹配所有name以ford开头的列头 */
.ui-jqgrid .ui-jqgrid-htable th[id^="jqgh_list_ford"] {
    background-color: yellow !important;
    background-image: none;
}

方案3：在gridComplete中手动添加类

如果不想修改colModel，可以在gridComplete事件中给列头添加类：

gridComplete: function () {
    // 获取当前表格的列头，给指定列添加类
    $(this).find('th[id^="jqgh_list_ford"]').addClass('ford-header');
}

然后配合相同的CSS：

.ford-header {
    background-color: yellow !important;
    background-image: none;
}

内容的提问来源于stack exchange，提问作者FlyFish