框架
版本
企业版

行选择 API

状态

行选择状态在表格中使用以下形状存储

tsx
export type RowSelectionState = Record<string, boolean>

export type RowSelectionTableState = {
  rowSelection: RowSelectionState
}
export type RowSelectionState = Record<string, boolean>

export type RowSelectionTableState = {
  rowSelection: RowSelectionState
}

默认情况下,行选择状态使用每个行的索引作为行标识符。可以通过向表格传递自定义的 getRowId 函数,来使用自定义的唯一行 ID 来跟踪行选择状态。

表格选项

enableRowSelection

tsx
enableRowSelection?: boolean | ((row: Row<TData>) => boolean)
enableRowSelection?: boolean | ((row: Row<TData>) => boolean)
  • 启用/禁用表格中所有行的行选择 OR
  • 一个函数,给定一个行,返回是否为该行启用/禁用行选择

enableMultiRowSelection

tsx
enableMultiRowSelection?: boolean | ((row: Row<TData>) => boolean)
enableMultiRowSelection?: boolean | ((row: Row<TData>) => boolean)
  • 启用/禁用表格中所有行的多行选择 OR
  • 一个函数,给定一个行,返回是否为其子行/孙行启用/禁用多行选择

enableSubRowSelection

tsx
enableSubRowSelection?: boolean | ((row: Row<TData>) => boolean)
enableSubRowSelection?: boolean | ((row: Row<TData>) => boolean)

启用/禁用当父行被选中时自动选择子行,或者一个为每行启用/禁用自动选择子行功能的函数。

(与展开或分组功能结合使用)

onRowSelectionChange

tsx
onRowSelectionChange?: OnChangeFn<RowSelectionState>
onRowSelectionChange?: OnChangeFn<RowSelectionState>

如果提供了此函数,则在 state.rowSelection 更改时,将使用 updaterFn 调用此函数。这将覆盖默认的内部状态管理,因此您需要将状态更改全部或部分保留在表格外部。

表格 API

getToggleAllRowsSelectedHandler

tsx
getToggleAllRowsSelectedHandler: () => (event: unknown) => void
getToggleAllRowsSelectedHandler: () => (event: unknown) => void

返回一个可用于切换表格中所有行的处理程序。

getToggleAllPageRowsSelectedHandler

tsx
getToggleAllPageRowsSelectedHandler: () => (event: unknown) => void
getToggleAllPageRowsSelectedHandler: () => (event: unknown) => void

返回一个可用于切换当前页面中所有行的处理程序。

setRowSelection

tsx
setRowSelection: (updater: Updater<RowSelectionState>) => void
setRowSelection: (updater: Updater<RowSelectionState>) => void

设置或更新 state.rowSelection 状态。

resetRowSelection

tsx
resetRowSelection: (defaultState?: boolean) => void
resetRowSelection: (defaultState?: boolean) => void

将 **rowSelection** 状态重置为 initialState.rowSelection,或者可以传递 true 来强制将默认的空白状态重置为 {}

getIsAllRowsSelected

tsx
getIsAllRowsSelected: () => boolean
getIsAllRowsSelected: () => boolean

返回表格中所有行是否被选中。

getIsAllPageRowsSelected

tsx
getIsAllPageRowsSelected: () => boolean
getIsAllPageRowsSelected: () => boolean

返回当前页面中所有行是否被选中。

getIsSomeRowsSelected

tsx
getIsSomeRowsSelected: () => boolean
getIsSomeRowsSelected: () => boolean

返回表格中是否有任何行被选中。

getIsSomePageRowsSelected

tsx
getIsSomePageRowsSelected: () => boolean
getIsSomePageRowsSelected: () => boolean

返回当前页面中是否有任何行被选中。

toggleAllRowsSelected

tsx
toggleAllRowsSelected: (value: boolean) => void
toggleAllRowsSelected: (value: boolean) => void

选择/取消选择表格中的所有行。

toggleAllPageRowsSelected

tsx
toggleAllPageRowsSelected: (value: boolean) => void
toggleAllPageRowsSelected: (value: boolean) => void

选择/取消选择当前页面中的所有行。

getPreSelectedRowModel

tsx
getPreSelectedRowModel: () => RowModel<TData>
getPreSelectedRowModel: () => RowModel<TData>

getSelectedRowModel

tsx
getSelectedRowModel: () => RowModel<TData>
getSelectedRowModel: () => RowModel<TData>

getFilteredSelectedRowModel

tsx
getFilteredSelectedRowModel: () => RowModel<TData>
getFilteredSelectedRowModel: () => RowModel<TData>

getGroupedSelectedRowModel

tsx
getGroupedSelectedRowModel: () => RowModel<TData>
getGroupedSelectedRowModel: () => RowModel<TData>

行 API

getIsSelected

tsx
getIsSelected: () => boolean
getIsSelected: () => boolean

返回该行是否被选中。

getIsSomeSelected

tsx
getIsSomeSelected: () => boolean
getIsSomeSelected: () => boolean

返回该行的一些子行是否被选中。

getIsAllSubRowsSelected

tsx
getIsAllSubRowsSelected: () => boolean
getIsAllSubRowsSelected: () => boolean

返回该行的所有子行是否被选中。

getCanSelect

tsx
getCanSelect: () => boolean
getCanSelect: () => boolean

返回该行是否可以选择。

getCanMultiSelect

tsx
getCanMultiSelect: () => boolean
getCanMultiSelect: () => boolean

返回该行是否可以多选。

getCanSelectSubRows

tsx
getCanSelectSubRows: () => boolean
getCanSelectSubRows: () => boolean

返回当父行被选中时,该行是否可以自动选择子行。

toggleSelected

tsx
toggleSelected: (value?: boolean) => void
toggleSelected: (value?: boolean) => void

选择/取消选择该行。

getToggleSelectedHandler

tsx
getToggleSelectedHandler: () => (event: unknown) => void
getToggleSelectedHandler: () => (event: unknown) => void

返回一个可用于切换该行的处理程序。

我们的合作伙伴
Code Rabbit
AG Grid
订阅 Bytes

您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。

Bytes

无垃圾邮件。您可以随时取消订阅。

订阅 Bytes

您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。

Bytes

无垃圾邮件。您可以随时取消订阅。