Data Grid - 筛选

轻松地根据一个或多个条件筛选您的行。

可以通过 Data Grid 界面以多种方式修改筛选器

通过打开列菜单并单击筛选菜单项。
通过单击 Data Grid 工具栏中的筛选器按钮（如果已启用）。

每种列类型都有其自己的筛选运算符。下面的演示让您可以探索每种内置列类型的所有运算符。

请参阅专用章节，了解如何创建自己的自定义筛选运算符。

单筛选器和多筛选器

将筛选器传递给 Data Grid

模型的结构

完整的类型详细信息可以在GridFilterModel API 页面上找到。

筛选模型由 items 列表和 logicOperator 组成

`items`

筛选项目表示筛选规则，由几个元素组成

filterItem.field：规则应用到的字段。
filterItem.value：要查找的值。
filterItem.operator：要使用的运算符方法的名称（例如contains），与运算符对象的 value 键匹配。
filterItem.id ()：使用多个筛选项目时是必需的。

`logicOperator`

logicOperator 告诉 Data Grid，为了被认为是有效的，行应该满足所有 (AND) 筛选项目还是至少一个 (OR) 筛选项目。

// Example 1: get rows with rating > 4 OR isAdmin = true
const filterModel: GridFilterModel = {
  items: [
    { id: 1, field: 'rating', operator: '>', value: '4' },
    { id: 2, field: 'isAdmin', operator: 'is', value: 'true' },
  ],
  logicOperator: GridLogicOperator.Or,
};

// Example 2: get rows with rating > 4 AND isAdmin = true
const filterModel: GridFilterModel = {
  items: [
    { id: 1, field: 'rating', operator: '>', value: '4' },
    { id: 2, field: 'isAdmin', operator: 'is', value: 'true' },
  ],
  logicOperator: GridLogicOperator.And,
};

如果未提供 logicOperator，Data Grid 将默认使用 GridLogicOperator.Or。

初始化筛选器

要在不控制筛选器的情况下初始化它们，请将模型提供给 initialState 属性。

<DataGrid
  initialState={{
    filter: {
      filterModel: {
        items: [{ field: 'rating', operator: '>', value: '2.5' }],
      },
    },
  }}
/>

受控筛选器

使用 filterModel 属性来控制应用于行的筛选器。

您可以使用 onFilterModelChange 属性来监听筛选器的更改并相应地更新属性。

<DataGrid
  filterModel={{
    items: [{ field: 'rating', operator: '>', value: '2.5' }],
  }}
/>

禁用筛选器

对于所有列

默认情况下启用筛选器，但您可以通过设置 disableColumnFilter 属性轻松禁用此功能。

<DataGrid disableColumnFilter />

对于某些列

要禁用单个列的筛选器，请在 GridColDef 中将 filterable 属性设置为 false。

在下面的示例中，评分列无法被筛选。

<DataGrid columns={[...columns, { field: 'rating', filterable: false }]} />

以编程方式筛选不可筛选的列

您可以初始化 filterModel，设置 filterModel 属性，或使用 API 方法 apiRef.current.setFilterModel 为不可筛选的列设置筛选器。这些筛选器将被应用，但在 UI 上将是只读的，并且用户将无法更改它们。

const columns = [
  { field: 'name', filterable: false },
  ...otherColumns,
]

<DataGrid
  filterModel={{
    items: [{ field: 'name', operator: 'contains', value: 'a' }],
  }}
  columns={columns}
/>

在筛选时重置页码

默认情况下，用户在应用筛选器后会停留在同一页，除非新的行计数表明该页不再存在。在这种情况下，用户将被发送到由新行计数定义的最后一页。要在应用新筛选器时将用户送回第一页，请使用 resetPageOnSortFilter 属性。

忽略变音符号（重音符）

您可以在筛选行时忽略变音符号（重音符）。请参阅快速筛选 - 忽略变音符号（重音符）。

apiRef

网格公开了一组方法，可以使用命令式的 apiRef 启用所有这些功能。要了解有关如何使用它的更多信息，请查看API 对象部分。

deleteFilterItem()

删除 GridFilterItem。

签名

deleteFilterItem: (item: GridFilterItem) => void

getFilterState()

返回给定筛选器模型的筛选状态，而不将其应用于 Data Grid。

签名

getFilterState: (filterModel: GridFilterModel) => GridStateCommunity['filter']

hideFilterPanel()

隐藏筛选面板。

签名

hideFilterPanel: () => void

ignoreDiacritics()

返回 ignoreDiacritics 属性的值。

签名

ignoreDiacritics: DataGridProcessedProps['ignoreDiacritics']

setFilterLogicOperator()

更改用于连接筛选器的 GridLogicOperator。

签名

setFilterLogicOperator: (operator: GridLogicOperator) => void

setFilterModel()

将筛选模型设置为 model 给定的模型。

签名

setFilterModel: (model: GridFilterModel, reason?: GridControlledStateReasonLookup['filter']) => void

setQuickFilterValues()

将快速筛选值设置为 values 给定的值

签名

setQuickFilterValues: (values: any[]) => void

showFilterPanel()

显示筛选面板。如果给定 targetColumnField，还会为此字段添加筛选器。

签名

showFilterPanel: (targetColumnField?: string, panelId?: string, labelId?: string) => void

upsertFilterItem()

更新或插入 GridFilterItem。

签名

upsertFilterItem: (item: GridFilterItem) => void

upsertFilterItems()

更新或插入多个 GridFilterItem。

签名

upsertFilterItems: (items: GridFilterItem[]) => void

选择器

gridExpandedRowCountSelector

获取筛选过程后可访问的行数。

签名

gridExpandedRowCountSelector: (apiRef: GridApiRef) => number
// or
gridExpandedRowCountSelector: (state: GridState, instanceId?: number) => number

示例

gridExpandedRowCountSelector(apiRef)
// or
gridExpandedRowCountSelector(state, apiRef.current.instanceId)

gridExpandedSortedRowEntriesSelector

获取筛选过程后可访问的行的 id 和模型。不包含折叠的子项。

签名

gridExpandedSortedRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]
// or
gridExpandedSortedRowEntriesSelector: (state: GridState, instanceId?: number) => GridRowEntry<GridValidRowModel>[]

示例

gridExpandedSortedRowEntriesSelector(apiRef)
// or
gridExpandedSortedRowEntriesSelector(state, apiRef.current.instanceId)

gridExpandedSortedRowIdsSelector

获取筛选过程后可访问的行的 id。不包含折叠的子项。

签名

gridExpandedSortedRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]
// or
gridExpandedSortedRowIdsSelector: (state: GridState, instanceId?: number) => GridRowId[]

示例

gridExpandedSortedRowIdsSelector(apiRef)
// or
gridExpandedSortedRowIdsSelector(state, apiRef.current.instanceId)

gridFilterModelSelector

获取当前的筛选模型。

签名

gridFilterModelSelector: (apiRef: GridApiRef) => GridFilterModel
// or
gridFilterModelSelector: (state: GridState, instanceId?: number) => GridFilterModel

示例

gridFilterModelSelector(apiRef)
// or
gridFilterModelSelector(state, apiRef.current.instanceId)

gridFilteredDescendantRowCountSelector

获取筛选过程后可访问的后代行数。

签名

gridFilteredDescendantRowCountSelector: (apiRef: GridApiRef) => number
// or
gridFilteredDescendantRowCountSelector: (state: GridState, instanceId?: number) => number

示例

gridFilteredDescendantRowCountSelector(apiRef)
// or
gridFilteredDescendantRowCountSelector(state, apiRef.current.instanceId)

gridFilteredRowCountSelector

获取筛选过程后可访问的行数。包括顶层行和后代行。

签名

gridFilteredRowCountSelector: (apiRef: GridApiRef) => number
// or
gridFilteredRowCountSelector: (state: GridState, instanceId?: number) => number

示例

gridFilteredRowCountSelector(apiRef)
// or
gridFilteredRowCountSelector(state, apiRef.current.instanceId)

gridFilteredSortedRowEntriesSelector

获取筛选过程后可访问的行的 id 和模型。包含折叠的子项。

签名

gridFilteredSortedRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]
// or
gridFilteredSortedRowEntriesSelector: (state: GridState, instanceId?: number) => GridRowEntry<GridValidRowModel>[]

示例

gridFilteredSortedRowEntriesSelector(apiRef)
// or
gridFilteredSortedRowEntriesSelector(state, apiRef.current.instanceId)

gridFilteredSortedRowIdsSelector

获取筛选过程后可访问的行的 id。包含折叠的子项。

签名

gridFilteredSortedRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]
// or
gridFilteredSortedRowIdsSelector: (state: GridState, instanceId?: number) => GridRowId[]

示例

gridFilteredSortedRowIdsSelector(apiRef)
// or
gridFilteredSortedRowIdsSelector(state, apiRef.current.instanceId)

gridFilteredSortedTopLevelRowEntriesSelector

获取筛选过程后可访问的顶层行的 id 和模型。

签名

gridFilteredSortedTopLevelRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]
// or
gridFilteredSortedTopLevelRowEntriesSelector: (state: GridState, instanceId?: number) => GridRowEntry<GridValidRowModel>[]

示例

gridFilteredSortedTopLevelRowEntriesSelector(apiRef)
// or
gridFilteredSortedTopLevelRowEntriesSelector(state, apiRef.current.instanceId)

gridFilteredTopLevelRowCountSelector

获取筛选过程后可访问的顶层行数。

签名

gridFilteredTopLevelRowCountSelector: (apiRef: GridApiRef) => number
// or
gridFilteredTopLevelRowCountSelector: (state: GridState, instanceId?: number) => number

示例

gridFilteredTopLevelRowCountSelector(apiRef)
// or
gridFilteredTopLevelRowCountSelector(state, apiRef.current.instanceId)

gridQuickFilterValuesSelector

获取当前的快速筛选值。

签名

gridQuickFilterValuesSelector: (apiRef: GridApiRef) => any[] | undefined
// or
gridQuickFilterValuesSelector: (state: GridState, instanceId?: number) => any[] | undefined

示例

gridQuickFilterValuesSelector(apiRef)
// or
gridQuickFilterValuesSelector(state, apiRef.current.instanceId)

有关选择器以及如何使用它们的更多信息，请访问专用页面