概述
本 Demo 展示了 RadioButtonList 单元格类型的基本用法,并提供了一个交互式配置面板,允许用户动态修改单选按钮列表的各项属性,包括选项列表、布局方向、文本对齐、流式布局、间距和按钮大小等。
实现思路
初始化工作簿,创建一个基础的 RadioButtonList 单元格类型实例
设置初始的三个选项 (sample1, sample2, sample3),并将其应用到单元格 (0, 1)
监听单元格选择变化事件,当用户选中包含 RadioButtonList 的单元格时,读取其配置并显示在右侧面板
监听"设置"按钮点击事件,将面板中的配置应用到当前选中的单元格
监听"添加/移除项目"按钮,动态修改选项列表
监听布局相关选项变化,动态显示/隐藏相关的配置项
代码解析
创建并设置 RadioButtonList
这段代码创建了一个 RadioButtonList 实例,并通过 items() 方法设置了三个选项。每个选项包含 text(显示文本)和 value(选项值)两个属性。然后使用 setCellType() 方法将单元格类型应用到指定单元格。
读取单元格配置
当用户选中单元格时,readSetting 函数会读取单元格类型的各项属性,包括选项列表、布局方向、文本对齐、是否流式布局等,并将这些值显示在右侧的配置面板中。
应用配置到单元格
applySetting 函数从配置面板读取用户设置的各项属性,创建一个新的 RadioButtonList 实例并应用这些配置,最后将其设置到当前选中的单元格。
运行效果
页面加载后,单元格 B1 中显示三个单选按钮选项 (sample1, sample2, sample3)
点击单元格 B1,右侧面板会显示该单元格的当前配置
可以通过"添加"和"移除"按钮动态修改选项列表
可以选择水平或垂直布局方向
可以设置文本左对齐或右对齐
勾选"流式布局"后,选项会自动换行排列;取消勾选后可以设置固定的最大行数或列数
可以调整项目之间的水平和垂直间距,以及单选按钮的大小
点击"设置"按钮后,配置会立即应用到选中的单元格
API 参考
RadioButtonList 构造函数
创建一个单选按钮列表单元格类型实例。
items() 方法
items: 可选参数,数组类型,每个元素包含 text 和 value 属性
返回值: 无参数时返回当前选项列表,有参数时设置选项列表并返回单元格类型实例
setCellType() 方法
row: 行索引
col: 列索引
value: 单元格类型实例
sheetArea: 可选,表单区域,默认为 viewport
direction() 方法
设置或获取布局方向,可选值为 GC.Spread.Sheets.CellTypes.Direction.horizontal 或 GC.Spread.Sheets.CellTypes.Direction.vertical。
isFlowLayout() 方法
设置或获取是否启用流式布局。启用后选项会自动换行排列。
itemSpacing() 方法
设置选项之间的水平和垂直间距。
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.RadioButtonList());
};
function initSpread(spread) {
var sheet = spread.getSheet(0);
sheet.suspendPaint();
var radio = new GC.Spread.Sheets.CellTypes.RadioButtonList();
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.RadioButtonList) {
readSetting(cellType);
} else {
readSetting(new GC.Spread.Sheets.CellTypes.RadioButtonList());
}
});
_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.direction() === GC.Spread.Sheets.CellTypes.Direction.horizontal) {
_getElementById("direction-horizontal").checked = true;
} else {
_getElementById("direction-vertical").checked = true;
}
if(cellType.textAlign() === GC.Spread.Sheets.CellTypes.TextAlign.right) {
_getElementById("textAlign-right").checked = true;
} else {
_getElementById("textAlign-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.RadioButtonList();
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);
}
if (_getElementById("textAlign-right").checked) {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.right);
} else {
cellType.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.left);
}
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
});
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">
<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 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>
<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 class="option-row">
<label for="boxSize">框大小</label>
<input type="text" id="boxSize" class="boxSize" />
</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;
}
.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;
}
