純前端表格控制元件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 報表設計等業務場景需求，極大的降低企業研發成本和專案交付風險。

本文轉載自葡萄城