SpreadJS工具栏的图标如何动态变化

Ellia.Duan

本帖最后由 Joestar.Xu 于 2024-4-11 17:12 编辑

HHRMM@XK)(KJ6%1Q_RC~KBR.jpg375962828.png

点击实时刷新按钮，上方开关图片选中未选中切换，请问代码里如何书写

image.png995226440.png

Ellia.Duan · Ellia.Duan

您好，可以参考下面的代码

var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
Welcome: {
title: "Welcome",
text: "Welcome",
iconClass: "ribbon-button-welcome",
type:"checkbox",
bigButton: "true",
commandName: "Welcome",
execute: function (context, propertyName, checked) {
designer.setData('flag', checked);
},
getState: function (context, prop) {
return designer.getData('flag');
}
}
}
config.ribbon[0].buttonGroups.unshift({
"label": "NewDesigner",
"thumbnailClass": "welcome",
"commandGroup": {
"children": [
{
"direction": "vertical",
"commands": [
"Welcome"
]
}
]
}
});
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);

复制代码

核心代码是

execute: function (context, propertyName, checked) {
designer.setData('flag', checked);
},
getState: function (context, prop) {
return designer.getData('flag');
}

复制代码

当选择图表后，发现dom元素会添加check属性，如下图
image.png327834471.png

所以添加相应的css样式即可：

.ribbon-button-welcome {
background:url('./1.png');
background-image:background-size: 35px 35px;
}
.gc-ribbon-bar .ribbon-button-checkbox.big-button[checked="true"] .ribbon-button-item-icon ,
.gc-ribbon-bar .ribbon-button-checkbox.gc-icon-text-both[checked="true"] .ribbon-button-item-icon{
background:url('./2.png');
background-size: 35px 35px;
}

复制代码

效果如下：

Ellia.Duan · Ellia.Duan

您好。Designer中菜单没有您图片中的图表及功能，您应该是自定义了这部分内容。关于点击事件，您可以在自定义的execute做相关逻辑。

Richard.Huang · Richard.Huang

您好，我想您可以参考我们这篇技术博客实现您的开关的持久性状态：https://gcdn.grapecity.com.cn/fo ... 1&fromuid=59119

西安小菜鸟 · 西安小菜鸟

Ellia.Duan 发表于 2024-4-10 09:51
您好。Designer中菜单没有您图片中的图表及功能，您应该是自定义了这部分内容。关于点击事件，您可以在自定 ...

不知道execute里用什么api替换iconClass图片

  realTimeRefresh: {
   text: '实时刷新',
   iconClass: 'ribbon-btn-realTimeRefresh-close',
   bigButton: 'true',
   commandName: 'realTimeRefresh',
   enableContext: 'sini-ribbon-realTimeRefresh',
   execute: (context, propertyName, fontItalicChecked) => {

   },
},

西安小菜鸟 · 西安小菜鸟

Richard.Huang 发表于 2024-4-10 09:51
您好，我想您可以参考我们这篇技术博客实现您的开关的持久性状态：https://gcdn.grapecity.com.cn/forum.ph ...

请问替换iconClass图片的api是哪个？

西安小菜鸟 · 西安小菜鸟

Ellia.Duan 发表于 2024-4-9 18:27
您好，可以参考下面的代码
核心代码是
当选择图表后，发现dom元素会添加check属性，如下图

感谢，已解决

Richard.Huang · Richard.Huang

西安小菜鸟发表于 2024-4-11 17:09
感谢，已解决

好的，本帖子的问题解决，这里就先结帖了。后续如果您有新的问题，也欢迎创建新的求助帖。

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

[已处理] SpreadJS工具栏的图标如何动态变化

最佳答案

7 个回复

SpreadJS 认证

SpreadJS 高级认证