部分同学在实现设计器的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中获取。
具体代码请参考附件。
|
|
SpreadJS 17.0.8 | GcExcel 7.1.1 已发布~
陕公网安备：61019002000258 |
隐私政策 |
网站地图
