你可以使用以下代码创建一个复选框单元格：
复选框单元格类型 CheckBox 支持三种状态。你可以使用 isThreeState 方法设置复选框是否支持三种状态。例如：
三种状态分别为选中、未选中和不确定。每种状态都可以设置对应的文本，你可以使用 textTrue、textFalse 和 textIndeterminate 方法来设置或获取状态对应的文本。例如：
你可以使用 caption 方法设置或获取复选框单元格的标题。使用 textAlign 方法设置或获取文本相对于复选框的位置。该设置为枚举类型 CheckBoxTextAlign，枚举值如下：
top：文本在复选框顶部。
bottom：文本在复选框底部。
left：文本在复选框左侧。
right：文本在复选框右侧。
你可以使用 boxSize 方法获取或设置复选框的大小，可以设置为数字或 "auto"。
当单元格样式 "wordWrap" 设置为 "true"，且单元格宽度不足以容纳文本时，文本会自动换行显示。
你可以使用 mode 方法获取或设置复选框的模式。可以将 cellType 设置为 "checkbox" 或 "toggle"。
你可以使用 toggleOptions 方法获取或设置复选框的切换选项。参数类型请参考 GC.Spread.Sheets.CellTypes.IToggleOptions。
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
initSpread(spread);
};
function initCellStyle(fontSize, foreColor) {
const style = new GC.Spread.Sheets.Style();
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.font = `bold ${fontSize}pt Calibri`;
style.foreColor = foreColor;
return style;
}
function propertyChange(spread, isSet) {
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getActiveSheet();
var sels = sheet.getSelections();
if (sels && sels.length > 0) {
var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
var checkboxCellType = sheet.getCellType(sel.row, sel.col);
if (!(checkboxCellType instanceof spreadNS.CellTypes.CheckBox)) {
_getElementById("changeProperty").setAttribute("disabled", 'disabled');
return;
}
const checkboxMode = checkboxCellType.mode();
if (checkboxMode === 'toggle') {
_getElementById("checkboxOption").style.display = "none";
_getElementById("toggleOptions").style.display = "block";
} else {
_getElementById("checkboxOption").style.display = "block";
_getElementById("toggleOptions").style.display = "none";
}
if (!isSet) {
_getElementById("changeProperty").removeAttribute("disabled");
if (checkboxMode === 'toggle') {
_getElementById("toggleCheckBoxCellTextCaption").value = checkboxCellType.caption();
_getElementById("toggleCheckBoxCellTextTrue").value = checkboxCellType.textTrue();
_getElementById("toggleCheckBoxCellTextFalse").value = checkboxCellType.textFalse();
_getElementById("selToggleCheckBoxCellAlign").value = checkboxCellType.textAlign();
const toggleOptions = checkboxCellType.toggleOptions();
_getElementById("toggleCheckBoxCellWidth").value = toggleOptions.width;
_getElementById("toggleCheckBoxCellHeight").value = toggleOptions.height;
_getElementById("toggleCheckBoxCellSliderMargin").value = toggleOptions.sliderMargin;
_getElementById("toggleCheckBoxCellSliderRadius").value = toggleOptions.sliderRadius;
_getElementById("toggleCheckBoxCellTrackRadius").value = toggleOptions.trackRadius;
_getElementById("toggleCheckBoxCellSliderColorOn").value = toggleOptions.sliderColorOn;
_getElementById("toggleCheckBoxCellSliderColorOff").value = toggleOptions.sliderColorOff;
_getElementById("toggleCheckBoxCellTrackColorOn").value = toggleOptions.trackColorOn;
_getElementById("toggleCheckBoxCellTrackColorOff").value = toggleOptions.trackColorOff;
_getElementById("toggleCheckBoxCellAnimationDuration").value = toggleOptions.animationDuration;
_getElementById("toggleCheckBoxCellAutoSize").checked = toggleOptions.autoSize;
_getElementById("toggleCheckBoxCellWidth").classList.toggle("disabled", !!toggleOptions.autoSize);
_getElementById("toggleCheckBoxCellHeight").classList.toggle("disabled", !!toggleOptions.autoSize);
} else {
if (checkboxCellType.caption()) {
_getElementById("txtCheckBoxCellTextCaption").parentNode.style.display = "block";
_getElementById("txtCheckBoxCellTextCaption").value = checkboxCellType.caption();
_getElementById("txtCheckBoxCellTextTrue").parentNode.style.display = "none";
_getElementById("ckbCheckBoxCellIsThreeState").parentNode.style.display = "none";
} else {
_getElementById("txtCheckBoxCellTextCaption").parentNode.style.display = "none";
_getElementById("txtCheckBoxCellTextTrue").parentNode.style.display = "block";
_getElementById("ckbCheckBoxCellIsThreeState").parentNode.style.display = "block";
_getElementById("txtCheckBoxCellTextTrue").value = checkboxCellType.textTrue();
_getElementById("txtCheckBoxCellTextIndeterminate").value = checkboxCellType.textIndeterminate();
_getElementById("txtCheckBoxCellTextFalse").value = checkboxCellType.textFalse();
_getElementById("ckbCheckBoxCellIsThreeState").checked = checkboxCellType.isThreeState();
_getElementById("checkboxSize").value = checkboxCellType.boxSize();
}
_getElementById("selCheckBoxCellAlign").value = checkboxCellType.textAlign();
}
} else {
if (checkboxMode === 'toggle') {
checkboxCellType.caption(_getElementById("toggleCheckBoxCellTextCaption").value);
checkboxCellType.textTrue(_getElementById("toggleCheckBoxCellTextTrue").value);
checkboxCellType.textFalse(_getElementById("toggleCheckBoxCellTextFalse").value);
checkboxCellType.textAlign(_getElementById("selToggleCheckBoxCellAlign").value - 0);
const sliderRadius = _getElementById("toggleCheckBoxCellSliderRadius").value;
const trackRadius = _getElementById("toggleCheckBoxCellTrackRadius").value;
const autoSize = !!_getElementById("toggleCheckBoxCellAutoSize").checked;
checkboxCellType.toggleOptions({
width: autoSize ? null : (_getElementById("toggleCheckBoxCellWidth").value - 0),
height: autoSize ? null : (_getElementById("toggleCheckBoxCellHeight").value - 0),
sliderMargin: _getElementById("toggleCheckBoxCellSliderMargin").value - 0,
sliderRadius: sliderRadius === '' ? null : (sliderRadius - 0),
trackRadius: trackRadius === '' ? null : (trackRadius - 0),
sliderColorOn: _getElementById("toggleCheckBoxCellSliderColorOn").value,
sliderColorOff: _getElementById("toggleCheckBoxCellSliderColorOff").value,
trackColorOn: _getElementById("toggleCheckBoxCellTrackColorOn").value,
trackColorOff: _getElementById("toggleCheckBoxCellTrackColorOff").value,
animationDuration: _getElementById("toggleCheckBoxCellAnimationDuration").value - 0,
autoSize: autoSize,
});
} else {
if (checkboxCellType.caption()) {
checkboxCellType.caption(_getElementById("txtCheckBoxCellTextCaption").value);
} else {
checkboxCellType.textTrue(_getElementById("txtCheckBoxCellTextTrue").value);
checkboxCellType.textIndeterminate(_getElementById("txtCheckBoxCellTextIndeterminate").value);
checkboxCellType.textFalse(_getElementById("txtCheckBoxCellTextFalse").value);
checkboxCellType.isThreeState(_getElementById("ckbCheckBoxCellIsThreeState").checked);
var boxSizeValue = _getElementById("checkboxSize").value;
var boxSize = Number(boxSizeValue);
if (isNaN(boxSize)) {
checkboxCellType.boxSize(boxSizeValue);
} else {
checkboxCellType.boxSize(boxSize);
}
}
checkboxCellType.textAlign(_getElementById("selCheckBoxCellAlign").value - 0);
}
}
}
sheet.repaint();
}
function getActualRange(range, maxRowCount, maxColCount) {
var spreadNS = GC.Spread.Sheets;
var row = range.row < 0 ? 0 : range.row;
var col = range.col < 0 ? 0 : range.col;
var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
var colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new spreadNS.Range(row, col, rowCount, colCount);
}
function initSpread(spread) {
initToggleSheet(spread);
initCheckboxSheet(spread);
_getElementById("changeProperty").addEventListener('click', function () {
propertyChange(spread, true);
});
}
function initToggleSheet(spread) {
var spreadNS = GC.Spread.Sheets;
var sheet1 = spread.getSheet(0);
sheet1.name("切换模式");
sheet1.defaults.colWidth = 190;
sheet1.defaults.rowHeight = 60;
sheet1.suspendPaint();
sheet1.bind(spreadNS.Events.SelectionChanged, function () {
propertyChange(spread, false);
});
sheet1.setColumnWidth(0, 110);
sheet1.setColumnWidth(1, 190);
sheet1.setColumnWidth(2, 130);
sheet1.setColumnWidth(3, 110);
sheet1.setColumnWidth(4, 190);
sheet1.setColumnWidth(5, 130);
sheet1.setColumnWidth(6, 130);
sheet1.setColumnWidth(7, 130);
sheet1.setColumnWidth(8, 130);
sheet1.setColumnWidth(9, 130);
for (let i = 0; i < 7; i++) {
sheet1.setRowHeight(i, 60);
}
sheet1.addSpan(0, 0, 7, 1);
sheet1.setValue(0, 0, "切换模式");
sheet1.setStyle(0, 0, initCellStyle(11, "Accent 2"));
sheet1.setStyle(0, 1, initCellStyle(11, "#000"));
sheet1.setStyle(1, 1, initCellStyle(11, "#000"));
sheet1.setStyle(2, 1, initCellStyle(11, "#000"));
sheet1.setStyle(3, 1, initCellStyle(11, "#000"));
sheet1.setStyle(4, 1, initCellStyle(11, "#000"));
sheet1.setStyle(5, 1, initCellStyle(11, "#000"));
sheet1.setStyle(6, 1, initCellStyle(11, "#000"));
sheet1.getCell(0, 0).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
for (let i = 0; i < 7; i++) {
for (let j = 1; j < 8; j++) {
sheet1.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
}
var toggleOptions = {
width: 30,
height: 15,
trackColorOn: '#4CAF50',
trackColorOff: '#bfbfbf',
sliderColorOn: '#ffffff',
sliderColorOff: '#ffffff',
animationDuration: 200,
};
sheet1.setValue(0, 1, "自定义尺寸");
var toggleCustomSizeCellType1 = new spreadNS.CellTypes.CheckBox();
toggleCustomSizeCellType1.mode('toggle');
toggleCustomSizeCellType1.toggleOptions(toggleOptions);
sheet1.setCellType(0, 2, toggleCustomSizeCellType1);
var toggleCustomSizeCellType2 = new spreadNS.CellTypes.CheckBox();
toggleCustomSizeCellType2.mode('toggle');
toggleCustomSizeCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
});
sheet1.setCellType(0, 3, toggleCustomSizeCellType2);
var toggleCustomSizeCellType3 = new spreadNS.CellTypes.CheckBox();
toggleCustomSizeCellType3.mode('toggle');
toggleCustomSizeCellType3.toggleOptions({
...toggleOptions,
width: 60,
height: 30,
});
sheet1.setCellType(0, 4, toggleCustomSizeCellType3);
sheet1.setValue(1, 1, "自动尺寸");
sheet1.comments.add(1, 1, '启用自动尺寸选项后，按钮大小会根据文本动态调整。');
var comment = sheet1.comments.get(1, 1);
comment.indicatorSize(8);
comment.indicatorColor('blue');
var toggleAutoSizeCellType1 = new spreadNS.CellTypes.CheckBox();
toggleAutoSizeCellType1.mode('toggle');
toggleAutoSizeCellType1.caption("自动");
toggleAutoSizeCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleAutoSizeCellType1.toggleOptions({
...toggleOptions,
autoSize: true,
});
sheet1.setCellType(1, 2, toggleAutoSizeCellType1);
sheet1.getStyle(1, 2).fontSize = '8pt';
var toggleAutoSizeCellType2 = new spreadNS.CellTypes.CheckBox();
toggleAutoSizeCellType2.mode('toggle');
toggleAutoSizeCellType2.caption("自动");
toggleAutoSizeCellType2.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleAutoSizeCellType2.toggleOptions({
...toggleOptions,
autoSize: true,
});
sheet1.setCellType(1, 3, toggleAutoSizeCellType2);
sheet1.getStyle(1, 3).fontSize = '12pt';
var toggleAutoSizeCellType3 = new spreadNS.CellTypes.CheckBox();
toggleAutoSizeCellType3.mode('toggle');
toggleAutoSizeCellType3.caption("自动");
toggleAutoSizeCellType3.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleAutoSizeCellType3.toggleOptions({
...toggleOptions,
autoSize: true,
});
sheet1.setCellType(1, 4, toggleAutoSizeCellType3);
sheet1.getStyle(1, 4).fontSize = '16pt';
sheet1.setValue(2, 1, "自定义颜色");
var toggleCustomColorsCellType1 = new spreadNS.CellTypes.CheckBox();
toggleCustomColorsCellType1.mode('toggle');
toggleCustomColorsCellType1.textTrue("开启");
toggleCustomColorsCellType1.textFalse("关闭");
toggleCustomColorsCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleCustomColorsCellType1.toggleOptions({
trackColorOn: "Accent 1 60",
trackColorOff: "Background 1 -15",
sliderColorOn: "Accent 1",
sliderColorOff: "Background 1",
animationDuration: 500,
autoSize: true
});
sheet1.setCellType(2, 2, toggleCustomColorsCellType1);
sheet1.setValue(3, 1, "文本对齐");
var toggleTextAlignCellType1 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType1.mode('toggle');
toggleTextAlignCellType1.caption("顶部");
toggleTextAlignCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.top);
toggleTextAlignCellType1.toggleOptions(toggleOptions);
sheet1.setCellType(3, 2, toggleTextAlignCellType1);
var toggleTextAlignCellType2 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType2.mode('toggle');
toggleTextAlignCellType2.caption("底部");
toggleTextAlignCellType2.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.bottom);
toggleTextAlignCellType2.toggleOptions(toggleOptions);
sheet1.setCellType(3, 3, toggleTextAlignCellType2);
var toggleTextAlignCellType3 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType3.mode('toggle');
toggleTextAlignCellType3.caption("左侧");
toggleTextAlignCellType3.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.left);
toggleTextAlignCellType3.toggleOptions(toggleOptions);
sheet1.setCellType(3, 4, toggleTextAlignCellType3);
var toggleTextAlignCellType4 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType4.mode('toggle');
toggleTextAlignCellType4.caption("右侧");
toggleTextAlignCellType4.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right);
toggleTextAlignCellType4.toggleOptions(toggleOptions);
sheet1.setCellType(3, 5, toggleTextAlignCellType4);
var toggleTextAlignCellType5 = new spreadNS.CellTypes.CheckBox();
toggleTextAlignCellType5.mode('toggle');
toggleTextAlignCellType5.caption("内部");
toggleTextAlignCellType5.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
toggleTextAlignCellType5.toggleOptions({
...toggleOptions,
width: 70,
height: 20,
});
sheet1.setCellType(3, 6, toggleTextAlignCellType5);
sheet1.setValue(4, 1, "滑块边距");
var toggleSliderMarginCellType1 = new spreadNS.CellTypes.CheckBox();
toggleSliderMarginCellType1.mode('toggle');
toggleSliderMarginCellType1.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 2,
});
sheet1.setCellType(4, 2, toggleSliderMarginCellType1);
var toggleSliderMarginCellType2 = new spreadNS.CellTypes.CheckBox();
toggleSliderMarginCellType2.mode('toggle');
toggleSliderMarginCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 4,
});
sheet1.setCellType(4, 3, toggleSliderMarginCellType2);
var toggleSliderMarginCellType3 = new spreadNS.CellTypes.CheckBox();
toggleSliderMarginCellType3.mode('toggle');
toggleSliderMarginCellType3.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 6,
});
sheet1.setCellType(4, 4, toggleSliderMarginCellType3);
sheet1.setValue(5, 1, "圆角");
var toggleBorderRadiusCellType1 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType1.mode('toggle');
toggleBorderRadiusCellType1.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: 0,
sliderRadius: 0,
});
sheet1.setCellType(5, 2, toggleBorderRadiusCellType1);
var toggleBorderRadiusCellType2 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType2.mode('toggle');
toggleBorderRadiusCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: 0,
sliderRadius: 12,
});
sheet1.setCellType(5, 3, toggleBorderRadiusCellType2);
var toggleBorderRadiusCellType3 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType3.mode('toggle');
toggleBorderRadiusCellType3.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
sliderMargin: 4,
trackRadius: 15,
sliderRadius: 0,
});
sheet1.setCellType(5, 4, toggleBorderRadiusCellType3);
var toggleBorderRadiusCellType4 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType4.mode('toggle');
toggleBorderRadiusCellType4.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: 8,
sliderRadius: 6,
});
sheet1.setCellType(5, 5, toggleBorderRadiusCellType4);
var toggleBorderRadiusCellType5 = new spreadNS.CellTypes.CheckBox();
toggleBorderRadiusCellType5.mode('toggle');
toggleBorderRadiusCellType5.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
trackRadius: null,
sliderRadius: null,
});
sheet1.setCellType(5, 6, toggleBorderRadiusCellType5);
sheet1.setValue(6, 1, "动画时长");
var toggleAnimationDurationCellType1 = new spreadNS.CellTypes.CheckBox();
toggleAnimationDurationCellType1.mode('toggle');
toggleAnimationDurationCellType1.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
animationDuration: 100,
});
sheet1.setCellType(6, 2, toggleAnimationDurationCellType1);
var toggleAnimationDurationCellType2 = new spreadNS.CellTypes.CheckBox();
toggleAnimationDurationCellType2.mode('toggle');
toggleAnimationDurationCellType2.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
animationDuration: 300,
});
sheet1.setCellType(6, 3, toggleAnimationDurationCellType2);
var toggleAnimationDurationCellType3 = new spreadNS.CellTypes.CheckBox();
toggleAnimationDurationCellType3.mode('toggle');
toggleAnimationDurationCellType3.toggleOptions({
...toggleOptions,
width: 40,
height: 20,
animationDuration: 500,
});
sheet1.setCellType(6, 4, toggleAnimationDurationCellType3);
sheet1.resumePaint();
_getElementById("toggleCheckBoxCellAutoSize").addEventListener('change', function (e) {
_getElementById("toggleCheckBoxCellWidth").classList.toggle("disabled", !!e.target.checked);
_getElementById("toggleCheckBoxCellHeight").classList.toggle("disabled", !!e.target.checked);
});
}
function initCheckboxSheet(spread) {
var spreadNS = GC.Spread.Sheets;
var sheet2 = spread.getSheet(1);
sheet2.name("复选框模式");
sheet2.defaults.colWidth = 190;
sheet2.defaults.rowHeight = 60;
sheet2.suspendPaint();
sheet2.bind(spreadNS.Events.SelectionChanged, function () {
propertyChange(spread, false);
});
sheet2.setColumnWidth(0, 110);
sheet2.setColumnWidth(1, 190);
sheet2.setColumnWidth(2, 130);
for (let i = 0; i < 4; i++) {
sheet2.setRowHeight(i, 60);
}
sheet2.addSpan(0, 0, 4, 1);
sheet2.setValue(0, 0, "复选框模式");
sheet2.setStyle(0, 0, initCellStyle(11, "Accent 1"));
sheet2.setStyle(0, 1, initCellStyle(11, "Accent 6"));
sheet2.setStyle(1, 1, initCellStyle(11, "#FF0000"));
sheet2.setStyle(2, 1, initCellStyle(11, "Accent 5"));
sheet2.setStyle(3, 1, initCellStyle(11, "Accent 4"));
sheet2.getCell(0, 0).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
for (let i = 0; i < 4; i++) {
for (let j = 1; j < 4; j++) {
sheet2.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
}
sheet2.setValue(0, 1, "标题");
var captionCellType = new spreadNS.CellTypes.CheckBox();
captionCellType.caption("标题");
sheet2.setCellType(0, 2, captionCellType);
sheet2.setValue(1, 1, "三态");
var threeStateCellType = new spreadNS.CellTypes.CheckBox();
threeStateCellType.isThreeState(false);
threeStateCellType.textTrue("已选中！");
threeStateCellType.textFalse("请勾选！");
sheet2.setCellType(1, 2, threeStateCellType);
sheet2.setValue(2, 1, "文本对齐");
var textAlignCellType = new spreadNS.CellTypes.CheckBox();
textAlignCellType.isThreeState(false);
textAlignCellType.caption("文本对齐");
textAlignCellType.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.bottom);
sheet2.setCellType(2, 2, textAlignCellType);
sheet2.setValue(3, 1, "自动换行");
var textWrapCellType = new spreadNS.CellTypes.CheckBox();
textWrapCellType.caption("这是一段很长很长的文本");
sheet2.setCellType(3, 2, textWrapCellType);
sheet2.getCell(3, 2).wordWrap(true);
sheet2.resumePaint();
}
function _getElementById(id) {
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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">
<div class="option-row">
<label>在 Spread 中选择复选框单元格，并使用这些文本框编辑其选项。</label>
</div>
<div id="checkboxOption">
<div class="option-row">
<label>标题：</label>
<input type="text" id="txtCheckBoxCellTextCaption" />
</div>
<div class="option-row">
<label>选中时文本：</label>
<input type="text" id="txtCheckBoxCellTextTrue" value="选中" />
<label>不确定时文本(用于三态选项)：</label>
<input type="text" id="txtCheckBoxCellTextIndeterminate" value="不确定" />
<label>未选中时文本：</label>
<input type="text" id="txtCheckBoxCellTextFalse" value="未选中" />
<label>复选框大小</label>
<input type="text" id="checkboxSize" min="1">
</div>
<div class="option-row">
<label>文本对齐：</label>
<select id="selCheckBoxCellAlign">
<option value="0" selected="selected">上</option>
<option value="1">下</option>
<option value="2">左</option>
<option value="3">右</option>
</select>
</div>
<div class="option-row">
<input type="checkbox" id="ckbCheckBoxCellIsThreeState" checked="checked" />
<label for="ckbCheckBoxCellIsThreeState">三态</label>
</div>
</div>
<div id="toggleOptions" class="option-row" style="display: none;">
<label>标题：</label>
<input type="text" id="toggleCheckBoxCellTextCaption" />
<label>选中时文本：</label>
<input type="text" id="toggleCheckBoxCellTextTrue" value="选中" />
<label>未选中时文本：</label>
<input type="text" id="toggleCheckBoxCellTextFalse" value="未选中" />
<label>文本对齐：</label>
<select id="selToggleCheckBoxCellAlign">
<option value="0" selected="selected">上</option>
<option value="1">下</option>
<option value="2">左</option>
<option value="3">右</option>
<option value="4">内部</option>
</select>
<label class="toggle-checkbox-cell-auto-size"><input type="checkbox" id="toggleCheckBoxCellAutoSize" />
自动大小</label>
<label>宽度：</label>
<input type="text" id="toggleCheckBoxCellWidth" value="40" />
<label>高度：</label>
<input type="text" id="toggleCheckBoxCellHeight" value="20" />
<label>滑块边距：</label>
<input type="text" id="toggleCheckBoxCellSliderMargin" value="4" />
<label>滑块圆角：</label>
<input type="number" id="toggleCheckBoxCellSliderRadius" value="12" />
<label>轨道圆角：</label>
<input type="number" id="toggleCheckBoxCellTrackRadius" value="15" />
<label>滑块开启颜色：</label>
<input type="text" id="toggleCheckBoxCellSliderColorOn" value="red" />
<label>滑块关闭颜色：</label>
<input type="text" id="toggleCheckBoxCellSliderColorOff" value="#fff" />
<label>轨道开启颜色：</label>
<input type="text" id="toggleCheckBoxCellTrackColorOn" value="red" />
<label>轨道关闭颜色：</label>
<input type="text" id="toggleCheckBoxCellTrackColorOff" value="#fff" />
<label>动画时长：</label>
<input type="text" id="toggleCheckBoxCellAnimationDuration" value="300" />
</div>
<div class="option-row">
<label></label>
<input type="button" id="changeProperty" value="更新" />
</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;
padding: 5px;
}
.toggle-checkbox-cell-auto-size {
padding: 8px 0;
}
.disabled {
opacity: 0.5;
pointer-events: none;
}
.option-row {
padding-bottom: 5px;
}
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;
}
