按钮列表单元格类型

概述本 Demo 展示了 ButtonList 单元格类型的创建和配置方法。Demo 在单元格中创建了一个包含三个选项的按钮列表，并通过右侧的配置面板提供实时调整功能，包括选择模式、布局方向、流式布局、间距、颜色等多项属性的动态修改。实现思路初始化时创建 ButtonList 实例，设置三个默认选项（sample1、sample2、sample3）将 ButtonList 设置为指定单元格的类型监听单元格选择变化事件，当选中 ButtonList 单元格时读取其配置并显示在右侧面板通过右侧面板的 UI 控件让用户动态修改各项属性点击"设置"按钮后，将配置应用到当前选中的单元格代码解析创建 ButtonList 并设置选项这段代码创建了 ButtonList 单元格类型实例，并通过 items() 方法设置三个选项。每个选项包含 text（显示文本）和 value（选项值）两个属性。最后使用 setCellType() 方法将 ButtonList 应用到指定单元格。监听选择变化并读取配置当用户选择单元格时，通过 getCellType() 获取单元格类型，如果是 ButtonList 则读取其配置并显示在右侧面板，否则显示默认配置。应用配置到单元格 applySetting() 函数根据右侧面板的配置创建新的 ButtonList 实例，并设置各项属性后应用到当前选中的单元格。运行效果初始状态下，单元格 B1 显示一个包含三个按钮选项的按钮列表点击该单元格，右侧面板会显示当前的配置信息可以在右侧面板中修改各项属性：添加或移除按钮选项切换单选或多选模式设置水平或垂直布局方向启用或关闭流式布局调整按钮间距和内边距自定义选中状态的背景色和前景色点击"设置"按钮后，配置会立即应用到当前单元格 API 参考 items() 方法获取或设置按钮列表的项目每个项目包含 text（显示文本）和 value（选项值） selectionMode() 方法设置选择模式：SelectionMode.single（单选）或 SelectionMode.multiple（多选） direction() 方法设置按钮排列方向：Direction.horizontal（水平）或 Direction.vertical（垂直） isFlowLayout() 方法设置是否启用流式布局，默认为 true itemSpacing() 方法设置按钮项之间的水平和垂直间距 selectedBackColor() 和 selectedForeColor() 方法设置选中按钮的背景色和前景色

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.ButtonList());
};
function initSpread(spread) {
var sheet = spread.getSheet(0);
sheet.suspendPaint();
var radio = new GC.Spread.Sheets.CellTypes.ButtonList();
radio.items([
{ text: "sample1", value: "0" },
{ text: "sample2", value: "1" },
{ text: "sample3", value: "2" },
]);
sheet.setCellType(0, 1, radio);
sheet.defaults.rowHeight = 50;
sheet.defaults.colWidth = 200;
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.ButtonList) {
readSetting(cellType);
} else {
readSetting(new GC.Spread.Sheets.CellTypes.ButtonList());
}
});
_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();
});
};
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.selectionMode() === GC.Spread.Sheets.CellTypes.SelectionMode.signle) {
_getElementById("selectionMode-single").checked = true;
} else {
_getElementById("selectionMode-multiple").checked = true;
}
if(cellType.direction() === GC.Spread.Sheets.CellTypes.Direction.horizontal) {
_getElementById("direction-horizontal").checked = true;
} else {
_getElementById("direction-vertical").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("padding").value = cellType.padding();
_getElementById("selectedBackColor").value = cellType.selectedBackColor();
_getElementById("selectedForeColor").value = cellType.selectedForeColor();
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.ButtonList();
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("selectionMode-single").checked) {
cellType.selectionMode(GC.Spread.Sheets.CellTypes.SelectionMode.single);
} else {
cellType.selectionMode(GC.Spread.Sheets.CellTypes.SelectionMode.multiple);
}
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
});
cellType.padding(_getElementById("padding").value);
cellType.selectedBackColor(_getElementById("selectedBackColor").value);
cellType.selectedForeColor(_getElementById("selectedForeColor").value);
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>
<div class="option-row">
<label>选择模式：</label>
</div>
<div class="option-row">
<input type="radio" name="selectionMode" id="selectionMode-single" checked="checked" /><label
for="selectionMode-single">单选</label>
<input type="radio" name="selectionMode" id="selectionMode-multiple" /><label
for="selectionMode-multiple">多选</label>
</div>
<hr>
<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 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>
<div class="option-row">
<label for="padding">内边距：</label>
<input type="text" id="padding" value="2" />
</div>
<div class="option-row">
<label for="selectedBackColor">选中背景色：</label>
<input type="text" id="selectedBackColor" value="2" />
</div>
<div class="option-row">
<label for="selectedForeColor">选中前景色：</label>
<input type="text" id="selectedForeColor" value="2" />
</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;
}
.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;
}
.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 在线示例