Ag-Grid、React、Redux 过滤器问题 - 无法设置 setFilterModel()

Question

这是我的场景， 我正在进行onFetchEvents Redux Action 调用并获取所有事件并按如下方式传递它。 rowData={this.props.events.data}

一切正常。现在我需要应用过滤器，这需要再次调用服务器。

我设置了enableServerSideFilter: true,，以便在应用过滤器时，datagrid 不会自行调用。

我监控过滤器的变化并致电handleFilterChanged。我得到const filterModel = this.gridApi.getFilterModel(); 并将其发送到休息端点。

一切正常，但数据网格不记得过滤器状态。

我尝试了this.gridApi.setFilterModel(filterModel);，但它让我陷入了无限循环。

长话短说，我如何在 Redux 中使用过滤器，以便完全控制我应该在哪里使用 this.gridApi.setFilterModel()

如果您需要更多说明，请告诉我。

谢谢

    /* eslint-disable */
    import React, { Component, Fragment } from 'react';
    import { connect } from 'react-redux';
    import { AgGridReact } from 'ag-grid-react';
    import { fetchEvents } from '@mc/duck/actions/AppActions';
    import 'ag-grid-enterprise';
    import 'ag-grid-community/dist/styles/ag-grid.css';
    import 'ag-grid-community/dist/styles/ag-theme-balham-dark.css';
    // import './customTheme.scss';

    // col resizing pipe is not visibles
    class DatagridPage extends Component {
      constructor(props) {
        super(props);
        this.state = {
          params: {
            filterModel: {},
            page: 1,
            limit: 10,
          },
          gridOptions: {
            enableServerSideFilter: true,
            enableSorting: true,
            enableColResize: true,
            suppressMenuHide: true,
            pagination: true,
            animateRows: true,
            onFilterChanged: this.handleFilterChanged,
            onSortChanged: () => console.log('onSortChanged'),
            columnDefs: [
              {
                headerName: 'id',
                field: 'id',
                headerClass: 'test',
                checkboxSelection: true,
                filter: 'agTextColumnFilter',
              },
              {
                headerName: 'name',
                field: 'name',
                headerClass: 'test',
                filter: 'agTextColumnFilter',
              },
              {
                headerName: 'risk score',
                field: 'risk_score',
                headerClass: 'test',
                filter: 'agTextColumnFilter',
              },
              {
                headerName: 'urgency',
                field: 'urgency',
                headerClass: 'test',
                filter: 'agTextColumnFilter',
              },
              { headerName: 'type', field: 'type', headerClass: 'test', filter: 'agTextColumnFilter' },
              {
                headerName: 'artifacts',
                field: 'artifacts',
                headerClass: 'test',
                filter: 'agTextColumnFilter',
              },
              {
                headerName: 'created',
                field: 'created',
                headerClass: 'test',
                filter: 'agTextColumnFilter',
              },
              {
                headerName: 'updated',
                field: 'updated',
                headerClass: 'test',
                filter: 'agTextColumnFilter',
              },
              { headerName: 'due', field: 'due', headerClass: 'test', filter: 'agTextColumnFilter' },
              {
                headerName: 'owner',
                field: 'owner',
                headerClass: 'test',
                filter: 'agTextColumnFilter',
              },
              {
                headerName: 'status',
                field: 'status',
                headerClass: 'test',
                filter: 'agTextColumnFilter',
              },
              {
                headerName: 'description',
                field: 'description',
                headerClass: 'test',
                filter: 'agTextColumnFilter',
              },
            ],
          },
        };
      }

      componentDidMount() {
        console.log('componentDidMount');
        const { params } = this.state;
        this.props.onFetchEvents(params);
      }

      onGridReady = params => {
        this.gridApi = params.api;
        this.gridColumnApi = params.columnApi;
        this.gridApi.sizeColumnsToFit();
        console.log('onGridReady', this.gridApi.getFilterModel());
      };

      onPageSizeChanged(newPageSize) {
        var value = document.getElementById('page-size').value;
        const paramsCopy = { ...this.state.params };
        paramsCopy.limit = Number(value);
        paramsCopy.page = 1;
        this.setState({ params: paramsCopy }, () => this.props.onFetchEvents(paramsCopy));
        this.gridApi.paginationSetPageSize(Number(value));
      }

      handleFilterChanged = () => {
        console.log('handleFilterChanged');
        const filterModel = this.gridApi.getFilterModel();
        const paramsCopy = { ...this.state.params, filterModel };
        console.group('handleFilterChanged');
        console.log('filterModel', filterModel);
        console.log('state filterModel', this.state.params.filterModel);
        if (!areEqualShallow(filterModel, this.state.params.filterModel)) {
          this.gridApi.setFilterModel(filterModel);
          this.setState({ params: paramsCopy }, () => this.props.onFetchEvents(paramsCopy));
        }
        console.groupEnd();

        function areEqualShallow(a, b) {
          for (var key in a) {
            if (!(key in b) || a[key] !== b[key]) {
              return false;
            }
          }
          for (var key in b) {
            if (!(key in a) || a[key] !== b[key]) {
              return false;
            }
          }
          return true;
        }
        // this.gridApi.setFilterModel(filterModel);
      };

      render() {
        return (
          <Fragment>
            <div>
              Page Size:
              <select onChange={this.onPageSizeChanged.bind(this)} id="page-size">
                <option value="10">10</option>
                <option value="100">100</option>
                <option value="500">500</option>
                <option value="1000">1000</option>
              </select>
            </div>
            <div
              className="ag-theme-balham-dark"
              style={{
                height: '500px',
                width: '100%',
              }}
            >
              <AgGridReact
                rowSelection="multiple"
                gridOptions={this.state.gridOptions}
                columnDefs={this.state.columnDefs}
                rowData={this.props.events.data}
                defaultColDef={this.state.defaultColDef}
                onGridReady={this.onGridReady}
                rowHeight={49}
              />
            </div>
          </Fragment>
        );
      }
    }

    const mapStateToProps = state => ({
      events: state.app.events,
    });

    const mapDispatchToProps = {
      onFetchEvents: params => fetchEvents(params),
    };

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

Answer 1

在您的列定义中尝试将 newRowsAction 设置为“keep”，例如

{
   headerName: 'name',
   field: 'name',
   headerClass: 'test',
   filter: 'agTextColumnFilter',
   filterParams: {
      newRowsAction: 'keep'
   }
}

或者通过defaultColDef为所有人设置，例如

gridOptions: {
   defaultColDef: {
      filterParams: {
            newRowsAction: 'keep'
        }
    }
}