根据来自另一个事件的事件过滤一个农业网格

Question

我想在我的第一个网格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
}

任何帮助表示赞赏。

Answer 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});

}

Answer 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});
};