[]
        
(Showing Draft Content)

GC.Spread.Sheets.ContextMenu.ContextMenu

类: ContextMenu

Sheets.ContextMenu.ContextMenu

Table of contents

构造方法

属性

方法

构造方法

constructor

new ContextMenu()

上下文菜单

属性

menuData: IMenuItemData[]

内置的 menuData

property [name] - 上下文菜单项的标识

property [text] - 要显示的文本,如果此上下文菜单项是一个组,则文本将显示为DOM元素的标题

property {string|Function} [command] - 命令名,commandManager将使用此作为索引来查找此命令,如果此命令存在,则执行它

property [disable] - 此上下文菜单项在当前条件下被禁用,默认值为false

property [iconClass] - 此上下文菜单项的图标,它是一个类名

property [group] - 此上下文菜单项是组菜单项,此属性的值应为其组标题的名称

property {Object[]} [subMenu] - 此上下文菜单项具有子菜单

property [type] - 上下文菜单的类型

property [workArea] - 该上下文菜单项应该显示在以下区域:概述(outline)、行标题(rowHeader)、列标题(colHeader)、角落(corner)、切片器(slicer)、图表(chart)、形状(shape)、表格(table)、无工具栏的视图(vpWithoutTb)、透视页筛选器(pivotPageFilter)、透视页左上角(pivotTopLeft)、透视页空标签(pivotEmptyLabel)、透视页标题(pivotHeader)、透视页总计(pivotGrandTotal)、透视页内容(pivotContent)、透视表(pivotTable)


menuView: MenuView

代表内置 menuView,可以替换为自定义

代码示例

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
var colors = ['rgb(255,255,255)', 'rgb(0,255,255)', 'rgb(255,0,255)', 'rgb(255,255,0)', 'rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,0,255)', 'rgb(0,0,0)'];
function createColorpicker() {
    var colorPicker = document.createElement('div');
    colorPicker.style.width = '100%';
    colorPicker.style.backgroundColor = 'white';
    for (var j = 0; j < 8; j++) {
        var colorDom = document.createElement("div");
        colorDom.style.width = "14px";
        colorDom.style.height = "14px";
        colorDom.style.margin = "0 0 0 6px";
        colorDom.style.display = "inline-block";
        colorDom.style.border = "solid 1px #333333";
        colorDom.style.verticalAlign = "top";
        colorDom.style.backgroundColor = colors[j];
        colorPicker.appendChild(colorDom);
    }
    return colorPicker;
}
// let spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
let selectWithABackgroundColor = {
    text: "Select Color",
    name: "selectColorWithBg",
    workArea: "viewport",
    subMenu: [{
        name: "selectColorPicker",
        command: "selectWithBg"
    }]
};
spread.contextMenu.menuData.push(selectWithABackgroundColor);
let selectWithABackgroundColorCommand = {
    canUndo: false,
    execute: function(spread, options) {
        if (options.commandOptions) {
            var style = new GC.Spread.Sheets.Style();
            style.name = 'style1';
            style.backColor = options.commandOptions;
            var sheet = spread.getActiveSheet();
            sheet.suspendPaint();
            var selections = sheet.getSelections();
            var selectionIndex = 0
              , selectionCount = selections.length;
            for (; selectionIndex < selectionCount; selectionIndex++) {
                var selection = selections[selectionIndex];
                for (var i = selection.row; i < (selection.row + selection.rowCount); i++) {
                    for (var j = selection.col; j < (selection.col + selection.colCount); j++) {
                        sheet.setStyle(i, j, style, GC.Spread.Sheets.SheetArea.viewport);
                    }
                }
            }
            sheet.resumePaint();
        }
    }
};
spread.commandManager().register("selectWithBg", selectWithABackgroundColorCommand, null, false, false, false, false);
class CustomMenuView extends GC.Spread.Sheets.ContextMenu.MenuView {
    createMenuItemElement(menuItemData) {
        // create menu item view by your self
        // should return menu item view back
        // you can call super's createMenuItemElement here and only customize a few of menu item
        if (menuItemData.name === "selectColorPicker") {
            var containers = super.createMenuItemElement(menuItemData);
            var supMenuItemContainer = containers[0];
            while (supMenuItemContainer.firstChild) {
                supMenuItemContainer.removeChild(supMenuItemContainer.firstChild);
            }
            var colorPicker = createColorpicker();
            supMenuItemContainer.appendChild(colorPicker);

            return supMenuItemContainer;
        }
        return super.createMenuItemElement(menuItemData);
    }
    getCommandOptions(menuItemData, host, event) {
        if (menuItemData && menuItemData.name === "selectColorPicker") {
            var ele = event.target || event.srcElement;
            return ele.style.backgroundColor;
        }
        return super.getCommandOptions(menuItemData, host, event);
    }
}
spread.contextMenu.menuView = new CustomMenuView();

方法

onOpenMenu

onOpenMenu(menuData, itemsDataForShown, hitInfo, spread): boolean

open context menu

代码示例

   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
   spread.contextMenu.onOpenMenu = function (menuData, itemsDataForShown, hitInfo, spread) {
          console.log(menuData);
          console.log(itemsDataForShown);
          console.log(hitInfo);
          console.log(spread);
          alert("menu is opening");
          //you can change itemsDataForShown to change filter result
          //if you only want to change filter result,return false or don't return anything
          //you also can open your own context menu,if you want to do this,return true
          //return true;
   };

参数

属性名 类型
menuData IMenuItemData[]
itemsDataForShown IMenuItemData[]
hitInfo Object
spread Object

返回值

boolean

是否已处理 contextmenu 事件