根据另一个 ag-grid 中的选定行过滤 ag-grid

Question

关于 ReactJS 的问题...

我需要有 2 个彼此相邻的 ag 网格，其中第一个显示主记录，第二个显示子记录。

当在第一个 ag-grid 中选择一行时，第二个 ag-grid（最初显示所有子记录）将向下过滤以仅显示与第一个 ag-grid 中所选主记录有关的子记录表。

例子，

• 表 #1：国家/地区
• 表 #2：大都市

当页面加载时，表 #1 和表 #2 都显示所有国家和所有大城市

当用户点击表 #1 中的“印度”时，表 #2 将仅显示印度的大都市列表。

我们将不胜感激有关如何实现这一目标的一些指导。

Answer 1

假设我们有一个父组件，它呈现两个子网格组件，第一个网格用于选择行，第二个网格用于根据所选行进行过滤。

1. 在父组件中，作为props提供对第一个网格组件的回调，以便网格可以在所选行发生变化时通知父组件。

2. 同样在父组件中，为接收当前选中行的第二个网格组件提供一个prop值：

const GridExample = () => {
  const [filter, setFilter] = useState(null);
  return (
    <div style={{ height: '100%', width: '100%', display: 'flex' }}>
      <CountryGrid filterHasChanged={setFilter} />
      <CityGrid currentFilter={filter} />
    </div>
  );
};

在第一个网格中，使用Grid EventonSelectionChanged 知道何时选择了一行，然后通过上面提供的回调将选择的行简单地传递给父级：

  const selectionChanged = (params) => {
    const selectedRows = params.api.getSelectedRows()[0];

    // create an object for the filterModel to be applied in the City Grid
    const filterModel = {
      country: {
        values: [selectedRows.country],
      },
    };

    props.filterHasChanged(filterModel);
  };

然后在第二个网格中，通过 useEffect 挂钩监听更改，并在所选行更改时调用 gridApi.setFilterModel 设置过滤器：

过滤器模型文档：

• https://www.ag-grid.com/react-grid/filter-set-api/#set-filter-model
• https://www.ag-grid.com/react-grid/filter-api/

  useEffect(() => {
    if(props.currentFilter) {
      gridApi.setFilterModel(props.currentFilter)
    }
  }, [props.currentFilter]);

请参阅following sample 中的实现。

注意：该样本未使用国家/城市数据集，但它显示了您将如何实现两个网格相互通信的主要原则。