修改编辑器菜单栏的图表的图标类型为大图标及移动位置

收藏

本帖最后由 Richard.Ma 于 2024-4-7 17:00 编辑

在一些场景下，用户希望Ribbon菜单中的一些小图标更改为大图标显示。以此来更方便用户操作

本文以”插入>图表“按钮区域的柱形图图标为例，展示此类修改中的一些细节处理

先看一下修改效果

修改前
image.png864013976.png

修改后

下面是设置的代码

var config=GC.Spread.Sheets.Designer.DefaultConfig;
var cmd=GC.Spread.Sheets.Designer.getCommand('columnOrBarChartPreview');
cmd.bigButton=true
cmd.text="柱形条形图"
cmd.direction="vertical"
config.commandMap.columnOrBarChartPreview=cmd
var node=config.ribbon[1].buttonGroups[1].commandGroup.children[1].children[0].children[0]
config.ribbon[1].buttonGroups[1].commandGroup.children[1].children[0].children.splice(0,1)
config.ribbon[1].buttonGroups[1].commandGroup.children.splice(1,0,node)
var designer=GC.Spread.Sheets.Designer.findControl(document.getElementById("gc-designer-container"))
designer.setConfig(config)

复制代码

接下啦，我来分析一下上面的代码，看看主要需要做哪些设置

首先，需要对此按钮对应的command本身进行相关样式属性更改，并重新注册

var cmd=GC.Spread.Sheets.Designer.getCommand('columnOrBarChartPreview');//获取command
cmd.bigButton=true //显示大图标
cmd.text="柱形条形图"//设置文字
cmd.direction="vertical"//文字和图标按照纵向排列
config.commandMap.columnOrBarChartPreview=cmd//重新注册以覆盖

复制代码

然后需要调整这个小图标的位置，放在图表按钮 image.png228526305.png

的后面。此前拿到的config中有关于ribbon菜单的节点定义。对照UI就能找到图表按钮组对应的是ribbon[1].buttonGroups[1]，

在这个节点下面，如下图，我们需要把红框中的节点（包括刚刚修改的“columnOrBarChartPreview”，以及里面的子节点）放到箭头所指的位置
image.png198495177.png

var node=config.ribbon[1].buttonGroups[1].commandGroup.children[1].children[0].children[0]
config.ribbon[1].buttonGroups[1].commandGroup.children[1].children[0].children.splice(0,1)
config.ribbon[1].buttonGroups[1].commandGroup.children.splice(1,0,node)

复制代码

var designer=GC.Spread.Sheets.Designer.findControl(document.getElementById("gc-designer-container"))
designer.setConfig(config)

复制代码

		自动登录	找回密码
密码			立即注册

修改编辑器菜单栏的图表的图标类型为大图标及移动位置

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人