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

Joestar.Xu

如图所示，这是右键单击，出现的弹窗 image.png290854491.png

，已经实现了右键后添加按钮功能。

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

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

Joestar.Xu · Joestar.Xu

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

window.onload = function () {
let designerConfig = JSON.parse(
JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
);
let designer = new GC.Spread.Sheets.Designer.Designer(
"gc-designer-container",
designerConfig
);
let spread = designer.getWorkbook();
let sheet = spread.getActiveSheet();
window.designer = designer;
window.spread = spread;
window.sheet = sheet;
let character = 0;
let addSignSetting = {
canUndo: true,
name: "addSignSetting",
execute: function (context, options, isUndo) {
let Commands = GC.Spread.Sheets.Commands;
if (isUndo) {
Commands.undoTransaction(context, options);
return true;
} else {
Commands.startTransaction(context, options);
let sheet = context.getSheetFromName(options.sheetName);
sheet.setTag(
sheet.getActiveRowIndex(),
sheet.getActiveColumnIndex(),
JSON.stringify({ sign: true })
);
Commands.endTransaction(context, options);
return true;
}
},
};
let setSign = {
canUndo: true,
name: "setSign",
execute: function (context, options, isUndo) {
let Commands = GC.Spread.Sheets.Commands;
if (isUndo) {
Commands.undoTransaction(context, options);
return true;
} else {
Commands.startTransaction(context, options);
let sheet = context.getSheetFromName(options.sheetName);
sheet.setValue(
sheet.getActiveRowIndex(),
sheet.getActiveColumnIndex(),
"sign"
);
Commands.endTransaction(context, options);
return true;
}
},
};
spread.commandManager().register("addSignSetting", addSignSetting);
spread.commandManager().register("setSign", setSign);
let oldOpenMenu = spread.contextMenu.onOpenMenu;
spread.contextMenu.onOpenMenu = function (
menuData,
itemsDataForShown,
hitInfo,
spread
) {
oldOpenMenu.apply(this, arguments);
console.log(itemsDataForShown);
if (character == 1) {
itemsDataForShown.push({
text: "addSignSetting",
name: "addSignSetting",
command: "addSignSetting",
workArea: "viewport",
});
}
if (character == 2) {
let { row, col } = hitInfo.worksheetHitInfo;
if (JSON.parse(sheet.getTag(row, col)).sign === true) {
itemsDataForShown.push({
text: "setSign",
name: "setSign",
command: "setSign",
workArea: "viewport",
});
}
}
};
document.querySelector("#button1").addEventListener("click", function () {
character = 1;
});
document.querySelector("#button2").addEventListener("click", function () {
character = 2;
});
};

复制代码

Joestar.Xu · Joestar.Xu

本帖最后由 Joestar.Xu 于 2024-6-5 12:19 编辑

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

let oldOpenMenu = spread.contextMenu.onOpenMenu;
spread.contextMenu.onOpenMenu = function (
menuData,
itemsDataForShown,
hitInfo,
spread
) {
oldOpenMenu.apply(this, arguments);
console.log(itemsDataForShown);
itemsDataForShown.push({
text: "test",
name: "test",
command: "test",
workArea: "viewport",
});
};

复制代码

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

卑微的打工狗 · 卑微的打工狗

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

let oldOpenMenu = spread.contextMenu.onOpenMenu;

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

Joestar.Xu · Joestar.Xu

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

卑微的打工狗 · 卑微的打工狗

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

需求是这样的。

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

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

image.png74805602.png

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

Joestar.Xu · Joestar.Xu

本帖最后由 Joestar.Xu 于 2024-6-5 12:19 编辑

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

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

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

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

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

卑微的打工狗 · 卑微的打工狗

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

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

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

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

designerConfig.commandMap["signPic"] = {
text: "设置为签名",
commandName: "signPic",
execute: () => {
this.$refs.sign.openDialog();
this.selections = this.sheet.getSelections()[0];
}
};
designerConfig.contextMenu.push("signPic");

复制代码

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

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

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

卑微的打工狗 · 卑微的打工狗

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

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

Joestar.Xu · Joestar.Xu

您好，

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

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

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

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

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

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

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

[已处理] 如何动态的添加右键单击单元格出现的弹窗。

最佳答案

12 个回复

SpreadJS 认证

SpreadJS 高级认证