純前端表格控件SpreadJS可自定義右鍵菜單

相信大家在使用騰訊文檔、石墨文檔等其他文檔表格的時候，都會發現可以右鍵插入多行。使用SpreadJS的小夥伴也想實現這個功能，應該如何實現呢？那麼本次教程將會帶來右鍵插入多行的實踐教程。（注意：本次教程使用的一個屬性是14.1.3後新增的，因此該方法適用於14.1.3以後的版本，沒升級的小夥伴請及時升級）。

點擊獲取SpreadJS工具下載

要想右鍵插入多行，我們首先需要定義一個右鍵菜單的對象，並將其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[0];

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")[0]
return ele.value;
}
};
spread.contextMenu.menuView = new CustomMenuView();

最後用js代碼來創建兩個dom元素，分別爲input和p標籤,需要注意的是，我們需要用stopPropagation給input框阻止事件冒泡，這樣我們的input框點擊進入之後纔不會關閉右鍵菜單。同時，我們還需要給input框加上我們內部的屬性就大功告成。

setAttribute('gcUIElement', 'gcContextMenu');

實現效果如下：

SpreadJS | 下載試用

純前端表格控件SpreadJS，兼容 450 種以上的 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受華爲、蘇寧易購、天弘基金等行業龍頭企業的青睞，並被中國軟件行業協會認定爲“中國優秀軟件產品”。SpreadJS 可爲用戶提供類 Excel 的功能，滿足表格文檔協同編輯、 數據填報、 類 Excel 報表設計等業務場景需求，極大的降低企業研發成本和項目交付風險。

本文轉載自葡萄城