概述
本 Demo 展示了 SpreadJS 表格的内置选择交互功能，用户可以通过特定的鼠标操作快速选择表格的行、列或整个表格。Demo 创建了一个包含员工信息的示例表格，演示了表格的默认选择行为。
实现思路
创建一个表格并应用 light1 主题样式
为表格设置页脚行，增强表格的完整性
填充示例数据（员工姓名、分数、职位等信息）
设置初始选择区域，演示选择功能
代码解析
创建表格并设置属性
这段代码在工作表的第 1 行第 1 列位置创建一个 4 行 4 列的表格，命名为 "table1"，并应用 light1 主题样式。showFooter(true) 方法显示表格页脚行。
设置初始选择区域
使用 setSelection 方法设置初始选择区域，选中第 4 行（索引为 3）从第 2 列开始的 4 个单元格。
填充表格数据
为表格设置列宽并填充表头和数据。
运行效果
表格创建后会显示一个带有页脚行的员工信息表格
第 4 行数据会被默认选中（Victor Wooten 所在行）
用户可以将鼠标悬停在列标题（如 "First Name"）的顶部边缘，光标变为向下箭头时点击选择整列
用户可以将鼠标悬停在行的左侧边缘，光标变为向右箭头时点击选择整行
用户可以点击表格左上角选择整个表格
API 参考
tables.add() 方法
name：表格名称
row：起始行索引
column：起始列索引
rowCount：表格行数
columnCount：表格列数
style：表格主题样式，可以是主题名称字符串或 TableTheme 对象
showFooter() 方法
value：布尔值，是否显示页脚
isFooterInserted：可选，是否在数据中插入表格行
setSelection() 方法
row：起始行索引
column：起始列索引
rowCount：选择区域的行数
columnCount：选择区域的列数
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(0);
var table = sheet.tables.add("table1", 1, 1, 4, 4, spreadNS.Tables.TableThemes.light1);
table.showFooter(true);
sheet.setSelection(3, 1, 1, 4);
sheet.setColumnWidth(1, 120);
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(3, 120);
sheet.setColumnWidth(4, 120);
sheet.getCell(1, 1).text("First Name");
sheet.getCell(1, 2).text("Last Name");
sheet.getCell(1, 3).text("Score");
sheet.getCell(1, 4).text("Position");
sheet.getCell(2, 1).text("Alexa");
sheet.getCell(2, 2).text("Wilder");
sheet.getCell(2, 3).text("90");
sheet.getCell(2, 4).text("Web Developer");
sheet.getCell(3, 1).text("Victor");
sheet.getCell(3, 2).text("Wooten");
sheet.getCell(3, 3).text("70");
sheet.getCell(3, 4).text(".NET Developer");
sheet.getCell(4, 1).text("Ifeoma");
sheet.getCell(4, 2).text("Mays");
sheet.getCell(4, 3).text("85");
sheet.getCell(4, 4).text("Sales Manager");
spread.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$/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>Position your cursor at the top of cell B2, right above ‘First Name’, until you see the down
arrow.
You can now left click to select the column.
Similarly, position your cursor to the left edge of cell B3 to select the row.
</label>
</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;
margin-top: 10px;
}
label {
display: block;
margin-bottom: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
