オリジナルメニュー

このデモでは、リボンコンテナにおける全てのデフォルトタブを非表示に設定し、自分のニーズに合わせたオリジナルメニューを作成する方法を示しています。

リボンコンテナに追加されるカスタマイズメニューの一覧は以下の通りになります。 項目 説明 日付設定 日付と設定したセルと連動し、日付の設定と変更ができます。 計算 電卓ボタンを押下すると、ポップアップで電卓が表示されます。計算結果はセルの値と連動しています。 シート保護 ワークブックあるいはワークシートを保護します。保護されたシートは編集することができません。 保護解除 保護されたワークシートやワークブックの保護を解除し、編集可能に設定します。 進捗設定 「処理済み」をチェックした場合、選択行の背景色がグレーに設定されます。 高評価/低評価ボタン ボタンが押下されるとアラートが表示されます。 ステータスバー メールアドレスをクリックすると、メーラーが起動します。宛先と本文が設定済みです。 コンテキストメニュー コンテキストメニューに追加される「デフォルトスタイルの設定」をクリックするとセル選択ダイアログが表示されます。選択されたセル範囲の背景色が水色、フォント色が赤色に設定されます。また、ダイアログを開いてからのセル選択もできます。
var spreadNS = GC.Spread.Sheets; var InputMan = GC.InputMan; var config = GC.Spread.Sheets.Designer.DefaultConfig; var designer, spread; window.onload = function () { // 初期化 designer = new spreadNS.Designer.Designer(document.getElementById('ribbonHost')); spread = designer.getWorkbook(); // リボンコンテナ初期化 initRibbon(spread); initSheet(spread); }; function initRibbon(spread) { // 既存タブを非表示 config.ribbon = []; // 操作タブを追加 var newTab = { id: 'operate', text: 'オリジナル', buttonGroups: [], }; // 新しいタブ追加 config.ribbon.unshift(newTab); var newTab2 = { id: 'aboutSample', text: 'サンプルについて', iconClass: "ribbon-button-item-text", buttonGroups: [ { commandGroup: { children: [ { type: "textBlock", text: '本サンプルでは Bootstrap Icons を使用しています。\r\n\r\nCopyright (c) 2019-2023 The Bootstrap Authors', } ] } } ] } config.ribbon.push(newTab2); // リボンコンテナのボタンを追加 var reactionGood = { label: '評価', thumbnailClass: '評価', commandGroup: { children: [ { commands: ['cmdReactionGood', 'cmdReactionBad'], }, ], }, }; // チェックボックスの追加 var progressCheckbox = { label: '進捗設定', thumbnailClass: '', direction: 'vertical', commandGroup: { children: [ { direction: 'vertical', commands: ['cmdCompletionCheckbox'], }, ], }, }; // ドロップダウンリストを追加 var protectDropdownList = { label: '保護', thumbnailClass: 'シートの保護', commandGroup: { children: [ { command: 'cmdProtectDropdownList', type: 'dropdown', children: ['cmdProtectSheet', 'cmdProtectBook'], }, { command: 'cmdUnProtect', children: ['cmdUnProtect'], }, ], }, }; // カスタムコンポーネント日付ピッカーを追加 var DatePicker = defineDatePickerComponent(); /* コンポーネントのクラス構造を定義 */ function defineDatePickerComponent() { var gcDateTime; function DatePicker() { GC.Spread.Sheets.Designer.AtomicComponentBase.call(this, ...arguments); } DatePicker.prototype = new GC.Spread.Sheets.Designer.AtomicComponentBase(); DatePicker.prototype.getTemplate = function () { return ` <div class="container" style="margin-top: 30px;"> <input style="width:150px" id="gcDateTime" class ='form_date'> </div> `; }; DatePicker.prototype.onMounted = function () { // InputManJS日付ピッカーを定義する gcDateTime = new InputMan.GcDateTime(document.getElementById('gcDateTime'), { displayFormatPattern: 'yyy年M月d日', formatPattern: 'yyyy/MM/dd', autoDropDown: true, }); gcDateTime.setValue(null); var picker = gcDateTime.addDropDown( InputMan.DropDownButtonAlignment.RightSide, InputMan.DateDropDownType.Calendar ); gcDateTime.setDropDownButtonVisible(false); gcDateTime.onValueChanged((sender, eArgs) => { this.raiseValueChanged(); }); }; DatePicker.prototype.onValueChanged = function (prevValue, nextValue, host) { if (nextValue != null && typeof nextValue === 'object') { gcDateTime.setValue(nextValue); } else { gcDateTime.setValue(null); } }; DatePicker.prototype.updateValue = function () { if (gcDateTime.getValue() != null) { var value = gcDateTime.getValue().toLocaleDateString('ja-jp', { year: 'numeric', month: 'numeric', day: 'numeric', }); return new Date(value); } }; return DatePicker; } GC.Spread.Sheets.Designer.Designer.RegisterComponent('DatePicker', DatePicker); // カスタムコンポーネント電卓を追加 var Calculator = defineCalculatorComponent(); /* コンポーネントのクラス構造を定義 */ function defineCalculatorComponent() { var gcCalculator; function Calculator() { GC.Spread.Sheets.Designer.AtomicComponentBase.call(this, ...arguments); } Calculator.prototype = new GC.Spread.Sheets.Designer.AtomicComponentBase(); Calculator.prototype.getTemplate = function () { return ` <div class="container" style="margin-top: 30px;"> <input style="width:150px" id="calculator"> </div> `; }; Calculator.prototype.onMounted = function () { // InputManJSポップアップ電卓を定義する gcCalculator = new InputMan.GcNumber(document.getElementById('calculator'), { showCalculatorAsPopup: true, calculatorButtonPosition: InputMan.DropDownButtonAlignment.LeftSide, }); gcCalculator.onValueChanged((sender, eArgs) => { this.raiseValueChanged(); }); gcCalculator.onFocusOut(function (sender, args) { var dropdown = sender.getDropDownWindow(); if (dropdown && dropdown.isOpened()) { setTimeout(function () { spread.focus(false); sender.setFocus(); }); } }); }; Calculator.prototype.onValueChanged = function (prevValue, nextValue, host) { if (nextValue != null && typeof nextValue === 'number') { gcCalculator.value = nextValue; } else { gcCalculator.value = 0; } }; Calculator.prototype.updateValue = function () { if (gcCalculator.value != null) { return Number(gcCalculator.value); } }; return Calculator; } GC.Spread.Sheets.Designer.Designer.RegisterComponent('Calculator', Calculator); // カスタムコンポーネントを追加 var customComponent = { label: 'InputManJS コンポーネント', commandGroup: { children: [ { commands: ['cmdDatePicker'], }, { type: 'separator', }, { commands: ['cmdCalculator'], }, ], }, }; // デフォルトスタイル設定メニュー var setDefaultStyle = { templateName: 'setDefaultStyle ', title: '設定ダイアログ', content: [ { type: 'FlexContainer', children: [ { type: 'TextBlock', margin: '5px -4px', text: '設定範囲を選択します', }, { type: 'RangeSelect', title: '範囲を選択します', absoluteReference: true, needSheetName: false, margin: '5px -5px', bindingPath: 'range', }, ], }, ], }; // configコマンド作成 config.commandMap = { // 高評価ボタン cmdReactionGood: { title: '高評価', text: '高評価', iconClass: 'cmdReactionGood', bigButton: 'true', commandName: 'cmdReactionGood', execute: async () => { alert('高評価!押しました。'); }, }, // 低評価ボタン cmdReactionBad: { title: '低評価', text: '低評価', iconClass: 'cmdReactionBad', bigButton: 'true', commandName: 'cmdReactionBad', execute: async () => { alert('低評価!押しました。'); }, }, // 処理済みチェックボックス cmdCompletionCheckbox: { title: '処理済み', text: '処理済み', type: 'checkbox', commandName: 'cmdCompletionCheckbox', execute: async (context, propertyName) => { let state = context.getData('stateCompletionCheckbox'); context.setData('stateCompletionCheckbox', !state); let sheet = designer.getWorkbook().getActiveSheet(); // 名前付きスタイルを設定 var rowStyle = new GC.Spread.Sheets.Style(); rowStyle.backColor = '#cccccc'; rowStyle.name = 'rowStyle'; sheet.addNamedStyle(rowStyle); if (!state) { sheet.setStyle( sheet.getActiveRowIndex(), -1, sheet.getNamedStyle('rowStyle'), GC.Spread.Sheets.SheetArea.viewport ); } else { sheet.setStyle(sheet.getActiveRowIndex(), -1, null, GC.Spread.Sheets.SheetArea.viewport); } }, getState: (context) => { var sheet = spread.getActiveSheet(); var row = sheet.getActiveRowIndex(); if (sheet.getStyleName(row, -1, GC.Spread.Sheets.SheetArea.viewport) === 'rowStyle') { context.setData('stateCompletionCheckbox', true); } else { context.setData('stateCompletionCheckbox', false); } return context.getData('stateCompletionCheckbox'); }, }, // カスタムコンポーネント(日付設定) cmdDatePicker: { title: '日付を設定する', text: '日付を設定する', commandName: 'cmdDatePicker', type: 'DatePicker', execute: async (context, propertyName, value) => { let sheet = designer.getWorkbook().getActiveSheet(); //tips: valueをチェックしないと、入力以外の部分をクリックすると値クリアされる if (sheet && value) { var row = sheet.getActiveRowIndex(); var col = sheet.getActiveColumnIndex(); sheet.setValue(row, col, value); } }, getState: (designer) => { var spread = designer.getWorkbook(); var sheet = spread.getActiveSheet(); var row = sheet.getActiveRowIndex(); var col = sheet.getActiveColumnIndex(); var value = sheet.getValue(row, col); return value; }, }, // カスタムコンポーネント(電卓) cmdCalculator: { title: '計算', text: '計算', commandName: 'cmdCalculator', type: 'Calculator', execute: async (context, propertyName, value) => { let sheet = designer.getWorkbook().getActiveSheet(); if (sheet && value) { var row = sheet.getActiveRowIndex(); var col = sheet.getActiveColumnIndex(); sheet.setValue(row, col, value); } }, getState: (designer) => { var spread = designer.getWorkbook(); var sheet = spread.getActiveSheet(); var row = sheet.getActiveRowIndex(); var col = sheet.getActiveColumnIndex(); var value = sheet.getValue(row, col); return value; }, }, // 保護解除ボタン cmdUnProtect: { iconClass: 'cmdUnProtect', text: '保護解除', bigButton: 'true', direction: '=IF(ribbonHeight>toolbarHeight, "vertical", "horizontal")', commandName: 'cmdUnProtect', execute: async function (designer) { let workbook = designer.getWorkbook(); for (let i = 0; i < workbook.getSheetCount(); i++) { let sheet = workbook.getSheet(i); sheet.options.isProtected = false; } alert('保護を解除しました'); }, }, // シートの保護 cmdProtectDropdownList: { text: 'シートの保護', iconClass: 'cmdProtectSheet', commandName: 'cmdProtectDropdownList', bigButton: 'true', subCommands: ['cmdProtectSheet', 'cmdProtectBook'], }, cmdProtectSheet: { iconClass: 'cmdProtectSheets', bigButton: '=AND(ribbonHeight>toolbarHeight,NOT(inDropdown))', text: 'ワークシートの保護', direction: '=IF(ribbonHeight>toolbarHeight, "vertical", "horizontal")', commandName: 'cmdProtectSheet', execute: async function (designer) { let workbook = designer.getWorkbook(); let sheet = workbook.getActiveSheet(); sheet.options.isProtected = true; alert('ワークシートを保護しました'); }, }, cmdProtectBook: { iconClass: 'cmdProtectBook', text: 'ワークブックの保護', commandName: 'cmdProtectBook', execute: async function (designer) { let workbook = designer.getWorkbook(); for (let i = 0; i < workbook.getSheetCount(); i++) { let sheet = workbook.getSheet(i); sheet.options.isProtected = true; } alert('ワークブックを保護しました'); }, }, // デフォルトスタイル設定ダイアログ cmdDefaultStyleDialog: { text: 'デフォルトスタイルの設定', commandName: 'cmdDefaultStyleDialog', // visibleContext:ClickRowHeader/ClickColHeader/ClickViewport visibleContext: 'ClickViewport', execute: (context, propertyName) => { var sheet = spread.getActiveSheet(); var dialogOption = { range: GC.Spread.Sheets.CalcEngine.rangesToFormula(sheet.getSelections()), }; GC.Spread.Sheets.Designer.showDialog( 'defaultStyleDialog', dialogOption, (result) => { if (!result) { return; } let selectedRange = GC.Spread.Sheets.CalcEngine.formulaToRanges(sheet, result.range); if ( selectedRange[0] && selectedRange[0].ranges && selectedRange[0].ranges[0] instanceof GC.Spread.Sheets.Range ) { selectedRange[0].ranges.forEach((element) => { var style = new GC.Spread.Sheets.Style(); style.hAlign = GC.Spread.Sheets.HorizontalAlign.center; style.backColor = '#ebf6f7'; style.foreColor = 'red'; sheet.getRange(element.row, element.col, element.rowCount, element.colCount).setStyle(style); }); } }, (error) => { console.error(error); } ); }, }, }; // リアクションボタン追加 config.ribbon[0].buttonGroups.unshift(reactionGood); // チェックボックス追加 config.ribbon[0].buttonGroups.unshift(progressCheckbox); // ドロップダウンリスト追加 config.ribbon[0].buttonGroups.unshift(protectDropdownList); // カスタムコンポーネント追加 config.ribbon[0].buttonGroups.unshift(customComponent); // コンテキストメニューを追加 if (config && config.contextMenu) { config.contextMenu.unshift('cmdDefaultStyleDialog'); } GC.Spread.Sheets.Designer.registerTemplate('defaultStyleDialog', setDefaultStyle); // リボンコンテナのローカライズのカスタマイズ var resources = GC.Spread.Sheets.Designer.getResources(); resources.ribbon.home.home = 'home!'; resources.ok = '確定!'; resources.cancel = 'キャンセル!'; resources.formatDialog.title = '書式設定ダイアログ!'; resources.ribbon.home.clear = 'クリア!'; resources.ribbon.home.paste = 'ペースト'; GC.Spread.Sheets.Designer.setResources(resources); designer.setConfig(config); } function initSheet(spread) { spread.suspendPaint(); var sheet = spread.getActiveSheet(); var salesData = [ ['種類', '製品名', '販売数(箱)', '売上(万円)', '利益(万円)', '販売日'], ['酒', '日本酒', 15, 290.4, 120.3], ['酒', 'ワイン', 20, 549.3, 320.8], ['酒', 'ビール', 150, 400.5, 210.5], ['酒', '焼酎', 21, 212.8, 60.4], ['飲料', 'お茶', 100, 90.8, 10.4], ['飲料', '炭酸水', 90, 30.8, 9.5], ['飲料', 'ジュース', 65, 103.5, 29.5], ]; sheet.setArray(0, 0, salesData); sheet.setColumnWidth(0, 120); sheet.setColumnWidth(1, 120); sheet.setColumnWidth(2, 100); sheet.setColumnWidth(3, 100); sheet.setColumnWidth(4, 100); sheet.setColumnWidth(5, 120); sheet.setRowHeight(0, 30); sheet.setValue(0, 6, '👈タイトルのスタイルはコンテキストメニューよりデフォルトスタイルで設定できます'); // コメント追加 sheet.comments.add(0, 5, 'リボンコンテナの日付設定より簡単に設定できます'); sheet.comments.add(8, 3, '電卓を使って計算できます'); sheet.comments.add(8, 2, '電卓を使って計算できます'); spread.resumePaint(); setTimeout(initStatusBar, 1000); } function initStatusBar () { // ステータスバー var statusBar = spreadNS.StatusBar.findControl(document.getElementsByClassName('gc-statusBar')); var StatusItem = GC.Spread.Sheets.StatusBar.StatusItem; function SendMail(name, options) { StatusItem.call(this, name, options); } SendMail.prototype = new StatusItem(); SendMail.prototype.onCreateItemView = function (container) { var item = document.createElement('div'); item.innerText = this.value; item.id = this.name; container.appendChild(item); container.addEventListener('click', function () { var address = item.id == 'SendMailSales' ? 'sales@sample-spreadjs.com' : 'support@sample-spreadjs.com'; var subject = 'SpreadJSについてのお問い合わせ'; var body = 'お問い合わせ'; location.href = 'mailto:' + address + '?subject=' + subject + '&body=' + body; }); }; var spanItem = new SendMail('SendMailSales', { menuContent: 'セールス', value: 'E-mail: sales@sample-spreadjs.com', tipText: 'sales', }); var spanItem2 = new SendMail('SendMailSupport', { menuContent: 'サポート', value: 'E-mail: support@sample-spreadjs.com', tipText: 'サポート', }); statusBar.add(spanItem); statusBar.add(spanItem2); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/inputman/CSS/gc.inputman-js.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/inputman/JS/gc.inputman-js.ja.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-designer-resources-ja/dist/gc.spread.sheets.designer.resource.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-designer/dist/gc.spread.sheets.designer.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/inputman/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/designer/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ribbonHost"></div> <div id="ss"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 98vh; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #ribbonHost { height: 100%; } .description { margin: 10px; width: 40%; } .gcim-dropdown table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } .gcim-dropdown td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } .gcim-dropdown th { background-color: #dcdcdc; } .gcim-dropdown tr:nth-child(even) { background-color: #f5f5f5; } .cmdReactionGood { background-image: url("icons/hand-thumbs-up.svg"); } .cmdReactionBad { background-image: url("icons/hand-thumbs-down.svg"); } .cmdProtectSheet { background-image: url("icons/lock.svg"); background-size: 35px 35px; } .cmdUnProtect { background-image: url("icons/unlock.svg"); } .cmdProtectSheets { background-image: url("icons/file-earmark-spreadsheet.svg"); } .cmdProtectBook { background-image: url("icons/book.svg"); }