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

Question

关于 ReactJS 的问题...

我需要有 2 个相邻的 ag-grid，第一个显示主记录，第二个显示子记录。

当在第一个 ag-grid 中选择一行时，第二个 ag-grid（最初显示所有子记录）将过滤以仅显示与第一个 ag 中所选主记录相关的相关子记录-网格table.

示例，

table#1：国家
table # 2 : 大都市

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

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

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

Answer 1

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

在父组件中，作为props提供第一个grid组件的回调，让grid在选中行发生变化时通知父组件
同样在父组件中，为接收当前选定行的第二个网格组件提供 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 Event onSelectionChanged 知道何时选择了一行，然后通过上面提供的回调将所选行简单地传递给父级：

  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 设置过滤器：

过滤器模型文档：

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

在 following sample 中看到这个实现。

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

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

Filtering an ag-grid based on selected row in another ag-grid

reactjs

ag-grid

ag-grid-react