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

Question

在SO里找了很多都没有什么特别的解决办法，我不得不问这个问题。简而言之 - 我想在 ag-grid 中使用 Javascript 折叠或隐藏特定行。我尝试了 ag-grid 文档和 SO 中解释的几种方法，但 none 一直有效到现在。

以下所有方法均已尝试，none 个代码有效。

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，我做了一些更改以使其正常工作。

Selectable Rows 因此，当您单击一行时，我会将其标记为已选中。 ag-grid rowSelection: 'single' | 'multiple 上有一个属性。如果一次只想隐藏一行，请使用 'single' 如果可以隐藏多行，请使用 'multiple'
External filtering 因此，如果我们提供 criteria.It 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

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

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

Hide or Collapse a single specific row in ag-grid using Javascript

javascript

hide

collapse

ag-grid