更改 jqGrid 表的特定列标题背景颜色

Change Specific Column Header Background Colors of jqGrid Table

提问人:FlyFish 提问时间:9/12/2023 更新时间:9/17/2023 访问量:47

问:

我看了以下帖子,但无法让它为我工作: jqGrid 更改特定列标题的背景颜色

我尝试了以下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
});

如何更改列标题颜色?

jquery css jquery插件 jqgrid

评论


答:

2赞 scrhartley 9/12/2023 #1

您需要 .classeslabelClasses

0赞 jcarrera 9/17/2023 #2

正如 scrhartley 所说,它以这种方式使用 labelClasses:

$('#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', labelClasses: 'ford', width: 35, align: 'center', editable: true, searchoptions: { sopt: ['eq', 'cn'] }, formatter: checkboxFormatter, formatoptions: { disabled: false } },
        { name: 'fordTeam', index: 'fordTeam', labelClasses: 'ford',  width: 35, align: 'center', editable: true, searchoptions: { sopt: ['eq', 'cn'] }, formatter: checkboxFormatter, formatoptions: { disabled: false }},
        { name: 'fordDirector', index: 'fordDirector',labelClasses: 'ford', width: 35, align: 'center', editable: true, searchoptions: { sopt: ['eq', 'cn'] }, formatter: checkboxFormatter, formatoptions: { disabled: false }},
        { name: 'chevyBrowser', index: 'chevyBrowser', labelClasses: 'chevy' , width: 35, align: 'center', editable: true, searchoptions: { sopt: ['eq', 'cn'] }, formatter: checkboxFormatter, formatoptions: { disabled: false }},
        { name: 'chevyEditor', index: 'chevyEditor', labelClasses: "chevy" , width: 35, align: 'center', editable: true, searchoptions: { sopt: ['eq', 'cn'] }, formatter: checkboxFormatter, formatoptions: { disabled: false }},
        { name: 'chevyTeam', index: 'chevyTeam', labelClasses: 'chevy' , width: 35, align: 'center', editable: true, searchoptions: { sopt: ['eq', 'cn'] }, formatter: checkboxFormatter, formatoptions: { disabled: false }},
        { name: 'adminInd', index: 'adminInd', labelClasses: '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});

我做了一个工作的例子:jsfiddle

评论

0赞 FlyFish 9/18/2023
我不知道为什么,但这对我不起作用。我使用了labelClasses和css,如你的jfiddle所示。
1赞 jcarrera 9/19/2023
您使用的是jqgrid和jQuery版本吗?
0赞 FlyFish 9/19/2023
我刚刚更新到 JQuery 3.7.1 和 JQGrid 5.8.5,一切正常。谢谢!
0赞 FlyFish 9/19/2023
@scrhartley,我把答案给了 jcarrera,因为这个答案更深入,并向我展示了我需要在.css文件中进行哪些更改。我给你打了+1,如果我能标记2个答案,我也会标记你的答案。谢谢你们俩。