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

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

2 个答案: