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

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

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

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

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

感谢，已解决

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

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

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) => {

      },
    },

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

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

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

1.             var config = GC.Spread.Sheets.Designer.DefaultConfig;
   
2.             config.commandMap = {
   
3.                 Welcome: {
   
4.                     title: "Welcome",
   
5.                     text: "Welcome",
   
6.                     iconClass: "ribbon-button-welcome",
   
7.                     type:"checkbox",
   
8.                     bigButton: "true",
   
9.                     commandName: "Welcome",
   
10.                     execute: function (context, propertyName, checked) {
    
11.                         designer.setData('flag', checked);
    
12.                     },
    
13. 
    
14.                     getState: function (context, prop) {
    
15.                         return designer.getData('flag');
    
16.                     }
    
17.                 }
    
18.             }
    
19.             config.ribbon[0].buttonGroups.unshift({
    
20.                 "label": "NewDesigner",
    
21.                 "thumbnailClass": "welcome",
    
22.                 "commandGroup": {
    
23.                     "children": [
    
24.                         {
    
25.                             "direction": "vertical",
    
26.                             "commands": [
    
27.                                 "Welcome"
    
28.                             ]
    
29.                         }
    
30.                     ]
    
31.                 }
    
32.             });
    
33.             var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);

复制代码

核心代码是

1.     execute: function (context, propertyName, checked) {
   
2.                         designer.setData('flag', checked);
   
3.                     },
   
4. 
   
5.                     getState: function (context, prop) {
   
6.                         return designer.getData('flag');
   
7.                     }

复制代码

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

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

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

复制代码

效果如下：