跳到内容
+

数据表格 - 快速筛选

使用单个文本输入快速筛选表格的一个筛选字段。

快速筛选允许使用单个文本输入通过多列筛选行。要启用它，您可以将 <GridToolbarQuickFilter /> 组件添加到您的自定义工具栏，或将 showQuickFilter 传递给默认的 <GridToolbar />。

默认情况下，快速筛选将输入视为以空格分隔的值列表，并且仅保留包含所有值的行。

初始化快速筛选值

快速筛选值可以通过设置 initialState prop 的 filter.filterModel.quickFilterValues 属性来初始化。

<DataGrid
  initialState={{
    filter: {
      filterModel: {
        items: [],
        quickFilterValues: ['Disney', 'Star'],
      },
    },
  }}
/>

包含隐藏列

默认情况下，快速筛选排除隐藏列。

要将隐藏列包含在快速筛选中，请将 filterModel.quickFilterExcludeHiddenColumns 设置为 false

<DataGrid
  initialState={{
    filter: {
      filterModel: {
        items: [],
        quickFilterExcludeHiddenColumns: false,
      },
    },
  }}
/>

在下面的演示中，company 列被隐藏。您将只看到 5 个结果，因为 company 值为 'Warner Bros.' 的行被排除在外。但是，当您禁用“排除隐藏列”开关时，即使列保持隐藏，包含 'Warner' 在 company 字段中的行将再次显示。

自定义筛选逻辑

用于快速筛选的逻辑可以切换为筛选包含至少一个指定值的行，而不是测试是否包含所有值。为此，请将 quickFilterLogicOperator 设置为 GridLogicOperator.Or，如下所示

initialState={{
  filter: {
    filterModel: {
      items: [],
      quickFilterLogicOperator: GridLogicOperator.Or,
    },
  },
}}

使用默认设置，快速筛选将仅考虑类型为 'string'、'number' 和 'singleSelect' 的列。

  • 对于 'string' 和 'singleSelect' 列，单元格的格式化值必须包含该值
  • 对于 'number' 列，单元格的格式化值必须等于该值

要修改或添加快速筛选运算符，请将属性 getApplyQuickFilterFn 添加到列定义。此函数与 getApplyFilterFn 非常相似。此函数将快速筛选的值作为输入，并返回另一个函数，该函数将单元格值作为输入，如果满足运算符条件，则返回 true。

在下面的示例中，为 date 列创建了一个自定义筛选器，以检查它是否包含正确的年份。

const getApplyQuickFilterFn: GetApplyQuickFilterFn<any, unknown> = (value) => {
  if (!value || value.length !== 4 || !/\d{4}/.test(value)) {
    // If the value is not a 4 digit string, it cannot be a year so applying this filter is useless
    return null;
  }
  return (cellValue) => {
    if (cellValue instanceof Date) {
      return cellValue.getFullYear() === Number(value);
    }
    return false;
  };
};

要删除给定列上的快速筛选，请设置 getApplyQuickFilterFn: undefined。

在下面的演示中，“Name”列不可使用快速筛选搜索，并且 4 位数字将与“Created on”列的年份进行比较。

解析值

快速筛选使用的值是通过空格拆分获得的。如果您想实现更高级的逻辑，<GridToolbarQuickFilter/> 组件接受一个 prop quickFilterParser。此函数接受来自搜索文本字段的字符串，并返回一个值数组。

如果您通过控制 filterModel 或使用初始状态来控制 quickFilterValues，则必须更新输入的内容以反映新值。默认情况下，值用空格连接。您可以通过提供 quickFilterFormatter 来自定义此行为。此格式化程序可以看作是 quickFilterParser 的逆函数。

例如，以下解析器允许通过使用 ',' 拆分值来搜索包含空格的单词。

<GridToolbarQuickFilter
  quickFilterParser={(searchInput) =>
    searchInput.split(',').map((value) => value.trim())
  }
  quickFilterFormatter={(quickFilterValues) => quickFilterValues.join(', ')}
  debounceMs={200} // time before applying the new quick filter value
/>

在以下演示中，快速筛选值 "Saint Martin, Saint Lucia" 将返回国家/地区为圣马丁或圣卢西亚的行。

忽略变音符号（重音符）

在某些语言中，字母可以带有变音符号（重音符） - 例如，法语中的字母 é。默认情况下，在筛选时，这些字母被认为与其非重音版本不同。

要忽略变音符号，请将 ignoreDiacritics prop 设置为 true

<DataGrid ignoreDiacritics />

API