SpreadJS now has button capabilities within cells. These predefined buttons will allow you to add more functionality to the workbooks. With the command option, developers can code specific behavior for those buttons that are executed when the user clicks on them.
For example:
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 charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.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;
}
