在 Ag Grid 中禁用多列过滤器

Posted 2023-03-28

【中文标题】在 Ag Grid 中禁用多列过滤器

【英文标题】：Disable multiple column filter in 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 供您参考。

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

【参考方案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