Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛链接跳转自定义标记无法同步获取到node的belogsCell #2914

Closed
1 of 5 tasks
liqiuqiui opened this issue Sep 29, 2024 · 1 comment · Fixed by #2918
Closed
1 of 5 tasks

🐛链接跳转自定义标记无法同步获取到node的belogsCell #2914

liqiuqiui opened this issue Sep 29, 2024 · 1 comment · Fixed by #2918
Assignees
Labels
📃 documentation 文档相关改动 next 2.0-next 版本的问题

Comments

@liqiuqiui
Copy link

liqiuqiui commented Sep 29, 2024

🏷 Version

Package Version
@antv/s2 2.0.0-next.28
@antv/s2-react
@antv/s2-vue

Sheet Type

  • PivotSheet
  • TableSheet
  • GridAnalysisSheet
  • StrategySheet
  • EditableSheet

🖋 Description

按照官网demo代码,自定义标记无法同步获取到node的belogsCell去实现标记只对数值生效
image

🔗 Reproduce Link

将下列代码粘贴覆盖到官网自定义标记demo代码框里

import { S2DataConfig, S2Event, S2Options, TableSheet } from "@antv/s2";

fetch("https://assets.antv.antgroup.com/s2/basic-table-mode.json")
  .then((res) => res.json())
  .then(async (data) => {
    const container = document.getElementById("container");
    const s2DataConfig: S2DataConfig = {
      fields: {
        columns: ["type", "province", "city", "price", "cost"],
      },
      meta: [
        {
          field: "province",
          name: "省份",
        },
        {
          field: "city",
          name: "城市",
        },
        {
          field: "type",
          name: "商品类别",
        },
        {
          field: "price",
          name: "价格",
        },
        {
          field: "cost",
          name: "成本",
        },
      ],
      data,
    };

    const s2Options: S2Options = {
      width: 600,
      height: 480,
      interaction: {
        linkFields: (meta) => {

          if (meta.value === '商品类别') {
            console.log("meta", meta);
            console.log("belongsCell", meta?.belongsCell);
          }
          // 不标记列头
          if (meta?.belongsCell?.cellType === "colCell") {
            return false;
          }

          return true;
          // 根据指标值动态标记
          // return meta?.fieldValue === "浙江" || meta?.fieldValue >= 10;
        },
      },
    };

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

    s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (jumpData) => {
      console.log("jumpData:", jumpData);

      const { field, record } = jumpData;
      const value = record?.[field];
      const a = document.createElement("a");

      a.target = "_blank";
      a.href = `https://s2.antv.antgroup.com/zh/docs/manual/introduction?${field}=${value}`;
      a.click();
      a.remove();
    });

    await s2.render();
  });

😊 Expected Behavior

😅 Current Behavior

@github-actions github-actions bot added the next 2.0-next 版本的问题 label Sep 29, 2024
@lijinke666
Copy link
Member

lijinke666 commented Sep 30, 2024

无法同步获取到node的belogsCell

protected appendNode(node: Node) {
const { spreadsheet } = this.getHeaderConfig();
const group = this.getCellGroup(node);
const cell = this.getCellInstance(node);
node.belongsCell = cell;
group?.appendChild(cell);
spreadsheet.emit(S2Event.COL_CELL_RENDER, cell as ColCell);
spreadsheet.emit(S2Event.LAYOUT_CELL_RENDER, cell);
}

belogsCell 是在节点生成后才写入的, 也就是 lineFields 调用之后, 所以是无法获取的, 这个 demo 有问题, 后续优化, 感谢你的反馈

实现标记只对数值生效

你可以换种方式, linkFields 这个 hook 会对所有单元格调用, 但是:

数值单元格的数据结构和其他不同, 对应 ViewMeta , 其他单元格对应 Node, 你如果只想对数值生效, 可以根据两者结构差异来判断, 例如:

import { Node } from '@antv/s2'

if(meta instanceof Node) {
 // 表头
} else {
 // 数值
}
if(!meta.valueField) {
 // 表头
} else {
 // 数值
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📃 documentation 文档相关改动 next 2.0-next 版本的问题
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants