使用 Javascript 隐藏或折叠 ag-grid 中的单个特定行

Question

在没有任何特定解决方案的情况下在 SO 中进行了大量搜索后，我不得不问这个问题。 简单来说 - 我想在 ag-grid 中使用 Javascript 折叠或隐藏特定行。我已经尝试了在 ag-grid 文档和 SO 中解释的几种方法，但到目前为止都没有奏效。

以下所有方法都试过了，没有一个代码奏效。

Let rowNode = gridOptions.api.getRowNode(params.value);

Method #1. params.api.getDisplayedRowAtIndex(2).setExpanded(false);
Method #2. params.api.getRowNode(params.value).setExpanded(false);
Method #3. gridOptions.api.setRowNodeExpanded(rowNode,false);
Method #4. gridOptions.api.getRowNode(rowId).style.visibility = "collapse";

我也尝试过使用纯 CSS，像这样 - 数据已消失，但白色空白行可见

rowNode.setDataValue('class', 'hidden'); //Where “class” is a field

const gridOptions = {
    //Other grid options...
  getRowClass: params => {
        if (params.data.class === "hidden") {
            return 'hidden';
        }
},

https://stackblitz.com/edit/js-nvtqhz?file=infoCellRenderer.js

Answer 1

setExpand / setRowNode Expanded 仅适用于可折叠的行，即它将折叠展开的行。它不会隐藏它。 我编辑了你的stackblitz， 我进行了一些更改以使其正常工作。

1. Selectable Rows 因此，当您单击一行时，我将其标记为选中。 ag-grid rowSelection: 'single' | 'multiple 上有一个属性。如果您想一次只隐藏一行，请使用 'single' 如果可以隐藏多行，请使用 'multiple'
2. External filtering 因此，如果我们提供标准，ag 网格可以过滤行。它也可以检查任何数据属性。对于您的问题，我添加了一个过滤器，如果选择了任何行，请将其从网格中删除。 以下是变化

/// method called on clicking the button
function hideRow(params) {
  let rowNode = gridOptions.api.getRowNode(params.value); // get the clicked row
  rowNode.setSelected(true); //mark as selected
  gridOptions.api.onFilterChanged(); // trigger filter change
}

触发过滤器更改将为每一行调用此方法

function doesExternalFilterPass(node) {
  return !node.selected; // if row node is selected dont show it on grid.
}

您可以使用随时访问隐藏的行 gridOptions.api.getSelectedRows() //Returns an array of data from the selected rows. 或 gridOptions.api.getSelectedNodes() //Returns an array of the selected nodes. 而且，如果您想再次显示一行，只需从上述方法中过滤并执行这些步骤

rowNode.setSelected(false); //mark as unselected
gridOptions.api.onFilterChanged(); // trigger filter change

这将自动显示网格上的行。 希望这可以帮助！ :)