Angular 5：根据条件隐藏 ag-grid 行

Question

我收到来自服务的以下响应，当 flag 为真时，我必须隐藏整行（我总共有 20 列），否则显示它。我怎样才能在 ag-grid 中实现这一目标？

data = {
    name: "A",
    flag: true
   },
   {
    name: "B",
    flag: false
   },
   {
    name: "C",
    flag: false
   }

我确实尝试了如下所示的 useExternalFilter，然后我对如何进一步使用这个 useExternalFilter 感到困惑。谁能指导我完成。

this.filterOptions = {
  useExternalFilter: true
};

this.gridOptions = {
  filterOptions:  this.filterOptions
 };

Answer 1

最简单的方法是，首先根据标志值过滤数据

const filteredData = this.data.filter(item => !item.flag);

然后将这个filteredData设置为网格数据

this.gridOptions.setRowData(this.filteredData);

希望这会有所帮助

Answer 2

尽管我们可以使用 api.setRowData(newData) 显式 update/remove 您的数据，但此方法本质上是硬重置整个网格。根据 documentation，结果如下：

the grid discards all previous selections and filters, and completely overwrites the old data with the new. This was the first way the grid worked and is the most 'brute force' way.

因此，我建议您改用 transaction.remove。根据 documentation，您可以提供 rowNodeId 来删除行，或者我们可以使用基于对象引用的行来删除行。

首选此方法，因为

The grid keeps all active sorting, grouping and filtering, including updating to reflect the changes in the data should the sorting, grouping or filtering be impacted.

首先，我们可以获得需要移除的对象列表。然后，我们使用 api.updateRowData(transaction) 执行事务以更新行数据，以便删除这些行。

const removeData = this.data.filter(item => item.flag);
this.gridApi.updateRowData({ remove: removeData });

我创建了一个 working demo 来说明上述行为。

Answer 3

你要的是这个：

this.gridOptions = {
  // is always present, so return true
  isExternalFilterPresent: function() { 
    return true; 
  },

  // return true if flag=true
  doesExternalFilterPass: function(rowNode) { 
    return rowNode.data.flag; 
  }
};

有关详细信息，请参阅 ag-Grid Docs

Answer 4

如果想更动态的过滤，可以使用bind方法

this.gridOptions = {
  // is always present, so return true
  isExternalFilterPresent: function() { 
    return true;
  }
}

ngOnInit() {
  this.gridOptions.doesExternalFilterPass = this.isVisible.bind(this)
}

isVisible(rowNode): boolean {
  // Write your logic. You can use rowNode and all component valiables.
}

Angular 5：根据条件隐藏 ag-grid 行

Angular5: Hide ag-gird rows based on condition

ag-grid

angular

ag-grid-angular