在 Ag Grid 中禁用多列过滤器答案

【问题标题】：Disable multiple column filter in Ag Grid在 Ag Grid 中禁用多列过滤器
【发布时间】：2021-09-11 15:08:11
【问题描述】：

我们怎样才能一次只启用单列过滤器？

在下面的代码中，我们可以应用多列过滤器，但我只想允许一个过滤器并重置所有其他以前的过滤器。

'use strict';

import React, { useState } from 'react';
import { render } from 'react-dom';
import { AgGridReact, AgGridColumn } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const GridExample = () => {
  const [gridApi, setGridApi] = useState(null);
  const [gridColumnApi, setGridColumnApi] = useState(null);
  const [rowData, setRowData] = useState(null);

  const onGridReady = (params) => {
    setGridApi(params.api);
    setGridColumnApi(params.columnApi);

    const updateData = (data) => {
      setRowData(data);
    };

    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .then((resp) => resp.json())
      .then((data) => updateData(data));
  };

  return (
    <div style={{ width: '100%', height: '100%' }}>
      <div
        id="myGrid"
        style={{
          height: '100%',
          width: '100%',
        }}
        className="ag-theme-alpine"
      >
        <AgGridReact
          defaultColDef={{
            flex: 1,
            minWidth: 150,
            filter: true,
          }}
          onGridReady={onGridReady}
          rowData={rowData}
        >
          <AgGridColumn field="athlete" />
          <AgGridColumn
            field="age"
            filter="agNumberColumnFilter"
            maxWidth={100}
          />
          <AgGridColumn field="country" />
          <AgGridColumn field="year" maxWidth={100} />
          <AgGridColumn
            field="date"
            filter="agDateColumnFilter"
            filterParams={filterParams}
          />
          <AgGridColumn field="sport" />
          <AgGridColumn field="gold" filter="agNumberColumnFilter" />
          <AgGridColumn field="silver" filter="agNumberColumnFilter" />
          <AgGridColumn field="bronze" filter="agNumberColumnFilter" />
          <AgGridColumn field="total" filter={false} />
        </AgGridReact>
      </div>
    </div>
  );
};

var filterParams = {
  comparator: function (filterLocalDateAtMidnight, cellValue) {
    var dateAsString = cellValue;
    if (dateAsString == null) return -1;
    var dateParts = dateAsString.split('/');
    var cellDate = new Date(
      Number(dateParts[2]),
      Number(dateParts[1]) - 1,
      Number(dateParts[0])
    );
    if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
      return 0;
    }
    if (cellDate < filterLocalDateAtMidnight) {
      return -1;
    }
    if (cellDate > filterLocalDateAtMidnight) {
      return 1;
    }
  },
  browserDatePicker: true,
};

render(<GridExample></GridExample>, document.querySelector('#root'));

在这里，您将获得完整的 ag 网格示例。 https://www.ag-grid.com/react-grid/filtering/#example-simple-filters

查看attached image 供您参考。

帮助我应用这个逻辑。谢谢！

【问题讨论】：

标签： javascript reactjs ag-grid ag-grid-angular ag-grid-react

【解决方案1】：

您可以将 onClick 处理程序附加到重置所有先前过滤器的所有 AgGridColumns。

function resetFilters() {
    gridOptions.api.setFilterModel(null);
}

<AgGridColumn onClick={resetFilters} field="bronze" filter="agNumberColumnFilter" />

这里是重置过滤器方法的文档：https://www.ag-grid.com/javascript-grid/filter-api/#reset-all-filters

【讨论】：