リボンコンテナに追加されるカスタマイズメニューの一覧は以下の通りになります。
項目
説明
日付設定
日付と設定したセルと連動し、日付の設定と変更ができます。
計算
電卓ボタンを押下すると、ポップアップで電卓が表示されます。計算結果はセルの値と連動しています。
シート保護
ワークブックあるいはワークシートを保護します。保護されたシートは編集することができません。
保護解除
保護されたワークシートやワークブックの保護を解除し、編集可能に設定します。
進捗設定
「処理済み」をチェックした場合、選択行の背景色がグレーに設定されます。
高評価／低評価ボタン
ボタンが押下されるとアラートが表示されます。
ステータスバー
メールアドレスをクリックすると、メーラーが起動します。宛先と本文が設定済みです。
コンテキストメニュー
コンテキストメニューに追加される「デフォルトスタイルの設定」をクリックするとセル選択ダイアログが表示されます。選択されたセル範囲の背景色が水色、フォント色が赤色に設定されます。また、ダイアログを開いてからのセル選択もできます。
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/@mescius/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/@mescius/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");
}
