Я работаю над проектом, который требует внешнего фильтра ag-grid с раскрывающимся списком, который отфильтрует результат одного столбца.
Я попытался сделать это с помощью формы реакции и сокращения.
<select id="ddl" className="custom-select" onChange={this.jsFunction(this)}>
<option >Search category name</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
при изменении раскрывающегося списка значение должно быть отфильтровано с помощью react и ag-grid.
Вы можете использовать возможность ag-grid для выполнения быстрого фильтра который фильтрует по всем столбцам, и вы можете настроить его для применения к определенному столбцу
Этого можно добиться с помощью внешних фильтров ag-grid.
Быстрый фильтр предпочтительнее, если вы хотите сделать фильтр по всей сетке, и ваша функция компаратора окажется сложной, если вы хотите фильтровать только по одному столбцу.
В вашем html вы можете сделать onChange={this.jsFunction($event.target.value)}
jsFunction(filterVal) {
this.filterVal= filterVal;
gridOptions.api.onFilterChanged(); //this invokes your custom logic by forcing grid filtering
}
function doesExternalFilterPass(node) {
if (this.filterVal) {
return node.data.yourColumnValue === this.filterVal;
}
return true; //default case return all rows
}
Наконец, обновите конфигурацию вашей сетки
isExternalFilterPresent: true,
doesExternalFilterPass: doesExternalFilterPass
официальный пример можно найти здесь
