概述
本 Demo 展示了 SpreadJS 工作簿的基本初始化流程,包括如何在网页中创建工作簿实例、挂载到 DOM 元素以及在单元格中显示内容。这是使用 SpreadJS 的第一步,所有其他功能都基于此工作簿实例。
实现思路
在 HTML 页面中引入 SpreadJS 的 CSS 和 JavaScript 文件
创建一个 DIV 元素作为工作簿的宿主容器
在页面加载完成后,使用 Workbook 构造函数创建工作簿实例
获取活动工作表,并在第一个单元格中设置文本内容
代码解析
创建工作簿实例
这段代码创建了一个新的工作簿实例。Workbook 构造函数接收两个参数:
host: 可以是 DOM 元素或元素 id,用于指定工作簿的挂载位置
options: 可选的配置对象,这里设置 sheetCount: 1 表示初始创建 1 个工作表
获取活动工作表并设置值
使用 getActiveSheet() 方法获取当前活动的工作表,然后通过 setValue() 方法在指定单元格设置值。setValue(row, col, value) 方法的参数为行索引、列索引和要设置的值。
使用 findControl 获取已存在的工作簿实例
findControl 是一个静态方法,可以通过宿主元素获取已创建的工作簿实例,这在多个模块需要访问同一个工作簿时非常有用。
运行效果
页面加载后,会在指定区域显示一个 SpreadJS 工作簿
工作簿包含一个工作表
第一个单元格(行 0,列 0)显示文本 "Hello World!"
用户可以在工作簿中进行基本的表格操作
API 参考
Workbook 构造函数
host: 托管 DOM 元素或元素 id(字符串)
options: 可选,工作簿配置选项,包括 sheetCount、font、tabStripVisible 等
findControl 静态方法
host: DOM 元素或元素 id
返回值: Workbook 实例
setValue 方法
row: 行索引
col: 列索引
value: 要设置的值
sheetArea: 可选,工作表区域
ignoreRecalc: 可选,是否忽略重新计算
window.onload = function () {
// host the workbook control in a DIV element with id "ss"
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {
sheetCount: 1
});
/*
* retrieve the spread workbook object from the host element using findControl static method.
* var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
*/
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
//Add text to first cell
sheet.setValue(0, 0, "Hello World!");
}
<!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="$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">
<!-- Workbook host element -->
<div id="ss" style="width:100%;height:100%"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
