Javascript 根据来自另一个ag网格的事件筛选一个ag网格

我想在我的第一个网格

grid1

中选择一行，然后事件函数将根据在所选行中找到的值过滤我的另一个网格

grid2

。我使用的是该库的纯javascript版本

差不多

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

（

grid2

基于不同的数据和不带事件函数以相同的方式定义）

其中

my\u event\u filter\u 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
}

---

非常感谢您的帮助。

我无法逐行回答您的问题，我假设您能够获得选定的行。但是我可以建议的是，首先，你要创建一个数据的副本，它位于你的grid2上

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

接下来，在您的

my\u event\u filter\u 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});

}

---

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

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

接下来，在您的

my\u event\u filter\u 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});

}

---

这两个网格的源代码是

grid1

的基础数据，因此它使我的生活更轻松。如果不是这样，您确实需要将

grid2

的基础数据保存在某个地方，以便在触发事件时可以访问它

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

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

---

这两个网格的源代码是

grid1

的基础数据，因此它使我的生活更轻松。如果不是这样，您确实需要将

grid2

的基础数据保存在某个地方，以便在触发事件时可以访问它

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

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

---

您是否能够从所选行获取数据？您是否能够从所选行获取数据？是否需要时间。是的，我最后做了类似的事情。我也会发布我的答案。很好！我也想看看你的解决方案，看看你是如何实施的。我目前正在做很多关于ag grid的工作，因此我试图向尽可能多的ag grid用户学习。好的，如果我的代码有帮助的话，如果您能投票，我将不胜感激；）谢谢你花时间。是的，我最后做了类似的事情。我也会发布我的答案。很好！我也想看看你的解决方案，看看你是如何实施的。我目前正在做很多关于ag grid的工作，因此我试图向尽可能多的ag grid用户学习。好的，如果我的代码有帮助的话，如果您能投票，我将不胜感激；）