概述
本 Demo 展示了 SpreadJS 中单元格选择功能的核心配置选项。通过右侧选项面板，您可以实时调整选择策略（单个、区域、多区域）、选择单元（单元格、行、列）、选择区域的背景色和边框颜色，以及控制 Tab 键导航和取消选择行为。
实现思路
使用 fromJSON 加载预设的表格数据
为选择策略和选择单元下拉框绑定 change 事件，实时更新工作表的选择模式
为背景色和边框颜色输入框绑定点击事件，动态修改选中区域的显示样式
为 Tab 键停止按钮绑定点击事件，为当前选中区域设置 tabStop 属性
为取消选择复选框绑定点击事件，控制是否允许用户反选当前选择区域
代码解析
设置选择策略和选择单元
这段代码为下拉框绑定事件监听器。selectionPolicy 方法设置用户可以选择的范围类型：single（单个项目）、range（单个连续区域）或 multiRange（多个不连续区域）。selectionUnit 方法设置最小选择单元：cell（单元格）、row（行）或 column（列）。
设置选择区域的背景色和边框颜色
这段代码通过 sheet.options.selectionBackColor 和 sheet.options.selectionBorderColor 属性设置选择区域的背景色和边框颜色。您可以使用标准颜色（如 red、blue）、RGB 值（如 rgb(255, 0, 0)）或主题颜色（如 Accent 1）。
设置 Tab 键停止
这段代码为当前选中的区域设置 tabStop 属性。tabStop 属性控制用户是否可以使用 Tab 键将焦点移动到该区域的单元格。代码会遍历所有选中区域，根据选择类型（单元格区域、整行或整列）分别设置相应的 Range 对象的 tabStop 属性。
控制取消选择行为
allowUserDeselect 属性控制是否允许用户通过鼠标反选当前选择区域。默认值为 true，允许取消选择；设置为 false 时，用户无法反选已选中的区域。
运行效果
在左侧表格中点击并拖动鼠标，可以选择单元格区域
切换"选择策略"下拉框，观察不同策略下的选择行为：
单个：只能选择一个单元格
区域：可以选择一个连续区域
多区域：可以选择多个不连续的区域（按住 Ctrl 键）
切换"选择单元"下拉框，观察不同单元下的选择方式：
单元格：最小选择单位为单元格
行：点击行标题或单元格会选中整行
列：点击列标题或单元格会选中整列
输入背景色和边框颜色，点击"设置"按钮，观察选中区域的样式变化
选中一个区域后，点击"设置Tab键停止为真/假"按钮，然后按 Tab 键测试焦点移动行为
勾选或取消"允许用户取消选择"复选框，然后在表格中测试是否可以通过鼠标反选已选中的区域
API 参考
selectionPolicy 方法
value：GC.Spread.Sheets.SelectionPolicy 枚举值
SelectionPolicy.single：仅选择单个项目
SelectionPolicy.range：选择单个连续区域
SelectionPolicy.multiRange：选择多个不连续区域
selectionUnit 方法
value：GC.Spread.Sheets.SelectionUnit 枚举值
SelectionUnit.cell：最小选择单元为单元格
SelectionUnit.row：最小选择单元为行
SelectionUnit.column：最小选择单元为列
selectionBackColor 和 selectionBorderColor 属性
color：颜色字符串，支持标准颜色名称、RGB 值或主题颜色
tabStop 方法
value：布尔值，true 表示允许 Tab 键导航到该单元格，false 表示跳过
allowUserDeselect 属性
boolean：true 允许用户反选已选中区域，false 禁止反选
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
spread.suspendPaint();
initSpread(spread);
spread.resumePaint();
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
spread.fromJSON(data[0]);
_getElementById('selectionPolicy').addEventListener('change', function() {
var sheet = spread.getActiveSheet();
var policy = parseInt(this.value, 10);
sheet.selectionPolicy(policy);
});
_getElementById('selectionUnit').addEventListener('change', function() {
var sheet = spread.getActiveSheet();
var unit = parseInt(this.value, 10);
sheet.selectionUnit(unit);
});
_getElementById('setBackColor').addEventListener('click', function() {
var sheet = spread.getActiveSheet();
var backColor = _getElementById('backColor').value;
sheet.options.selectionBackColor = backColor;
});
_getElementById('setBorderColor').addEventListener('click', function() {
var sheet = spread.getActiveSheet();
var borderColor = _getElementById('borderColor').value;
sheet.options.selectionBorderColor = borderColor;
});
_getElementById('tabStoptrue_Btn').addEventListener('click', function() {
setIsTabStop(spread, true);
});
_getElementById('tabStopfalse_Btn').addEventListener('click', function() {
setIsTabStop(spread, false);
});
_getElementById('chk_allowDeselect').addEventListener('click', function() {
spread.options.allowUserDeselect = this.checked;
});
}
function setIsTabStop(spread, isTabStop) {
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
var sels = sheet.getSelections();
for (var index = 0; index < sels.length; index++) {
var selRange = sels[index];
if (selRange.col >= 0 && selRange.row >= 0) {
sheet.getRange(selRange.row, selRange.col, selRange.rowCount, selRange.colCount).tabStop(isTabStop);
} else if (selRange.row >= 0) {
sheet.getRange(selRange.row, -1, selRange.rowCount, -1).tabStop(isTabStop);
} else if (selRange.col >= 0) {
sheet.getRange(-1, selRange.col, -1, selRange.colCount).tabStop(isTabStop);
}
}
sheet.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$/spread/source/data/data.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="dataset.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">
修改提供的属性，查看它们如何影响选择。
</div>
<div class="option-row">
<label for="selectionPolicy" class="normal">选择策略:</label>
</div>
<div class="option-row">
<select id="selectionPolicy">
<option value="0">单个</option>
<option value="1">区域</option>
<option value="2" selected="selected">多区域</option>
</select>
</div>
<div class="option-row">
<label for="selectionUnit" class="normal">选择单元:</label>
</div>
<div class="option-row">
<select id="selectionUnit">
<option value="0" selected="selected">单元格</option>
<option value="1">行</option>
<option value="2">列</option>
</select>
</div>
<div class="option-row">
<input type="checkbox" id="chk_allowDeselect" checked />
<label for="chk_allowDeselect">允许用户取消选择</label>
</div>
<div class="option-row">
<label for="backColor" class="wide">选择背景色:</label>
</div>
<div class="option-row">
<input type="text" id="backColor" value="rgba(204,255,51, 0.3)" />
<input type="button" value="设置" id="setBackColor" class="narrow" />
</div>
<div class="option-row">
<label for="borderColor" class="wide">选择边框颜色:</label>
</div>
<div class="option-row">
<input type="text" id="borderColor" value="Accent 3 -40" />
<input type="button" value="设置" id="setBorderColor" class="narrow" />
</div>
<div class="option-row">
<input type="button" id="tabStoptrue_Btn" value="设置Tab键停止为真" class="wide"
style="padding-top: 4px" />
<input type="button" id="tabStopfalse_Btn" value="设置Tab键停止为假" class="wide"
style="padding-top: 4px" />
<label style="display: block;padding-top: 10px;">设置此项以控制用户是否可以使用Tab键将焦点设置到选择区域。</label>
</div>
</div>
</div>
</body>
</html>
input[type="text"] {
width: 160px;
}
label.normal {
display: inline-block;
width: 120px;
}
select {
width: 120px;
height: 35px;
}
label.wide {
display: inline-block;
width: 160px;
}
input[type="button"].narrow {
width: 60px;
}
input[type="button"].wide {
width: 160px;
}
.colorLabel {
background-color: #F4F8EB;
}
.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;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
