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;
}
