如何动态的添加右键单击单元格出现的弹窗。

如图所示，这是右键单击，出现的弹窗 ，已经实现了右键后添加按钮功能。

但现在要根据单元格的不同，右键单击出现的弹窗按钮内容也不相同。

请问：如何动态的添加弹窗的按钮内容？

您好，我写了一个简单的Demo请参考：

1. window.onload = function () {
   
2.   let designerConfig = JSON.parse(
   
3.     JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
   
4.   );
   
5. 
   
6.   let designer = new GC.Spread.Sheets.Designer.Designer(
   
7.     "gc-designer-container",
   
8.     designerConfig
   
9.   );
   
10. 
    
11.   let spread = designer.getWorkbook();
    
12. 
    
13.   let sheet = spread.getActiveSheet();
    
14. 
    
15.   window.designer = designer;
    
16.   window.spread = spread;
    
17.   window.sheet = sheet;
    
18. 
    
19.   let character = 0;
    
20. 
    
21.   let addSignSetting = {
    
22.     canUndo: true,
    
23.     name: "addSignSetting",
    
24.     execute: function (context, options, isUndo) {
    
25.       let Commands = GC.Spread.Sheets.Commands;
    
26.       if (isUndo) {
    
27.         Commands.undoTransaction(context, options);
    
28.         return true;
    
29.       } else {
    
30.         Commands.startTransaction(context, options);
    
31.         let sheet = context.getSheetFromName(options.sheetName);
    
32.         sheet.setTag(
    
33.           sheet.getActiveRowIndex(),
    
34.           sheet.getActiveColumnIndex(),
    
35.           JSON.stringify({ sign: true })
    
36.         );
    
37.         Commands.endTransaction(context, options);
    
38.         return true;
    
39.       }
    
40.     },
    
41.   };
    
42. 
    
43.   let setSign = {
    
44.     canUndo: true,
    
45.     name: "setSign",
    
46.     execute: function (context, options, isUndo) {
    
47.       let Commands = GC.Spread.Sheets.Commands;
    
48.       if (isUndo) {
    
49.         Commands.undoTransaction(context, options);
    
50.         return true;
    
51.       } else {
    
52.         Commands.startTransaction(context, options);
    
53.         let sheet = context.getSheetFromName(options.sheetName);
    
54.         sheet.setValue(
    
55.           sheet.getActiveRowIndex(),
    
56.           sheet.getActiveColumnIndex(),
    
57.           "sign"
    
58.         );
    
59.         Commands.endTransaction(context, options);
    
60.         return true;
    
61.       }
    
62.     },
    
63.   };
    
64. 
    
65.   spread.commandManager().register("addSignSetting", addSignSetting);
    
66.   spread.commandManager().register("setSign", setSign);
    
67.   let oldOpenMenu = spread.contextMenu.onOpenMenu;
    
68.   spread.contextMenu.onOpenMenu = function (
    
69.     menuData,
    
70.     itemsDataForShown,
    
71.     hitInfo,
    
72.     spread
    
73.   ) {
    
74.     oldOpenMenu.apply(this, arguments);
    
75.     console.log(itemsDataForShown);
    
76.     if (character == 1) {
    
77.       itemsDataForShown.push({
    
78.         text: "addSignSetting",
    
79.         name: "addSignSetting",
    
80.         command: "addSignSetting",
    
81.         workArea: "viewport",
    
82.       });
    
83.     }
    
84.     if (character == 2) {
    
85.       let { row, col } = hitInfo.worksheetHitInfo;
    
86.       if (JSON.parse(sheet.getTag(row, col)).sign === true) {
    
87.         itemsDataForShown.push({
    
88.           text: "setSign",
    
89.           name: "setSign",
    
90.           command: "setSign",
    
91.           workArea: "viewport",
    
92.         });
    
93.       }
    
94.     }
    
95.   };
    
96. 
    
97.   document.querySelector("#button1").addEventListener("click", function () {
    
98.     character = 1;
    
99.   });
    
100. 
     
101.   document.querySelector("#button2").addEventListener("click", function () {
     
102.     character = 2;
     
103.   });
     
104. };

复制代码

您好，我根据下面的代码举一个简单的例子：

1. let oldOpenMenu = spread.contextMenu.onOpenMenu;
   
2. spread.contextMenu.onOpenMenu = function (
   
3.   menuData,
   
4.   itemsDataForShown,
   
5.   hitInfo,
   
6.   spread
   
7. ) {
   
8.   oldOpenMenu.apply(this, arguments);
   
9.   console.log(itemsDataForShown);
   
10.   itemsDataForShown.push({
    
11.     text: "test",
    
12.     name: "test",
    
13.     command: "test",
    
14.     workArea: "viewport",
    
15.   });
    
16. };

复制代码

比如说想要在第一行单元格中添加一个按钮，那么需要在onOpenMenu这个函数中判断hitInfo点击的单元格，然后修改itemsDataForShown来实现动态添加的效果。

Joestar.Xu 发表于 2024-6-4 17:32
您好，我根据下面的代码举一个简单的例子：

let oldOpenMenu = spread.contextMenu.onOpenMenu;

那如何捕获到右键的单击事件呢？

没太明白，为什么要捕获右键的单击事件呢？

Joestar.Xu 发表于 2024-6-4 18:08
没太明白，为什么要捕获右键的单击事件呢？

需求是这样的。

模板的设置人员对某个单元格设置填报规则，比如，他右键点击按钮--设置单元格为图片。
则，模板的填报人员右键单击单元格，该单元格动态展示为上传图片。

根据规则设置人员对单元格设计的不同，填写人员右键单击单元格，动态展示不同的按钮。



根据以上需求，是否可以利用自定义单元格来实现？

您好，根据您的描述，这个需求并没有复杂到需要使用自定义单元格来实现。

以下是一个简单的实现思路：

1、模板人员选择A1单元格，根据模板人员的权限只显示“设置为电子签名”选项，右键菜单点击“设置为电子签名”选项，然后给这个单元格的tag上设置一个标记，如：{sign: true}。

2、填报人员选择A1单元格，根据填报人员的权限只允许显示“电子签名”选项，但是这个时候还没有显示，然后根据选择的单元格，判断其tag中的数据，如果sign为true的话，就显示“电子签名”选项。

以上操作可以直接通过我最开始回复的重写右键菜单来实现。

Joestar.Xu 发表于 2024-6-5 12:18
您好，根据您的描述，这个需求并没有复杂到需要使用自定义单元格来实现。

以下是一个简单的实现思路：

您好，我可能没有表达完整我们的需求，我之后重新发一篇帖子来描述吧。

但是我刚才是试了您发给我的代码，毫无反应。
我之前添加右键菜单栏的代码如下所示

1. designerConfig.commandMap["signPic"] = {
   
2.                 text: "设置为签名",
   
3.                 commandName: "signPic",
   
4.                 execute: () => {
   
5.                     this.$refs.sign.openDialog();
   
6.                     this.selections = this.sheet.getSelections()[0];
   
7.                 }
   
8.             };
   
9.             designerConfig.contextMenu.push("signPic");

复制代码

按理说，我应该再execute方法中添加tag，

问题一：请问，如何添加tag，有效代码是什么？

问题二：模板填报人员应该动态的展示按钮选项，我理解的是，，，捕获到用户右键单击该单元格的事件，然后在此判断该单元格相对应的tag，动态展示给用户需要的按钮。您上述的代码我粘贴了下，嗯，，，反正是没看懂，您能具体的解读一下吗？或者有没有具体的有效代码

Joestar.Xu 发表于 2024-6-5 17:31
您好，我写了一个简单的Demo请参考：

卑微的说一句，，，求注释

您好，

21-41行代码为addSignSetting命令的定义，只需要关注32-36行代码。

21-41行代码为setSign命令的定义，只需要关注54-58行代码。

65、66行代码为以上两个命令的注册，命令需要注册才能正常使用。

67-95行代码为右键菜单的重写方法，通过判断character来判断显示哪个Command，setSign除了character要判断以外，还要判断Tag的sign。

97-103行代码是设置character按钮的监听方法。

如果还有不懂的地方请随时留言。