在进行自定义过滤器时，我们如何显示 ag-grid 过滤器图标？

Question

当我点击完成/活动时，如何在 Ag-grid 中显示过滤器图标？

当我在 ag-grid 中进行过滤时，它会显示如下图标

这是我的代码。

import React, { Component } from "react";
import { connect } from "react-redux";
import {
  deleteTodo,
  toggleTodo,
  setVisibilityFilter
} from "../actions/actionCreator";
import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from "../actions/actionsTypes";
import { bindActionCreators } from "redux";

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

class Table extends Component {

  handleChange = (event) => {
    alert(event.target.value)
    this.props.setVisibilityFilter(event.target.value)
  };
  render() {
    return (
      <div className="col-lg-10 offset-lg-1 col-md-10 col-sm-12 col-xs-12">
        <nav style={{ marginTop: "60px" }}>
          <ol className="breadcrumb">
            <li
              className={"breadcrumb-item "+ (this.props.visibilityFilter === SHOW_ALL ? 'active' : '') }
              onClick={() => this.props.setVisibilityFilter(SHOW_ALL)}
            >
             All
            </li>
            <li
               className={"breadcrumb-item "+ (this.props.visibilityFilter === SHOW_COMPLETED ? 'active' : '') }
              onClick={() => this.props.setVisibilityFilter(SHOW_COMPLETED)}
            >
              Completed
            </li>
            <li
               className={"breadcrumb-item "+ (this.props.visibilityFilter === SHOW_ACTIVE ? 'active' : '') }
              onClick={() => this.props.setVisibilityFilter(SHOW_ACTIVE)}
            >
              Active
            </li>
          </ol>
        </nav>
         <select onChange={this.handleChange}>
                            <option value="SHOW_ALL" >All</option>
                            <option value="SHOW_COMPLETED"> Completed</option>
                        </select>
        {this.props.todos.length !== 0 ? (
          <div
          className="ag-theme-balham"
          style={{ height: '200px', width: '600px' }}
      >
          <AgGridReact
              enableSorting={true}
              enableFilter={true}
              columnDefs={this.props.todos.columnDefs}
              rowData={this.props.todos.rowData}>
          </AgGridReact>
          </div>
        ) : (
          <div
            style={{ marginTop: "50px" }}
            className="col-lg-10 col-md-10 col-xs-12 col-sm-12 offset-lg-1"
          >
            <div className="alert alert-danger" role="alert">
              Todo List is empty or Filter results show no results
            </div>
          </div>
        )}{" "}
      </div>
    );
  }
}

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case SHOW_ALL:
      return todos;
    case SHOW_COMPLETED:
      return { ...todos, rowData: todos.rowData.filter(item => item.status === 'Completed')}
    case SHOW_ACTIVE:
      return { ...todos, rowData: todos.rowData.filter(item => item.status === 'Active')}
    default:
      throw new Error("Unknown filter: " + filter);
  }
};

const mapStateToProps = state => {
  return { todos: getVisibleTodos(state.todos, state.visibilityFilter),
    visibilityFilter: state.visibilityFilter
 };
};

const mapDispatchToProps = dispatch => {
  return bindActionCreators(
    {
      deleteTodo,
      toggleTodo,
      setVisibilityFilter
    },
    dispatch
  );
};

export default connect(mapStateToProps, mapDispatchToProps)(Table);

Answer 1

在使用自定义过滤器时，在应用过滤器并调用 params.filterChangedCallback() 后， 如果您的过滤器组件的isFilterActive()函数返回true，则会显示过滤器图标。

都是使用ag-grid提供的api。

更新：

而不是像 rowData 这样手动应用过滤器

case SHOW_COMPLETED:
      return { ...todos, rowData: todos.rowData.filter(item => item.status === 'Completed')}
    case SHOW_ACTIVE:
      return { ...todos, rowData: todos.rowData.filter(item => item.status === 'Active')}
    default:

使用gridApi 应用过滤器。

// Get a reference to the name filter instance
var filterInstance = gridApi.getFilterInstance('status');  // field name

// Set the model for the filter
filterInstance.setModel({
    type: 'equals',    // verify
    filter: 'Active'
});

// Get grid to run filter operation again
gridApi.onFilterChanged();