Angular5: показывать скрытые строки в ag-grid - PullRequest
Новая
       4

Angular5: показывать скрытые строки в ag-grid

0 голосов
/ 03 июня 2019

Ниже мой сервисный ответ, как только страница загружает сетку, отображаются только те строки, чей 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)

1 Ответ

1 голос
/ 05 июня 2019

Что касается использования 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).Использование этого метода предпочтительнее, если вы хотите сохранить предыдущее состояние сетки.

...