Блог

Я использую угловую сетку AG и хотел бы использовать пользовательские фильтры в сочетании с моделью бесконечной строки.

В документации пользовательских фильтров не упоминается модель бесконечной строки, поэтому неясно, совместимы ли они или нет. Я реализовал пример «простого фильтра» из документации и прикрепил его к своей сетке, и вот что я наблюдаю:

• Пользовательский фильтр отображается правильно, и при нажатии на переключатель сетка обновляется.
• Однако данные не изменяются, и doesFilterPass() метод пользовательского фильтра, похоже, никогда не вызывается (что не имело бы смысла в модели бесконечной строки).
• Метод источника данных моей модели строк getRows() вызывается, но params.filterModel остается пустым.

Мне кажется, что это почти работает, за исключением того, что пользовательский фильтр должен либо:

• попросите сетку добавить модель фильтра, которую может обработать источник данных
• или скажите источнику данных напрямую применить фильтр (это кажется возможным, потому что фильтр может получить доступ к источнику данных через params.rowModel.datasource , но это похоже на взлом)

Есть ли правильный способ сделать это, который я пропустил?

Если вы используете модель бесконечных строк, сетка ожидает, что вы самостоятельно обработаете фильтрацию данных и вернете отфильтрованные строки в getRows обратном вызове, как описано здесь: https://www.ag-grid.com/angular-grid/infinite-scrolling/#sorting—filtering

Пожалуйста, ознакомьтесь со следующим примером, в котором показано, как использовать пользовательский компонент фильтра для фильтрации строк в столбце Возраст: https://plnkr.co/edit/riKeOvcWdUwWioVs

Внутри getModel обратного вызова вы просто возвращаете значение / объект, который будет передан сеткой как request.filterModel внутри getRows :

   getModel(): any {
    if (this.filterValue === 'all') {
      return null;
    } else {
      return {
        filter: this.filterValue,
        type: 'equals',
      };
    }
  }
 

Затем внутри getRows я написал некоторые базовые функции для фильтрации данных:

           getRows: function (params) {
            console.log(
              'asking for '   params.startRow   ' to '   params.endRow
            );
            setTimeout(function () {
              var dataAfterFiltering = filterData(data, params.filterModel);
              var rowsThisPage = dataAfterFiltering.slice(
                params.startRow,
                params.endRow
              );
              var lastRow = -1;
              if (dataAfterFiltering.length <= params.endRow) {
                lastRow = dataAfterFiltering.length;
              }
              params.successCallback(rowsThisPage, lastRow);
            }, 500);
          },