SpreadJS allows you to add a row or column through a self-defined button to the worksheet.
It could show or hide the add row or column button:
And it could specify the width, height, style and tooltip for the button, the add row button option only support the height property, the add column button only support the width property, and it just support some simple properties of the style like foreColor, backColor, hAlign, vAlign, backgroundImage, backgroundImageLayout to paint on the worksheet.
If it's necessary to self define the actions of the buttons, it could specify the command to each button:
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.options.addRowButtonOption.visible = true;
sheet.options.addColumnButtonOption.visible = true;
sheet.setRowCount(10);
sheet.setColumnCount(10);
sheet.resumePaint();
/*
* Show or hide the add row/column button.
*/
_getElementById("columnBtnVisible").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
sheet.options.addColumnButtonOption.visible = this.checked;
spread.repaint();
});
_getElementById("rowBtnVisible").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
sheet.options.addRowButtonOption.visible = this.checked;
spread.repaint();
});
/*
* Update the width/height of the add row/column button.
*/
_getElementById("columnBtnWidth").addEventListener('change',function () {
var sheet = spread.getActiveSheet();
sheet.options.addColumnButtonOption.width = parseInt(this.value);
spread.repaint();
});
_getElementById("rowBtnHeight").addEventListener('change',function () {
var sheet = spread.getActiveSheet();
sheet.options.addRowButtonOption.height = parseInt(this.value);
spread.repaint();
});
/*
* Update the tooltip of the add row/column button.
*/
_getElementById("columnBtnTooltip").addEventListener('input',function () {
var sheet = spread.getActiveSheet();
sheet.options.addColumnButtonOption.tooltip = this.value;
spread.repaint();
});
_getElementById("rowBtnTooltip").addEventListener('input',function () {
var sheet = spread.getActiveSheet();
sheet.options.addRowButtonOption.tooltip = this.value;
spread.repaint();
});
/*
* Update the style of the add row/column button.
*/
_getElementById("columnBtnBackColor").addEventListener('input',function () {
var sheet = spread.getActiveSheet();
var style = new GC.Spread.Sheets.Style();
style.backColor = this.value;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
sheet.options.addColumnButtonOption.style = style;
spread.repaint();
});
_getElementById("rowBtnBackColor").addEventListener('input',function () {
var sheet = spread.getActiveSheet();
var style = new GC.Spread.Sheets.Style();
style.backColor = this.value;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
sheet.options.addRowButtonOption.style = style;
spread.repaint();
});
// Define the command
const addRowCommand = sheet.options.addRowButtonOption.command;
spread.commandManager().register('clickRowButtonToDo', {
canUndo: false,
execute: function (context, options) {
// the self-defined command
options.cmd = addRowCommand;
spread.commandManager().execute(options);
}
});
sheet.options.addRowButtonOption.command = 'clickRowButtonToDo';
const addColumnCommand = sheet.options.addColumnButtonOption.command;
spread.commandManager().register('clickColumnButtonToDo', {
canUndo: false,
execute: function (context, options) {
// the self-defined command
options.cmd = addColumnCommand;
spread.commandManager().execute(options);
}
});
sheet.options.addColumnButtonOption.command = 'clickColumnButtonToDo';
};
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>Set the options below to show the add column/row button.</label>
<div class="option-row">
<input type="checkbox" id="columnBtnVisible" checked />
<label class="checkbox-label" for="columnBtnVisible">Add Column Button Visible</label>
</div>
<div class="option-row">
<input type="checkbox" id="rowBtnVisible" checked />
<label class="checkbox-label" for="rowBtnVisible">Add Row Button Visible</label>
</div>
<hr>
<div class="option-row">
<label >Set the width/height to the add column/row button.</label>
</div>
<div class="option-row">
<label for="columnBtnWidth">Add Column Button Width</label>
<input type="number" value="62" id="columnBtnWidth" />
<label for="rowBtnHeight">Add Row Button Height</label>
<input type="number" value="20" id="rowBtnHeight" />
</div>
<hr>
<div class="option-row">
<label >Set the tooltip to the add column/row button.</label>
</div>
<div class="option-row">
<label for="columnBtnTooltip">Add Column Button Tooltip</label>
<input type="text" value="" id="columnBtnTooltip" />
<label for="rowBtnTooltip">Add Row Button Tooltip</label>
<input type="text" value="" id="rowBtnTooltip" />
</div>
<hr>
<div class="option-row">
<label >Set the back color to the add column/row button.</label>
</div>
<div class="option-row">
<label for="columnBtnBackColor">Add Column Button Back Color</label>
<input type="color" value="" id="columnBtnBackColor" />
<label for="rowBtnBackColor">Add Row Button Back Color</label>
<input type="color" value="" id="rowBtnBackColor" />
</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;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
}
label {
margin-bottom: 6px;
display: block;
margin-top: 10px;
}
.checkbox-label {
display: inline;
}
input[type=button] {
margin-top: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
