React项目MUI DataGrid免费版添加>、<筛选器的实现咨询

MUI DataGrid免费版默认的筛选菜单没有直接提供大于（>）、小于（<）这类数值筛选选项，但可以通过自定义筛选器组件+列配置来实现，具体步骤如下：

1. 编写自定义数值筛选器组件 #

这个组件包含运算符选择下拉框和数值输入框，用来收集用户的筛选条件：

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

const NumberFilter = ({ column, filterModel, onFilterModelChange }) => {
  const targetFilter = filterModel.filterItems.find(item => item.field === column.field);
  const currentValue = targetFilter?.value || '';
  const currentOperator = targetFilter?.operator || '>';

  // 更新运算符
  const updateOperator = (newOperator) => {
    const updatedFilters = [
      ...filterModel.filterItems.filter(item => item.field !== column.field),
      { field: column.field, operator: newOperator, value: currentValue }
    ];
    onFilterModelChange({ ...filterModel, filterItems: updatedFilters });
  };

  // 更新筛选数值
  const updateValue = (newValue) => {
    if (!newValue) {
      // 清空筛选条件
      const updatedFilters = filterModel.filterItems.filter(item => item.field !== column.field);
      onFilterModelChange({ ...filterModel, filterItems: updatedFilters });
      return;
    }
    const updatedFilters = [
      ...filterModel.filterItems.filter(item => item.field !== column.field),
      { field: column.field, operator: currentOperator, value: newValue }
    ];
    onFilterModelChange({ ...filterModel, filterItems: updatedFilters });
  };

  return (
    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
      <FormControl size="small" style={{ minWidth: 100 }}>
        <InputLabel>运算符</InputLabel>
        <Select 
          value={currentOperator} 
          label="运算符" 
          onChange={e => updateOperator(e.target.value)}
        >
          <MenuItem value=">">大于 (&gt;)</MenuItem>
          <MenuItem value="<">小于 (&lt;)</MenuItem>
          <MenuItem value=">=">大于等于 (&gt;=)</MenuItem>
          <MenuItem value="<=">小于等于 (&lt;=)</MenuItem>
        </Select>
      </FormControl>
      <TextField
        size="small"
        type="number"
        value={currentValue}
        onChange={e => updateValue(e.target.value)}
        placeholder="输入数值"
      />
    </div>
  );
};

2. 配置DataGrid的列属性 #

在需要添加数值筛选的列中，指定自定义的筛选器组件、运算符列表，并实现筛选逻辑：

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

// 示例列配置
const columns = [
  {
    field: 'age',
    headerName: '年龄',
    type: 'number',
    // 自定义筛选运算符列表
    filterOperators: [
      { label: '大于', value: '>' },
      { label: '小于', value: '<' },
      { label: '大于等于', value: '>=' },
      { label: '小于等于', value: '<=' },
    ],
    // 绑定自定义筛选器组件
    filterComponent: NumberFilter,
    // 实现筛选逻辑（客户端筛选用）
    getApplyFilterFn: (filterItem) => {
      if (!filterItem.value) return null;
      const targetValue = Number(filterItem.value);
      switch (filterItem.operator) {
        case '>':
          return row => row[filterItem.field] > targetValue;
        case '<':
          return row => row[filterItem.field] < targetValue;
        case '>=':
          return row => row[filterItem.field] >= targetValue;
        case '<=':
          return row => row[filterItem.field] <= targetValue;
        default:
          return null;
      }
    },
  },
  // 其他列配置...
];

// 渲染DataGrid
export default function YourDataGridComponent() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={yourRowData} // 替换为你的数据源
        columns={columns}
        filterMode="client" // 客户端筛选，若用服务端筛选改为"server"
      />
    </div>
  );
}

3. 额外说明 #

• 如果是服务端筛选，不需要实现getApplyFilterFn，而是在onFilterModelChange回调中把筛选的运算符和数值传递给后端，由后端处理数据库查询逻辑
• 确保筛选字段的数据类型为数值型，避免字符串比较导致的逻辑错误

内容的提问来源于stack exchange，提问作者Shahzaib Atif