如何让 jqGrid 中自定义样式的列在行选中时自动继承高亮颜色_技术教程

本文详解如何解决 jqgrid 中通过 `setcell` 设置的单元格内联样式（如背景色、文字色）在行被点击选中后不随高亮样式变化的问题，核心是利用 css 优先级与继承机制，使自定义单元格类在选中状态下正确继承 `.ui-state-highlight` 的样式。

在 jqGrid 中，我们常使用 setCell 方法为特定列（如 quarter1）动态设置背景色或文字颜色，例如：

$("#lstStudents").jqGrid("setCell", id, "quarter1", "", {
  "background": "rgb(250, 250, 250)",
  "color": "rgb(0, 0, 0)"
});

但该方式直接写入

的 style 属性（即内联样式），其 CSS 优先级高于 jqGrid 默认的行高亮类（如 .ui-state-highlight）。因此当用户点击某一行时，该行其他列会正常变色，而 setCell 手动设色的列却“固守原色”，破坏视觉一致性。

✅ 正确解法：放弃内联样式，改用 CSS 类 + 继承控制

第一步：定义语义化单元格类
在 CSS 中声明一个自定义类（如 mycolor），仅负责默认状态样式：

td.mycolor {
  background-color: rgb(250, 250, 250) !important;
  color: rgb(0, 0, 0) !important;
}

⚠️ 注意：此处 !important 是为了确保它能覆盖 jqGrid 默认的 .ui-widget-content td 样式，但仅用于默认态。

第二步：用 setCell 应用该类（而非内联样式）
修改 JavaScript，将 "mycolor" 作为第 4 个参数传入（即 classes 参数）：

function onloadFunction(ids) {
  const $grid = $("#lstStudents");
  const rowIds = $grid.jqGrid("getDataIDs");

  for (let i = 0; i < rowIds.length; i++) {
    const rowId = rowIds[i];
    $grid.jqGrid("setCell", rowId, "quarter1", "", "mycolor");
  }
}

第三步：强制高亮状态下继承父行样式
关键一步：覆盖选中行中该类单元格的样式，使其继承 .ui-state-highlight 的背景与文字色：

/* jqGrid 原生主题（jQuery UI） */
.ui-widget-content .ui-state-highlight > td.mycolor {
  background-color: inherit !important;
  color: inherit !important;
}

/* 若使用 Bootstrap 主题（如 Bootstrap 4/5），请根据实际高亮类名调整，例如： */
.table-success > td.mycolor,
.table-primary > td.mycolor {
  background-color: inherit !important;
  color: inherit !important;
}

? 提示：可通过浏览器开发者工具检查选中行

上实际添加的 class（如 ui-state-highlight、jqgrow ui-row-ltr ui-state-highlight 或 table-success），再精准匹配选择器。

总结