как предварительно установить фильтр столбцов в ag-сетке

У меня есть Ionic/Angular приложение, использующее ag-grid. Я хотел бы, чтобы к некоторым сеткам автоматически применялся фильтр при загрузке сетки - без необходимости что-либо делать пользователю.

Я пробовал следующее:

onGridReady(params) {
  params.api.sizeColumnsToFit();
  // get filter instance
  var filterComponent = params.api.getFilterInstance("isActive");
  // OR set filter model and update
  filterComponent.setModel({
    type: "greaterThan",
    filter: 0
  });
  filterComponent.onFilterChanged();
}

но это ничего не дало. Любые идеи?


ag-grid ag-grid-ng2
person user2429448    schedule 23.03.2018    source источник
comment
Смотрите мой ответ ниже. firstDataRendered это то, что вы хотите.   -  person Aaron Hudon    schedule 07.10.2020

Ответы (5)


arrow_upward
13
arrow_downward

Изменить: AgGrid включил обратный вызов onFirstDataRendered в версии 24.0, как указано в более поздних комментариях. Исходный ответ ниже теперь актуален только для версий, которые предшествуют этой функции.

onFirstDataRendered(params) {
    var filterComponent = params.api.getFilterInstance("isActive");

    filterComponent.setModel({
        type: "greaterThan",
        filter: 0
    });

    filterComponent.onFilterChanged();
}

Воспроизведена ваша проблема в паре их более старых групп example, казалось, что она была решена добавлением небольшой задержки. Просто рискну предположить, что, возможно, DOM еще не полностью готов, хотя сетка готова.

Версии Pre-onFirstDataRendered:

onGridReady(params) {
params.api.sizeColumnsToFit();

setTimeout(() => {
    var filterComponent = params.api.getFilterInstance("isActive");
    filterComponent.setModel({
      type: "greaterThan",
      filter: 0
    });
    filterComponent.onFilterChanged();
    },150)
}
person playtoh    schedule 23.03.2018
comment
Спасибо. Но это не всегда работает, если сеть медленная или рядов много, мне приходится использовать значение тайм-аута 1000 или более, что сбивает пользователя с толку, когда сетка загружается быстро. Поэтому я переместил код сразу после получения новых данных с сервера. - person user2429448; 25.03.2018
comment
Есть ли способ установить несколько условий одновременно? - person Kylo Ren; 06.06.2019

arrow_upward
6
arrow_downward

Я закончил этим.

var FilterComponent = gridOptions.api.getFilterInstance('Status');
FilterComponent.selectNothing(); //Cleared all options
FilterComponent.selectValue('Approved')  //added the option i wanted
FilterComponent.onFilterChanged();
person user9915241    schedule 08.06.2018

arrow_upward
5
arrow_downward

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

  1. # P2 #
    # P3 #

  2. В этом ответе предлагается установить свойство gridOptions deltaRowDataMode=true

  3. Вы также можете прослушать одно из событий сетки, которые генерируются при изменении даты сетки, а затем применить фильтр https://www.ag-grid.com/javascript-grid-events/#miscellaneous: rowDataChanged, rowDataUpdated

Все они должны сохранять фильтр при изменении данных, но я думаю, вам все равно понадобится немного дополнительной логики (установка флага), если вы хотите, чтобы фильтр был только при первой загрузке.

person Fabian    schedule 24.04.2018

arrow_upward
1
arrow_downward

В моем случае мне нужно восстановить фильтр набора Ag-Grid при загрузке сетки. Вдохновленный принятым ответом, я понимаю, что к api экземпляра фильтра можно получить доступ только после того, как данные сетки готовы (НЕ gridReady), поскольку ему необходимо агрегировать данные строки для заполнения своего списка фильтров.

Поэтому, как указано в № 3 в ответе @ Fabian, я настроил прослушиватели событий при изменении данных строки.

Вы также можете прослушать одно из событий сетки, которые генерируются при изменении даты сетки, а затем применить фильтр https://www.ag-grid.com/javascript-grid-events/#miscellaneous: rowDataChanged, rowDataUpdated

В аналогичном случае использования я считаю, что это лучший подход, чем установка произвольного числа тайм-аута перед доступом к экземпляру фильтра, поскольку это может привести к противоречивым результатам.

person wctiger    schedule 19.06.2020

arrow_upward
1
arrow_downward

v24.0.0

Лучший способ реализовать это - применить фильтр по умолчанию в обратном вызове firstDataRendered.

e.g.

onFirstDataRendered(params) {
   //... apply your default filter here
}
person Aaron Hudon    schedule 07.10.2020