请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Lynn.Dou 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2023-11-28 14:53  /   查看:1701  /  回复:0
本帖最后由 Lynn.Dou 于 2023-11-28 14:54 编辑

背景:
用户期望根据不同的状态去动态更改工具栏按钮的图标,应该如何实现呢?

实现思路:
组件版设计器提供了不同的状态,这些状态可以在命令选项中定义,以显示特定的布局。如下:

  • inDropdown : 表示命令处于下拉列表中。
  • isToolbarMode : 表示工具栏功能区模式。

如果想自定义状态变量,可以用 designer.setData方法。
并且,designer支持结合IF、AND、NOT等公式表达式在命令选项中定义上述状态,如下示例:
  1. text: '=IF(isToolbarMode,"Toolbar Ribbon","Default Ribbon")'
  2.     iconClass: '=IF(inDropdown, "ribbon-button-sjs","ribbon-button-hi")'
  3.     bigButton: '=AND(NOT(inDropdown), NOT(isToolbarMode))'
复制代码
所以回到需求本身,我们可以定义一个变量,结合IF公式用来动态控制iconClass显示的图标。

主要代码如下:
  1. var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"));
  2.                         // 自定义状态变量
  3.                         designer.setData("test", true);
  4.                         //console.log(designer.getData("test"));
  5.                         var config = GC.Spread.Sheets.Designer.DefaultConfig;
  6.                         config.commandMap = {
  7.                                 Welcome: {
  8.                                         title: "Welcome",
  9.                                         text: "Welcome",
  10.                                         iconClass: '=IF(test, "ribbon-button-welcome","ribbon-button-spjs")', // IF公式
  11.                                         bigButton: "true",
  12.                                         commandName: "Welcome",
  13.                                         execute: function (context, propertyName, fontItalicChecked) {
  14.                                                 alert('Welcome to new designer.');
  15.                                         }
  16.                                 }
  17.                         }
  18.                         config.ribbon[0].buttonGroups.unshift({
  19.                                 "label": "NewDesigner",
  20.                                 "thumbnailClass": "welcome",
  21.                                 "commandGroup": {
  22.                                         "children": [
  23.                                                 {
  24.                                                         "direction": "vertical",
  25.                                                         "commands": [
  26.                                                                 "Welcome"
  27.                                                         ]
  28.                                                 }
  29.                                         ]
  30.                                 }
  31.                         });
  32.                         // 设置config
  33.                         designer.setConfig(config);

  34.                         document.getElementById("changeIcon").addEventListener("click", function() {
  35.                                 console.log(designer.getData("test"));
  36.                                 designer.setData("test", !designer.getData("test"));
  37.                                 designer.setConfig(config);
  38.                         })
复制代码

来看看效果:
icon.gif875887451.png
附件为完整demo,供参考。

toolbar-icons.zip

12.69 KB, 下载次数: 246

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部