时间戳

首页 > 解决方案 > Angular5：在 ag-grid 中显示隐藏的行

angular - Angular5：在 ag-grid 中显示隐藏的行

问题描述

以下是我的服务响应，页面加载后，网格仅显示那些result为yes. 现在，我的页面也有一个show all复选框，因此一旦选中该复选框，所有隐藏的行也应该是可见的，并且一旦我取消选中该复选框，只有带有的行result = yes应该是可见的。如何实现此显示/隐藏行功能？请指导。以下是我到目前为止的代码，我确实使用过refreshCells，但它没有给我预期的结果。

    data = {
        name: "A",
        result: "no"
       },
       {
        name: "B",
        result: "no"
       },
       {
        name: "C",
        result: "yes"
       },
       {
        name: "D",
        result: "yes"
       }

    private gridApi;
    private dataCopy;

    constructor() {
      this.dataCopy = data;
    }

    this.gridOptions = {
      isExternalFilterPresent: function() { 
        return true; 
      },

      doesExternalFilterPass: function(rowNode) { 
        return rowNode.data.result = "yes"; 
      }
    };

    onGridReady(params) {
       this.gridApi = params.api;
    }

    //function call on checkbox click
    showAll(event) {
      if(event.target.checked) {
        this.gridApi.refreshCells(this.dataCopy); 
      }
    }

    //HTML
    <input type="checkbox" (change)=showAll($event)

标签： angularag-gridag-grid-angular

解决方案

关于您对 ag-grid 的使用api.refreshCells()，我认为这不会导致网格更新行值，因为该方法的预期行为只会影响当前呈现的单元格，如文档中所述。

您可以采用以下方法来更新行节点，并且有几种方法。

1) 使用单向数据绑定到[rowData]输入属性绑定。这适用于 Angular 和 React 等框架。您可以通过将复选框绑定到change事件来做到这一点。然后，我们创建您数据的浅表副本，然后根据复选框选择过滤/分配您的行数据值。我在这里做了一个简短的演示。

<input type="checkbox" (change)="toggleCheckbox($event)"/>
.
.

ngOnInit() {
  this.dataCopy = [...this.rowData];
}

toggleCheckbox(event){
  if (event.target.checked) {
    this.rowData = this.dataCopy;
  } else {
    this.rowData = this.dataCopy.filter(obj => obj.result === 'yes');
  }
}

2）使用api.setRowData(newData)。

3）使用api.updateRowData(transaction)。如果要保持先前的网格状态，则首选使用此方法。

推荐阅读