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

Posted 2023-03-24

【中文标题】使用 Javascript 隐藏或折叠 ag-grid 中的单个特定行

【英文标题】：Hide or Collapse a single specific row in ag-grid using Javascript

【发布时间】：2021-10-19 14:32:56

【问题描述】：

在没有任何特定解决方案的情况下在 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

【问题讨论】：

你能分享一下stackblitz吗

感谢您的回复。我想隐藏使用“单击我”链接单击的行。原因，我不想删除该行是因为，以后我应该能够取消隐藏该行。非常感谢。 stackblitz.com/edit/js-nvtqhz?file=infoCellRenderer.js

【参考方案1】：

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

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

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

【讨论】：

你为我节省了几个小时。这就是我一直在寻找的。谢谢！

排序后如何应用外部过滤器？