相信大家在使用騰訊文檔、石墨文檔等其他文檔表格的時候,都會發現可以右鍵插入多行。使用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[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,兼容 450 種以上的 Excel 公式,具備“高性能、跨平臺、與 Excel 高度兼容”的產品特性,備受華爲、蘇寧易購、天弘基金等行業龍頭企業的青睞,並被中國軟件行業協會認定爲“中國優秀軟件產品”。SpreadJS 可爲用戶提供類 Excel 的功能,滿足表格文檔協同編輯、 數據填報、 類 Excel 報表設計等業務場景需求,極大的降低企業研發成本和項目交付風險。
本文轉載自葡萄城