S2

注意

阅读本章前，请确保已经阅读了基础交互和获取单元格数据等章节，并对布局流程有所了解。

我们通过鼠标悬停 (hover) 和点击 (click) 可以触发表格单元格的 高亮 和 选中，在一些特定场景下，如果希望主动触发，可以通过内置的交互 API 来实现。

高亮单元格

高亮的效果和默认的主题配置一致，内部状态为 "hover"

const targetCell = s2.facet.getRowCell()[0]
s2.interaction.highlightCell(targetCell)

s2.interaction.getCurrentStateName() // "hover"

高亮子节点

将一组子节点对应的单元格设置为高亮状态。

const targetNodes = s2.facet.getRowNodes()

s2.interaction.highlightNodes(targetNodes)
s2.interaction.highlightNodes(targetNodes, 'hover')
s2.interaction.highlightNodes(targetNodes, 'selected')

选中单元格

选中的效果和默认的主题配置一致，内部状态为 "selected"

const targetCell = s2.facet.getRowCell()[0]
s2.interaction.selectCell(targetCell)

s2.interaction.getCurrentStateName() // "selected"

全选

全部的单元格都会被更新为选中的样式，内部状态为 "allSelected"

s2.interaction.selectAll()

s2.interaction.getCurrentStateName() // "allSelected"

获取选中数据

具体请查看获取单元格数据 - 选中单元格

改变单元格状态

本质上 highlightCell 和 selectCell 内部都是基于 changeCell 实现的语法糖，所以你也可以直接使用 changeCell 实现更细致的状态更新，如 S2 内置的行列头选中也是基于该 API 实现。

import { InteractionStateName } from '@antv/s2'

const targetCell = s2.facet.getRowCell()[0]

s2.interaction.changeCell({
  cell: targetCell,
  stateName: InteractionStateName.SELECTED,
  isMultiSelection: false,
  scrollIntoView: false,
})

默认会滚动至可视范围内，可以通过 scrollIntoView 禁用。

也可以直接使用 changeState 直接更新指定单元格的状态

import { InteractionStateName, getCellMeta } from '@antv/s2'

const targetCell = s2.facet.getRowCell()[0]

// 选中
s2.interaction.changeState({
  cells: [getCellMeta(targetCell)],
  stateName: InteractionStateName.SELECTED,
});

// 取消选中
s2.interaction.changeState({
  cells: [],
  stateName: InteractionStateName.UNSELECTED,
});

更新单元格

每一个单元格实例都有一个 update 方法，调用它可以进行重绘，从而实现单元格的手动更新。

const targetCell = s2.facet.getRowCell()[0]

targetCell.update()

关闭滚动动画

当选中或高亮单元格时，会自动滚动，可以通过 animate: false 关闭动画。

s2.interaction.selectCell(targetCell, {
  animate: false
})

触发滚动事件

自动滚动时，默认不会触发内部滚动事件，即 S2Event.GLOBAL_SCROLL, 可以通过 skipScrollEvent: false 禁用。

s2.interaction.selectCell(targetCell, {
  skipScrollEvent: false
})

注意

阅读本章前，请确保已经阅读了基础交互和获取单元格数据等章节，并对布局流程有所了解。

高亮单元格

高亮的效果和默认的主题配置一致，内部状态为 "hover"

const targetCell = s2.facet.getRowCell()[0]
s2.interaction.highlightCell(targetCell)

s2.interaction.getCurrentStateName() // "hover"

高亮子节点

将一组子节点对应的单元格设置为高亮状态。

const targetNodes = s2.facet.getRowNodes()

s2.interaction.highlightNodes(targetNodes)
s2.interaction.highlightNodes(targetNodes, 'hover')
s2.interaction.highlightNodes(targetNodes, 'selected')

选中单元格

选中的效果和默认的主题配置一致，内部状态为 "selected"

const targetCell = s2.facet.getRowCell()[0]
s2.interaction.selectCell(targetCell)

s2.interaction.getCurrentStateName() // "selected"

全选

全部的单元格都会被更新为选中的样式，内部状态为 "allSelected"

s2.interaction.selectAll()

s2.interaction.getCurrentStateName() // "allSelected"

获取选中数据

具体请查看获取单元格数据 - 选中单元格

改变单元格状态

import { InteractionStateName } from '@antv/s2'

const targetCell = s2.facet.getRowCell()[0]

s2.interaction.changeCell({
  cell: targetCell,
  stateName: InteractionStateName.SELECTED,
  isMultiSelection: false,
  scrollIntoView: false,
})

默认会滚动至可视范围内，可以通过 scrollIntoView 禁用。

也可以直接使用 changeState 直接更新指定单元格的状态

import { InteractionStateName, getCellMeta } from '@antv/s2'

const targetCell = s2.facet.getRowCell()[0]

// 选中
s2.interaction.changeState({
  cells: [getCellMeta(targetCell)],
  stateName: InteractionStateName.SELECTED,
});

// 取消选中
s2.interaction.changeState({
  cells: [],
  stateName: InteractionStateName.UNSELECTED,
});

更新单元格

每一个单元格实例都有一个 update 方法，调用它可以进行重绘，从而实现单元格的手动更新。

const targetCell = s2.facet.getRowCell()[0]

targetCell.update()

关闭滚动动画

当选中或高亮单元格时，会自动滚动，可以通过 animate: false 关闭动画。

s2.interaction.selectCell(targetCell, {
  animate: false
})

触发滚动事件

自动滚动时，默认不会触发内部滚动事件，即 S2Event.GLOBAL_SCROLL, 可以通过 skipScrollEvent: false 禁用。

s2.interaction.selectCell(targetCell, {
  skipScrollEvent: false
})

S2

高亮/选中单元格

S2

高亮/选中单元格

注意

高亮单元格

高亮子节点

选中单元格

全选

获取选中数据

改变单元格状态

更新单元格

关闭滚动动画

触发滚动事件

注意

高亮单元格

高亮子节点

选中单元格

全选

获取选中数据

改变单元格状态

更新单元格

关闭滚动动画

触发滚动事件