Material UI 框架中的 Data Grid 组件为开发者提供了强大的数据展示和操作功能。其中，GridFilterModel 是用于控制和定义表格过滤状态的核心接口。它允许开发者自定义数据表的筛选逻辑，提供更丰富、灵活的交互体验。本文将详细介绍 GridFilterModel API 的使用，涵盖其所有属性、方法以及与其他组件的结合使用，并配以大量示例代码。

1. 什么是 GridFilterModel

GridFilterModel 是 Material UI 中 Data Grid 的过滤状态模型，用于定义和管理表格的过滤器。通过它，开发者可以动态地控制表格中的数据展示，并能够创建复杂的过滤规则。

1.1 GridFilterModel 属性

GridFilterModel 主要有以下两个属性：

• items: GridFilterItem[] - 过滤器数组，定义多个过滤条件。
• linkOperator: GridLinkOperator - 用于指定多个过滤条件之间的逻辑运算符，默认为 GridLinkOperator.And，可选值包括 And 和 Or。

2. 基础使用：设置简单过滤规则

GridFilterModel 的最常见用途是为表格中的数据定义简单的过滤规则。例如，按某一列的值进行筛选。

2.1 示例代码

import * as React from 'react';
import { DataGrid, GridFilterModel } from '@mui/x-data-grid';

const rows = [
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Alice', age: 25 },
  { id: 3, name: 'Bob', age: 35 },
];

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'age', headerName: 'Age', width: 100 },
];

export default function BasicFiltering() {
  const [filterModel, setFilterModel] = React.useState<GridFilterModel>({
    items: [
      { id: 1, columnField: 'age', operatorValue: '>=', value: 30 },
    ],
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        filterModel={filterModel}
        onFilterModelChange={(model) => setFilterModel(model)}
      />
    </div>
  );
}

2.2 示例解析

• filterModel: 通过设置 filterModel，我们可以定义一个简单的过滤条件，筛选出 age 列值大于或等于 30 的行。
• items: 该属性包含过滤项数组，每个项定义一个 GridFilterItem（即一个过滤条件）。
• columnField: 定义要过滤的列，这里指定 age 列。
• operatorValue: 过滤的运算符，>= 表示筛选大于或等于的值。
• value: 筛选的值，这里是 30。

这个示例实现了一个简单的年龄筛选，表格只展示年龄大于或等于 30 的数据行。

3. 多条件过滤

GridFilterModel 支持多个过滤条件，开发者可以通过 items 属性定义多个 GridFilterItem，同时使用 linkOperator 来控制多个条件之间的逻辑关系。

3.1 示例代码：多条件过滤

import * as React from 'react';
import { DataGrid, GridFilterModel, GridLinkOperator } from '@mui/x-data-grid';

const rows = [
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Alice', age: 25 },
  { id: 3, name: 'Bob', age: 35 },
];

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'age', headerName: 'Age', width: 100 },
];

export default function MultiFiltering() {
  const [filterModel, setFilterModel] = React.useState<GridFilterModel>({
    items: [
      { id: 1, columnField: 'age', operatorValue: '>=', value: 30 },
      { id: 2, columnField: 'name', operatorValue: 'contains', value: 'A' },
    ],
    linkOperator: GridLinkOperator.And, // 使用 And 逻辑连接条件
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        filterModel={filterModel}
        onFilterModelChange={(model) => setFilterModel(model)}
      />
    </div>
  );
}

3.2 示例解析

• items: 这里我们定义了两个过滤条件，一个针对 age 列筛选年龄大于或等于 30 的行，另一个针对 name 列筛选包含 'A' 的行。
• linkOperator: 设置为 GridLinkOperator.And，表示多个过滤条件之间是 AND 关系，即同时满足两个条件的行才会显示。可以设置为 Or，以实现任一条件满足时行被显示。

通过这种方式，我们可以轻松实现多个条件的组合筛选。

4. 使用 GridToolbarFilterButton 结合过滤

除了手动定义 filterModel，Material UI 还提供了内置的 GridToolbarFilterButton 组件，允许用户通过按钮打开过滤面板进行动态筛选。

4.1 示例代码：带过滤工具栏的筛选

import * as React from 'react';
import { DataGrid, GridToolbarFilterButton } from '@mui/x-data-grid';

const rows = [
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Alice', age: 25 },
  { id: 3, name: 'Bob', age: 35 },
];

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'age', headerName: 'Age', width: 100 },
];

export default function ToolbarFiltering() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        components={{
          Toolbar: GridToolbarFilterButton,
        }}
      />
    </div>
  );
}

4.2 示例解析

• GridToolbarFilterButton: 该组件提供了一个工具栏按钮，用户可以通过它打开过滤面板，动态地添加、删除和调整过滤条件。
• 动态筛选: 当用户通过工具栏按钮打开面板并应用过滤条件时，表格会自动更新显示符合条件的数据行。

这种方式让用户可以更方便地调整筛选条件，而不需要手动修改代码。

5. 自定义过滤逻辑

Material UI 提供了默认的过滤操作符，但有时我们可能需要自定义过滤逻辑，尤其是对于复杂的数据类型或特殊的过滤需求。

5.1 示例代码：自定义操作符

import * as React from 'react';
import { DataGrid, GridFilterModel } from '@mui/x-data-grid';

const rows = [
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Alice', age: 25 },
  { id: 3, name: 'Bob', age: 35 },
];

const columns = [
  {
    field: 'age',
    headerName: 'Age',
    width: 150,
    filterOperators: [
      {
        label: 'Greater than 30',
        value: 'greaterThan30',
        getApplyFilterFn: (filterItem) => {
          if (!filterItem.value) {
            return null;
          }
          return ({ value }) => value > 30;
        },
      },
    ],
  },
];

export default function CustomFiltering() {
  const [filterModel, setFilterModel] = React.useState<GridFilterModel>({
    items: [{ id: 1, columnField: 'age', operatorValue: 'greaterThan30', value: 30 }],
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        filterModel={filterModel}
        onFilterModelChange={(model) => setFilterModel(model)}
      />
    </div>
  );
}

5.2 示例解析

• filterOperators: 我们在 `

columns中定义了一个自定义的操作符greaterThan30，用于筛选 age` 大于 30 的行。

• getApplyFilterFn: 自定义过滤函数，用于返回应用过滤条件的逻辑。

通过自定义操作符，我们可以根据需求灵活定制过滤规则。

6. 总结

GridFilterModel 是 Material UI 中 Data Grid 组件的重要接口，提供了强大的数据过滤功能。通过本文，我们详细介绍了 GridFilterModel 的基础用法、多条件过滤、自定义过滤逻辑以及与其他组件如 GridToolbarFilterButton 的结合使用，并通过大量示例代码展示了如何灵活应用这些功能。

掌握 GridFilterModel 能帮助开发者为用户提供更加精确、灵活的数据查询和展示体验。