请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Fiooona
论坛元老   /  发表于:2020-9-17 18:26  /   查看:2889  /  回复:1
       背景: 在使用SpreadJS时,常有人提出是否可以实现插入多行的功能,暂时Excel中还没有这个右键菜单,SpreadJS 作为一款控件产品, 虽然没有原生实现这个功能, 但是凭借它出色的可扩展的能力,我们可以自定义右键菜单来实现.
       思路: 添加自定义右键菜单,重写右键菜单的createMenuItemElement方法,在对应的位置添加Input框及按钮,getCommandOptions方法中获取Input框中的值
,在自定义命令中接收这个变量,完成添加对应的行数.
       效果:
          image.png987159728.png
  核心代码:
  1.     function CustomMenuView() {
  2.         }
  3.         CustomMenuView.prototype = new GC.Spread.Sheets.ContextMenu.MenuView();
  4.         CustomMenuView.prototype.createMenuItemElement = function (menuItemData) {
  5.             var self = this;
  6.             if (menuItemData.name === "insertRows") {
  7.                 var containers = GC.Spread.Sheets.ContextMenu.MenuView.prototype.createMenuItemElement.call(self, menuItemData);
  8.                 var supMenuItemContainer = containers[0];
  9.                 var btndownBlock = createBtndown();
  10.                 var inputBlock = createInput();
  11.                 var btnupBlock = createBtn();
  12.                 supMenuItemContainer.appendChild(btndownBlock);
  13.                 supMenuItemContainer.appendChild(inputBlock);
  14.                 supMenuItemContainer.appendChild(btnupBlock);
  15.                 return supMenuItemContainer;
  16.             } else {
  17.                 var menuItemView = GC.Spread.Sheets.ContextMenu.MenuView.prototype.createMenuItemElement.call(self, menuItemData);
  18.                 return menuItemView;
  19.             }
  20.         }
  21.         CustomMenuView.prototype.getCommandOptions = function (menuItemData, host, event) {
  22.             if (menuItemData && menuItemData.name === "insertRows") {
  23.                 // var ele = event.target || event.srcElement;
  24.                 var ele = document.getElementsByClassName("inputBlock")[0]
  25.                 return ele.value;
  26.             }
  27.         };
  28.         spread.contextMenu.menuView = new CustomMenuView();
复制代码
  1.        var insertRowsByCounts = {
  2.             canUndo: false,
  3.             execute: function (spread, options) {
  4.                 if(options.commandOptions){
  5.                     console.log('增加行数'+options.commandOptions);
  6.                     var sheet = spread.getSheetFromName(options.sheetName)
  7.                     sheet.suspendPaint()
  8.                     sheet.addRows(options.activeRow,parseInt(options.commandOptions))
  9.                     sheet.resumePaint()
  10.                 }
  11.             }
  12.         };
  13.         commandManager.register("rowsCount", insertRowsByCounts, null, false, false, false, false);
  14.       
复制代码

     附件Demo 可下载运行
image.png673524779.png

右键菜单插入多行.html

6.79 KB, 下载次数: 61

组件化表格编辑器(预览版)试用进行中,点击了解详情!
请点击评分,对我的服务做出评价!5分为非常满意!

1 个回复

倒序浏览
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2022-6-13 09:15:08
推荐
如想实现可手动输入行数,可以参考下面的文章在14.1.3之后的版本实现
https://gcdn.grapecity.com.cn/fo ... hread&tid=97086
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部