javascript - jqGrid 仅更改一个网格的选定行样式 ui-jqgrid ui-state-highlight，而不是同一页面上的所有其他网格

Question

我们公司使用数百个 jqGrid。我正在向该页面上已有 jqGrids 的页面添加一个。我可能不会改变这些网格的样式或行为。我添加的新网格(也是 jqGrid)必须具有唯一的选定行样式(背景白色和边框 rbg(153, 153, 153))。

如果我更改页面上的 jqGrid 样式，这适用于新网格，但会更改其他网格。这是不允许的: /这会覆盖 xyz 网格的正常 jqGrid 选择的行样式/ .ui-jqgrid .ui-state-highlight { 背景:白色；边框颜色: rgb(153, 153, 153); }

我尝试在像这样声明网格时更改样式，但它不起作用:

    ResultsGrid.jqGrid({
        datatype: "local",
        data: data,
        minheight: 20,
        width: 700,
        height: '100%',
        //altRows: true,
        //altClass: 'myAltRowClass',
        colNames: ['aaa', 'bbb', 'ccc', 'ddd', 'ccc', 'ddd', 'eee'],
        colModel: [
            { name: 'aaa', hidden: true, key: true },
            { name: 'bbb', formatter: thingy.format_bbb },
            { name: 'ccc', hidden: true },
            { name: 'ddd', formatter: thingy.format_ddd, width: 80, align: 'center' },
            { name: 'eee', formatter: thingy.format_eee },
            { name: 'fff', hidden: true },
            { name: 'ggg', sortable: false, formatter: thingy.format_ggg, width: 25, align: 'center' }
        ],
        viewrecords: true,
        emptyrecords: 'No Data',
        onSelectRow: function () {
            //ResultsGrid.removeClass('ui-jqgrid ui-state-highlight');
            //ResultsGrid.addClass('ui-jqgrid complaint_selectedrow');
            //.ui-jqgrid .ui-state-highlight { background: white; border-color: rgb(153, 153, 153); }

            //$("#table").removeClass('ui-jqgrid ui-state-highlight').addClass('ui-jqgrid complaint_selectedrow');

            //$("#table").removeClass(' ui-state-highlight').addClass('complaint_selectedrow');

            //$("head").append('<style type="text/css"></style>');
            //var new_stylesheet = $("head").children(':last');
            //new_stylesheet.html('.ui-jqgrid ui-state-highlight{background: white; border-color: rgb(153, 153, 153);}');

        alert('This alert does pop-up when a row is selected.');
        }

如果您有任何想法，请帮忙。提前致谢。

Answer 1

天哪，我通过在 onSelectRow 函数中使用 javascript 以正确的方式修复了它，如下所示:

    onSelectRow: function () {
        var sheet = document.createElement('style');
        sheet.innerHTML = ".ui-jqgrid .ui-state-highlight { background: white; border-color: rgb(153, 153, 153); }";
        document.body.appendChild(sheet);
    }

这成功了!