复选框列表单元格类型

概述本 Demo 展示了复选框列表单元格类型的两种模式及其在实际场景中的应用。Demo 包含一个库存清单表格,通过复选框列表实现数据筛选功能。展示了标准复选框模式和切换开关模式,以及如何动态配置复选框列表的各项属性。实现思路创建工作簿并初始化表格布局,设置行列宽度和单元格样式在第 2 行创建标准复选框列表,用于库存编号选择在第 3 行创建切换开关模式的复选框列表,展示 toggle 模式及其样式定制绑定 ValueChanged 事件,当用户选择选项时触发筛选逻辑使用 HideRowFilter 实现数据筛选,根据选择的库存编号显示对应行代码解析创建标准复选框列表使用 new GC.Spread.Sheets.CellTypes.CheckBoxList() 创建复选框列表单元格类型。items() 方法设置选项列表,每个选项包含 text(显示文本) 和 value(选项值) 属性。使用 setCellType() 方法将其应用到指定单元格。创建切换开关模式的复选框列表通过 mode('toggle') 将复选框列表切换为开关样式。direction() 方法设置排列方向为垂直。toggleOptions() 方法配置切换开关的外观,包括尺寸、颜色和动画效果。trackColorOn 和 trackColorOff 分别设置开关轨道的开启和关闭状态颜色。实现筛选功能使用 HideRowFilter 创建行筛选器并应用到指定范围。绑定 ValueChanged 事件,当用户选择复选框列表时触发筛选。两个筛选行通过 setValue 实现联动。removeFilterItems(1) 清除之前的筛选条件,然后根据选择的值创建文本条件并添加到筛选器。最后调用 filter(1) 执行筛选。右侧配置面板的实现 Demo 在右侧提供了配置面板,允许用户动态修改复选框列表的属性：添加/移除选项项目切换 checkbox 和 toggle 模式设置排列方向（水平/垂直）配置文本对齐方式启用/禁用流式布局设置最大行数/列数调整项目间距和复选框大小定制切换开关的颜色、圆角和动画时长用户修改配置后点击"设置"按钮,applySetting() 函数会创建新的 CheckBoxList 实例并应用到当前选中单元格。运行效果表格展示库存清单数据,包含库存编号、名称、单价、库存数量等信息第 2 行使用标准复选框列表,提供库存编号的多选功能第 3 行使用切换开关模式,以开关样式显示选项点击复选框或开关选择库存编号后,表格自动筛选显示对应的库存数据行两个筛选行的选择会相互联动同步点击表格中的复选框列表单元格后,右侧面板显示当前配置可在右侧面板修改各项属性并点击"设置"按钮应用到单元格 API 参考 CheckBoxList 构造函数创建一个复选框列表单元格类型实例。 items() 方法设置复选框列表的选项数组。 text: 选项显示文本 value: 选项值 mode() 方法设置显示模式。 direction() 方法设置选项排列方向。 textAlign() 方法设置文本对齐方式。 isFlowLayout() 方法设置是否使用流式布局自动适配。 maxRowCount() 和 maxColumnCount() 方法设置最大行数或列数（仅在禁用流式布局时生效）。 itemSpacing() 方法设置选项之间的水平和垂直间距。 boxSize() 方法设置复选框大小（仅在 checkbox 模式下有效）。 toggleOptions() 方法设置切换开关的样式选项（仅在 toggle 模式下有效）。 setCellType() 方法为指定单元格设置单元格类型。 row: 行索引 col: 列索引 cellType: 单元格类型对象 sheetArea: 可选,指定表单区域

var spread;
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
initSpread(spread);
initEvent(spread);
readSetting(new GC.Spread.Sheets.CellTypes.CheckBoxList());
};
function initCellStyle(fontSize, foreColor = '#000000', backColor = '#ffffff', bold=true) {
const style = new GC.Spread.Sheets.Style();
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.font = `${bold ? 'bold' : 'normal'} ${fontSize}pt Calibri`;
style.foreColor = foreColor;
style.backColor = backColor;
return style;
}
function initLayoutStyle(sheet) {
sheet.setRowCount(11);
sheet.setColumnCount(10);
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
sheet.setRowHeight(0, 30);
sheet.setRowHeight(1, 50);
sheet.setRowHeight(2, 40);
sheet.setRowHeight(3, 40);
sheet.setRowHeight(4, 40);
sheet.setRowHeight(5, 40);
sheet.setRowHeight(6, 40);
sheet.setRowHeight(7, 40);
sheet.setRowHeight(8, 40);
sheet.setRowHeight(9, 40);
sheet.setRowHeight(10, 30);
sheet.setColumnWidth(0, 30);
sheet.setColumnWidth(1, 110);
sheet.setColumnWidth(2, 100);
sheet.setColumnWidth(3, 100);
sheet.setColumnWidth(4, 100);
sheet.setColumnWidth(5, 100);
sheet.setColumnWidth(6, 100);
sheet.setColumnWidth(7, 100);
sheet.setColumnWidth(8, 100);
sheet.setColumnWidth(9, 30);
sheet.addSpan(1, 1, 1, 8);
sheet.setValue(1, 1, "库存清单");
sheet.getCell(1, 1).setStyle(initCellStyle(24, "Text 2 -50", "Text 2 40"));
sheet.setValue(2, 1, "筛选行");
sheet.getCell(2, 1).setStyle(initCellStyle(11, "Text 2 -50", "Text 2 40"));
sheet.addSpan(2, 2, 1, 7);
sheet.getCell(2, 2).setStyle(initCellStyle(11, "Text 2 -50", "Text 2 80"));
sheet.getCell(2, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.left);
sheet.setValue(3, 1, "筛选行");
sheet.getCell(3, 1).setStyle(initCellStyle(11, "Text 2 -50", "Text 2 40"));
sheet.addSpan(3, 2, 1, 7);
sheet.getCell(3, 2).setStyle(initCellStyle(11, "Text 2 -50", "Text 2 80"));
sheet.getCell(3, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.left);
}
function initData(sheet) {
sheet.setValue(4, 1, "库存编号");
sheet.setValue(4, 2, "名称");
sheet.setValue(4, 3, "单价");
sheet.setValue(4, 4, "库存数量");
sheet.setValue(4, 5, "库存价值");
sheet.setValue(4, 6, "补货下限");
sheet.setValue(4, 7, "补货周期(天)");
sheet.setValue(4, 8, "补货数量");
sheet.setValue(2, 2, ['1', '2', '3', '4', '5']);
sheet.setValue(3, 2, ['1', '2', '3', '4', '5']);
sheet.setValue(5, 1, "IN0001");
sheet.setValue(5, 2, "物品1");
sheet.setValue(5, 3, "51");
sheet.setValue(5, 4, "25");
sheet.setValue(5, 5, "1275");
sheet.setValue(5, 6, "29");
sheet.setValue(5, 7, "13");
sheet.setValue(5, 8, "50");
sheet.setValue(6, 1, "IN0002");
sheet.setValue(6, 2, "物品2");
sheet.setValue(6, 3, "93");
sheet.setValue(6, 4, "132");
sheet.setValue(6, 5, "12276");
sheet.setValue(6, 6, "231");
sheet.setValue(6, 7, "4");
sheet.setValue(6, 8, "50");
sheet.setValue(7, 1, "IN0003");
sheet.setValue(7, 2, "物品3");
sheet.setValue(7, 3, "57");
sheet.setValue(7, 4, "151");
sheet.setValue(7, 5, "8607");
sheet.setValue(7, 6, "114");
sheet.setValue(7, 7, "11");
sheet.setValue(7, 8, "150");
sheet.setValue(8, 1, "IN0004");
sheet.setValue(8, 2, "物品4");
sheet.setValue(8, 3, "75");
sheet.setValue(8, 4, "62");
sheet.setValue(8, 5, "4650");
sheet.setValue(8, 6, "39");
sheet.setValue(8, 7, "12");
sheet.setValue(8, 8, "50");
sheet.setValue(9, 1, "IN0005");
sheet.setValue(9, 2, "物品5");
sheet.setValue(9, 3, "100");
sheet.setValue(9, 4, "100");
sheet.setValue(9, 5, "10000");
sheet.setValue(9, 6, "100");
sheet.setValue(9, 7, "10");
sheet.setValue(9, 8, "100");
for(var i = 1; i < 9; i++) {
sheet.getCell(4, i).setStyle(initCellStyle(11, "Accent 1 -75", "Text 2 60"));
for(var j = 5; j < 10; j++) {
sheet.getCell(j, i).setStyle(initCellStyle(11, undefined, "Accent 1 80", false));
}
}
for (let i = 4; i < 10; i++) {
for(var j = 1; j < 10; j++) {
sheet.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.left).vAlign(GC.Spread.Sheets.VerticalAlign.center);
sheet.getCell(i, j).wordWrap(true);
}
}
}
function bindEvent(spread) {
let sheet = spread.getActiveSheet();
var range = new GC.Spread.Sheets.Range(5, 1, 5, 1);
var rowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(range);
sheet.rowFilter(rowFilter);
rowFilter.filterButtonVisible(false);
spread.bind(GC.Spread.Sheets.Events.ValueChanged, function (e, info) {
if ((info.row === 2 || info.row === 3) && info.col === 2) {
if (info.row === 2) {
sheet.setValue(3, 2, info.newValue);
} else {
sheet.setValue(2, 2, info.newValue);
}
rowFilter.removeFilterItems(1);
if (info.newValue.length > 0) {
for(var i = 0; i < info.newValue.length; i++) {
var condition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.textCondition, {
compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType.equalsTo,
expected: 'IN000' + info.newValue[i]
});
rowFilter.addFilterItem(1, condition);
}
}
rowFilter.filter(1);
sheet.invalidateLayout();
sheet.repaint();
}
});
}
function initSpread(spread) {
var sheet = spread.getSheet(0);
sheet.suspendPaint();
bindEvent(spread);
initLayoutStyle(sheet);
var radio = new GC.Spread.Sheets.CellTypes.CheckBoxList();
radio.items([
{ text: "IN0001", value: "1" },
{ text: "IN0002", value: "2" },
{ text: "IN0003", value: "3" },
{ text: "IN0004", value: "4" },
{ text: "IN0005", value: "5" },
]);
sheet.setCellType(2, 2, radio);
sheet.getCell(2, 2).vAlign(GC.Spread.Sheets.VerticalAlign.center);
var toggle = new GC.Spread.Sheets.CellTypes.CheckBoxList();
toggle.items([
{ text: "IN0001", value: "1" },
{ text: "IN0002", value: "2" },
{ text: "IN0003", value: "3" },
{ text: "IN0004", value: "4" },
{ text: "IN0005", value: "5" },
]);
toggle.mode('toggle');
toggle.direction(GC.Spread.Sheets.CellTypes.Direction.vertical);
toggle.toggleOptions({
width: 30,
height: 15,
animationDuration: 300,
trackColorOn: "Text 2 40",
trackColorOff: "Background 2 -10",
sliderColorOn: "Text 2 -50",
sliderColorOff: "Background 1",
});
sheet.setCellType(3, 2, toggle);
sheet.getCell(3, 2).vAlign(GC.Spread.Sheets.VerticalAlign.center);
initData(sheet);
sheet.resumePaint();
};
function initEvent(spread) {
spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function () {
var sheet = spread.getActiveSheet();
var row = sheet.getActiveRowIndex();
var column = sheet.getActiveColumnIndex();
var cellType = sheet.getCellType(row, column);
if (cellType instanceof GC.Spread.Sheets.CellTypes.CheckBoxList) {
readSetting(cellType);
} else {
readSetting(new GC.Spread.Sheets.CellTypes.CheckBoxList());
}
});
_getElementById("apply").addEventListener('click', function () {
applySetting();
});
_getElementById("addItem").addEventListener('click', function () {
var select = _getElementById("items");
var d = new Date();
d.setMonth(d.getMonth() + select.length);
var str = d.getFullYear() + "-" + (d.getMonth() + 1);
_getElementById("items").add(new Option(str, select.length));
});
_getElementById("removeItem").addEventListener('click', function () {
var select = _getElementById("items");
select[select.length - 1].remove();
});
_getElementById("direction-horizontal").addEventListener('change', function () {
refreshMaxCountVisible();
});
_getElementById("direction-vertical").addEventListener('change', function () {
refreshMaxCountVisible();
});
_getElementById("isFlowLayout").addEventListener('change', function () {
refreshMaxCountVisible();
});
_getElementById("boxSize").addEventListener('change', function () {
applySetting();
})
_getElementById("checkBoxListMode").addEventListener('change', function () {
const mode = _getElementById("checkBoxListMode").value;
const cellType = new GC.Spread.Sheets.CellTypes.CheckBoxList();
cellType.mode(mode);
var select = _getElementById("items");
var items = [];
for (var i = 0; i < select.length; i++) {
items.push({ text: select[i].text, value: select[i].value });
}
cellType.items(items);
readSetting(cellType);
})
_getElementById("toggleCheckBoxCellAutoSize").addEventListener('change', function (e) {
_getElementById("toggleCheckBoxCellWidth").toggleAttribute('disabled', e.target.checked);
_getElementById("toggleCheckBoxCellHeight").toggleAttribute('disabled', e.target.checked);
})
};
function readSetting(cellType) {
var select = _getElementById("items");
select.options.length = 0;
var items = cellType.items();
for(var i=0; i<items.length; i++){
select.add(new Option(items[i].text, items[i].value));
}
if(cellType.direction() === GC.Spread.Sheets.CellTypes.Direction.horizontal) {
_getElementById("direction-horizontal").checked = true;
} else {
_getElementById("direction-vertical").checked = true;
}
var currentMode = cellType.mode();
_getElementById("checkBoxListMode").value = currentMode;
if (currentMode === 'toggle') {
_getElementById("toggleOptions").style.display = 'block';
_getElementById("checkboxListBoxSize").style.display = 'none';
_getElementById("checkboxTextAlign").style.display = 'none';
_getElementById("toggleTextAlign").style.display = 'block';
} else {
_getElementById("toggleOptions").style.display = 'none';
_getElementById("checkboxListBoxSize").style.display = 'block';
_getElementById("checkboxTextAlign").style.display = 'block';
_getElementById("toggleTextAlign").style.display = 'none';
}
const textAlignId = currentMode === 'toggle' ? 'toggle-textAlign-' : 'textAlign-';
if(cellType.textAlign() === GC.Spread.Sheets.CellTypes.TextAlign.right) {
_getElementById(textAlignId + 'right').checked = true;
} else if(cellType.textAlign() === GC.Spread.Sheets.CellTypes.TextAlign.inside) {
_getElementById(textAlignId + 'inside').checked = true;
} else {
_getElementById(textAlignId + 'left').checked = true;
}
_getElementById("isFlowLayout").checked = cellType.isFlowLayout();
_getElementById("rowCount").value = cellType.maxRowCount();
_getElementById("columnCount").value = cellType.maxColumnCount();
_getElementById("space-horizontal").value = cellType.itemSpacing().horizontal;
_getElementById("space-vertical").value = cellType.itemSpacing().vertical;
_getElementById("boxSize").value = cellType.boxSize();
refreshMaxCountVisible();
}
function refreshMaxCountVisible() {
if (_getElementById("isFlowLayout").checked) {
_getElementById("rowCountDiv").style.display="none";
_getElementById("columnCountDiv").style.display="none";
} else if (_getElementById("direction-vertical").checked) {
_getElementById("rowCountDiv").style.display="block";
_getElementById("columnCountDiv").style.display="none";
} else {
_getElementById("rowCountDiv").style.display="none";
_getElementById("columnCountDiv").style.display="block";
}
}
function applySetting() {
var sheet = spread.getActiveSheet();
var row = sheet.getActiveRowIndex();
var column = sheet.getActiveColumnIndex();
var cellType = new GC.Spread.Sheets.CellTypes.CheckBoxList();
const mode = _getElementById("checkBoxListMode").value;
cellType.mode(mode);
var items = [];
var select = _getElementById("items");
for (var i = 0; i < select.length; i++) {
items.push({ text: select[i].text, value: select[i].value });
}
cellType.items(items);
if (_getElementById("direction-horizontal").checked) {
cellType.direction(GC.Spread.Sheets.CellTypes.Direction.horizontal);
} else {
cellType.direction(GC.Spread.Sheets.CellTypes.Direction.vertical);
}
cellType.isFlowLayout(_getElementById("isFlowLayout").checked);
if (_getElementById("rowCount").value) {
cellType.maxRowCount(_getElementById("rowCount").value);
}
if (_getElementById("columnCount").value) {
cellType.maxColumnCount(_getElementById("columnCount").value);
}
cellType.itemSpacing({
horizontal: _getElementById("space-horizontal").value,
vertical: _getElementById("space-vertical").value
});
if (mode === 'toggle') {
const sliderRadius = _getElementById("toggleCheckBoxCellSliderRadius").value;
const trackRadius = _getElementById("toggleCheckBoxCellTrackRadius").value;
cellType.toggleOptions({
autoSize: _getElementById("toggleCheckBoxCellAutoSize").checked,
width: _getElementById("toggleCheckBoxCellWidth").value - 0,
height: _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,
});
if (_getElementById("toggle-textAlign-right").checked) {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.right);
} else if (_getElementById("toggle-textAlign-inside").checked) {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.inside);
} else {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.left);
}
} else {
if (_getElementById("textAlign-right").checked) {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.right);
} else {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.left);
}
var boxSizeValue = _getElementById("boxSize").value;
var boxSize = Number(boxSizeValue);
if (isNaN(boxSize)) {
cellType.boxSize(boxSizeValue);
} else {
cellType.boxSize(boxSize);
}
}
sheet.getCell(row, column).cellType(cellType);
}
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">
<p>修改以下任何选项，然后按“设置”按钮应用更改。</p>
<label>项目：</label>
</div>
<div class="option-row">
<select id="items" size="5"></select>
<input type="button" id="addItem" value="添加" />
<input type="button" id="removeItem" value="移除" />
</div>
<hr>
<div class="option-row">
<label>方向：</label>
</div>
<div class="option-row">
<select id="checkBoxListMode">
<option value="checkbox" selected="selected">复选框</option>
<option value="toggle">切换</option>
</select>
</div>
<div class="option-row">
<label>排列方向：</label>
</div>
<div class="option-row">
<input type="radio" name="direction" id="direction-horizontal" checked="checked" /><label
for="direction-horizontal">水平</label>
<input type="radio" name="direction" id="direction-vertical" /><label
for="direction-vertical">垂直</label>
</div>
<div class="option-row">
<label>文本对齐：</label>
</div>
<div id="checkboxTextAlign" class="option-row">
<input type="radio" name="textAlign" id="textAlign-left" checked="checked" /><label
for="textAlign-left">左对齐</label>
<input type="radio" name="textAlign" id="textAlign-right" /><label for="textAlign-right">右对齐</label>
</div>
<div id="toggleTextAlign" class="option-row" style="display: none;">
<input type="radio" name="textAlign" id="toggle-textAlign-left" checked="checked" /><label
for="toggle-textAlign-left">左对齐</label>
<input type="radio" name="textAlign" id="toggle-textAlign-right" /><label
for="toggle-textAlign-right">右对齐</label>
<input type="radio" name="textAlign" id="toggle-textAlign-inside" /><label
for="toggle-textAlign-inside">内部</label>
</div>
<hr>
<div class="option-row">
<label for="isFlowLayout">流式布局</label>
<input type="checkbox" id="isFlowLayout" checked />
</div>
<div class="option-row" id="rowCountDiv">
<label for="rowCount">最大行数：</label>
<input type="text" id="rowCount" value="2" />
</div>
<div class="option-row" id="columnCountDiv">
<label for="columnCount">最大列数：</label>
<input type="text" id="columnCount" value="2" />
</div>
<div class="option-row">
<label for="space-horizontal">项目水平间距：</label>
<input type="text" id="space-horizontal" value="8" />
</div>
<div class="option-row">
<label for="space-vertical">项目垂直间距：</label>
<input type="text" id="space-vertical" value="2" />
</div>
<hr>
<div id="checkboxListBoxSize" class="option-row">
<label for="boxSize">框大小</label>
<input type="text" id="boxSize" class="boxSize" />
</div>
<div id="toggleOptions" class="option-row" style="display: none;">
<label class="toggle-checkbox-cell-auto-size"><input type="checkbox"
id="toggleCheckBoxCellAutoSize" />自动大小</label>
<label>宽度：</label>
<input type="text" id="toggleCheckBoxCellWidth" value="30" />
<label>高度：</label>
<input type="text" id="toggleCheckBoxCellHeight" value="15" />
<label>滑块边距：</label>
<input type="text" id="toggleCheckBoxCellSliderMargin" value="2" />
<label>滑块圆角：</label>
<input type="text" id="toggleCheckBoxCellSliderRadius" value="" />
<label>轨道圆角：</label>
<input type="text" id="toggleCheckBoxCellTrackRadius" value="" />
<label>滑块开启颜色：</label>
<input type="text" id="toggleCheckBoxCellSliderColorOn" value="#1565c0" />
<label>滑块关闭颜色：</label>
<input type="text" id="toggleCheckBoxCellSliderColorOff" value="#ffffff" />
<label>轨道开启颜色：</label>
<input type="text" id="toggleCheckBoxCellTrackColorOn" value="#8cbae8" />
<label>轨道关闭颜色：</label>
<input type="text" id="toggleCheckBoxCellTrackColorOff" value="#9e9e9e" />
<label>动画时长：</label>
<input type="text" id="toggleCheckBoxCellAnimationDuration" value="300" />
</div>
<div class="option-row">
<input type="button" id="apply" 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;
}
.boxSize{
display: block;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.disabled{
opacity: 0.5;
pointer-events: none;
}
.option-row {
font-size: 14px;
padding: 5px;
}
.option-row {
padding-bottom: 5px;
}
label {
display:inline-block;
}
input{
padding: 4px 8px;
box-sizing: border-box;
}
select{
width: 100%;
}
input[type=checkbox]+label {
display: inline-block;
width: auto;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

SpreadJS 在线示例