要获取用户在 AG-Grid-React 表格列过滤器中输入的值,我们需要使用 AgGridReact 的 API 中提供的 onFilterModified 回调函数和 getColumnDef 函数。
第一步是在 AgGridReact 组件中定义 onFilterModified 回调函数。这个回调函数会在用户修改过滤器时被调用。
onFilterModified = () => {
const gridApi = this.gridApi;
const filterInstance = gridApi.getFilterInstance('columnName');
const userInput = filterInstance.getModel().filter;
console.log(userInput);
}
第二步是在 getColumnDef 函数中设置每列的过滤器属性。这里我们设置 filterParams 属性以便能够在过滤器中获取用户输入的值。
const columnDefs = [
{
headerName: 'Column1',
field: 'column1',
filter: 'agTextColumnFilter',
filterParams: {
filterValueGetter: (params) => {
if (params) {
return params.api.getFilterInstance('columnName').getModel().filter;
}
return null;
}
}
},
{
headerName: 'Column2',
field: 'column2',
filter: 'agTextColumnFilter',
filterParams: {
filterValueGetter: (params) => {
if (params) {
return params.api.getFilterInstance('columnName').getModel().filter;
}
return null;
}
}
}
];
其中,'columnName' 换成实际的列名。
现在,每当用户在某个列的过滤器中输入值时,onFilterModified 函数就会被调用,并获取用户输入的值。同时,在每列的 filterParams 中设置的 filterValueGetter 函数会被调用来获取过滤器的值。
上述两个步骤应该足以说明如何获取用户在 AG-Grid-React 表格列过滤器中输入的值。