セルボタン

セルボタンは、セルに埋め込むことやさまざまなコマンドを実行できる定義済みボタンのセットです。

SpreadJSのセル内にボタン機能が追加されました。 これらの定義済みボタンを使用すると、ワークブックに機能を追加できます。 コマンドオプションを使用することで、開発者はユーザーがクリックしたときに実行されるボタンの動作を実装できます。
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); sheet.setColumnWidth(0, 180); sheet.setColumnWidth(1, 240); var style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Insert" }, { caption: "Delete" } ]; sheet.setText(0, 0, "caption"); sheet.setStyle(0, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "right", position: GC.Spread.Sheets.ButtonPosition.right }, { caption: "left", position: GC.Spread.Sheets.ButtonPosition.left } ]; sheet.setText(1, 0, "position"); sheet.setStyle(1, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "Insert", useButtonStyle: true }, { caption: "Delete", useButtonStyle: true }, { caption: "Update", useButtonStyle: false } ]; sheet.setText(2, 0, "useButtonStyle"); sheet.setStyle(2, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "enable", useButtonStyle: true, enabled: true }, { caption: "enable", useButtonStyle: false, enabled: true }, { caption: "disable", useButtonStyle: true, enabled: false }, { caption: "disable", useButtonStyle: false, enabled: false } ]; sheet.setText(3, 0, "enabled"); sheet.setStyle(3, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { width: 12, useButtonStyle: true }, { width: 24, useButtonStyle: true }, { width: 36, useButtonStyle: true } ]; sheet.setText(4, 0, "width"); sheet.setStyle(4, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { useButtonStyle: true, imageType: GC.Spread.Sheets.ButtonImageType.right }, { useButtonStyle: true, imageType: GC.Spread.Sheets.ButtonImageType.search }, { useButtonStyle: true, imageType: GC.Spread.Sheets.ButtonImageType.custom, imageSrc: "data:image/bmp;base64,Qk1eAAAAAAAAAD4AAAAoAAAACAAAAAgAAAABAAEAAAAAACAAAADEDgAAxA4AAAAAAAAAAAAAAAAAAP///wB+AAAApQAAANsAAAClAAAApQAAANsAAAClAAAAfgAAAA==" } ]; sheet.setText(5, 0, "imageType & imageSrc"); sheet.setStyle(5, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { useButtonStyle: true, imageSize: { height: 12, width: 12 }, imageType: GC.Spread.Sheets.ButtonImageType.right }, { useButtonStyle: true, imageSize: { height: 18, width: 18 }, imageType: GC.Spread.Sheets.ButtonImageType.search }, { useButtonStyle: true, imageType: GC.Spread.Sheets.ButtonImageType.custom, imageSize: { height: 8, width: 8 }, imageSrc: "data:image/bmp;base64,Qk1eAAAAAAAAAD4AAAAoAAAACAAAAAgAAAABAAEAAAAAACAAAADEDgAAxA4AAAAAAAAAAAAAAAAAAP///wB+AAAApQAAANsAAAClAAAApQAAANsAAAClAAAAfgAAAA==" } ]; sheet.setText(6, 0, "image size"); sheet.setStyle(6, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { useButtonStyle: true, caption: "search", captionAlign: GC.Spread.Sheets.CaptionAlignment.right, imageType: GC.Spread.Sheets.ButtonImageType.search }, { useButtonStyle: true, caption: "search", captionAlign: GC.Spread.Sheets.CaptionAlignment.left, imageType: GC.Spread.Sheets.ButtonImageType.search } ]; sheet.setText(7, 0, "caption align"); sheet.setStyle(7, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { caption: "always", useButtonStyle: true }, { caption: "onselect", useButtonStyle: true, visibility: GC.Spread.Sheets.ButtonVisibility.onSelected }, { caption: "onedit", useButtonStyle: true, visibility: GC.Spread.Sheets.ButtonVisibility.onEditing } ]; sheet.setText(8, 0, "visibility"); sheet.setStyle(8, 1, style); style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openColorPicker" }, { imageType: GC.Spread.Sheets.ButtonImageType.search, command: (sheet, row, col, option) => { if (sheet.zoom() === 1) { sheet.zoom(1.5); } else { sheet.zoom(1); } } } ]; sheet.setText(9, 0, "command"); sheet.setStyle(9, 1, style); sheet.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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/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="ss" style="width:100%; height: 100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }