如何在ag-grid中实现复杂类型数据的列排序？

核心修复步骤 #

1. 给列定义绑定排序依赖的字段 #

就算用了自定义单元格渲染器，AG Grid 也得明确知道基于哪个字段的值排序。如果列定义里没写field属性，排序逻辑找不到对比值，就会出现sortable=true无效、comparator拿不到数据的情况。

针对你的示例数据，假设要基于field_value排序，列定义必须包含field: 'field_value'：

const columnDefs = [
  {
    headerName: '字段值',
    field: 'field_value', // 必须指定排序依赖字段
    sortable: true,
    cellRenderer: (params) => {
      // 你的自定义渲染逻辑，比如返回处理后的值
      return `<span>${params.data.field_value}</span>`;
    },
    // 可选：自定义比较逻辑（默认字符串排序满足需求可省略）
    comparator: (valueA, valueB) => {
      // valueA/valueB就是field指定的field_value的值
      return valueA.localeCompare(valueB);
    }
  },
  // 其他列定义...
];

2. 正确编写自定义Comparator #

如果需要基于field以外的字段（比如original_field_value）排序，或者需要复杂对比逻辑，直接从nodeA.data和nodeB.data里提取对应值即可：

comparator: (valueA, valueB, nodeA, nodeB) => {
  const valA = nodeA.data.original_field_value;
  const valB = nodeB.data.original_field_value;
  return valA.localeCompare(valB);
}

3. 不要让渲染器干扰原始数据 #

自定义渲染器只负责显示内容，别修改params.value或行数据本身，否则排序时会拿到错误的值。确保渲染器只基于原始行数据返回展示内容。

完整示例代码 #

结合你的示例数据，完整配置如下：

const sampleRowData = [
  {
    "field_name": "<some_value>",
    "field_value": "tgb34378eee847334894",
    "original_field_value": "tgb34378eee847334894",
    "_id": "1",
    "_img_id": "300",
  },
  {
    "field_name": "<some_value_1>",
    "field_value": "tgb34378eee847334895",
    "original_field_value": "tgb34378eee847334895",
    "_id": "2",
    "_img_id": "310",
  },
];

const columnDefs = [
  {
    headerName: '字段名称',
    field: 'field_name',
    sortable: true
  },
  {
    headerName: '字段值',
    field: 'field_value',
    sortable: true,
    cellRenderer: (params) => {
      // 自定义渲染示例：添加前缀
      return `ID: ${params.data.field_value}`;
    },
    comparator: (valueA, valueB) => {
      return valueA.localeCompare(valueB);
    }
  },
  // 其他列...
];

// 初始化AG Grid
new agGrid.Grid(document.querySelector('#myGrid'), {
  columnDefs: columnDefs,
  rowData: sampleRowData,
  defaultColDef: {
    resizable: true
  }
});

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