根据另一个AG网格中的选定行过滤AG网格 [英] Filtering an ag-grid based on selected row in another ag-grid

问题描述

关于ReactJS的问题...

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

当在第一个ag型网格中选择一行时，第二个ag型网格(最初显示所有子记录)将向下筛选以仅显示与第一个ag型网格表中所选主记录有关的相关子记录。

示例

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

加载页面时，表1和表2均显示所有国家/地区和所有大都市

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

如能就如何实现这一目标提供一些指导，我们将不胜感激。

推荐答案

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

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

2. 也在父组件中，向接收当前选定行的第二个网格组件提供一个正确的值：

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中实现的这一点。

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

这篇关于根据另一个AG网格中的选定行过滤AG网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！