如何获取ag-Grid中的选择顺序？

Question

我正在使用网格 api 通过使用 function getSelectedRows()来获取选定的行。 但是，行列表似乎是无序的，即项目不是我选择它们的顺序。

是否有另一种方法可以按照选定的顺序获取选定的行？

Answer 1

您可以自己跟踪所选项目，并通过侦听selectionChanged事件确保它按时间顺序排列。

// global keyboard state, put this outside of the function body
// we need to store the current shift key state to know if user
// are selecting multiple rows
const KEYBOARD_STATE = {
  isShiftPressed: false
};
document.addEventListener("keydown", (e) => {
  KEYBOARD_STATE.isShiftPressed = e.key === "Shift";
});
document.addEventListener("keyup", (e) => {
  KEYBOARD_STATE.isShiftPressed = false;
});

const [selection, setSelection] = React.useState([]);
const onSelectionChanged = (e) => {
  const selectedNodes = e.api.getSelectedNodes();
  const lastSelectedNode =
    selectedNodes[0]?.selectionController?.lastSelectedNode;
  // if lastSelectedNode is missing while multi-selecting,
  // AgGrid will select from the first row
  const selectedNodeFrom = lastSelectedNode || e.api.getRenderedNodes()[0];
  const isRangeSelect = KEYBOARD_STATE.isShiftPressed;
  const difference = (arr1, arr2) => arr1.filter((x) => !arr2.includes(x));
  const newSelection = difference(selectedNodes, selection);

  if (newSelection.length > 0) {
    if (isRangeSelect) {
      const isSelectBackward =
        newSelection[0].rowIndex < selectedNodeFrom.rowIndex;

      if (isSelectBackward) {
        newSelection.reverse();
      }
    }

    newSelection.forEach((n) => updateSelection(n));
  } else {
    updateSelection(); // deselect
  }
};

const updateSelection = (rowNode) => {
  setSelection((selections) => {
    if (rowNode) {
      const isSelected = rowNode.isSelected();

      if (isSelected) {
        return [...selections, rowNode];
      } else {
        return selections.filter((s) => s.id !== rowNode.id);
      }
    } else {
      return selections.filter((n) => n.isSelected());
    }
  });
};

return (
  <>
    <pre>
      {JSON.stringify(selection.map((n) => n.data.id))}
    </pre>
    <AgGridReact
      rowSelection="multiple"
      columnDefs={columnDefs}
      rowMultiSelectWithClick
      onSelectionChanged={onSelectionChanged}
      {...}
    />
  </>
);

现场演示