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.getRange(2, 0, 1, 10)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { bottom: true });
sheet.getRange(5, 0, 1, 10)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { bottom: true });
sheet.getRange(8, 0, 1, 10)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { bottom: true });
sheet.getRange(11, 0, 1, 10)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { bottom: true });
sheet.getRange(14, 0, 1, 10)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { bottom: true });
sheet.getRange(0, 4, 15, 1)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { right: true });
sheet.getRange(0, 9, 15, 1)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { right: true });
for(var i=0;i<10;i++)
{
sheet.setColumnWidth(i,100);
}
for(var i=0;i<30;i++)
{
sheet.setRowHeight(i,25);
i++;
sheet.setRowHeight(i,25);
i++;
}
sheet.getCell(0,0).value("基本のボタンスタイル (useButtonStyle)").font("bold 16px Calibri");
sheet.getCell(3,0).value("ボタンの色 (buttonBackColor)").font("bold 16px Calibri");
sheet.getCell(6, 0).value("コマンドボタン (command)").font("bold 16px Calibri");
sheet.getCell(9, 0).value("ボタンのホバー色 (hoverBackColor)").font("bold 16px Calibri");
sheet.getCell(12, 0).value("ボタンの位置 (position)").font("bold 16px Calibri");
sheet.getCell(0, 5).value("ボタンの大きさ (width)").font("bold 16px Calibri");
sheet.getCell(3, 5).value("イメージ (imageType & imageSrc & imagesize)").font("bold 16px Calibri");
sheet.getCell(6, 5).value("ボタンの表示 (visibility) - Select cell G8 to see the other button").font("bold 16px Calibri");
sheet.getCell(9, 5).value("ボタンの有効無効 (enabled)").font("bold 16px Calibri");
sheet.getCell(12, 5).value("テキストの配置 (CaptionAlignment)").font("bold 16px Calibri");
sheet.addSpan(7,7,1,2);
sheet.addSpan(7,2,1,2);
sheet.addSpan(4,7,1,2);
sheet.getCell(4, 7).value("検索").vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
sheet.getCell(7, 7).value("セルを選択してください..").vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
sheet.getCell(7, 2).value("ボタンをクリック ->").vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
sheet.getCell(7, 1).value("ズーム!").vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
var style = new GC.Spread.Sheets.Style();
//basic styling
style.cellButtons = [
{
caption: "Default"
}
];
sheet.setStyle(1, 0, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Basic Style",
useButtonStyle: true
}
];
sheet.setStyle(1, 1, style);
//button colors
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Red-Color",
buttonBackColor: "#F44336"
}
];
sheet.setStyle(4, 0, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Green-Color",
buttonBackColor: "#82BC00",
}
];
sheet.setStyle(4, 1, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Grey-Color",
buttonBackColor: "#DDDDDD"
}
];
sheet.setStyle(4, 2, style);
//Command buttons
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openColorPicker"
}
];
sheet.setStyle(7, 0, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption:"Zoom",
buttonBackColor: "#DDDDDD",
command: (sheet, row, col, option) => {
if (sheet.zoom() === 1) {
sheet.zoom(1.25);
} else {
sheet.zoom(1);
}
}
}
];
sheet.setStyle(7, 1, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption:"Alert",
buttonBackColor: "#00C2D6",
command: (sheet, row, col, option) => {
alert("This is an alert.");
}
}
];
sheet.setStyle(7, 2, style);
//hover buttons
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Blue-Color",
useButtonStyle: true,
buttonBackColor: "#008CBA",
hoverBackColor: "#FFFFFF"
}
];
sheet.setStyle(10, 0, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Grey-Color",
buttonBackColor: "#DDDDDD",
hoverBackColor: "#FFFFFF"
}
];
sheet.setStyle(10, 1, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Blue-Hover",
useButtonStyle: true,
hoverBackColor: "#008CBA"
}
];
sheet.setStyle(10, 2, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Grey-Hover",
hoverBackColor: "#DDDDDD",
}
];
sheet.setStyle(10, 3, style);
//Position buttons
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Left",
buttonBackColor: "#F7A711",
position: GC.Spread.Sheets.ButtonPosition.left
}
];
sheet.setStyle(13, 0, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Right",
buttonBackColor: "#F7A711",
position: GC.Spread.Sheets.ButtonPosition.right
}
];
sheet.setStyle(13, 1, style);
//button size
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption:"40px",
width: 40,
buttonBackColor: "#EEEEEE",
useButtonStyle: true
}
];
sheet.setStyle(1, 5, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption:"50px",
width: 50,
buttonBackColor: "#EEEEEE",
useButtonStyle: true
}
];
sheet.setStyle(1, 6, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption:"85px",
width: 85,
buttonBackColor: "#008CBA",
useButtonStyle: true
}
];
sheet.setStyle(1, 7, style);
//Image buttons
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Arrow",
buttonBackColor: "#DDDDDD",
imageType: GC.Spread.Sheets.ButtonImageType.right
}
];
sheet.setStyle(4, 5, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Custom",
buttonBackColor:"#F4F8EB",
imageType: GC.Spread.Sheets.ButtonImageType.custom,
imageSrc: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABPklEQVR4Ae2YAWYDQRSGV6BUabFQiKE28wA9Qo7Qo/QIBRTQGyQESlUWURRSVdZssL3B5gZJT/A6A8Eq8qck//I+foDxvjWzfi8zuhiGYRg6yZxOs3lMG6N7ZsI0/AYYnEoiCZT44EQSwNfnlEgDkKSNmacrDQuQZQNIUApoepeQAGHavguoCewyG6i+5apfN6q1HDm+0ZWM/yewHKbDTpswujtM4PUiHUAgIO1hAu/XHAIpjThc4NP1XKAWmuBX6PmMSeADFygviQT8Ey6wyHkEVv4eF1gOiQRkjAtUBY9A464wgdmAZ/gga7xKvJzT/4F20D/gIA+IAEGFAIpcgr5C1MUtLsBcIbpQV4jgv/fZzG15K4RM8dXiIud/wB0BF7OlqxDBl9CGOqaMWZ+8QlTFj1ajx7/qg2EYhmH8AtrSH2QJmV2LAAAAAElFTkSuQmCC"
}
];
sheet.setStyle(4, 6, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
buttonBackColor: "#82BC00",
width:50,
imageSize: {
height: 30,
width: 30
},
imageType: GC.Spread.Sheets.ButtonImageType.search
}
];
sheet.setStyle(4, 7, style);
//Visibility buttons
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Always",
buttonBackColor:"#ffdc9d"
}
];
sheet.setStyle(7, 5, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "On Select",
buttonBackColor:"#ffdc9d",
visibility: GC.Spread.Sheets.ButtonVisibility.onSelected
}
];
sheet.setStyle(7, 7, style);
//disabled buttons
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Enable",
useButtonStyle: true,
enabled: true
}
];
sheet.setStyle(10, 5, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Enable",
enabled: true
}
];
sheet.setStyle(10, 6, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Disable",
useButtonStyle: true,
enabled: false
}
];
sheet.setStyle(10, 7, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "Disable",
enabled: false
}
];
sheet.setStyle(10, 8, style);
//Caption Aligment (captionaligment)
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
useButtonStyle: true,
caption: "Left",
captionAlign: GC.Spread.Sheets.CaptionAlignment.left,
imageType: GC.Spread.Sheets.ButtonImageType.search
}
];
sheet.setStyle(13, 5, style);
style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
useButtonStyle: true,
caption: "Right",
captionAlign: GC.Spread.Sheets.CaptionAlignment.right,
imageType: GC.Spread.Sheets.ButtonImageType.search
}
];
sheet.setStyle(13, 6, 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;
}
