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

透视表树模式是否可以支持展开/收起图标条件渲染? #2753

Closed
1 of 5 tasks
ggcfcmd opened this issue May 30, 2024 · 2 comments
Closed
1 of 5 tasks

透视表树模式是否可以支持展开/收起图标条件渲染? #2753

ggcfcmd opened this issue May 30, 2024 · 2 comments
Assignees
Labels
❔question 疑问/使用问题

Comments

@ggcfcmd
Copy link

ggcfcmd commented May 30, 2024

🏷 Version

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

Sheet Type

  • PivotSheet
  • TableSheet
  • GridAnalysisSheet
  • StrategySheet
  • EditableSheet

🖋 Description

当前使用s2-react透视表的树模式(hierarchyType: "tree"),希望部分行(如图中红色部分)可以禁用展开/收起功能,同时隐藏对应图标,是否有配置可以支持?

🔗 Reproduce Link

image

😊 Expected Behavior

希望图中红色行不展示图标

😅 Current Behavior

所有行都会展示图标

@ggcfcmd ggcfcmd added the ❔question 疑问/使用问题 label May 30, 2024
@lijinke666
Copy link
Member

红框的两个 icon 分别位于 角头和行头, 你可以自定义 cornerCellrowCell, 请参考官网 https://s2.antv.antgroup.com/examples/custom/custom-cell/#custom-specified-cell

内部展开/收起的 icon 的判断是这个, 你可以重写 showTreeIcon, 根据 this.meta 之类的自行控制.

protected showTreeIcon() {
// 批量折叠或者展开的 icon,渲染在行头对应的角头中
return (
this.spreadsheet.isHierarchyTreeType() &&
this.meta.cornerType === CornerNodeType.Row
);
}

protected showTreeIcon() {
return this.spreadsheet.isHierarchyTreeType() && !this.meta.isLeaf;
}

class CustomCornerCell extends CornerCell {
  showTreeIcon() {
    // 你的逻辑
  }
}

class CustomRowCell extends RowCell {
  showTreeIcon() {
    // 你的逻辑
  }
}

@lijinke666 lijinke666 self-assigned this May 31, 2024
@ggcfcmd
Copy link
Author

ggcfcmd commented Jul 2, 2024

红框的两个 icon 分别位于 角头和行头, 你可以自定义 cornerCellrowCell, 请参考官网 https://s2.antv.antgroup.com/examples/custom/custom-cell/#custom-specified-cell

内部展开/收起的 icon 的判断是这个, 你可以重写 showTreeIcon, 根据 this.meta 之类的自行控制.

protected showTreeIcon() {
// 批量折叠或者展开的 icon,渲染在行头对应的角头中
return (
this.spreadsheet.isHierarchyTreeType() &&
this.meta.cornerType === CornerNodeType.Row
);
}

protected showTreeIcon() {
return this.spreadsheet.isHierarchyTreeType() && !this.meta.isLeaf;
}

class CustomCornerCell extends CornerCell {
  showTreeIcon() {
    // 你的逻辑
  }
}

class CustomRowCell extends RowCell {
  showTreeIcon() {
    // 你的逻辑
  }
}

感谢解答 目前还有两个问题 我现在使用树模式,重写CustomRowCell的逻辑如下

class CustomRowCell extends RowCell {
constructor(node, spreadsheet, headerConfig) {
super(node, spreadsheet, headerConfig);
}
showTreeIcon() {
// console.log('isHierarchyTreeType log: ', this.spreadsheet.isHierarchyTreeType(), 'meta log: ', this.meta)
return this.spreadsheet.isHierarchyTreeType() && !this.meta.isLeaf;
}
}

问题1:this.meta中的isLeaf始终为undefined,是有配置项控制么?
问题2:我尝试着通过判断meta中的children字段是否有值来判断叶子节点,但我发现当一个节点有子节点但没展开时,children字段是空的,展开节点时会动态更新children,是否有办法在初始情况下拿到有关完整树结构的配置?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
❔question 疑问/使用问题
Projects
None yet
Development

No branches or pull requests

2 participants