单击按钮时如何应用农业网格自定义过滤器

如何解决单击按钮时如何应用农业网格自定义过滤器

单击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;
}

实时演示