如何为jqgrid的指定表头单元格应用自定义CSS样式

• 第一步：在列配置colModel中给需要修改样式的对应列，添加headerClasses属性绑定自定义类名，该属性仅作用于当前列的表头单元格，不会影响下方表体单元格，也不会作用于整行其他表头。
  示例初始化代码：

  $("#yourGridId").jqGrid({
      colModel: [
          // 普通列正常配置即可
          { name: "id", label: "序号", width: 80 },
          // 需要自定义样式的表头添加headerClasses属性
          { name: "username", label: "用户名称", width: 150, headerClasses: "custom-header-blue" },
          { name: "amount", label: "交易金额", width: 120, headerClasses: "custom-header-green" }
          // 其余配置项省略
      ]
      // 其余全局配置省略
  })
  

• 第二步：编写对应自定义类的CSS样式，注意选择器优先级要高于jqGrid默认表头样式，避免不生效。
  示例CSS代码：

  /* 精准匹配jqGrid表头单元格，避免污染全局样式 */
  .ui-jqgrid .ui-jqgrid-htable th.custom-header-blue {
      background-color: #1e69ff;
      color: #ffffff;
  }
  .ui-jqgrid .ui-jqgrid-htable th.custom-header-green {
      background-color: #00b42a;
      color: #ffffff;
  }
  

• 兼容旧版本jqGrid方案：如果使用的版本不支持headerClasses属性，可以调用setLabel方法动态给指定表头添加类：

  // 第一个参数为列的name属性值，第二个参数传空表示不修改表头文字，第三个参数为自定义类名
  $("#yourGridId").jqGrid('setLabel', 'username', '', 'custom-header-blue');
  

注意：不要使用colModel的classes属性配置，该属性会给整列（表头+所有表体单元格）添加类，不符合仅修改表头的需求。如果样式不生效可以先加!important测试确认选择器是否匹配，正式环境建议通过提升选择器优先级的方式覆盖默认样式。

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