SpreadJS自定制右键菜单---插入多行

收藏

   背景: 在使用SpreadJS时,常有人提出是否可以实现插入多行的功能，暂时Excel中还没有这个右键菜单,SpreadJS 作为一款控件产品, 虽然没有原生实现这个功能, 但是凭借它出色的可扩展的能力,我们可以自定义右键菜单来实现.
   思路: 添加自定义右键菜单，重写右键菜单的createMenuItemElement方法，在对应的位置添加Input框及按钮,getCommandOptions方法中获取Input框中的值
,在自定义命令中接收这个变量，完成添加对应的行数．
   效果:
      image.png987159728.png

　　核心代码：

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[0];
var btndownBlock = createBtndown();
var inputBlock = createInput();
var btnupBlock = createBtn();
supMenuItemContainer.appendChild(btndownBlock);
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 = event.target || event.srcElement;
var ele = document.getElementsByClassName("inputBlock")[0]
return ele.value;
}
};
spread.contextMenu.menuView = new CustomMenuView();

复制代码

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);