# SpreadJS_ Merge Cell Data Binding
**Repository Path**: GrapeCity/spread-js_-merge-cell-data-binding
## Basic Information
- **Project Name**: SpreadJS_ Merge Cell Data Binding
- **Description**: 包含合并单元格的数据绑定
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-21
- **Last Updated**: 2022-06-16
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# SpreadJS_ Merge Cell Data Binding
#### 介绍
包含合并单元格的数据绑定
### SpreadJS 示例，基于 JavaScript组件实现包含合并单元格的数据绑定
该示例包括使用 SpreadJS API 的演示脚本，可用于实现包含合并单元格的数据绑定。
有关 SpreadJS API 的更多信息，请参阅[SpreadJS API指南]( https://demo.grapecity.com.cn/spreadjs/help/api/) 和[帮助手册]( https://help.grapecity.com.cn/pages/viewpage.action?pageId=5963808)。
目录：
- 运行步骤
- 控件初始化
- 示例代码
- 关于 SpreadJS
外部文件：
- 临时授权申请
### 运行步骤
1、在开始之前，请确保您已满足以下先决条件：
要运行 SpreadJS，浏览器必须支持 HTML5，客户端导入和导出 Excel 需要 IE10及以上。请先了解 [SpreadJS 的产品使用环境]( https://www.grapecity.com.cn/developer/spreadjs/selection-guide/product-use-environment)，并申请临时部署授权激活
安装并更新NodeJS和NPM
2、克隆或下载此代码库
3、初始化控件，并运行示例脚本
#### 控件初始化
1、 首先，创建一个新页面，并在页面上输入以下代码：
```
Spread HTML test page
```
2、在页面中添加对 Spread.JS 的引用。代码如下。需要注意的是，Spread 提供压缩过
```
（minified）的 JavaScript 文件和和用于调试的文件：
```
3、添加 CSS 文件以改变Spread.JS 的外观。默认的CSS文件名为：
gc.spread.sheets.xxxx.css，里面包含了所有的默认样式。该 CSS 文件将会影响滚动条，筛选框及其子元素，单元格和下方标签栏的样式。引入 CSS 的代码如下：
```
//
//OR
```
4、添加产品授权，代码为：
```
GC.Spread.Sheets.LicenseKey = "xxx";
```
5. 添加控件初始化代码。本例会在一个 id 为“ss”的 DOM 元素上初始化 Spread.Sheets：
```
```
6、 创建一个 id 为 “ss”的元素，Spread.Sheets 将在该 DOM 中初始化：
```
```
#### 示例代码
```
HTML：
包含合并单元格的数据绑定
CSS：
p{
color: #90156b;
text-align: center;
}
#ss{
width: 100%;
height: 480px;
}
JavaScript：
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
var data = {
name: 'Jones',
region: 'East',
sales: [
{ orderDate: '1/6/2013', item: 'Pencil', units: 95, cost: 1.99 },
{ orderDate: '4/1/2013', item: 'Binder', units: 60, cost: 4.99 },
{ orderDate: '6/8/2013', item: 'Pen Set', units: 16, cost: 15.99 }
]};
var tableColumns = [],
names = ['orderDate', 'item', 'units', 'cost'],
labels = ['Order Date', 'Item', 'Units', 'Cost'];
var table = sheet.tables.add('tableRecords', 0, 0, 1, 8);
table.autoGenerateColumns(false);
var range = table.range();
var row = range.row;
var col = range.col;
var rowCount = range.rowCount;
var colCount = range.colCount;
for(var i=0;i