React中AG Grid排序时固定ID为956306的行实现方案

问题分析 #

你当前的代码尝试直接修改gridRef.current.props.rowData来移动目标行，但这种方式不符合React的状态管理逻辑——直接修改props数据不会触发AG Grid的重新渲染，还可能引发不可预期的问题。下面提供两种更可靠的实现方式：

方案一：自定义排序比较器（推荐） #

利用AG Grid的comparator属性，在排序阶段直接让ID为956306的行优先排在顶部，其他行遵循正常排序规则，无需修改原始数据源。

const handleApplyQuickSort = (selectedSort: string) => {
  const colId = SORT_MAP[selectedSort];
  if (colId && gridRef.current) {
    // 自定义排序比较器：优先锁定目标行在顶部
    const customComparator = (valueA, valueB, nodeA, nodeB) => {
      const isTargetRowA = String(nodeA.data.id) === '956306';
      const isTargetRowB = String(nodeB.data.id) === '956306';

      // 目标行优先排在前面
      if (isTargetRowA && !isTargetRowB) return -1;
      if (!isTargetRowA && isTargetRowB) return 1;

      // 其他行按降序规则排序
      if (valueA > valueB) return -1;
      if (valueA < valueB) return 1;
      return 0;
    };

    gridRef.current.columnApi.applyColumnState({
      state: [{
        colId: colId,
        sort: 'desc',
        comparator: customComparator // 绑定自定义排序器
      }],
      defaultState: { sort: null },
    });
    initialSortAppliedRef.current = true;
  }
};

优势 #

• 完全贴合AG Grid的排序机制，逻辑清晰
• 无需修改原始数据源，避免状态管理混乱
• 排序行为由AG Grid内部处理，稳定性更高

方案二：修改数据源并触发重新渲染 #

如果需要通过修改数据源实现，必须确保通过组件状态更新（而非直接修改props）来触发AG Grid的重新渲染：

假设你的行数据通过useState管理：

import { useState, useRef } from 'react';

// 假设行数据是组件内部状态
const [rowData, setRowData] = useState<UIModel[]>([]);
const gridRef = useRef<any>(null);
const initialSortAppliedRef = useRef<boolean>(false);

const handleApplyQuickSort = (selectedSort: string) => {
  const colId = SORT_MAP[selectedSort];
  if (colId && gridRef.current) {
    // 先应用列排序
    gridRef.current.columnApi.applyColumnState({
      state: [{ colId: colId, sort: 'desc' }],
      defaultState: { sort: null },
    });
    initialSortAppliedRef.current = true;

    // 复制数据源并移动目标行到顶部
    const updatedData = [...rowData];
    const targetIndex = updatedData.findIndex(row => String(row.id) === '956306');
    if (targetIndex !== -1) {
      const targetRow = updatedData.splice(targetIndex, 1)[0];
      updatedData.unshift(targetRow);
      // 更新状态触发重新渲染
      setRowData(updatedData);
    }
  }
};

注意事项 #

• 必须通过setRowData这类状态更新函数修改数据，直接操作数组不会触发渲染
• 若行数据来自父组件props，需通过回调通知父组件更新数据，而非直接修改props

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