To set the cell type, first create a cellType object, then use the setCellType method to set the cellType for the sheet, cell, column, or row. For example:
Sometimes you can use the cellType with data binding by binding a cellType to a column. For example:
After you set the cell type you can use the getCellType method to get the cell type. If you want to remove the cell type, set the value to null or undefined.
SpreadJS provides an event (ButtonClicked) on the spreadsheet. The event occurs when you click a button, check box, or hyperlink in a cell. For example:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet></gc-worksheet>
<gc-worksheet :dataSource="datasource" :autoGenerateColumns="autoGenerateColumns"></gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
This text box will display information about the different cell types that are interacted with.
<div class="option-row">
<textarea id="eventTrigger" style="width: 100%; height: 120px" v-model="message"></textarea>
</div>
</div>
</div>
</template>
<script setup>
import '@mescius/spread-sheets-vue'
import { ref, computed } from 'vue';
import GC from '@mescius/spread-sheets';
import { getData } from "./data.js";
const message = ref('');
const autoGenerateColumns = ref(false);
let sheet = null;
const initSpread = (spread) => {
const GCsheets = GC.Spread.Sheets;
sheet = spread.getSheet(0);
spread.bind(GCsheets.Events.ButtonClicked, (e, args) => {
const { sheet, row, col } = args;
const cellType = sheet.getCellType(row, col);
if (cellType instanceof GCsheets.CellTypes.Button) {
message.value += "You click a button.\n";
}
if (cellType instanceof GCsheets.CellTypes.CheckBox) {
message.value += "You click a check box.\n";
}
if (cellType instanceof GCsheets.CellTypes.HyperLink) {
message.value += "You click a hyperlink.\n";
}
});
spread.bind(GCsheets.Events.CellClick, (e, args) => {
const { sheet, row, col } = args;
const cellType = sheet.getCellType(row, col);
if (cellType instanceof GCsheets.CellTypes.ComboBox) {
message.value += "You click a combo box.\n";
}
});
sheet.suspendPaint();
sheet.name('Basic Usage');
sheet.setColumnWidth(2, 140);
sheet.setColumnWidth(1, 120);
sheet.setRowHeight(1, 50);
const b0 = new GCsheets.CellTypes.Button();
b0.text("Margin");
b0.marginLeft(15);
b0.marginTop(7);
b0.marginRight(15);
b0.marginBottom(7);
sheet.setCellType(1, 2, b0, GCsheets.SheetArea.viewport);
sheet.setValue(1, 1, "ButtonCellType");
const c = new GCsheets.CellTypes.CheckBox();
c.isThreeState(false);
c.textTrue("Checked!");
c.textFalse("Check Me!");
sheet.setCellType(2, 2, c, GCsheets.SheetArea.viewport);
sheet.setValue(2, 1, "CheckBoxCellType");
const combo = new GCsheets.CellTypes.ComboBox();
combo.items([{ text: "Oranges", value: "11k" }, { text: "Apples", value: "15k" }, { text: "Grape", value: "100k" }]);
combo.editorValueType(GCsheets.CellTypes.EditorValueType.text);
sheet.getCell(3, 2, GCsheets.SheetArea.viewport).cellType(combo).value("Grape");
sheet.setValue(3, 1, "ComboBoxCellType");
const h = new GCsheets.CellTypes.HyperLink();
h.text("SpreadJS Overview");
sheet.setCellType(4, 2, h, GCsheets.SheetArea.viewport);
sheet.getCell(4, 2, GCsheets.SheetArea.viewport).value("http://developer.mescius.com/en/spreadjs/").hAlign(GCsheets.HorizontalAlign.center);
sheet.setValue(4, 1, "HyperLinkCellType");
sheet.resumePaint();
const sheet1 = spread.getSheet(1);
sheet1.name('DataBind');
sheet1.suspendPaint();
const _lines = ["Computers", "Washers", "Stoves"];
const _colors = ["Red", "Green", "Blue", "White"];
const _ratings = ["Terrible", "Bad", "Average", "Good", "Great", "Epic"];
const lineCellType = new GCsheets.CellTypes.ComboBox();
lineCellType.items(_lines);
const colorCellType = new GCsheets.CellTypes.ComboBox();
colorCellType.items(_colors);
const checkBoxCellType = new GCsheets.CellTypes.CheckBox();
const ratingCellType = new GCsheets.CellTypes.ComboBox();
ratingCellType.items(_ratings);
const colInfos = [
{ name: "name", size: 100 },
{ name: "line", cellType: lineCellType, size: 80 },
{ name: "color", cellType: colorCellType },
{ name: "discontinued", cellType: checkBoxCellType, size: 80 },
{ name: "rating", cellType: ratingCellType }
];
sheet1.bindColumns(colInfos);
sheet1.resumePaint();
};
const datasource = computed(() => {
return getData();
});
</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;
overflow: auto;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
}
.sample-options {
z-index: 1000;
}
.option {
padding-bottom: 6px;
}
.checkbox {
padding-right: 12px;
display: inline-block;
}
label {
display: inline-block;
min-width: 100px;
}
input,
select {
width: 100%;
padding: 4px 0;
margin-top: 4px;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
padding: 0;
}
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>
export function getData() {
return [
{ name: "Stoves S0", line: "Washers", color: "Green", discontinued: true, rating: "Average" },
{ name: "Computers C1", line: "Washers", color: "Green", discontinued: true, rating: "Average" },
{ name: "Washers W3", line: "Washers", color: "Green", discontinued: true, rating: "Average" }
]
}
(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);
