AG-Grid 25.3.0企业版学校年级场景最优columnDef配置方案问询

核心逻辑是利用AG Grid对不同交互行为单独指定取值逻辑的API，不要用单一的valueGetter覆盖所有场景，分别给排序、过滤、分组、图表、展示绑定对应数据源即可。

首先抽公共年级映射常量，避免多处重复逻辑：

// 全局公共映射表，可复用在各个formatter中
const GRADE_CODE_MAP = {
  '-1': 'PK',
  '0': 'K'
};
const getGradeName = (code) => {
  if(code >=1 && code <=12) return String(code);
  return GRADE_CODE_MAP[code] || String(code);
}

对应年级列的columnDef完整配置：

const gradeColumnDef = {
  headerName: '年级',
  // 1. 单元格展示控制
  valueFormatter: (params) => {
    // 优先读已有的grade_code_name字段，兜底用映射表计算
    return params.data?.grade_code_name || getGradeName(params.data?.grade_code);
  },
  // 2. 按数值排序配置
  sortable: true,
  sortValueGetter: (params) => params.data?.grade_code,
  // 也可额外加comparator确保排序逻辑正确，二选一即可
  // comparator: (a, b) => a.grade_code - b.grade_code,

  // 3. 按文本值过滤配置
  filter: 'agTextColumnFilter',
  filterValueGetter: (params) => params.data?.grade_code_name || getGradeName(params.data?.grade_code),

  // 4. 行分组配置
  rowGroup: true, // 开启行分组时配置
  rowGroupValueGetter: (params) => params.data?.grade_code, // 分组基于数值计算
  groupValueFormatter: (params) => getGradeName(params.value), // 分组合成列展示文本

  // 5. 图表功能配置
  chartValueGetter: (params) => params.data?.grade_code_name || getGradeName(params.data?.grade_code),
}

配置效果验证 #

• 单元格展示：所有普通行、聚合行的单元格始终展示映射后的文本值，不会出现原始数值
• 排序：点击列头排序时基于grade_code的数值大小计算，顺序为PK(-1) → K(0) → 1 → 2 → ... →12，符合业务逻辑
• 过滤：文本过滤器匹配的是展示的文本值，输入PK可匹配到-1的行，输入1可匹配到1、10、11、12的行，符合文本过滤预期
• 行分组：分组逻辑基于grade_code数值计算，相同数值的行会被分到同一组，分组头、合成列均展示对应文本值
• 图表功能：生成图表时会取chartValueGetter返回的文本值作为维度key，图表的轴标签、图例均展示文本值而非原始数值

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