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

然后将此过滤后的数据设置为网格数据

this.gridOptions.setRowData(this.filteredData);

希望这会做有需要的

Answer 2

即使我们可以使用api.setRowData(newData)来显式更新/删除您的数据，该方法实际上也可以硬重置整个网格。根据{{3}}，结果如下：

网格将丢弃所有先前的选择和过滤器，并完全丢弃用新的覆盖旧数据。这是网格的第一种方式是最有效的方式，也是最强力的方式。

因此，我建议您改用transaction.remove。根据{{3}}，您可以提供rowNodeId来删除行，也可以使用基于对象引用的行来删除行。

首选此方法，因为

网格保持所有活动的排序，分组和过滤，包括更新以反映排序中数据的变化，分组或过滤会受到影响。

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

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

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

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.
}

Angular5：根据条件隐藏农业网格行

4 个答案: