复选框单元格 | 功能示例 | SpreadJS 在线示例

概述本 Demo 展示了 SpreadJS 复选框单元格类型的两种模式：传统复选框模式和现代切换开关模式。Demo 创建了两个工作表，分别演示了切换模式的尺寸定制、颜色定制、文本对齐、圆角和动画等特性，以及复选框模式的标题、三态、文本对齐和自动换行功能。实现思路创建工作簿实例，初始化两个工作表分别用于展示切换模式和复选框模式在切换模式工作表中，创建多个不同配置的切换开关单元格，分别展示尺寸、颜色、对齐、圆角和动画等特性在复选框模式工作表中，创建不同配置的复选框单元格，展示标题、三态、对齐和换行功能绑定选择变化事件，实现点击单元格时显示对应的配置选项面板提供交互面板，允许用户实时修改选中单元格的复选框属性代码解析创建切换模式单元格这段代码创建了一个切换模式的复选框单元格。通过 mode('toggle') 将复选框设置为切换模式，使用 toggleOptions 方法配置开关的宽度、高度、轨道颜色、滑块颜色和动画时长。创建三态复选框单元格这段代码创建了一个支持三态的复选框。isThreeState(true) 启用三态功能，textTrue、textFalse 和 textIndeterminate 分别设置三种状态对应的显示文本。设置文本对齐 textAlign 方法设置文本相对于复选框的位置，支持 top（顶部）、bottom（底部）、left（左侧）、right（右侧）和 inside（内部）五种对齐方式。动态更新单元格属性 Demo 提供了交互面板，用户选中复选框单元格后可以修改其属性。getCellType 获取单元格类型实例，修改属性后调用 repaint 刷新显示。运行效果切换模式工作表展示了 7 行不同配置的切换开关，包括自定义尺寸、自动尺寸、自定义颜色、文本对齐方式、滑块边距、圆角和动画时长复选框模式工作表展示了 4 行不同配置的复选框，包括标题、三态、文本对齐和自动换行点击任意单元格，右侧面板会显示该单元格的当前配置选项修改面板中的属性值并点击"更新"按钮，即可实时查看修改效果 API 参考 mode(value) 设置或获取复选框单元格类型的模式。 value：可选，字符串值，支持 'checkbox'（复选框模式）或 'toggle'（切换模式） toggleOptions(value) 设置或获取切换开关的配置选项。 value：可选，对象类型，包含以下属性： width：开关宽度（像素） height：开关高度（像素） autoSize：是否自动适配尺寸 sliderMargin：滑块与轨道的间距 sliderRadius：滑块圆角半径 trackRadius：轨道圆角半径 sliderColorOn：激活态滑块颜色 sliderColorOff：未激活态滑块颜色 trackColorOn：激活态轨道颜色 trackColorOff：未激活态轨道颜色 animationDuration：动画时长（毫秒） isThreeState(value) 设置或获取复选框是否支持三态。 value：可选，布尔值，true 表示支持三态 caption(value) 设置或获取复选框单元格的标题文本。 value：可选，字符串类型 textTrue(value) / textFalse(value) / textIndeterminate(value) 设置或获取不同状态对应的显示文本。 value：可选，字符串类型 textAlign(value) 设置或获取文本相对于复选框的对齐方式。 value：可选，枚举值，支持： GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.top：顶部对齐 GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.bottom：底部对齐 GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.left：左侧对齐 GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right：右侧对齐 GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside：内部对齐 boxSize(value) 设置或获取复选框的大小。 value：可选，数字或字符串 'auto' setCellType(row, col, cellType, sheetArea) 为指定单元格设置单元格类型。 row：行索引 col：列索引 cellType：单元格类型实例 sheetArea：可选，工作表区域

window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 4 });
initSpread(spread);
// 绑定导出按钮点击事件
document.getElementById("exportExcel").onclick = function () {
exportToExcel(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;
}
// 检查当前是否为“复选框模式”或“现代模式”工作表中的命中测试模式示例单元格（第 4 行，第 2 或 3 列）
var sheetName = sheet.name();
if ((sheetName === "复选框模式" || sheetName === "现代模式") && sel.row === 4 && (sel.col === 2 || sel.col === 3)) {
_getElementById("checkboxOption").style.display = "none";
_getElementById("toggleOptions").style.display = "none";
_getElementById("hitTestModeOption").style.display = "block";
_getElementById("textEditableOption").style.display = "none";
if (!isSet) {
_getElementById("changeProperty").removeAttribute("disabled");
_getElementById("selHitTestMode").value = checkboxCellType.hitTestMode();
} else {
checkboxCellType.hitTestMode(_getElementById("selHitTestMode").value);
// 根据 hitTestMode 值更新标题
var hitTestMode = _getElementById("selHitTestMode").value;
if (hitTestMode === 'checkbox') {
checkboxCellType.caption("仅点击复选框");
} else {
checkboxCellType.caption("点击单元格");
}
}
sheet.repaint();
return;
}
// 检查当前是否为“复选框模式”或“现代模式”工作表中的文本可编辑示例单元格（第 5 行，第 2 或 3 列）
if ((sheetName === "复选框模式" || sheetName === "现代模式") && sel.row === 5 && (sel.col === 2 || sel.col === 3)) {
_getElementById("checkboxOption").style.display = "none";
_getElementById("toggleOptions").style.display = "none";
_getElementById("hitTestModeOption").style.display = "none";
_getElementById("textEditableOption").style.display = "block";
if (!isSet) {
_getElementById("changeProperty").removeAttribute("disabled");
_getElementById("ckbTextEditable").checked = checkboxCellType.textEditable();
} else {
checkboxCellType.textEditable(_getElementById("ckbTextEditable").checked);
// 根据 textEditable 值更新标题
var textEditable = _getElementById("ckbTextEditable").checked;
if (textEditable) {
checkboxCellType.caption("可进入编辑模式");
} else {
checkboxCellType.caption("不可进入编辑模式");
}
}
sheet.repaint();
return;
}
// 常规复选框/切换模式
_getElementById("hitTestModeOption").style.display = "none";
_getElementById("textEditableOption").style.display = "none";
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) {
var spreadNS = GC.Spread.Sheets;
initToggleSheet(spread);
initCheckboxSheet(spread);
initModernSheet(spread);
initCheckboxUsageSheet(spread);
_getElementById("changeProperty").addEventListener('click', function () {
propertyChange(spread, true);
});
spread.bind(spreadNS.Events.ActiveSheetChanged, function (e, args) {
var sheet = spread.getActiveSheet();
var sheetName = sheet.name();
if (sheetName === "复选框用法") {
_getElementById("panelDescription").textContent = "将当前工作簿导出为 Excel 文件。";
_getElementById("checkboxOption").style.display = "none";
_getElementById("toggleOptions").style.display = "none";
_getElementById("hitTestModeOption").style.display = "none";
_getElementById("textEditableOption").style.display = "none";
_getElementById("boxSizeOption").style.display = "none";
_getElementById("colorOption").style.display = "none";
_getElementById("changeProperty").style.display = "none";
} else {
_getElementById("panelDescription").textContent = "在 Spread 中选择复选框单元格，并使用这些文本框编辑其选项。";
_getElementById("changeProperty").style.display = "block";
propertyChange(spread, false);
}
});
}
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, 145);
sheet2.setColumnWidth(3, 170);
sheet2.setColumnWidth(4, 130);
sheet2.setColumnWidth(5, 130);
sheet2.setColumnWidth(6, 130);
for (let i = 0; i < 7; 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.setStyle(4, 1, initCellStyle(11, "Accent 2"));
sheet2.setStyle(5, 1, initCellStyle(11, "Accent 3"));
sheet2.setStyle(6, 1, initCellStyle(11, "Accent 1"));
sheet2.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 < 7; 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);
// 第 1 行：三态 - 5 个示例
sheet2.setValue(1, 1, "三态");
// 两态 - 已选中
var twoStateChecked = new spreadNS.CellTypes.CheckBox();
twoStateChecked.isThreeState(false);
twoStateChecked.textTrue("已选中");
twoStateChecked.textFalse("未选中");
sheet2.setCellType(1, 2, twoStateChecked);
sheet2.setValue(1, 2, true);
// 两态 - 未选中
var twoStateUnchecked = new spreadNS.CellTypes.CheckBox();
twoStateUnchecked.isThreeState(false);
twoStateUnchecked.textTrue("已选中");
twoStateUnchecked.textFalse("未选中");
sheet2.setCellType(1, 3, twoStateUnchecked);
sheet2.setValue(1, 3, false);
// 三态 - 已选中
var threeStateChecked = new spreadNS.CellTypes.CheckBox();
threeStateChecked.isThreeState(true);
threeStateChecked.textTrue("已选中");
threeStateChecked.textFalse("未选中");
threeStateChecked.textIndeterminate("不确定");
sheet2.setCellType(1, 4, threeStateChecked);
sheet2.setValue(1, 4, true);
// 三态 - 未选中
var threeStateUnchecked = new spreadNS.CellTypes.CheckBox();
threeStateUnchecked.isThreeState(true);
threeStateUnchecked.textTrue("已选中");
threeStateUnchecked.textFalse("未选中");
threeStateUnchecked.textIndeterminate("不确定");
sheet2.setCellType(1, 5, threeStateUnchecked);
sheet2.setValue(1, 5, false);
// 三态 - 不确定
var threeStateIndeterminate = new spreadNS.CellTypes.CheckBox();
threeStateIndeterminate.isThreeState(true);
threeStateIndeterminate.textTrue("已选中");
threeStateIndeterminate.textFalse("未选中");
threeStateIndeterminate.textIndeterminate("不确定");
sheet2.setCellType(1, 6, threeStateIndeterminate);
sheet2.setValue(1, 6, null);
// 第 2 行：文本对齐 - 4 个示例
sheet2.setValue(2, 1, "文本对齐");
var textAlignTop = new spreadNS.CellTypes.CheckBox();
textAlignTop.caption("顶部");
textAlignTop.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.top);
sheet2.setCellType(2, 2, textAlignTop);
var textAlignBottom = new spreadNS.CellTypes.CheckBox();
textAlignBottom.caption("底部");
textAlignBottom.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.bottom);
sheet2.setCellType(2, 3, textAlignBottom);
var textAlignLeft = new spreadNS.CellTypes.CheckBox();
textAlignLeft.caption("左侧");
textAlignLeft.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.left);
sheet2.setCellType(2, 4, textAlignLeft);
var textAlignRight = new spreadNS.CellTypes.CheckBox();
textAlignRight.caption("右侧");
textAlignRight.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.right);
sheet2.setCellType(2, 5, textAlignRight);
// 第 3 行：自动换行
sheet2.setValue(3, 1, "自动换行");
var textWrapCellType = new spreadNS.CellTypes.CheckBox();
textWrapCellType.caption("这是一段很长很长的文本");
sheet2.setCellType(3, 2, textWrapCellType);
sheet2.getCell(3, 2).wordWrap(true);
// 第 4 行：命中测试模式 - 2 个示例
sheet2.setValue(4, 1, "命中测试模式");
var hitTestCell = new spreadNS.CellTypes.CheckBox();
hitTestCell.hitTestMode("cell");
hitTestCell.caption("点击单元格");
sheet2.setCellType(4, 2, hitTestCell);
var hitTestCheckbox = new spreadNS.CellTypes.CheckBox();
hitTestCheckbox.hitTestMode("checkbox");
hitTestCheckbox.caption("仅点击复选框");
sheet2.setCellType(4, 3, hitTestCheckbox);
// 第 5 行：文本可编辑 - 2 个示例
sheet2.setValue(5, 1, "文本可编辑");
var textEditableTrue = new spreadNS.CellTypes.CheckBox();
textEditableTrue.textEditable(true);
textEditableTrue.caption("可进入编辑模式");
sheet2.setCellType(5, 2, textEditableTrue);
var textEditableFalse = new spreadNS.CellTypes.CheckBox();
textEditableFalse.textEditable(false);
textEditableFalse.caption("不可进入编辑模式");
sheet2.setCellType(5, 3, textEditableFalse);
// 第 6 行：复选框大小 - 5 个示例
sheet2.setValue(6, 1, "复选框大小");
var boxSize10 = new spreadNS.CellTypes.CheckBox();
boxSize10.textTrue("大小 10");
boxSize10.textFalse("大小 10");
boxSize10.boxSize(10);
sheet2.setCellType(6, 2, boxSize10);
var boxSize16 = new spreadNS.CellTypes.CheckBox();
boxSize16.textTrue("大小 16");
boxSize16.textFalse("大小 16");
boxSize16.boxSize(16);
sheet2.setCellType(6, 3, boxSize16);
var boxSize20 = new spreadNS.CellTypes.CheckBox();
boxSize20.textTrue("大小 20");
boxSize20.textFalse("大小 20");
boxSize20.boxSize(20);
sheet2.setCellType(6, 4, boxSize20);
var boxSize24 = new spreadNS.CellTypes.CheckBox();
boxSize24.textTrue("大小 24");
boxSize24.textFalse("大小 24");
boxSize24.boxSize(24);
sheet2.setCellType(6, 5, boxSize24);
var boxSizeAuto = new spreadNS.CellTypes.CheckBox();
boxSizeAuto.textTrue("自动大小");
boxSizeAuto.textFalse("自动大小");
boxSizeAuto.boxSize("auto");
sheet2.setCellType(6, 6, boxSizeAuto);
sheet2.resumePaint();
}
function initModernSheet(spread) {
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(2);
sheet.name("现代模式");
sheet.defaults.colWidth = 190;
sheet.defaults.rowHeight = 60;
sheet.suspendPaint();
sheet.bind(spreadNS.Events.SelectionChanged, function () {
propertyChange(spread, false);
});
sheet.setColumnWidth(0, 110);
sheet.setColumnWidth(1, 190);
sheet.setColumnWidth(2, 145);
sheet.setColumnWidth(3, 170);
sheet.setColumnWidth(4, 130);
sheet.setColumnWidth(5, 130);
sheet.setColumnWidth(6, 130);
for (let i = 0; i < 8; i++) {
sheet.setRowHeight(i, 60);
}
sheet.addSpan(0, 0, 8, 1);
sheet.setValue(0, 0, "现代模式");
sheet.setStyle(0, 0, initCellStyle(11, "Accent 1"));
sheet.setStyle(0, 1, initCellStyle(11, "Accent 6"));
sheet.setStyle(1, 1, initCellStyle(11, "#FF0000"));
sheet.setStyle(2, 1, initCellStyle(11, "Accent 5"));
sheet.setStyle(3, 1, initCellStyle(11, "Accent 4"));
sheet.setStyle(4, 1, initCellStyle(11, "Accent 2"));
sheet.setStyle(5, 1, initCellStyle(11, "Accent 3"));
sheet.setStyle(6, 1, initCellStyle(11, "Accent 1"));
sheet.setStyle(7, 1, initCellStyle(11, "Accent 2"));
sheet.getCell(0, 0).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
for (let i = 0; i < 8; i++) {
for (let j = 1; j < 7; j++) {
sheet.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
}
// 第 0 行：标题
sheet.setValue(0, 1, "标题");
var captionCellType = new spreadNS.CellTypes.CheckBox();
captionCellType.mode("modern");
captionCellType.caption("标题");
sheet.setCellType(0, 2, captionCellType);
// 第 1 行：三态 - 5 个示例
sheet.setValue(1, 1, "三态");
// 两态 - 已选中
var twoStateChecked = new spreadNS.CellTypes.CheckBox();
twoStateChecked.mode("modern");
twoStateChecked.isThreeState(false);
twoStateChecked.textTrue("已选中");
twoStateChecked.textFalse("未选中");
sheet.setCellType(1, 2, twoStateChecked);
sheet.setValue(1, 2, true);
// 两态 - 未选中
var twoStateUnchecked = new spreadNS.CellTypes.CheckBox();
twoStateUnchecked.mode("modern");
twoStateUnchecked.isThreeState(false);
twoStateUnchecked.textTrue("已选中");
twoStateUnchecked.textFalse("未选中");
sheet.setCellType(1, 3, twoStateUnchecked);
sheet.setValue(1, 3, false);
// 三态 - 已选中
var threeStateChecked = new spreadNS.CellTypes.CheckBox();
threeStateChecked.mode("modern");
threeStateChecked.isThreeState(true);
threeStateChecked.textTrue("已选中");
threeStateChecked.textFalse("未选中");
threeStateChecked.textIndeterminate("不确定");
sheet.setCellType(1, 4, threeStateChecked);
sheet.setValue(1, 4, true);
// 三态 - 未选中
var threeStateUnchecked = new spreadNS.CellTypes.CheckBox();
threeStateUnchecked.mode("modern");
threeStateUnchecked.isThreeState(true);
threeStateUnchecked.textTrue("已选中");
threeStateUnchecked.textFalse("未选中");
threeStateUnchecked.textIndeterminate("不确定");
sheet.setCellType(1, 5, threeStateUnchecked);
sheet.setValue(1, 5, false);
// 三态 - 不确定
var threeStateIndeterminate = new spreadNS.CellTypes.CheckBox();
threeStateIndeterminate.mode("modern");
threeStateIndeterminate.isThreeState(true);
threeStateIndeterminate.textTrue("已选中");
threeStateIndeterminate.textFalse("未选中");
threeStateIndeterminate.textIndeterminate("不确定");
sheet.setCellType(1, 6, threeStateIndeterminate);
sheet.setValue(1, 6, null);
// 第 2 行：文本对齐 - 4 个示例
sheet.setValue(2, 1, "文本对齐");
var textAlignTop = new spreadNS.CellTypes.CheckBox();
textAlignTop.mode("modern");
textAlignTop.caption("顶部");
textAlignTop.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.top);
sheet.setCellType(2, 2, textAlignTop);
var textAlignBottom = new spreadNS.CellTypes.CheckBox();
textAlignBottom.mode("modern");
textAlignBottom.caption("底部");
textAlignBottom.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.bottom);
sheet.setCellType(2, 3, textAlignBottom);
var textAlignLeft = new spreadNS.CellTypes.CheckBox();
textAlignLeft.mode("modern");
textAlignLeft.caption("左侧");
textAlignLeft.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.left);
sheet.setCellType(2, 4, textAlignLeft);
var textAlignRight = new spreadNS.CellTypes.CheckBox();
textAlignRight.mode("modern");
textAlignRight.caption("右侧");
textAlignRight.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.right);
sheet.setCellType(2, 5, textAlignRight);
// 第 3 行：自动换行
sheet.setValue(3, 1, "自动换行");
var textWrapCellType = new spreadNS.CellTypes.CheckBox();
textWrapCellType.mode("modern");
textWrapCellType.caption("这是一段很长很长的文本");
sheet.setCellType(3, 2, textWrapCellType);
sheet.getCell(3, 2).wordWrap(true);
// 第 4 行：命中测试模式 - 2 个示例
sheet.setValue(4, 1, "命中测试模式");
var hitTestCell = new spreadNS.CellTypes.CheckBox();
hitTestCell.mode("modern");
hitTestCell.hitTestMode("cell");
hitTestCell.caption("点击单元格");
sheet.setCellType(4, 2, hitTestCell);
var hitTestCheckbox = new spreadNS.CellTypes.CheckBox();
hitTestCheckbox.mode("modern");
hitTestCheckbox.hitTestMode("checkbox");
hitTestCheckbox.caption("仅点击复选框");
sheet.setCellType(4, 3, hitTestCheckbox);
// 第 5 行：文本可编辑 - 2 个示例
sheet.setValue(5, 1, "文本可编辑");
var textEditableTrue = new spreadNS.CellTypes.CheckBox();
textEditableTrue.mode("modern");
textEditableTrue.textEditable(true);
textEditableTrue.caption("可进入编辑模式");
sheet.setCellType(5, 2, textEditableTrue);
var textEditableFalse = new spreadNS.CellTypes.CheckBox();
textEditableFalse.mode("modern");
textEditableFalse.textEditable(false);
textEditableFalse.caption("不可进入编辑模式");
sheet.setCellType(5, 3, textEditableFalse);
// 第 6 行：复选框大小 - 5 个示例
sheet.setValue(6, 1, "复选框大小");
var boxSize10 = new spreadNS.CellTypes.CheckBox();
boxSize10.mode("modern");
boxSize10.textTrue("大小 10");
boxSize10.textFalse("大小 10");
boxSize10.boxSize(10);
sheet.setCellType(6, 2, boxSize10);
var boxSize16 = new spreadNS.CellTypes.CheckBox();
boxSize16.mode("modern");
boxSize16.textTrue("大小 16");
boxSize16.textFalse("大小 16");
boxSize16.boxSize(16);
sheet.setCellType(6, 3, boxSize16);
var boxSize20 = new spreadNS.CellTypes.CheckBox();
boxSize20.mode("modern");
boxSize20.textTrue("大小 20");
boxSize20.textFalse("大小 20");
boxSize20.boxSize(20);
sheet.setCellType(6, 4, boxSize20);
var boxSize24 = new spreadNS.CellTypes.CheckBox();
boxSize24.mode("modern");
boxSize24.textTrue("大小 24");
boxSize24.textFalse("大小 24");
boxSize24.boxSize(24);
sheet.setCellType(6, 5, boxSize24);
var boxSizeAuto = new spreadNS.CellTypes.CheckBox();
boxSizeAuto.mode("modern");
boxSizeAuto.textTrue("自动大小");
boxSizeAuto.textFalse("自动大小");
boxSizeAuto.boxSize("auto");
sheet.setCellType(6, 6, boxSizeAuto);
// 第 7 行：颜色 - 4 个示例（在现代模式下，foreColor 会影响复选框边框和填充颜色）
sheet.setValue(7, 1, "颜色");
var colorDefault = new spreadNS.CellTypes.CheckBox();
colorDefault.mode("modern");
colorDefault.textTrue("默认");
colorDefault.textFalse("默认");
sheet.setCellType(7, 2, colorDefault);
var colorRed = new spreadNS.CellTypes.CheckBox();
colorRed.mode("modern");
colorRed.textTrue("红色");
colorRed.textFalse("红色");
sheet.setCellType(7, 3, colorRed);
sheet.getCell(7, 3).foreColor("red");
var colorBlue = new spreadNS.CellTypes.CheckBox();
colorBlue.mode("modern");
colorBlue.textTrue("蓝色");
colorBlue.textFalse("蓝色");
sheet.setCellType(7, 4, colorBlue);
sheet.getCell(7, 4).foreColor("blue");
var colorGreen = new spreadNS.CellTypes.CheckBox();
colorGreen.mode("modern");
colorGreen.textTrue("绿色");
colorGreen.textFalse("绿色");
sheet.setCellType(7, 5, colorGreen);
sheet.getCell(7, 5).foreColor("green");
sheet.resumePaint();
}
function initCheckboxUsageSheet(spread) {
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(3);
sheet.name("复选框用法");
sheet.suspendPaint();
// 定义任务数据
var tasks = [
{ task: "首页", plan: true, design: true, dev: true, test: true, deploy: true },
{ task: "产品页", plan: true, design: true, dev: true, test: false, deploy: false },
{ task: "结算页", plan: true, design: true, dev: false, test: false, deploy: false },
{ task: "用户资料", plan: true, design: false, dev: false, test: false, deploy: false },
{ task: "管理后台", plan: false, design: false, dev: false, test: false, deploy: false },
{ task: "API 网关", plan: true, design: true, dev: true, test: true, deploy: false }
];
// 设置列宽
sheet.setColumnWidth(0, 200); // 任务
sheet.setColumnWidth(1, 80);  // 规划
sheet.setColumnWidth(2, 80);  // 设计
sheet.setColumnWidth(3, 80);  // 开发
sheet.setColumnWidth(4, 80);  // 测试
sheet.setColumnWidth(5, 80);  // 发布
sheet.setColumnWidth(6, 120); // 进度
sheet.setColumnWidth(7, 100); // 状态
// 设置行高
sheet.setRowHeight(0, 40);
sheet.setRowHeight(1, 30);
for (var i = 2; i < 8; i++) {
sheet.setRowHeight(i, 35);
}
// 表头行（第 0 行）- “任务进度追踪”
sheet.addSpan(0, 0, 1, 8);
sheet.setValue(0, 0, "任务进度追踪");
var headerStyle = new spreadNS.Style();
headerStyle.backColor = "#2E5090";
headerStyle.foreColor = "#FFFFFF";
headerStyle.hAlign = spreadNS.HorizontalAlign.center;
headerStyle.vAlign = spreadNS.VerticalAlign.center;
headerStyle.font = "bold 14pt Calibri";
sheet.setStyle(0, 0, headerStyle);
// 列标题行（第 1 行）
var columnHeaders = ["任务", "规划", "设计", "开发", "测试", "发布", "进度", "状态"];
var columnHeaderStyle = new spreadNS.Style();
columnHeaderStyle.backColor = "#4472C4";
columnHeaderStyle.foreColor = "#FFFFFF";
columnHeaderStyle.hAlign = spreadNS.HorizontalAlign.center;
columnHeaderStyle.vAlign = spreadNS.VerticalAlign.center;
columnHeaderStyle.font = "bold 11pt Calibri";
for (var col = 0; col < columnHeaders.length; col++) {
sheet.setValue(1, col, columnHeaders[col]);
sheet.setStyle(1, col, columnHeaderStyle);
}
// 创建现代模式复选框单元格类型
var checkboxCellType = new spreadNS.CellTypes.CheckBox();
checkboxCellType.mode("modern");
checkboxCellType.textTrue("");
checkboxCellType.textFalse("");
checkboxCellType.textEditable(false);
// 所有单元格居中样式
var centerStyle = new spreadNS.Style();
centerStyle.hAlign = spreadNS.HorizontalAlign.center;
centerStyle.vAlign = spreadNS.VerticalAlign.center;
// 填充数据行
for (var i = 0; i < tasks.length; i++) {
var rowIndex = i + 2; // 数据从第 2 行开始
var task = tasks[i];
// 第 0 列：任务名称
sheet.setValue(rowIndex, 0, task.task);
sheet.getCell(rowIndex, 0).hAlign(spreadNS.HorizontalAlign.center);
sheet.getCell(rowIndex, 0).vAlign(spreadNS.VerticalAlign.center);
// 第 1-5 列：复选框（规划、设计、开发、测试、发布）
var checkboxColumns = [
{ col: 1, value: task.plan },
{ col: 2, value: task.design },
{ col: 3, value: task.dev },
{ col: 4, value: task.test },
{ col: 5, value: task.deploy }
];
for (var j = 0; j < checkboxColumns.length; j++) {
sheet.setCellType(rowIndex, checkboxColumns[j].col, checkboxCellType);
sheet.setValue(rowIndex, checkboxColumns[j].col, checkboxColumns[j].value);
// 使用 getCell() 避免覆盖 CellType
sheet.getCell(rowIndex, checkboxColumns[j].col).hAlign(spreadNS.HorizontalAlign.center);
sheet.getCell(rowIndex, checkboxColumns[j].col).vAlign(spreadNS.VerticalAlign.center);
}
// 第 6 列：进度（使用公式自动计算）
var progressFormula = "=COUNTIF(B" + (rowIndex + 1) + ":F" + (rowIndex + 1) + ",TRUE)/5";
sheet.setFormula(rowIndex, 6, progressFormula);
sheet.getCell(rowIndex, 6).formatter("0%");
sheet.getCell(rowIndex, 6).hAlign(spreadNS.HorizontalAlign.center);
sheet.getCell(rowIndex, 6).vAlign(spreadNS.VerticalAlign.center);
// 为进度列添加数据条
var progressRule = new spreadNS.ConditionalFormatting.DataBarRule();
progressRule.ranges([new spreadNS.Range(rowIndex, 6, 1, 1)]);
progressRule.minType(spreadNS.ConditionalFormatting.ScaleValueType.number);
progressRule.minValue(0);
progressRule.maxType(spreadNS.ConditionalFormatting.ScaleValueType.number);
progressRule.maxValue(1);
progressRule.color("#D9D9D9");
progressRule.showBorder(false);
progressRule.showBarOnly(false);
progressRule.gradient(false);
sheet.conditionalFormats.addRule(progressRule);
// 第 7 列：状态（基于进度自动计算）
var statusFormula = '=IF(G' + (rowIndex + 1) + '=1,"已完成",' +
'IF(G' + (rowIndex + 1) + '>=0.8,"接近完成",' +
'IF(G' + (rowIndex + 1) + '>=0.6,"进行中",' +
'IF(G' + (rowIndex + 1) + '>=0.4,"开发中",' +
'IF(G' + (rowIndex + 1) + '>=0.2,"已启动","待开始")))))';
sheet.setFormula(rowIndex, 7, statusFormula);
sheet.getCell(rowIndex, 7).hAlign(spreadNS.HorizontalAlign.center);
sheet.getCell(rowIndex, 7).vAlign(spreadNS.VerticalAlign.center);
}
// 根据进度列设置背景色条件格式
for (var i = 0; i < tasks.length; i++) {
var rowIndex = i + 2;
var progressCell = "$G" + (rowIndex + 1);
var ranges = [new spreadNS.Range(rowIndex, 0, 1, 8)];
var ruleDefault = new spreadNS.ConditionalFormatting.NormalConditionRule();
ruleDefault.ranges(ranges);
ruleDefault.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
ruleDefault.formula(progressCell + "<0.2");
ruleDefault.style(new spreadNS.Style());
ruleDefault.style().backColor = "#F0F0F0";
ruleDefault.style().foreColor = "#757575";
sheet.conditionalFormats.addRule(ruleDefault);
var rule20 = new spreadNS.ConditionalFormatting.NormalConditionRule();
rule20.ranges(ranges);
rule20.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
rule20.formula(progressCell + ">=0.2");
rule20.style(new spreadNS.Style());
rule20.style().backColor = "#FFCDD2";
rule20.style().foreColor = "#D32F2F";
sheet.conditionalFormats.addRule(rule20);
var rule40 = new spreadNS.ConditionalFormatting.NormalConditionRule();
rule40.ranges(ranges);
rule40.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
rule40.formula(progressCell + ">=0.4");
rule40.style(new spreadNS.Style());
rule40.style().backColor = "#FFE0B2";
rule40.style().foreColor = "#E65100";
sheet.conditionalFormats.addRule(rule40);
var rule60 = new spreadNS.ConditionalFormatting.NormalConditionRule();
rule60.ranges(ranges);
rule60.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
rule60.formula(progressCell + ">=0.6");
rule60.style(new spreadNS.Style());
rule60.style().backColor = "#FFF9C4";
rule60.style().foreColor = "#F57F17";
sheet.conditionalFormats.addRule(rule60);
var rule80 = new spreadNS.ConditionalFormatting.NormalConditionRule();
rule80.ranges(ranges);
rule80.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule);
rule80.formula(progressCell + ">=0.8");
rule80.style(new spreadNS.Style());
rule80.style().backColor = "#C8E6C9";
rule80.style().foreColor = "#2E7D32";
sheet.conditionalFormats.addRule(rule80);
}
sheet.resumePaint();
}
function _getElementById(id) {
return document.getElementById(id);
}
function exportToExcel(spread) {
var fileName = "复选框示例.xlsx";
spread.export(function (blob) {
saveAs(blob, fileName);
}, function (error) {
console.error("导出错误:", error);
}, {
fileType: GC.Spread.Sheets.FileType.excel
});
}

<!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 id="panelDescription">在 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="hitTestModeOption" style="display: none;">
<div class="option-row">
<label>命中测试模式:</label>
<select id="selHitTestMode">
<option value="cell">单元格</option>
<option value="checkbox">仅复选框</option>
</select>
</div>
</div>
<div id="textEditableOption" style="display: none;">
<div class="option-row">
<input type="checkbox" id="ckbTextEditable" />
<label for="ckbTextEditable">文本可编辑</label>
</div>
</div>
<div id="boxSizeOption" style="display: none;">
<div class="option-row">
<label>复选框大小:</label>
<input type="text" id="txtBoxSize" />
</div>
<div class="option-row">
<label>标题:</label>
<input type="text" id="txtBoxSizeCaption" />
</div>
</div>
<div id="colorOption" style="display: none;">
<div class="option-row">
<label>标题:</label>
<input type="text" id="txtColorCaption" />
</div>
<div class="option-row">
<label>前景色:</label>
<input type="text" id="txtForeColor" placeholder="#FF0000" />
</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 class="option-row">
<label></label>
<input type="button" id="exportExcel" value="导出到 Excel" />
</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;
}