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:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
<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 @change="columnBtnVisible" />
<label class="checkbox-label" for="columnBtnVisible">Add Column Button Visible</label>
</div>
<div class="option-row">
<input type="checkbox" id="rowBtnVisible" checked @change="rowBtnVisible" />
<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" @change="columnBtnWidth" />
<label for="rowBtnHeight">Add Row Button Height</label>
<input type="number" value="20" id="rowBtnHeight" @change="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" @change="columnBtnTooltip" />
<label for="rowBtnTooltip">Add Row Button Tooltip</label>
<input type="text" value="" id="rowBtnTooltip" @change="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" @change="columnBtnBackColor" />
<label for="rowBtnBackColor">Add Row Button Back Color</label>
<input type="color" value="" id="rowBtnBackColor" @change="rowBtnBackColor" />
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import '@mescius/spread-sheets-vue'
import GC from '@mescius/spread-sheets';
import './styles.css';
let spreadNS = GC.Spread.Sheets;
let App = Vue.extend({
name: "app",
data: function () {
return {
spread: null,
};
},
methods: {
initSpread: function (spread) {
this.spread = spread;
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();
// 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';
},
columnBtnVisible($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
sheet.options.addColumnButtonOption.visible = $event.target.checked;
spread.repaint();
},
rowBtnVisible($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
sheet.options.addRowButtonOption.visible = $event.target.checked;
spread.repaint();
},
columnBtnWidth($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
sheet.options.addColumnButtonOption.width = parseInt($event.target.value);
spread.repaint();
},
rowBtnHeight($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
sheet.options.addRowButtonOption.height = parseInt($event.target.value);
spread.repaint();
},
columnBtnTooltip($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
sheet.options.addColumnButtonOption.tooltip = $event.target.value;
spread.repaint();
},
rowBtnTooltip($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
sheet.options.addRowButtonOption.tooltip = $event.target.value;
spread.repaint();
},
columnBtnBackColor($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
var style = new GC.Spread.Sheets.Style();
style.backColor = $event.target.value;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
sheet.options.addColumnButtonOption.style = style;
spread.repaint();
},
rowBtnBackColor($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
var style = new GC.Spread.Sheets.Style();
style.backColor = $event.target.value;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
sheet.options.addRowButtonOption.style = style;
spread.repaint();
}
}
});
new Vue({ render: h => h(App) }).$mount('#app');
</script>
<!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/vue/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/vue/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
System.import('$DEMOROOT$/en/lib/vue/license.js');
</script>
</head>
<body>
<div id="app"></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;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' },
'*.vue': { loader: 'vue-loader' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'css': 'npm:systemjs-plugin-css/css.js',
'vue': 'npm:vue/dist/vue.min.js',
'vue-loader': 'npm:systemjs-vue-browser/index.js',
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
}
}
});
})(this);
