Ribbon下拉选中效果实现
部分同学在实现设计器的Ribbon时想要实现下图这样的下拉选中效果：那么要怎么实现类似的效果呢？
首先，我们先做一个简单的下拉Ribbon对象：
designerConfig.ribbon.unshift({
id: "test",
text: "测试",
buttonGroups: [
{
label: "测试",
commandGroup: {
children: [
{
command: "parCommand",
type: "dropdown",
children: ["chilCommand1", "chilCommand2"],
},
],
},
},
],
});
这个结构中有三个Command，分别为parCommand、chilCommand1和chilCommand2。
接下来我们要在designerConfig.commandMap中分别实现这三个Command。
parCommand简单定义一下即可，无需添加特别的逻辑：
parCommand: {
text: "父",
commandName: "parCommand",
execute: (context, propertyName) => {
console.log("execute", context, propertyName);
},
getState: (context, propertyName) => {
console.log("getState", context, propertyName);
},
},
重点在于chilCommand1和chilCommand2这两个Command：
chilCommand1: {
text: "子1",
type: "checkbox",
commandName: "chilCommand1",
execute: (context, propertyName, checked) => {
let tag = context.getWorkbook().getActiveSheet().tag();
if (!tag) {
tag = {};
}
tag.child1 = !tag.child1;
context.getWorkbook().getActiveSheet().tag(tag);
},
getState: (context) => {
return context.getWorkbook().getActiveSheet().tag()?.child1;
},
},
chilCommand2: {
text: "子2",
type: "checkbox",
commandName: "chilCommand2",
execute: (context, propertyName, checked) => {
let tag = context.getWorkbook().getActiveSheet().tag();
if (!tag) {
tag = {};
}
tag.child2 = !tag.child2;
context.getWorkbook().getActiveSheet().tag(tag);
},
getState: (context) => {
return context.getWorkbook().getActiveSheet().tag()?.child2;
},
},
在每个Command中都有一个execute和getState函数，execute函数为点击时执行的函数，getState函数则为获取选中状态的函数。
上面的代码将选中状态存储在sheet的tag中，获取状态时也会从sheet的tag中获取。
具体代码请参考附件。
页:
[1]