自定义交互

基础交互

隐藏列头

1. 自定义交互类

这是一个自定义交互类的基本格式：

继承 BaseEvent 拿到当前表格实例 this.spreadsheet, 实现 bindEvents 方法，结合 this.spreadsheet 提供的一系列方法，自定义交互，最后表格初始化时会注册默认交互，和自定义交互。

import { BaseEvent } from '@antv/s2';

// 继承 BaseEvent, 可以拿到 this.spreadsheet
class HiddenInteraction extends BaseEvent {
  bindEvents() { }
}

监听 列头 双击事件：S2Event.COL_CELL_DOUBLE_CLICK

import { BaseEvent, S2Event } from '@antv/s2';

class HiddenInteraction extends BaseEvent {
  bindEvents() {
    // 列头双击时
    this.spreadsheet.on(S2Event.COL_CELL_DOUBLE_CLICK, (event) => {
      // 获取当前单元格
      const cell = this.spreadsheet.getCell(event.target);
      // 获取当前单元格元数据
      const meta = cell.getMeta();
      // 隐藏当前列
      this.spreadsheet.interaction.hideColumns([meta.field]);
    });
  }
}

2. 注册自定义交互

import { TableSheet } from '@antv/s2';

const s2Options = {
  width: 600,
  height: 300,
  interaction: {
    customInteractions: [
      {
        // 交互的唯一标识，需要保证和已有交互不冲突
        key: 'HiddenInteraction',
        interaction: HiddenInteraction,
      },
    ],
  }
};

const s2 = new TableSheet(container, s2DataConfig, s2Options);

await s2.render();

3. 多个自定义交互

当然，你可以注册任意数量的自定义交互，比如你不想让用户在表格右键时出现浏览器默认的菜单

import { TableSheet } from '@antv/s2';

class ContextMenuInteraction extends BaseEvent {
  bindEvents() {
    this.spreadsheet.getCanvasElement().addEventListener('contextmenu', (event) => {
      // 禁止弹出右键菜单
      event.preventDefault();
    });
  }
}

const s2Options = {
  width: 600,
  height: 300,
  interaction: {
    customInteractions: [
      {
        key: 'HiddenInteraction',
        interaction: HiddenInteraction,
      },
      {
        key: 'ContextMenuInteraction',
        interaction: ContextMenuInteraction,
      },
    ],
  }
};

const s2 = new TableSheet(container, s2DataConfig, s2Options);

await s2.render();