在 onFirstDataRendered/onRowDataUpdated 期间设置初始选择时，如何按字母顺序对行进行排序，并将选择放在顶部？

Question

在我的分组 Ag-grid (React) 中，我在 onFirstDataRendered 和 onRowDataUpdated 期间使用 rowNode.setSelected 初始化选择。

要按字母顺序对顶部的选择进行排序，我不能像下面那样在 columnDefs 中使用排序/比较器字段，因为我的选择是在 onFirstDataRendered 和 onRowDataUpdated 期间初始化的，因此在运行 columnDefs 比较器函数时不会选择任何节点。

        export const ColDef = [
        {
            headerName: 'col1',
            enableRowGroup: true,
            field: 'name',
            rowGroupIndex: 2,
            hide: true,
            comparator: sortComparator,
            sort: 'asc',
        },
        ... ];

const sortComparator = (valueA, valueB, nodeA, nodeB, isDescending) => {      
    if ((nodeA.isSelected() || nodeA.isSelected() == undefined) && !nodeB.isSelected()) {
        return -1;
    }
    if (!nodeA.isSelected() && (nodeB.isSelected() || nodeB.isSelected() == undefined)) {
        return 1;
    }
    return valueA == valueB ? 0 : valueA > valueB ? 1 : -1;
};

我还能做什么？

Answer 1

创建一个自定义排序函数，首先检查是否选择了一行，然后按字母顺序排序。该函数可以在数据渲染和更新后调用。

排序功能示例：

const customSort = (gridApi) => {
  const rowData = [];
  gridApi.forEachNode(node => rowData.push(node));

  rowData.sort((a, b) => {
    const isSelectedA = a.isSelected();
    const isSelectedB = b.isSelected();

    if (isSelectedA && !isSelectedB) return -1;
    if (!isSelectedA && isSelectedB) return 1;

    return a.data.name.localeCompare(b.data.name);
  });

  gridApi.setRowData(rowData);
};

做出选择后，在

customSort

和

onFirstDataRendered

中调用此

onRowDataUpdated

函数。

onFirstDataRendered(params) {
  // Initialize selections
  // ...
  customSort(params.api);
}

onRowDataUpdated(params) {
  // Update selections if needed
  // ...
  customSort(params.api);
}