[分享]如何在 ag-Grid 加载数据前设置默认列过滤器？

如何在 ag-Grid 加载数据前设置默认列过滤器？

在使用 ag-Grid 构建数据表格时，我们经常需要在数据加载之前就为特定列设置默认过滤器，以便用户能够直接看到过滤后的结果。然而，ag-Grid 的 onFirstDataRendered 和 onGridReady 事件都是在网格加载完成后才触发，无法满足我们的需求。

本文将探讨如何在 React.js 中实现 ag-Grid 数据加载前的默认列过滤功能，并提供完整的代码示例和详细解释。

ag-Grid 默认过滤器加载机制

ag-Grid 默认情况下会在数据加载完成后渲染表格，这意味着我们无法在数据加载之前访问到网格实例，也就无法设置默认过滤器。这就好比我们想要在客人抵达之前布置好餐桌，但却被告知要等客人就座后才能开始摆放餐具。

为了解决这个问题，我们需要找到一种方法，在 ag-Grid 初始化阶段就设置默认过滤器，并在数据加载完成后自动应用该过滤器。

利用 gridOptions 设置默认过滤器

gridOptions 是 ag-Grid 的核心配置对象，它允许我们在网格初始化时进行自定义设置。我们可以利用 gridOptions 中的 defaultColDef 属性来设置默认过滤器，就像预先告诉 ag-Grid：“所有列在默认情况下都应该应用这个过滤器”。

以下是实现步骤：

1. 创建过滤器模型: 首先，我们需要明确想要设置的默认过滤器条件。假设我们希望"状态"列默认只显示"已完成"状态的数据，可以创建如下过滤器模型：

const defaultFilterModel = {
  status: {
    filterType: 'set',
    values: ['已完成'],
  },
};

1. 配置 defaultColDef: defaultColDef 允许我们定义应用于所有列的默认配置。我们将过滤器模型传递给 filterParams 中的 defaultModel 属性，就像为每列预设了一个过滤器模板：

const gridOptions = {
  // ...其他网格选项

  defaultColDef: {
    // ...其他列定义选项

    filterParams: {
      defaultModel: defaultFilterModel,
    },
  },
};

1. 应用 gridOptions: 最后，将包含 defaultColDef 的 gridOptions 对象传递给 ag-Grid 组件：

<AgGridReact
  // ...其他属性

  gridOptions={gridOptions}
>
  {/* ...列定义和数据 */}
</AgGridReact>

完整代码示例

以下是一个完整的 React.js 代码示例，演示了如何使用 ag-Grid 在数据加载前设置默认列过滤器：

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

const App = () => {
  const gridRef = useRef(null);
  const [rowData, setRowData] = useState([]);

  useEffect(() => {
    // 模拟异步数据加载
    const fetchData = async () => {
      const response = await fetch('https://www.ag-grid.com/example-assets/row-data.json');
      const data = await response.json();
      setRowData(data);
    };

    fetchData();
  }, []);

  const defaultFilterModel = {
    status: {
      filterType: 'set',
      values: ['Completed'],
    },
  };

  const gridOptions = {
    defaultColDef: {
      sortable: true,
      filter: true,
      filterParams: {
        defaultModel: defaultFilterModel,
      },
    },
  };

  return (
    <div className="ag-theme-alpine" style={{ height: ***, width: 600 }}>
      <AgGridReact
        ref={gridRef}
        rowData={rowData}
        gridOptions={gridOptions}
      >
        <AgGridColumn field="athlete" />
        <AgGridColumn field="country" />
        <AgGridColumn field="sport" />
        <AgGridColumn field="status" />
      </AgGridReact>
    </div>
  );
};

export default App;

常见问题解答

1. 如何为不同列设置不同的默认过滤器？

   可以通过 columnDefs 为特定列设置 filterParams 来实现。例如：

const gridOptions = {
  columnDefs: [
    // ...其他列定义

    {
      field: 'status',
      filterParams: {
        defaultModel: {
          filterType: 'set',
          values: ['Completed'],
        },
      },
    },
  ],
};

1. 如何动态修改默认过滤器？

   可以通过 gridApi 的 setFilterModel 方法动态更新过滤器。例如：

const newFilterModel = {
  country: {
    filterType: 'text',
    filter: 'United States',
  },
};

gridRef.current.api.setFilterModel(newFilterModel);

1. defaultColDef 和 columnDefs 同时设置过滤器时，哪个优先级更高？

   columnDefs 中的设置优先级更高，会覆盖 defaultColDef 中对应列的过滤器设置。

2. 如何清除默认过滤器？

   可以将 defaultModel 设置为 null 或调用 gridApi 的 destroyFilter 方法。

3. 如何获取当前应用的过滤器模型？

   可以使用 gridApi 的 getFilterModel 方法获取当前应用的所有过滤器信息。

通过以上方法，我们可以在 ag-Grid 加载数据之前设置默认列过滤器，并根据需要进行动态调整，从而提升用户体验，使数据展示更加灵活高效。