このサンプルでは、次の処理を実装しています。
必要となるホームタブのみを残し、経理部門専用のタブを追加しています。
経理専用タブに経理作業に便利な電卓コンポーネントを追加し、その他計算の関数をピックアップして組み込んでいます。
ホームタブにも必要な項目だけを表示させるようにできます。
ファイルのインポート／エクスポート処理が不要なアプリケーションを作成したいことであれば、ファイルタブを非表示にすることも可能です。
var spreadNS = GC.Spread.Sheets;
var InputMan = GC.InputMan;
var config = GC.Spread.Sheets.Designer.DefaultConfig;
var commandNames = GC.Spread.Sheets.Designer.CommandNames;
var designer, spread;
window.onload = function () {
// 初期化
designer = new spreadNS.Designer.Designer(document.getElementById('ribbonHost'));
spread = designer.getWorkbook();
// リボンコンテナ初期化
initRibbon(spread);
initSheet(spread);
};
function initRibbon(spread) {
// ホームタブのボタングループ「配置」、「スタイル」「セル」、「スタイル」、「編集」を非表示
let homeTab = config.ribbon.find((r) => r.id === 'home');
homeTab.buttonGroups = homeTab.buttonGroups.filter(
(bg) => bg.label !== '配置' && bg.label !== 'セル' && bg.label !== 'スタイル' && bg.label !== '編集'
);
// 既存タブを非表示
config.ribbon = [];
// ファイルタブを非表示
config.fileMenu = null;
// ホームタブを追加
config.ribbon.push(homeTab);
// 操作タブを追加
var newTab = {
id: 'accounting',
text: '経理専用',
buttonGroups: [],
};
// 新しいタブ追加
config.ribbon.push(newTab);
// カスタムコンポーネント電卓を追加
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: '計算専用',
commandGroup: {
children: [
{
commands: ['formulaAutoSum'],
},
{
direction: 'vertical',
children: [
{
commands: ['average', 'max', 'min'],
},
{
commands: ['countNumbers'],
},
],
},
{
type: 'separator',
},
{
commands: ['cmdCalculator'],
},
],
},
};
// チェックボックスの追加
var progressCheckbox = {
label: '経理専用欄',
thumbnailClass: '',
direction: 'vertical',
commandGroup: {
children: [
{
direction: 'vertical',
commands: ['cmdIssuedCheckbox', 'cmdCompletionCheckbox'],
},
],
},
};
config.commandMap = {
// カスタムコンポーネント（電卓）
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;
},
},
// 完了チェックボックス
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 row = sheet.getActiveRowIndex();
// 名前付きスタイルを設定
var rowStyle = new GC.Spread.Sheets.Style();
rowStyle.backColor = 'lightgrey';
rowStyle.name = 'rowStyle';
sheet.addNamedStyle(rowStyle);
var noneStyle = new GC.Spread.Sheets.Style();
noneStyle.backColor = 'white';
noneStyle.name = 'noneStyle';
sheet.addNamedStyle(noneStyle);
if (!state) {
sheet.getRange(row, 0, 1, 6).setStyle(sheet.getNamedStyle('rowStyle'));
} else {
sheet.getRange(row, 0, 1, 6).setStyle(sheet.getNamedStyle('noneStyle'));
}
// 枠線を付ける
var lineStyle = GC.Spread.Sheets.LineStyle.dotted;
var lineBorder = new GC.Spread.Sheets.LineBorder('black', lineStyle);
sheet.getRange(row, 0, 1, 6).setBorder(lineBorder, { all: true });
},
getState: (context) => {
var sheet = spread.getActiveSheet();
var row = sheet.getActiveRowIndex();
if (sheet.getStyleName(row, 0, GC.Spread.Sheets.SheetArea.viewport) === 'rowStyle') {
context.setData('stateCompletionCheckbox', true);
} else {
context.setData('stateCompletionCheckbox', false);
}
return context.getData('stateCompletionCheckbox');
},
},
// 発行チェックボックス
cmdIssuedCheckbox: {
title: '発行済み',
text: '発行済み',
type: 'checkbox',
commandName: 'cmdIssuedCheckbox',
execute: async (context, propertyName) => {
let state = context.getData('stateIssuedCheckbox');
context.setData('stateIssuedCheckbox', !state);
let sheet = designer.getWorkbook().getActiveSheet();
var row = sheet.getActiveRowIndex();
if (!state) {
alert('手形を発行しました。');
sheet.setValue(row, 6, '発行済み');
} else {
alert('手形発行を取り消しました。');
sheet.setValue(row, 6, null);
}
},
getState: (context) => {
let sheet = designer.getWorkbook().getActiveSheet();
var row = sheet.getActiveRowIndex();
if (sheet.getValue(row, 6) === '発行済み') {
context.setData('stateIssuedCheckbox', true);
} else {
context.setData('stateIssuedCheckbox', false);
}
return context.getData('stateIssuedCheckbox');
},
},
};
let accountingTab = config.ribbon.find((r) => r.id === 'accounting');
// チェックボックス追加
accountingTab.buttonGroups.unshift(progressCheckbox);
// カスタムコンポーネント追加
accountingTab.buttonGroups.unshift(customComponent);
designer.setConfig(config);
}
function initSheet(spread) {
spread.suspendPaint();
var sheet = spread.getActiveSheet();
var salesData = [
['顧客ID', '注文ID', '品目', '注文日', '注文数(箱)', '単価(円)', '手形発行欄'],
['201', '3110', 'ビール', '2022/10/10', 15, 90.4],
['202', '3111', 'ウォッカ', '2022/11/20', 20, 549.3],
['203', '3112', 'ウィスキー', '2022/12/30', 150, 400.5],
['204', '3113', '日本酒', '2023/01/10', 21, 212.8],
['205', '3114', '梅酒', '2023/03/16', 100, 90.8],
['206', '3115', 'レモンサワー', '2023/02/19', 90, 30.8],
['207', '3116', 'ワイン', '2023/04/25', 65, 103.5],
];
sheet.setArray(0, 0, salesData);
sheet.setColumnWidth(0, 60);
sheet.setColumnWidth(1, 60);
sheet.setColumnWidth(2, 90);
sheet.setColumnWidth(3, 80);
sheet.setColumnWidth(4, 80);
sheet.setColumnWidth(5, 80);
sheet.setColumnWidth(6, 100);
sheet.setRowHeight(0, 30);
// タイトルスタイル設定
var style = new GC.Spread.Sheets.Style();
style.backColor = '#e6cde3';
style.foreColor = '#eb6ea5';
style.font = 'bold normal 13px normal';
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.hAlign = GC.Spread.Sheets.VerticalAlign.center;
sheet.getRange(0, 0, 1, 7).setStyle(style);
// 発行列スタイル設定
var style2 = new GC.Spread.Sheets.Style();
style2.foreColor = '#b28c6e';
style2.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style2.hAlign = GC.Spread.Sheets.VerticalAlign.center;
sheet.getRange(-1, 6, -1, 1).setStyle(style2);
// データ部分の枠線設定
var lineStyle = GC.Spread.Sheets.LineStyle.dotted;
var lineBorder = new GC.Spread.Sheets.LineBorder('black', lineStyle);
sheet.getRange('A1:G8').setBorder(lineBorder, { all: true });
spread.resumePaint();
}
<!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-tablesheet/dist/gc.spread.sheets.tablesheet.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%;
}
