根据来自另一个的事件过滤一个 ag-grid答案

【问题标题】：Filter one ag-grid based on event from another one根据来自另一个的事件过滤一个 ag-grid
【发布时间】：2019-03-12 18:39:35
【问题描述】：

我想在我的第一个网格 grid1 中选择一行，然后事件函数将根据在所选行中找到的值过滤我的另一个网格 grid2。我正在使用库的纯 javascript 版本。

类似

gridOptions:{
    onRowSelected:my_event_filter_func,
    rowData: [...],
    columnDefs:[...]
}
grid1 = new agGrid.Grid(document.querySelector("#the_place"),gridOptions)

（grid2根据不同数据定义相同，无事件函数）

my_event_filter_func 在哪里

my_event_filter_func = function(event) {
    let my_name = event.data.name
    // filter grid2 to show only the rows where the 'name' column matches my_name
}

感谢任何帮助。

【问题讨论】：

您能否从选定的行中获取数据？

标签： javascript ag-grid

【解决方案1】：

我不能逐行给你答案，我假设你能够得到你选择的行。但我可以建议的是，首先，您创建一个位于 grid2 上的数据的副本。

function copyData() {
  rowData = [];
  gridApi.forEachNode(node => rowData.push(node.data));
  // temp is the copy of your full data in grid2
  temp = [...rowData];
}

接下来，在您的 my_event_filter_func 上，您可以根据来自 grid1 的过滤值过滤掉要在 grid2 上显示的行。

function my_event_filter_func(event) {
  let my_name = event.data.name

  // get the rows that do not have the matching value
  const rowsToBeRemoved = temp.filter(row => row['name'] !== my_name);

  // remove the rows from grid2 that do not have the matching names
  gridOptions.api.updateRowData({remove: rowsToBeRemoved});

}

【讨论】：

感谢您抽出宝贵的时间。是的，我最终做了类似的事情。也会发布我的答案。
不错！也很想看看你的解决方案，看看你是如何实现它的。我目前正在用 ag-grid 做很多事情，因此我正在尝试向尽可能多的 ag-grid 用户学习。好吧，如果我的代码有帮助，如果您能投票，将不胜感激；）

【解决方案2】：

2 个网格的来源是 grid1 的基础数据，所以它让我的生活更轻松。如果不是这种情况，您确实需要将grid2 的基本数据保存在某处，以便在事件触发时访问它。

我最终将我的 2 个网格声明为全局变量，并将下面的函数用作事件函数：

var onSelectionChanged = function(event) {

let name = grid1.gridOptions.api.getSelectedRows()[0].name; // we know there is only one
let newRowData = grid1.gridOptions.rowData
    .filter(x => x.name===name)
    .map(x => {
            return {
                'name': x.name
                // other fields...
            }
    })
    // this overwrites grid2 data so need to save original data somewhere.
    grid2.gridOptions.api.setRowData(newRowData);
    grid2.gridOptions.api.refreshCells({force:true});
};

【讨论】：