问题描述
单击updatefilter按钮时,我需要设置过滤器。我正在使用ag-grid-react。
class Sample extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs: [{
headerName: "Make",field: "make"
},{
headerName: "Model",field: "model"
},{
headerName: "Price",field: "price"
},{
headerName: "Date",field: "date"
}
],rowData: [
{make: "Toyota",model: "Celica",price: 35000,date:'01-04-2020'},{make: "Ford",model: "Mondeo",price: 32000,date:'02-04-2020'},model: "Mondeo1",date:'03-04-2020'},model: "Mondeo2",price: 36000,date:'04-04-2020'},{make: "Porsche",model: "Boxter",price: 72000,date:'05-04-2020'},{make: "Toyota",date:'06-04-2020'},date:'07-04-2020'},date:'08-04-2020'},date:'09-04-2020'},date:'10-04-2020'},date:'11-04-2020'},date:'12-04-2020'},date:'13-04-2020'},date:'14-04-2020'},date:'15-04-2020'},date:'16-04-2020'},date:'17-04-2020'},date:'18-04-2020'},date:'19-04-2020'},date:'20-04-2020'},date:'21-04-2020'},date:'22-04-2020'},date:'23-04-2020'}
]
}
}
onGridReady = params => {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.gridApi.sizeColumnsToFit();
};
updatefilter = () =>
{
let getStatusInstance = this.gridApi.getFilterInstance('make');
if (getStatusInstance) {
getStatusInstance.setModel({
value: "Ford"
});
}
this.gridApi.onFilterChanged();
}
render() {
return (
<div className="ag-theme-alpine" style={ {height: '800px',width: '800px'} }>
<button onClick={this.updatefilter}>
Update Filter
</button>
<AgGridReact
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
onGridReady={this.onGridReady}
enableFilter={true}
rowSelection={'multiple'}
>
</AgGridReact>
</div>
);
}
}
我引用了此链接https://www.ag-grid.com/javascript-grid-filter-provided-simple/
解决方法
替换此行
getStatusInstance.setModel({
value: "Ford",});
与此
getStatusInstance.setModel({
filter: "Ford",filterType: "contains",type: "text"
});
这是参数接口TextFilterModel
,取自Ag-Grid docs。您需要像这样传递它,否则结果将根本不适用。
// text filter uses this filter model
interface TextFilterModel {
// always 'text' for text filter
filterType: string;
// one of the filter options,e.g. 'equals'
type: string;
// the text value associated with the filter.
// it's optional as custom filters may not
// have a text value
filter?: string;
}