单击按钮时如何应用 ag-grid 自定义过滤器

Question

单击 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'}, 
            {make: "Ford", model: "Mondeo1", price: 35000,date:'03-04-2020'}, 
            {make: "Ford", model: "Mondeo2", price: 36000,date:'04-04-2020'}, 
            {make: "Porsche", model: "Boxter", price: 72000,date:'05-04-2020'},
            {make: "Toyota", model: "Celica", price: 35000,date:'06-04-2020'}, 
            {make: "Ford", model: "Mondeo", price: 32000,date:'07-04-2020'}, 
            {make: "Porsche", model: "Boxter", price: 72000,date:'08-04-2020'},
            {make: "Toyota", model: "Celica", price: 35000,date:'09-04-2020'}, 
            {make: "Ford", model: "Mondeo", price: 32000,date:'10-04-2020'}, 
            {make: "Porsche", model: "Boxter", price: 72000,date:'11-04-2020'},
            {make: "Toyota", model: "Celica", price: 35000,date:'12-04-2020'}, 
            {make: "Ford", model: "Mondeo", price: 32000,date:'13-04-2020'}, 
            {make: "Porsche", model: "Boxter", price: 72000,date:'14-04-2020'},
            {make: "Toyota", model: "Celica", price: 35000,date:'15-04-2020'}, 
            {make: "Ford", model: "Mondeo", price: 32000,date:'16-04-2020'}, 
            {make: "Porsche", model: "Boxter", price: 72000,date:'17-04-2020'},
            {make: "Toyota", model: "Celica", price: 35000,date:'18-04-2020'}, 
            {make: "Ford", model: "Mondeo", price: 32000,date:'19-04-2020'}, 
            {make: "Porsche", model: "Boxter", price: 72000,date:'20-04-2020'},
            {make: "Toyota", model: "Celica", price: 35000,date:'21-04-2020'}, 
            {make: "Ford", model: "Mondeo", price: 32000,date:'22-04-2020'}, 
            {make: "Porsche", model: "Boxter", price: 72000,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/

Answer 1

替换这一行

getStatusInstance.setModel({
  value: "Ford",
});

有了这个

getStatusInstance.setModel({
  filterType: "text",
  type: "contains",
  filter: "Ford"
});

这是参数接口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;
}

现场演示