组件版设计器自定制之动态更改工具栏图标

收藏 · 2023-11-28 14:52 上传

本帖最后由 Lynn.Dou 于 2023-11-28 14:54 编辑

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

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

如果想自定义状态变量，可以用 designer.setData方法。
并且，designer支持结合IF、AND、NOT等公式表达式在命令选项中定义上述状态，如下示例：

复制代码

所以回到需求本身，我们可以定义一个变量，结合IF公式用来动态控制iconClass显示的图标。

主要代码如下：

var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"));
// 自定义状态变量
designer.setData("test", true);
//console.log(designer.getData("test"));
var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
Welcome: {
title: "Welcome",
text: "Welcome",
iconClass: '=IF(test, "ribbon-button-welcome","ribbon-button-spjs")', // IF公式
bigButton: "true",
commandName: "Welcome",
execute: function (context, propertyName, fontItalicChecked) {
alert('Welcome to new designer.');
}
}
}
config.ribbon[0].buttonGroups.unshift({
"label": "NewDesigner",
"thumbnailClass": "welcome",
"commandGroup": {
"children": [
{
"direction": "vertical",
"commands": [
"Welcome"
]
}
]
}
});
// 设置config
designer.setConfig(config);
document.getElementById("changeIcon").addEventListener("click", function() {
console.log(designer.getData("test"));
designer.setData("test", !designer.getData("test"));
designer.setConfig(config);
})

复制代码

来看看效果：

附件为完整demo，供参考。

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

0 个回复