このサンプルでは、次の処理を実装しています。
「よく使う操作」ボタングループを作成し、好きな項目を好きな場所に配置できます。
よく使用されている合計ボタン（オートSUM）を先頭に配置することで、集計作業の効率を向上します。
フォントスタイルボタンの代わりに、検索と置換機能を配置します。
let spreadNS = GC.Spread.Sheets;
let config = GC.Spread.Sheets.Designer.DefaultConfig;
let designer, spread;
window.onload = function () {
// リボンコンテナ初期化
initRibbon();
};
function initRibbon() {
// 既存タブを非表示
config.ribbon = [];
// 操作タブを追加
let newTab = {
id: 'operate',
text: 'お気に入り',
buttonGroups: [],
};
// 新しいタブ追加
config.ribbon.unshift(newTab);
// 既存メニュー追加
let basicMenu = {
label: 'よく使う操作',
thumbnailClass: 'よく使う操作',
commandGroup: {
children: [
{
commands: ['formulaAutoSum'],
},
{
commands: ['insertTable'],
},
{
type: 'separator',
},
{
direction: 'vertical',
children: [
{
commands: ['fontFamily', 'fontSize', 'fontWeight', 'backColor', 'foreColor'],
},
{
commands: ['find', 'replace', 'setFilter'],
},
],
},
{
direction: 'vertical',
commands: ['showHideVGridLine', 'showHideHGridLine'],
},
],
},
};
// 既存メニューと組み合わせ
config.ribbon[0].buttonGroups.unshift(basicMenu);
// リボン表示
new spreadNS.Designer.Designer(document.getElementById('ribbonHost'), config);
setTimeout(initStatusBar, 1000);
}
function initStatusBar() {
// ステータスバー
let statusBar = spreadNS.StatusBar.findControl(document.getElementsByClassName('gc-statusBar'));
let StatusItem = GC.Spread.Sheets.StatusBar.StatusItem;
function SendMail(name, options) {
StatusItem.call(this, name, options);
}
SendMail.prototype = new StatusItem();
SendMail.prototype.onCreateItemView = function (container) {
let item = document.createElement('div');
item.innerText = this.value;
item.id = this.name;
container.appendChild(item);
container.addEventListener('click', function () {
let address = item.id == 'SendMailSales' ? 'sales@sample-spreadjs.com' : 'support@sample-spreadjs.com';
let subject = 'SpreadJSについてのお問い合わせ';
let body = 'お問い合わせ';
location.href = 'mailto:' + address + '?subject=' + subject + '&body=' + body;
});
};
let spanItem = new SendMail('SendMailSales', {
menuContent: 'セールス',
value: 'E-mail: sales@sample-spreadjs.com',
tipText: 'sales',
});
let 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">
<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-excelio/dist/gc.spread.excelio.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/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/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%;
}
