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 setup>
import GC from '@mescius/spread-sheets';
import { ref, watch } from "vue";
import "@mescius/spread-sheets-vue";
const spreadRef = ref(null);
let initSpread = async function (spread) {
spreadRef.value = 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';
}
function columnBtnVisible($event) {
let spread = spreadRef.value;
let sheet = spread.getActiveSheet();
sheet.options.addColumnButtonOption.visible = $event.target.checked;
spread.repaint();
}
function rowBtnVisible($event) {
let spread = spreadRef.value;
let sheet = spread.getActiveSheet();
sheet.options.addRowButtonOption.visible = $event.target.checked;
spread.repaint();
}
function columnBtnWidth($event) {
let spread = spreadRef.value;
let sheet = spread.getActiveSheet();
sheet.options.addColumnButtonOption.width = parseInt($event.target.value);
spread.repaint();
}
function rowBtnHeight($event) {
let spread = spreadRef.value;
let sheet = spread.getActiveSheet();
sheet.options.addRowButtonOption.height = parseInt($event.target.value);
spread.repaint();
}
function columnBtnTooltip($event) {
let spread = spreadRef.value;
let sheet = spread.getActiveSheet();
sheet.options.addColumnButtonOption.tooltip = $event.target.value;
spread.repaint();
}
function rowBtnTooltip($event) {
let spread = spreadRef.value;
let sheet = spread.getActiveSheet();
sheet.options.addRowButtonOption.tooltip = $event.target.value;
spread.repaint();
}
function columnBtnBackColor($event) {
let spread = spreadRef.value;
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();
}
function rowBtnBackColor($event) {
let spread = spreadRef.value;
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();
}
</script>
<style scoped>
#app {
height: 100%;
}
.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;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.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",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-en': 'npm:@mescius/spread-sheets-resources-en/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
