自定义右键菜单——插入指定行数
本帖最后由 Lynn.Dou 于 2023-8-3 15:04 编辑相信大家在使用腾讯文档、石墨文档等其他文档表格的时候，都会发现可以右键插入多行。使用SpreadJS的小伙伴也想实现这个功能，应该如何实现呢？那么本次教程将会带来右键插入多行的实践教程。（注意：本次教程使用的一个属性是14.1.3后新增的，因此该方法适用于14.1.3以后的版本，没升级的小伙伴请及时升级）。
要想右键插入多行，我们首先需要定义一个右键菜单的对象，并将其push到右键菜单数组中。
var insertRows = {
text: "在上方插入",
name: "insertRows",
command: "rowsCount",
workArea: "rowHeader"
};
spread.contextMenu.menuData.push(insertRows);
接着，我们需要注册上面名为rowsCount的命令，并将addRows方法在execute中调用。var commandManager = spread.commandManager();
var insertRowsByCounts = {
canUndo: false,
execute: function (spread, options) {
if(options.commandOptions){
console.log('在上方插入'+options.commandOptions);
var sheet = spread.getSheetFromName(options.sheetName)
sheet.suspendPaint()
sheet.addRows(options.activeRow,parseInt(options.commandOptions))
sheet.resumePaint()
}
}
};
commandManager.register("rowsCount", insertRowsByCounts, null, false, false, false, false);
下面就是重写createMenuItemElement、getCommandOptions，并且在这里面创建我们的input框和文本。
function CustomMenuView() {
}
CustomMenuView.prototype = new GC.Spread.Sheets.ContextMenu.MenuView();
CustomMenuView.prototype.createMenuItemElement = function (menuItemData) {
var self = this;
if (menuItemData.name === "insertRows") {
var containers = GC.Spread.Sheets.ContextMenu.MenuView.prototype.createMenuItemElement.call(self, menuItemData);
var supMenuItemContainer = containers;
var inputBlock = createInput();
var btnupBlock = createBtn();
supMenuItemContainer.appendChild(inputBlock);
supMenuItemContainer.appendChild(btnupBlock);
return supMenuItemContainer;
} else {
var menuItemView = GC.Spread.Sheets.ContextMenu.MenuView.prototype.createMenuItemElement.call(self, menuItemData);
return menuItemView;
}
}
CustomMenuView.prototype.getCommandOptions = function (menuItemData, host, event) {
if (menuItemData && menuItemData.name === "insertRows") {
var ele = document.getElementsByClassName("inputBlock")
return ele.value;
}
};
spread.contextMenu.menuView = new CustomMenuView();
最后用js代码来创建两个dom元素，分别为input和p标签,需要注意的是，我们需要用stopPropagation给input框阻止事件冒泡，这样我们的input框点击进入之后才不会关闭右键菜单。同时，我们还需要给input框加上我们内部的属性就大功告成。setAttribute('gcUIElement', 'gcContextMenu');实现效果如下
下载附件即可查看完整demo.
在designer中实现上述右键菜单效果思路类似，具体demo可以点击下方链接。
https://jscodemine.grapecity.com/share/hzXr0BYRvkypPiC3zYDRcA/?isEmbed=true&isExplorerShow=false
设计器表格多行插入怎么操作呢？:dizzy: 逮高乐 发表于 2022-8-2 09:45
设计器表格多行插入怎么操作呢？
可以参考这个demo
https://jscodemine.grapecity.com/share/hzXr0BYRvkypPiC3zYDRcA/?isEmbed=true&isExplorerShow=false Derrick.Jiao 发表于 2022-8-2 09:55
可以参考这个demo
https://jscodemine.grapecity.com/share/hzXr0BYRvkypPiC3zYDRcA/?isEmbed=true&isEx ...
好了，感谢 :itwn: v15.0 使用了demo的代码没有展示出菜单项，经查是因为使用了这种方式定义的spread请问要如何修改呢？
this.designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
this.spread = this.designer.getWorkbook();
本帖最后由 Derrick.Jiao 于 2022-8-18 09:24 编辑
sssssss 发表于 2022-8-2 15:25
v15.0 使用了demo的代码没有展示出菜单项，经查是因为使用了这种方式定义的spread请问要如何修改呢？
需要在设计器上实现，请参考上面二楼回复的链接
https://jscodemine.grapecity.com ... sExplorerShow=false
想给右键弹窗中的输入框绑定 回车添加行的事件，如何在添加行之后关闭右键菜单呢？ sssssss 发表于 2022-8-17 19:56
想给右键弹窗中的输入框绑定 回车添加行的事件，如何在添加行之后关闭右键菜单呢？
目前受inputBlock.setAttribute('gcUIElement', 'gcContextMenu');限制，可能无法实现该需求，这边需要调研一下看下是否支持 sssssss 发表于 2022-8-17 19:56
想给右键弹窗中的输入框绑定 回车添加行的事件，如何在添加行之后关闭右键菜单呢？
请参考最新的demo，可以通过回车来结束编辑并关闭右键菜单。
页:
[1]
2