이제 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("Basic Button Styling (useButtonStyle)").font("bold 16px Calibri");
sheet.getCell(3,0).value("Button Colors (buttonBackColor)").font("bold 16px Calibri");
sheet.getCell(6, 0).value("Command Buttons (command)").font("bold 16px Calibri");
sheet.getCell(9, 0).value("Hoverable Buttons (hoverBackColor)").font("bold 16px Calibri");
sheet.getCell(12, 0).value("Button Position (position)").font("bold 16px Calibri");
sheet.getCell(0, 5).value("Button Size (width)").font("bold 16px Calibri");
sheet.getCell(3, 5).value("Image Captions (imageType & imageSrc & imagesize)").font("bold 16px Calibri");
sheet.getCell(6, 5).value("Button Visibility (visibility) - Select cell G8 to see the other button").font("bold 16px Calibri");
sheet.getCell(9, 5).value("Disabled Buttons (enabled)").font("bold 16px Calibri");
sheet.getCell(12, 5).value("Text Align (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("Search").vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
sheet.getCell(7, 7).value("Select cell..").vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
sheet.getCell(7, 2).value("Click the button here ->").vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
sheet.getCell(7, 1).value("ZOOM!").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="ko-kr"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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;
}