🤔s2中如何实现右键点击，获取当前行数据

[voidman2017]

🏷 Version

Package	Version
@antv/s2
@antv/s2-react
@antv/s2-vue

Sheet Type

• PivotSheet
• TableSheet
• GridAnalysisSheet
• StrategySheet
• EditableSheet

🖋 Description

🔗 Reproduce Link

😊 Expected Behavior

😅 Current Behavior

请问如何实现鼠标右键点击，获取当前点击的行原始数据
https://codesandbox.io/p/sandbox/s2-contextmenu-cygvm7?file=%2Findex.ts%3A6%2C8
该种方式并未实现

[lijinke666]

demo 打不开

[voidman2017]

demo 打不开

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

class ContextMenu extends BaseEvent {
bindEvents() {
this.spreadsheet.on(S2Event.DATA_CELL_CONTEXT_MENU, (event) => {
{
console.log("右键点击了单元格", event);
const cell = this.spreadsheet.getCell(event.target);
const meta = cell.getMeta();
console.log("===debug=== meta: ", meta);
console.log("cell", cell);
}

  {
    // 首先拿到单元格当前信息
    const cell = this.spreadsheet.getCell(event.target);
    const meta = cell.getMeta();

    // 获取当前行数据
    const rowData = this.spreadsheet.dataSet.getCellData({
      query: meta.query,
    });
    // 获取当前行头单元格数据：
    const rowCellData = this.spreadsheet.dataSet.getCellData({
      query: meta.query,
    });
    // 获取当前行头维值
    const dimensionValues = this.spreadsheet.dataSet.getDimensionValues(
      meta.field
    );

    console.log("当前行数据：", rowData);
    console.log("当前行头单元格数据：", rowCellData);
    console.log("当前行头维值：", dimensionValues);
  }
});

this.spreadsheet
  .getCanvasElement()
  .addEventListener("contextmenu", (event) => {
    // 禁止弹出右键菜单
    event.preventDefault();
  });

}
}

fetch(
"https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json"
)
.then((res) => res.json())
.then((dataCfg) => {
const container = document.getElementById("container");

const s2Options = {
  width: 600,
  height: 480,
  style: {
    // 了解更多: https://s2.antv.antgroup.com/api/general/s2-options#style
    layoutWidthType: "adaptive",
  },
  interaction: {
    customInteractions: [
      {
        key: "ContextMenu",
        interaction: ContextMenu,
      },
    ],
  },
};
const s2 = new PivotSheet(container, dataCfg, s2Options);

s2.render();

});
示例代码如上

[lijinke666]

用的什么版本, issue 请按照模版填写, 下次直接关闭了

[voidman2017]

用的什么版本, issue 请按照模版填写, 下次直接关闭了

👌
看了下使用的是1.55.7版本

[lijinke666]

1.x 的文档不太全.

1. 你监听的是 dataCell 的右键, 你想获取对应的当前行, 本质上就是获取当前行头的数据, 所以是获取一组数据 (getMultiData) 而不是单个数据 (getCellData), 用 meta.rowQuery 查询就好了. 同理, 当前列就用 colQuery

class ContextMenu extends BaseEvent {
  bindEvents() {
    this.spreadsheet.on(S2Event.DATA_CELL_CONTEXT_MENU, (event) => {
      {
        const cell = this.spreadsheet.getCell(event.target);
        const meta = cell?.getMeta();

        // 获取当前行数据
        const rowData = this.spreadsheet.dataSet.getMultiData(meta?.rowQuery);

      }
    });
  }
}

2. 粘贴代码请遵循基本的 markdown 格式.
3. 使用问题请直接在讨论区 https://github.com/antvis/S2/discussions/categories/q-a 提问

[github-actions]

你好 @voidman2017, Issue 板块是用于 bug 反馈与需求讨论的地方。你可以试着在 antv s2 discussions 新开一个 discussion, 选择 🙏Q&A 类别进行提问, 我们会及时进行解答, 感谢你的理解。

Hello, @voidman2017. The Issue section is used for bug feedback and requirement discussion. You could open a new discussion in antv s2 discussions, choose the 🙏Q&A category to ask questions. We will answer in time. Thanks so much for your understanding.

[voidman2017]

1.x 的文档不太全.

1. 你监听的是 dataCell 的右键, 你想获取对应的当前行, 本质上就是获取当前行头的数据, 所以是获取一组数据 (getMultiData) 而不是单个数据 (getCellData), 用 meta.rowQuery 查询就好了. 同理, 当前列就用 colQuery

class ContextMenu extends BaseEvent {
  bindEvents() {
    this.spreadsheet.on(S2Event.DATA_CELL_CONTEXT_MENU, (event) => {
      {
        const cell = this.spreadsheet.getCell(event.target);
        const meta = cell?.getMeta();

        // 获取当前行数据
        const rowData = this.spreadsheet.dataSet.getMultiData(meta?.rowQuery);

      }
    });
  }
}

2. 粘贴代码请遵循基本的 markdown 格式.
3. 使用问题请直接在讨论区 https://github.com/antvis/S2/discussions/categories/q-a 提问

那如果是TableSheet是否无法实现该功能

[lijinke666]

文档有写, 请认真阅读, 明细表一行就是一条数据, 根据 rowIndex 去查, 两者等价: