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

Question

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

类似

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

(grid2根据不同数据定义相同，w/o事件函数)

其中 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});
};

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

Filter one ag-grid based on event from another one

javascript

ag-grid