You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何让jqGrid选中行与悬停行不遵循交替行配色方案？

avatar
架构老林
2026-7-23
解决jqGrid选中/悬停行受交替行配色影响的问题

问题描述

我使用标准jQuery UI Accordion主题搭配本地数据构建jqGrid，当前存在样式问题：选中行和鼠标悬停行的文本颜色与背景色仍遵循交替行配色方案，无法实现清晰的视觉区分。需要调整样式，让选中和悬停行脱离交替行的配色规则，突出显示。

以下是当前页面代码：

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
<meta content="text/html; charset=utf-8" />

    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="{% static 'js/jquery.min.js'%}"></script>
    <!-- Language set We support more than 40 localizations -->
    <script type="text/ecmascript" src="{% static 'js/trirand/i18n/grid.locale-en.js'%}"></script>
    <!-- This is the Javascript file of jqGrid -->
    <script type="text/ecmascript" src="{% static 'js/trirand/jquery.jqGrid.min.js'%}"></script>

    <link type="text/css" rel="stylesheet"  media="screen" href="{% static 'css/trirand/ui.jqgrid.css'%}" />

    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/jquery-ui.css'%}" />
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/trirand/ui.jqgrid.css'%}" />

</head>
<body>



<table id="jqGrid"></table>
    <div id="jqGridPager"></div>

<script type="text/javascript">

        var MaingridQueryResults_1 = {{available_lessons|safe}};
        var SubgridQueryResults_1 = {{subavailable_lessons|safe}};

        // Main grid
        $("#jqGrid").jqGrid({
            datatype: 'local',
            data: MaingridQueryResults_1,
            colModel: [
                {name: 'id', label: 'id'},
                {name: 'first_name', label: 'first_name'},
                {name: 'last_name', label: 'last_name'},
                {name: 'email', label: 'email'},
                {name: 'phone', label: 'phone'},
                {name: 'address', label: 'address'},
                {name: 'city', label: 'city'},
                {name: 'state', label: 'state'},
                {name: 'zipcode', label: 'zipcode'},
                {name: 'regarde', label: 'regarde'}
            ],

            width: 900,
            height: 300,
            pager: "#jqGridPager",
            //toppager: true,
            rowNum: 20,
            rowList : [20,30,50],
            viewrecords: true,
            altRows: true,
            rownumbers: true,
            rownumWidth: 25,
            multiselect: true,
            multiboxonly: true,
            //multikey:"shiftKey",

            ondblClickRow: function (rowid) {
                var rowData = $(this).getRowData(rowid);
                document.location.href = "../record/" + rowData['id']
            },
            loadComplete: function () {
                $(this).find(">tbody>tr.jqgrow:visible:odd").addClass("strippedAltRows");
            },
            subGrid: false,
            isHasSubGrid : function(ids) {
                var ret = false;
                for(var i = 0; i < SubgridQueryResults_1.length; i++) {
                    if(SubgridQueryResults_1[i].id == ids) {// change .id to name of object you want (idcontact ?)
                        ret = SubgridQueryResults_1[i];
                        return ret
                        break;
                    }
                }
                return ret;
            },
            subGridRowExpanded: function (subgridDivId, rowId) {
                //console.log("rows " + rowId)
                for (var i = 0; i < SubgridQueryResults_1.length; i++) {
                    //console.log("Sub id " + SubgridQueryResults_1[i].id)
                    if (SubgridQueryResults_1[i].id == rowId) {// change .id to name of object you want (idcontact ?)
                        //console.log("loop inside subav  " + SubgridQueryResults_1[i].id)
                        var treza = SubgridQueryResults_1.filter(element => element.id == [rowId]) // change .id to name of object you want (idcontact ?)
                        //console.log("treza  " + JSON.stringify(treza))
                    }
                }

                //console.log("subgridivid " +subgridDivId)
                var subgridTableId = subgridDivId + "_t";
                $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
                // Subgrid
                $("#" + subgridTableId).jqGrid({
                    datatype: 'local',
                    data: treza,
                    colModel: [
                        {name: 'id', label: 'id'},
                        {name: 'first_name', label: 'first_name'},
                        {name: 'last_name', label: 'last_name'},
                        {name: 'email', label: 'email'},
                        {name: 'phone', label: 'phone'},
                        {name: 'address', label: 'address'},
                        {name: 'city', label: 'city'},
                        {name: 'state', label: 'state'},
                        {name: 'zipcode', label: 'zipcode'},
                        {name: 'regarde', label: 'regarde'}
                    ],
                    multiselect: true,
                    multiboxonly: true,
                    multikey:"shiftKey",
                });
            }

        });
        // color of bottom pager
        //$("#jqGridPager").css("background", "white")
        //$("#jqGridPager").css("color", "black")
        // color of altrow
        //$("tr.jqgrow:odd").css("background", "#DDDDDC");
    </script>

</body>

</html>

解决方案

1. 添加自定义CSS强制覆盖样式

在页面<head>的样式引用后插入以下CSS代码，通过提高选择器优先级，让选中行和悬停行脱离交替行配色：

<style type="text/css">
/* 基础行样式 */
.ui-jqgrid tr.jqgrow {
    background-color: #ffffff;
    color: #333333;
}
/* 自定义交替行背景色 */
.ui-jqgrid tr.jqgrow.alt-row {
    background-color: #f5f5f5;
}
/* 选中行样式（强制覆盖交替行） */
.ui-jqgrid tr.jqgrow.ui-state-highlight,
.ui-jqgrid tr.jqgrow.ui-state-highlight.alt-row {
    background-color: #428bca !important;
    color: #ffffff !important;
}
/* 悬停行样式（强制覆盖交替行） */
.ui-jqgrid tr.jqgrow.ui-state-hover,
.ui-jqgrid tr.jqgrow.ui-state-hover.alt-row {
    background-color: #e8f0fa !important;
    color: #2a6496 !important;
}
/* 子网格适配 */
.ui-jqgrid .ui-subgrid tr.jqgrow.ui-state-highlight,
.ui-jqgrid .ui-subgrid tr.jqgrow.ui-state-hover {
    background-color: #428bca !important;
    color: #ffffff !important;
}
</style>

2. 优化jqGrid配置（可选）

移除loadComplete中手动添加自定义交替行类的代码，改用jqGrid原生的altRows属性自动生成alt-row类，避免样式冲突：

// 原代码注释或删除
// loadComplete: function () {
//     $(this).find(">tbody>tr.jqgrow:visible:odd").addClass("strippedAltRows");
// },

保留altRows: true配置即可，jqGrid会自动为奇数行添加alt-row类。

3. 样式说明

  • 使用!important强制提升样式优先级，确保选中/悬停样式不受交替行规则影响
  • 同时针对带有alt-row类的选中/悬停行单独设置规则，彻底脱离交替行配色
  • 适配子网格样式，保证主网格和子网格的视觉一致性

修改后的完整页面代码 

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
<meta content="text/html; charset=utf-8" />

    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="{% static 'js/jquery.min.js'%}"></script>
    <!-- Language set We support more than 40 localizations -->
    <script type="text/ecmascript" src="{% static 'js/trirand/i18n/grid.locale-en.js'%}"></script>
    <!-- This is the Javascript file of jqGrid -->
    <script type="text/ecmascript" src="{% static 'js/trirand/jquery.jqGrid.min.js'%}"></script>

    <link type="text/css" rel="stylesheet"  media="screen" href="{% static 'css/trirand/ui.jqgrid.css'%}" />

    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/jquery-ui.css'%}" />
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/trirand/ui.jqgrid.css'%}" />

    <!-- 自定义样式解决选中/悬停行受交替行影响问题 -->
    <style type="text/css">
        /* 基础行样式 */
        .ui-jqgrid tr.jqgrow {
            background-color: #ffffff;
            color: #333333;
        }
        /* 自定义交替行背景色 */
        .ui-jqgrid tr.jqgrow.alt-row {
            background-color: #f5f5f5;
        }
        /* 选中行样式（强制覆盖交替行） */
        .ui-jqgrid tr.jqgrow.ui-state-highlight,
        .ui-jqgrid tr.jqgrow.ui-state-highlight.alt-row {
            background-color: #428bca !important;
            color: #ffffff !important;
        }
        /* 悬停行样式（强制覆盖交替行） */
        .ui-jqgrid tr.jqgrow.ui-state-hover,
        .ui-jqgrid tr.jqgrow.ui-state-hover.alt-row {
            background-color: #e8f0fa !important;
            color: #2a6496 !important;
        }
        /* 子网格适配 */
        .ui-jqgrid .ui-subgrid tr.jqgrow.ui-state-highlight,
        .ui-jqgrid .ui-subgrid tr.jqgrow.ui-state-hover {
            background-color: #428bca !important;
            color: #ffffff !important;
        }
    </style>

</head>
<body>



<table id="jqGrid"></table>
    <div id="jqGridPager"></div>

<script type="text/javascript">

        var MaingridQueryResults_1 = {{available_lessons|safe}};
        var SubgridQueryResults_1 = {{subavailable_lessons|safe}};

        // Main grid
        $("#jqGrid").jqGrid({
            datatype: 'local',
            data: MaingridQueryResults_1,
            colModel: [
                {name: 'id', label: 'id'},
                {name: 'first_name', label: 'first_name'},
                {name: 'last_name', label: 'last_name'},
                {name: 'email', label: 'email'},
                {name: 'phone', label: 'phone'},
                {name: 'address', label: 'address'},
                {name: 'city', label: 'city'},
                {name: 'state', label: 'state'},
                {name: 'zipcode', label: 'zipcode'},
                {name: 'regarde', label: 'regarde'}
            ],

            width: 900,
            height: 300,
            pager: "#jqGridPager",
            //toppager: true,
            rowNum: 20,
            rowList : [20,30,50],
            viewrecords: true,
            altRows: true,
            rownumbers: true,
            rownumWidth: 25,
            multiselect: true,
            multiboxonly: true,
            //multikey:"shiftKey",

            ondblClickRow: function (rowid) {
                var rowData = $(this).getRowData(rowid);
                document.location.href = "../record/" + rowData['id']
            },
            // 移除手动添加交替行类的代码
            // loadComplete: function () {
            //     $(this).find(">tbody>tr.jqgrow:visible:odd").addClass("strippedAltRows");
            // },
            subGrid: false,
            isHasSubGrid : function(ids) {
                var ret = false;
                for(var i = 0; i < SubgridQueryResults_1.length; i++) {
                    if(SubgridQueryResults_1[i].id == ids) {// change .id to name of object you want (idcontact ?)
                        ret = SubgridQueryResults_1[i];
                        return ret
                        break;
                    }
                }
                return ret;
            },
            subGridRowExpanded: function (subgridDivId, rowId) {
                //console.log("rows " + rowId)
                for (var i = 0; i < SubgridQueryResults_1.length; i++) {
                    //console.log("Sub id " + SubgridQueryResults_1[i].id)
                    if (SubgridQueryResults_1[i].id == rowId) {// change .id to name of object you want (idcontact ?)
                        //console.log("loop inside subav  " + SubgridQueryResults_1[i].id)
                        var treza = SubgridQueryResults_1.filter(element => element.id == [rowId]) // change .id to name of object you want (idcontact ?)
                        //console.log("treza  " + JSON.stringify(treza))
                    }
                }

                //console.log("subgridivid " +subgridDivId)
                var subgridTableId = subgridDivId + "_t";
                $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
                // Subgrid
                $("#" + subgridTableId).jqGrid({
                    datatype: 'local',
                    data: treza,
                    colModel: [
                        {name: 'id', label: 'id'},
                        {name: 'first_name', label: 'first_name'},
                        {name: 'last_name', label: 'last_name'},
                        {name: 'email', label: 'email'},
                        {name: 'phone', label: 'phone'},
                        {name: 'address', label: 'address'},
                        {name: 'city', label: 'city'},
                        {name: 'state', label: 'state'},
                        {name: 'zipcode', label: 'zipcode'},
                        {name: 'regarde', label: 'regarde'}
                    ],
                    multiselect: true,
                    multiboxonly: true,
                    multikey:"shiftKey",
                });
            }

        });
        // color of bottom pager
        //$("#jqGridPager").css("background", "white")
        //$("#jqGridPager").css("color", "black")
        // color of altrow
        //$("tr.jqgrow:odd").css("background", "#DDDDDC");
    </script>

</body>

</html>

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.23 15:15:01