Как использовать Quick Filter с серверной / бесконечной моделью строк? - PullRequest
Новая
       6

Как использовать Quick Filter с серверной / бесконечной моделью строк?

0 голосов
/ 29 ноября 2018

Согласно документации: Быстрый фильтр , быстрый фильтр работает с clientSide моделью строки.

Мы используем serverSide модель строки для и у нас есть требование использовать быстрый фильтр с данными, которые есть у клиента - в блоках кеша сетки.

Я хотя бы использовал трубу фильтра с [rowData]="myRowData", но с этой моделью строки я нене получите никаких данных от myRowData.

Например, если вы посмотрите на этот план Модель строки на стороне сервера - быстрый фильтр , я назначил [rowData]="rowData"в разметке и инициализировал его как [].

После загрузки исходного чанка с сервера, Я предполагал , что данные блока кэша должны быть доступны с ним, так что, используя угловой канал, я смогу отфильтровать данные на клиентесторона (имитирующая быстрый фильтр с serverSide рядной моделью).Что-то вроде [rowData]="rowData | filter: filterText" - как то, что мы делали в

Но я боюсь, что данные кэша недоступны с rowData.

Как мы можем как-то использовать Quick Filter с ag-grid, имеющим serverSide модель строки?

1 Ответ

0 голосов
/ 01 декабря 2018

Я бы сказал, что это не легкая задача.

Но вот как это можно решить:

  1. Как вы уже упоминали quickFilter - это clientSide особенность типа модели
  2. Но никто не отменял способ использования setFilterModel

    Это потребовало бы много хаков и могло бы что-то сломать (вы должны проверить это в своем решении и написать отзыв, затем)

Прежде всего, setFilterModel не может работать с виртуальными данными (мы должны определить column специально для quickFilter логики) 

{
    field:'-', would be used as a reference
    hide:true, - hide in grid data
    lockVisible:true, - disable visibility changing via menu
    filter:"agTextColumnFilter", - require for setFilterModel
    filterParams:{
      newRowsAction: "keep"
    }
},

Далее нам нужно создать обходной путь для filterModel в datasource

getRows: function(params) {
    setTimeout(function() {
        var dataAfterSortingAndFiltering = sortAndFilter(data, params.sortModel, params.filterModel);
        var rowsThisPage = dataAfterSortingAndFiltering.slice(params.startRow, params.endRow);
        var lastRow = -1;
        if (dataAfterSortingAndFiltering.length <= params.endRow) {
            lastRow = dataAfterSortingAndFiltering.length;
        }
        params.successCallback(rowsThisPage, lastRow);
    }, 3000);
}

function sortAndFilter(allOfTheData, sortModel, filterModel) {
  return sortData(sortModel, filterData(filterModel, allOfTheData));
}
function sortData(sortModel, data) {
  ... sort logic here (doesn't matter for now) ...
}

Теперь о логике quickFilter, мы определили для нее столбец dummy и вот какследует использовать:

setFilterModel будет принимать только существующее имя столбца ( "-" в нашем случае )

и с ограниченным количеством объектов: но мы будем использовать filter(как это используется в реальных случаях) 

applyFilter(){
    this.gridApi.setFilterModel({"-":{filter: this.filterText}})
}

и последняя точка реализации - filterData функция 

function filterData(filterModel, data) {
  let filterPresent = filterModel && Object.keys(filterModel).length > 0;
  if (!filterPresent) { - if filter model is empty - skip it
    return data;
  }
  data = data.filter(i=>{
    if(Object.keys(i).some(k => i[k] && i[k].toString().toLowerCase().includes(filterModel['-'].filter)))
      return i;
  })
  return data;
}

Каждый объект будет исследован, и еслиСвойство ny содержит quickFilter значение - оно будет в результате

Более того, как только вы выйдете из существующего диапазона (случай бесконечной прокрутки), запрошенные данные будут отфильтрованы этим свойством

* не уверен насчет проверки дублированных данных по запросу

Мой образец

Ваш измененный образец

...