AG-Grid React 自定义默认排序实现指定类型行置顶方法咨询

核心实现思路 #

通过AG Grid提供的自定义排序能力覆写默认排序逻辑，为指定的program+对应值组合分配优先级权重，权重越小的组合排序越靠前，未命中规则的行统一放在末尾。

具体实现方案 #

方案1：仅在program列排序时生效 #

适合仅需要按program列排序时触发置顶规则的场景，通过列定义的comparator属性实现：

• 定义优先级映射表，命中规则的组合分配小权重，未命中的统一分配大权重
• 在program列的配置中添加自定义比较器，按权重排序，权重相同的走默认兜底排序
• 配置初始排序模型，实现页面加载后默认按该规则排序

代码示例

// 优先级映射：key为`program值|对应值`的组合，值越小排序越靠前
const priorityMap = {
  'green|X': 1,
  'blue|Y': 2,
  'yellow|Z': 3
}
// 未命中规则的行默认权重，保证排在最后
const DEFAULT_PRIORITY = 999

const columnDefs = [
  {
    field: 'program',
    headerName: '项目类型',
    // 自定义排序比较器
    comparator: (valueA, valueB, rowA, rowB) => {
      // 请将下方的targetValue替换为你业务中“对应值”的实际字段名
      const keyA = `${valueA}|${rowA.targetValue}`
      const keyB = `${valueB}|${rowB.targetValue}`
      
      const priorityA = priorityMap[keyA] ?? DEFAULT_PRIORITY
      const priorityB = priorityMap[keyB] ?? DEFAULT_PRIORITY
      
      // 优先按权重排序
      if (priorityA !== priorityB) {
        return priorityA - priorityB
      }
      // 权重相同时的兜底排序，可根据业务调整
      return valueA.localeCompare(valueB)
    }
  },
  // 其他列配置省略
]

const gridOptions = {
  columnDefs,
  // 配置初始默认排序，页面加载后自动触发该排序规则
  initialSortModel: [
    { colId: 'program', sort: 'asc' }
  ]
}

注意：如果你的“对应值”和program是同一个字段的属性，可直接调整key的生成逻辑匹配你的业务字段即可。

方案2：全局永久生效置顶规则 #

适合无论用户按任意列排序，都需要保留指定行置顶的场景，通过postSort全局回调实现：

const priorityMap = {
  'green|X': 1,
  'blue|Y': 2,
  'yellow|Z': 3
}
const DEFAULT_PRIORITY = 999

const gridOptions = {
  columnDefs: [/* 你的列配置 */],
  // 全局排序后回调，统一调整行顺序
  postSort: (rowNodes) => {
    rowNodes.sort((rowA, rowB) => {
      const keyA = `${rowA.data.program}|${rowA.data.targetValue}`
      const keyB = `${rowB.data.program}|${rowB.data.targetValue}`
      const priorityA = priorityMap[keyA] ?? DEFAULT_PRIORITY
      const priorityB = priorityMap[keyB] ?? DEFAULT_PRIORITY
      return priorityA - priorityB
    })
  }
}

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