クラス: ContextMenu

Sheets.ContextMenu.ContextMenu

Table of contents

コンストラクタ

• constructor

プロパティ

• menuData
• menuView

メソッド

• onOpenMenu

コンストラクタ

constructor

• new ContextMenu()

ContextMenuを表します。

プロパティ

menuData

• menuData: IMenuItemData[]

組み込みのmenuDataを表します。

プロパティ [name] - コンテキストメニュー項目のIDを表します。

プロパティ [text] - このコンテキストメニュー項目がグループの場合、表示されるテキストを表します。 テキストはDOM要素のタイトルとして表示されます。

プロパティ {string|Function} [command] - コマンド名を表します。 commandManager はこれをインデックスとして使用して、このコマンドを検索します。 コマンドが存在する場合、実行します。

プロパティ [disable] - このコンテキストメニュー項目が現在の状態では無効になっていることを表します。デフォルト値はfalseです。

プロパティ [iconClass] - このコンテキストメニュー項目のアイコンを表します。これはクラス名です。

プロパティ [group] - このコンテキストメニュー項目はグループメニュー項目であることを表します。 このプロパティの値は、グループヘッダーの名前である必要があります。

プロパティ {Object[]} [subMenu] - このコンテキストメニュー項目にはサブメニューがあることを表します。

プロパティ [type] - コンテキストメニューの種類を表します。

プロパティ [workArea] - どの領域にコンテキストメニュー項目を表示する必要があるかを示します。 値は、空白で区切られた条件のコレクションにすることができます」、「outline」、「rowHeader」、「colHeader」、「corner」、「slicer」、「chart」、「shape」、「table」、「vpWithoutTb」、「pivotPageFilter」、「pivotTopLeft」、「pivotEmptyLabel」、「pivotHeader」、「pivotGrandTotal」、「pivotContent」および「pivotTable」を含めることができます。

menuView

• 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) {
        // メニュー項目ビューを作成します。
        // メニュー項目ビューを元に戻す必要があります。
        // createMenuItemElement を呼び出して、いくつかのメニュー項目のみをカスタマイズできます。
        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

コンテキストメニューを開きます。

実例

   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");
          // itemsDataForShownを変更することで、フィルタ結果を変更できます。
          // フィルタ結果を変更するだけの場合は、falseを返すか、何も返さないでください。
          // また、独自のコンテキストメニューを開くこともできます。
          // その場合はtrueを返します。
   };

パラメータ

戻り値

boolean

コンテキストメニューイベントがすでに処理されたかどうかを示します。