Material UI 提供了丰富的组件库，支持高效的 UI 开发，其中 Data Grid 是常用的表格组件之一。GridFilterItem 是 Data Grid 中用于定义过滤条件的重要接口，允许用户在表格数据中实现复杂的筛选功能。本文将详细介绍 GridFilterItem API 的使用，并提供多种示例，涵盖其所有属性及方法，同时结合其他组件进行实际应用。

1. 什么是 GridFilterItem

GridFilterItem 是 Material UI Data Grid 中的一个接口，表示单个过滤条件。它定义了过滤的字段、操作符和过滤值，用于动态构建和应用筛选逻辑。

1.1 GridFilterItem 属性

以下是 GridFilterItem API 的属性列表：

• id (可选): 筛选条件的唯一标识符，用于区分多个过滤条件。
• columnField: 要应用过滤的列的字段名称。
• operatorValue: 过滤操作符，决定如何比较列的值和过滤值。它通常与列定义中的 filterOperators 相关联。
• value: 过滤条件的值，用于与列的值进行比较。
• columnType (可选): 列的数据类型，如 number, string, date 等。

这些属性共同定义了一个完整的过滤规则，表格根据这些规则来决定哪些数据行显示，哪些被过滤掉。

2. GridFilterItem 使用场景

使用 GridFilterItem 的典型场景包括：

• 创建自定义的过滤功能。
• 与用户交互，动态修改过滤条件。
• 与 Data Grid 的其他 API 结合，实现复杂的多条件筛选。

接下来，我们通过实例展示如何使用 GridFilterItem 定义和应用过滤规则。

3. 基础示例：单条件过滤

首先，我们通过一个简单的示例展示如何使用 GridFilterItem 在 Data Grid 中应用单条件过滤。

3.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>
  );
}

3.2 示例解析

• filterModel: 用于设置 Data Grid 的过滤模型，其中包含 GridFilterItem 定义的筛选条件。
• columnField: 设置为 'age'，表示我们要对 age 列进行筛选。
• operatorValue: 设置为 '>='，表示要筛选 age 列大于或等于 30 的行。
• value: 设置为 30，即筛选条件的值。

在这个示例中，表格只显示年龄大于或等于 30 的数据行。

4. 多条件筛选

GridFilterItem 支持多条件筛选，允许我们为不同的列定义多个过滤规则。

4.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 MultiFiltering() {
  const [filterModel, setFilterModel] = React.useState<GridFilterModel>({
    items: [
      { id: 1, columnField: 'age', operatorValue: '>=', value: 30 },
      { id: 2, columnField: 'name', operatorValue: 'contains', value: 'A' },
    ],
  });

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

4.2 示例解析

• 多条件: 我们添加了两个 GridFilterItem，一个针对 age 列进行大于等于 30 的筛选，另一个针对 name 列筛选包含 'A' 的行。
• operatorValue: 对于 name 列，我们使用了 contains 操作符，用于筛选包含特定字符串的值。

通过这种方式，用户可以定义复杂的多条件过滤规则，结合不同的操作符，实现灵活的筛选。

5. 自定义过滤操作符

Data Grid 提供了默认的过滤操作符，但我们也可以为特定列自定义过滤操作符，满足特殊的筛选需求。

5.1 自定义操作符的示例

import * as React from 'react';
import { DataGrid, GridFilterItem } 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, filterOperators: [
      {
        label: 'Is older than',
        value: 'olderThan',
        getApplyFilterFn: (filterItem: GridFilterItem) => {
          if (!filterItem.value) {
            return null;
          }
          return ({ value }) => Number(value) > Number(filterItem.value);
        },
        InputComponent: (props) => <input type="number" {...props} />
      }
    ] },
];

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

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

5.2 示例解析

• filterOperators: 我们为 age 列自定义了一个操作符 'olderThan'，用于筛选大于指定年龄的行。
• getApplyFilterFn: 定义了过滤的逻辑，返回一个函数，该函数用于根据条件筛选数据。
• InputComponent: 定义了自定义的输入组件，这里使用 <input type="number" /> 作为过滤条件输入框。

通过这种方式，我们可以根据需求自定义任何列的过滤操作符，扩展 Data Grid 的功能。

6. 结合 GridToolbarFilterButton 组件

Material UI 提供了 GridToolbarFilterButton 组件，允许用户通过工具栏按钮动态打开和关闭过滤面板。这是用户交互中常见的用法。

6.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 FilterToolbar() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        components={{
          Toolbar: GridToolbarFilterButton,
        }}
      />
    </div>
  );
}

6.2 示例解析

• GridToolbarFilterButton: 提供了一个工具栏按钮，用户点击按钮可以弹出过滤面板，方便动态调整过滤条件。

这种方式使得 Data Grid 的过滤功能更加易用且直观，适合需要经常调整筛选条件的应用场景。

7. 总结

本文详细介绍了 Material UI 框架中的 GridFilterItem API，展示了如何通过 GridFilterItem 定义和应用过滤条件。同时我们通过示例代码，演示了单条件、多条件过滤、自定义过滤操作符，以及与 GridToolbarFilterButton 组件结合使用的各种场景。

通过掌握 GridFilterItem API，开发者可以轻松构建功能强大的筛选功能，为用户提供更灵活的数据查询体验。