如何在jqGrid colModel中实现按行独立判断单元格条件样式

开发者阿泽

2026-11-1

jqGrid Value列动态阈值样式配置方案

原代码问题修正方向

原来的cellattr只输出日志没有返回值，jqGrid要求该函数必须返回可作用于单元格的HTML属性字符串才能生效
原来的阈值判断写死了固定数值，应该通过cellattr自带的行数据参数读取当前行的上下限，适配每行独立配置

前置字段对应要求

先确保colModel每列的name和后端get-data.php返回的字段完全匹配，示例约定映射关系：

colNames里的upper limit对应后端字段名upperLimit，colModel中该列name设为upperLimit
colNames里的lower limit对应后端字段名lowerLimit，colModel中该列name设为lowerLimit
colNames里的Value对应后端监测值字段，colModel中该列name设为value

可用的colModel完整配置

colModel: [
  { name: "name", label: "Name", width: 100 },
  // Value列动态样式配置
  {
    name: "value",
    label: "Value",
    width: 120,
    cellattr: function(rowid, cellValue, rawObject, colModel, currentRowData) {
      // 转数值避免字符串比较出错
      const val = Number(cellValue);
      const upper = Number(currentRowData.upperLimit);
      const lower = Number(currentRowData.lowerLimit);
      // 超阈值判断
      if (val >= upper || val <= lower) {
        // 直接返回样式属性字符串
        return 'style="color:red;font-weight:bold;"';
      }
      return "";
    }
  },
  { name: "upperLimit", label: "upper limit", width: 100 },
  { name: "lowerLimit", label: "lower limit", width: 100 },
  { name: "stock", label: "stock", width: 80 }
]