To create a check box cell, follow this example:
The CheckBox can support a three-state check box. You can use the isThreeState method to get and set whether the check box supports three states. For example:
The three states are true, false, or indeterminate. Every state has its own text; you can use the textTrue, textFalse, and textIndeterminate methods to get and set these states' text. For example:
You can use the caption method to get and set the caption of the check box cell. Use the textAlign method to get and set the text alignment relative to the check box. The setting is a CheckBoxTextAlign enumeration value.
top: Text is on top of the check box.
bottom: Text is below the check box.
left: Text is to the left of the check box.
right: Text is to the right of the check box.
You can use the boxSize method to get and set checkbox size. You can set number or "auto" to cellType.
When the cell style "wordWrap” is set to true and the cell width is not enough for the text, the text will display wrapped.
<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>Select the check box cell in Spread and edit its options with these text boxes.</label>
<div class="option-row" v-if="hasCaption === null || hasCaption">
<label for="caption">caption:</label>
<input id="caption" type="text" v-model="caption" />
</div>
<div class="option-row" v-if="hasCaption === null || !hasCaption">
<label for="textTrue">textTrue:</label>
<input id="textTrue" type="text" v-model="textTrue" />
</div>
<div class="option-row" v-if="hasCaption === null || !hasCaption">
<label for="textIndeterminate">textIndeterminate(for 3-state option):</label>
<input id="textIndeterminate" type="text" v-model="textIndeterminate" />
</div>
<div class="option-row" v-if="hasCaption === null || !hasCaption">
<label for="textFalse">textFalse:</label>
<input id="textFalse" type="text" v-model="textFalse" />
</div>
<div class="option-row" v-if="hasCaption === null || !hasCaption">
<label for="boxSize">boxSize:</label>
<input id="boxSize" type="text" v-model="boxSize" />
</div>
<div class="option-row">
<label>textAlign:</label>
<select id="textAlign" v-model="textAlign">
<option value="0">top</option>
<option value="1">bottom</option>
<option value="2">left</option>
<option value="3">right</option>
</select>
</div>
<div class="option-row" v-if="hasCaption === null || !hasCaption">
<input id="isThreeState" type="checkbox" v-model="isThreeState" />
<label for="isThreeState">isThreeState:</label>
</div>
<div class="option-row">
<input type="button" id="setProperty" value="Update" :disabled="disabled"
@click="propertyChange($event, true)" />
</div>
</div>
</div>
</template>
<script setup>
import '@mescius/spread-sheets-vue'
import { ref } from 'vue';
import GC from '@mescius/spread-sheets';
const spreadNS = GC.Spread.Sheets;
const caption = ref('');
const textTrue = ref('textTrue');
const textIndeterminate = ref('textIndeterminate');
const textFalse = ref('textFalse');
const textAlign = ref('0'); // 默认值为 'top'
const isThreeState = ref(true);
const disabled = ref(false);
const hasCaption = ref(null);
const spread = ref(null);
const boxSize = ref(12);
const initSpread = (spreadInstance) => {
spread.value = spreadInstance;
const sheet = spreadInstance.getSheet(0);
sheet.bind(spreadNS.Events.SelectionChanged, (e) => {
propertyChange(e);
});
sheet.suspendPaint();
sheet.setColumnWidth(1, 120);
sheet.setColumnWidth(2, 130);
sheet.setRowHeight(1, 35);
sheet.setValue(1, 1, "caption");
sheet.getCell(1, 1).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center).foreColor("green");
const captionCellType = new GC.Spread.Sheets.CellTypes.CheckBox();
captionCellType.caption("Caption");
sheet.setCellType(1, 2, captionCellType);
sheet.getCell(1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
sheet.setRowHeight(3, 35);
sheet.setValue(3, 1, "threeState");
sheet.getCell(3, 1).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center).foreColor("red");
const threeStateCellType = new GC.Spread.Sheets.CellTypes.CheckBox();
threeStateCellType.isThreeState(false);
threeStateCellType.textTrue("Checked!");
threeStateCellType.textFalse("Check Me!");
sheet.setCellType(3, 2, threeStateCellType);
sheet.getCell(3, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
sheet.setRowHeight(5, 35);
sheet.setValue(5, 1, "textAlign");
sheet.getCell(5, 1).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center).foreColor("blue");
const textAlignCellType = new GC.Spread.Sheets.CellTypes.CheckBox();
textAlignCellType.isThreeState(false);
textAlignCellType.caption("textAlign");
textAlignCellType.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.bottom);
sheet.setCellType(5, 2, textAlignCellType);
sheet.getCell(5, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
sheet.setRowHeight(7, 35);
sheet.setValue(7, 1, "text wrap");
sheet.getCell(7, 1).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center).foreColor("orange");
const textWrapCellType = new GC.Spread.Sheets.CellTypes.CheckBox();
textWrapCellType.caption("This is a long long text");
sheet.setCellType(7, 2, textWrapCellType);
sheet.getCell(7, 2).wordWrap(true);
sheet.resumePaint();
};
const propertyChange = (e, settings = false) => {
const sheet = spread.value.getActiveSheet();
const sels = sheet.getSelections();
if (sels && sels.length > 0) {
const sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
const checkboxCellType = sheet.getCellType(sel.row, sel.col);
if (!(checkboxCellType instanceof spreadNS.CellTypes.CheckBox)) {
disabled.value = true;
return;
}
if (!settings) {
disabled.value = false;
hasCaption.value = checkboxCellType.caption() ? true : false;
caption.value = checkboxCellType.caption();
textTrue.value = checkboxCellType.textTrue();
textIndeterminate.value = checkboxCellType.textIndeterminate();
textFalse.value = checkboxCellType.textFalse();
textAlign.value = checkboxCellType.textAlign().toString();
isThreeState.value = checkboxCellType.isThreeState();
boxSize.value = checkboxCellType.boxSize();
} else {
checkboxCellType.caption(caption.value);
checkboxCellType.textTrue(textTrue.value);
checkboxCellType.textIndeterminate(textIndeterminate.value);
checkboxCellType.textFalse(textFalse.value);
checkboxCellType.textAlign(Number(textAlign.value));
checkboxCellType.isThreeState(isThreeState.value);
const boxSizeValue = Number(boxSize.value);
if (isNaN(boxSizeValue)) {
checkboxCellType.boxSize(boxSize.value);
} else {
checkboxCellType.boxSize(boxSizeValue);
}
}
}
sheet.repaint();
};
const getActualRange = (range, maxRowCount, maxColCount) => {
const row = range.row < 0 ? 0 : range.row;
const col = range.col < 0 ? 0 : range.col;
const rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
const colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new spreadNS.Range(row, col, rowCount, colCount);
};
</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;
}
.option-row {
font-size: 14px;
padding: 5px;
}
.checkbox {
padding-right: 12px;
display: inline-block;
}
label {
padding-bottom: 4px;
display: block;
}
input,
select {
width: 100%;
padding: 4px 8px;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
}
input[type=checkbox]+label {
display: inline-block;
width: auto;
}
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);
