To create a button cell, follow this example:
You can customize your Button using the many provided APIs. If you want to control the button's position in the cell, use the following methods.
marginTop: Gets or sets the button's top margin in pixels relative to the cell.
marginRight: Gets or sets the button's right margin in pixels relative to the cell.
marginBottom: Gets or sets the button's bottom margin in pixels relative to the cell.
marginLeft: Gets or sets the button's left margin in pixels relative to the cell.
You can use the text method to get and set the button's content. Use the buttonBackColor method to get and set the button's background color. For example:
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(0);
sheet.bind(spreadNS.Events.SelectionChanged, function () {
propertyChange(false);
});
sheet.suspendPaint();
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(1, 120);
sheet.setRowHeight(1, 50);
var b0 = new spreadNS.CellTypes.Button();
b0.text("Margin");
b0.marginLeft(15);
b0.marginTop(7);
b0.marginRight(15);
b0.marginBottom(7);
sheet.setCellType(1, 2, b0, spreadNS.SheetArea.viewport);
sheet.setValue(1, 1, "ButtonCellType");
sheet.resumePaint();
_getElementById("changeProperty").addEventListener('click',function () {
propertyChange(true);
});
function propertyChange(isSet) {
var sheet = spread.getActiveSheet();
var sels = sheet.getSelections();
if (sels && sels.length > 0) {
var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
var buttonCellType = sheet.getCellType(sel.row, sel.col);
if (!(buttonCellType instanceof spreadNS.CellTypes.Button)) {
_getElementById("changeProperty").setAttribute("disabled",'disabled');
return;
}
if (!isSet) {
_getElementById("changeProperty").removeAttribute("disabled");
_getElementById("txtButtonCellMarginLeft").value=buttonCellType.marginLeft();
_getElementById("txtButtonCellMarginTop").value=buttonCellType.marginTop();
_getElementById("txtButtonCellMarginRight").value=buttonCellType.marginRight();
_getElementById("txtButtonCellMarginBottom").value=buttonCellType.marginBottom();
_getElementById("txtButtonCellText").value=buttonCellType.text();
_getElementById("txtButtonCellBackColor").value=buttonCellType.buttonBackColor();
} else {
buttonCellType.marginLeft(parseInt(_getElementById("txtButtonCellMarginLeft").value));
buttonCellType.marginTop(parseInt(_getElementById("txtButtonCellMarginTop").value));
buttonCellType.marginRight(parseInt(_getElementById("txtButtonCellMarginRight").value));
buttonCellType.marginBottom(parseInt(_getElementById("txtButtonCellMarginBottom").value));
buttonCellType.text(_getElementById("txtButtonCellText").value);
buttonCellType.buttonBackColor(_getElementById("txtButtonCellBackColor").value);
}
}
sheet.repaint();
}
function getActualRange(range, maxRowCount, maxColCount) {
var row = range.row < 0 ? 0 : range.row;
var col = range.col < 0 ? 0 : range.col;
var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
var colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new spreadNS.Range(row, col, rowCount, colCount);
}
}
function _getElementById(id){
return document.getElementById(id);
}
<!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" class="sample-spreadsheets"></div>
<div class="options-container">
<label>Select the button cell in Spread and edit its options with these text boxes.</label>
<div class="option-row">
<label>margin-left:</label>
<input type="text" id="txtButtonCellMarginLeft" />
<label>margin-top:</label>
<input type="text" id="txtButtonCellMarginTop" />
</div>
<div class="option-row">
<label>margin-right:</label>
<input type="text" id="txtButtonCellMarginRight" />
<label>margin-bottom:</label>
<input type="text" id="txtButtonCellMarginBottom" />
</div>
<div class="option-row">
<label>text:</label>
<input type="text" id="txtButtonCellText" />
<label>backColor:</label>
<input type="text" id="txtButtonCellBackColor" />
</div>
<div class="option-row">
<label></label>
<input type="button" id="changeProperty" value="Update"/>
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
overflow: auto;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
}
.option-row {
padding-bottom: 8px;
}
label {
padding-bottom: 4px;
display: block;
}
input {
width: 100%;
padding: 4px 8px;
box-sizing: border-box;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
