登录
首页 >  文章 >  php教程

jqGrid行选中时如何设置列高亮色

时间:2026-01-19 20:04:05 149浏览 收藏

IT行业相对于一般传统行业,发展更新速度更快,一旦停止了学习,很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习,精进自己的技术,尤其是初学者。今天golang学习网给大家整理了《jqGrid行选中时如何继承列自定义高亮色》,聊聊,我们一起来看看吧!

如何让 jqGrid 自定义列样式在行选中时自动继承高亮色

本文讲解如何解决 jqGrid 中通过 `setCell` 设置的自定义单元格颜色(如背景色、文字色)在行被点击选中后无法跟随高亮样式变化的问题,核心是利用 CSS 优先级与继承机制,使自定义类在 `.ui-state-highlight` 等父级高亮状态下自动继承主题色。

在 jqGrid 中,若使用 setCell 方法为特定列(如 quarter1)动态设置内联样式(如 background 和 color),这些样式会以 style 属性直接写入 标签,其 CSS 优先级高于外部类(如 .ui-state-highlight)。因此,当用户点击某一行触发高亮状态时,该行其他列能正常变色,而你手动设色的列却“固守原色”,造成视觉不一致(如题图所示)。

根本原因在于:内联样式 > 外部 CSS 类 > 浏览器默认样式,而 jqGrid 的行高亮是通过向 添加 .ui-state-highlight 类实现的,其样式作用于 及其子 ,但无法覆盖已存在的 style="background:..." 内联声明。

✅ 正确解法:弃用内联样式,改用可继承的 CSS 类 + 高亮上下文重置

1. 定义语义化单元格样式类

首先,在全局 CSS(如 style.css 或