GridFilterForm 是 Material UI 提供的一个组件，用于构建灵活和可扩展的过滤表单，帮助用户在数据表格中筛选信息。它与 DataGrid 组件密切集成，能够为数据提供动态过滤功能。

在本篇博客中，我们将详细介绍 GridFilterForm 的使用方法，包括属性、方法、事件等，并通过示例代码演示如何实现复杂的过滤功能。

1. 安装依赖

在使用 GridFilterForm 之前，确保已经安装了 @mui/x-data-grid 包：

npm install @mui/x-data-grid

然后在你的组件中引入所需的模块：

import { GridFilterForm } from '@mui/x-data-grid';
import { DataGrid } from '@mui/x-data-grid';

2. 基本使用示例

下面是一个简单的示例，展示如何使用 GridFilterForm 和 DataGrid 来实现数据过滤功能。

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

const rows = [
  { id: 1, name: 'Apple', category: 'Fruit', price: 1.5 },
  { id: 2, name: 'Banana', category: 'Fruit', price: 1.0 },
  { id: 3, name: 'Carrot', category: 'Vegetable', price: 0.8 },
  { id: 4, name: 'Broccoli', category: 'Vegetable', price: 1.2 },
];

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'category', headerName: 'Category', width: 150 },
  { field: 'price', headerName: 'Price', width: 110, type: 'number' },
];

export default function BasicGridFilterForm() {
  const [filterModel, setFilterModel] = React.useState({
    items: [],
  });

  const handleFilterChange = (model) => {
    setFilterModel(model);
  };

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

在这个示例中，我们创建了一个简单的过滤表单和数据表格。用户可以通过 GridFilterForm 输入过滤条件，DataGrid 则根据这些条件展示相应的数据。

3. GridFilterForm API 概述

GridFilterForm 提供了一系列属性和方法，允许我们自定义过滤表单的行为和外观。

3.1 属性（Props）

以下是 GridFilterForm 的主要属性：

• model: 定义过滤模型的状态。它是一个对象，包含过滤条件的信息。
• onModelChange: 当模型改变时触发的回调函数。此函数接受新的模型作为参数。

3.2 示例：自定义过滤模型

我们可以自定义过滤模型，以满足具体需求。例如，支持多个过滤条件。

const [filterModel, setFilterModel] = React.useState({
  items: [
    { columnField: 'category', operatorValue: 'contains', value: 'Fruit' },
    { columnField: 'price', operatorValue: '>', value: 1.0 },
  ],
});

在这个例子中，我们预设了两个过滤条件：category 包含 "Fruit"，且 price 大于 1.0。

3.3 使用自定义输入组件

我们可以将自定义输入组件集成到 GridFilterForm 中，以提供更复杂的过滤条件。例如，使用下拉选择框和范围输入框。

import { Select, MenuItem, TextField } from '@mui/material';

const CustomFilterForm = ({ model, onModelChange }) => {
  const handleCategoryChange = (event) => {
    const newItems = model.items.map((item) =>
      item.columnField === 'category'
        ? { ...item, value: event.target.value }
        : item
    );
    onModelChange({ items: newItems });
  };

  const handlePriceChange = (event) => {
    const newItems = model.items.map((item) =>
      item.columnField === 'price'
        ? { ...item, value: event.target.value }
        : item
    );
    onModelChange({ items: newItems });
  };

  return (
    <>
      <Select value={model.items[0]?.value || ''} onChange={handleCategoryChange}>
        <MenuItem value="Fruit">Fruit</MenuItem>
        <MenuItem value="Vegetable">Vegetable</MenuItem>
      </Select>
      <TextField
        type="number"
        value={model.items[1]?.value || ''}
        onChange={handlePriceChange}
        placeholder="Price greater than"
      />
    </>
  );
};

4. 结合其他组件的使用

GridFilterForm 可以与其他 Material UI 组件结合使用，增强用户体验。

4.1 与 Button 结合使用

可以添加“清除过滤”按钮，方便用户重置过滤条件。

import { Button } from '@mui/material';

const ClearFilterButton = ({ onClear }) => {
  return (
    <Button onClick={onClear}>Clear Filters</Button>
  );
};

export default function FilterWithClearButton() {
  const [filterModel, setFilterModel] = React.useState({ items: [] });

  const handleClearFilters = () => {
    setFilterModel({ items: [] });
  };

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

4.2 与 Dialog 结合使用

如果需要提供更复杂的过滤选项，可以使用 Dialog 弹出层来展示过滤表单。

import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';

const FilterDialog = ({ open, onClose, model, onModelChange }) => {
  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle>Filter Options</DialogTitle>
      <DialogContent>
        <GridFilterForm model={model} onModelChange={onModelChange} />
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Cancel</Button>
        <Button onClick={onClose}>Apply</Button>
      </DialogActions>
    </Dialog>
  );
};

const FilterWithDialog = () => {
  const [open, setOpen] = React.useState(false);
  const [filterModel, setFilterModel] = React.useState({ items: [] });

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <>
      <Button onClick={handleOpen}>Open Filter</Button>
      <FilterDialog
        open={open}
        onClose={handleClose}
        model={filterModel}
        onModelChange={setFilterModel}
      />
      <DataGrid rows={rows} columns={columns} filterModel={filterModel} />
    </>
  );
};

5. 总结

GridFilterForm 是 Material UI 中一个强大的过滤表单组件，可以与 DataGrid 组件紧密集成，帮助用户实现数据的灵活筛选。我们通过示例代码展示了如何使用 GridFilterForm 的各个属性、方法和事件，并结合其他组件提升用户体验。

希望通过本篇博客，你能够熟练掌握 GridFilterForm 的使用，并在实际项目中灵活运用这些知识。