数据表格 - 筛选器自定义

自定义筛选器的方法。

自定义操作符

操作符决定单元格值是否应被视为有效的筛选值。操作符使用的候选值是与 field 属性对应的值，或者是 GridColDef 的 valueGetter 返回的值。

每种列类型都带有一组默认的操作符。你可以通过导入以下函数来获取它们

列类型	函数
`字符串`	`getGridStringOperators()`
`数字`	`getGridNumericOperators()`
`布尔值`	`getGridBooleanOperators()`
`日期`	`getGridDateOperators()`
`日期时间`	`getGridDateOperators(true)`
`单选`	`getGridSingleSelectOperators()`

你可以在列部分找到关于支持的列类型的更多信息。

创建自定义操作符

如果内置的筛选操作符不够用，创建自定义操作符是一个选项。自定义操作符通过创建 GridFilterOperator 对象来定义。此对象必须添加到 GridColDef 的 filterOperators 属性中。

操作符的主要部分是 getApplyFilterFn 函数。在应用筛选器时，数据表格将使用筛选项目和必须应用该项目的列来调用此函数。此函数必须返回另一个函数，该函数将单元格值作为输入，如果它满足操作符条件，则返回 true。

const operator: GridFilterOperator<any, number> = {
  label: 'From',
  value: 'from',
  getApplyFilterFn: (filterItem, column) => {
    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
      return null;
    }

    return (value, row, column, apiRef) => {
      return Number(value) >= Number(filterItem.value);
    };
  },
  InputComponent: RatingInputValue,
  InputComponentProps: { type: 'number' },
};

在下面的演示中，你可以看到如何为“评分”列创建一个全新的操作符。

包装内置操作符

你可以创建重用内置操作符逻辑的自定义操作符。

在下面的演示中，即使选定的行与筛选规则不匹配，它们也始终可见。

多值操作符

你可以创建一个接受多个值的自定义操作符。为此，请将一个值数组提供给 filterItem 的 value 属性。GridColDef 的 valueParser 将应用于数组的每个项目。

筛选函数 getApplyFilterFn 必须进行调整以处理 filterItem.value 作为一个数组。以下是应用于“数量”列的“介于”操作符的示例。

const operator: GridFilterOperator<any, number> = {
  label: 'Between',
  value: 'between',
  getApplyFilterFn: (filterItem) => {
    if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
      return null;
    }
    if (filterItem.value[0] == null || filterItem.value[1] == null) {
      return null;
    }
    return (value) => {
      return (
        value != null && filterItem.value[0] <= value && value <= filterItem.value[1]
      );
    };
  },
  InputComponent: InputNumberInterval,
};

移除操作符

要移除内置操作符，请导入生成它们的方法并筛选输出以满足你的需求。

// Only keep '>' and '<' default operators
const filterOperators = getGridNumericOperators().filter(
  (operator) => operator.value === '>' || operator.value === '<',
);

在下面的演示中，“评分”列仅具有 < 和 > 操作符。

自定义输入组件

操作符用于查找的值必须由用户输入。在大多数列类型上，使用文本字段。但是，可以渲染自定义组件来代替。

在下面的演示中，“评分”列重用了数字操作符，但使用评分组件来输入筛选器的值。

自定义列类型

当定义自定义列类型时，默认情况下，数据表格将重用扩展类型的操作符。然后可以像在常规列上一样编辑筛选操作符。

const ratingColumnType: GridColTypeDef = {
  type: 'number',
  filterOperators: getGridNumericOperators().filter(
    (operator) => operator.value === '>' || operator.value === '<',
  ),
};

你可以自定义筛选面板的渲染，如文档的组件部分所示。

自定义筛选面板内容

筛选面板内容的自定义可以通过将 props 传递给默认的<GridFilterPanel />组件来执行。可用的 props 允许覆盖

logicOperators (可以包含 GridLogicOperator.And 和 GridLogicOperator.Or)
列选择器的顺序 (可以是 "asc" 或 "desc")
输入组件的任何 prop

输入组件可以使用两种方法进行自定义。你可以将 sx prop 传递给任何输入容器，或者你可以在筛选面板的嵌套组件上使用 CSS 选择器。更多详细信息在演示中提供。

Props	CSS 类
`deleteIconProps`	`MuiDataGrid-filterFormDeleteIcon`
`logicOperatorInputProps`	`MuiDataGrid-filterFormLogicOperatorInput`
`columnInputProps`	`MuiDataGrid-filterFormColumnInput`
`operatorInputProps`	`MuiDataGrid-filterFormOperatorInput`
`valueInputProps`	`MuiDataGrid-filterFormValueInput`

值输入是一种特殊情况，因为它可能包含各种组件（提供的组件或你的自定义 InputComponent）。要将 props 直接传递给 InputComponent 而不是其包装器，你可以使用 valueInputProps.InputComponentProps。

下面的演示展示了如何将筛选面板锚定到工具栏按钮而不是列标题。