本周，让我们一起来学习 SpreadJS 的数据绑定、脏数据和单引号前缀，希望我的学习笔记能够帮助你们，从零开始学习 SpreadJS，并逐步精通。

在此前的学习笔记中，相信大家已经学会并熟练掌握了 SpreadJS 的表单、函数、工作簿及产品的基本使用方法。在之后的学习阶段，我们将更进一步，深入了解 SpreadJS 的数据绑定、单元格类型及前端导入导出 Excel 等核心功能，充分体验“仅需100多行代码，就可将 Excel 嵌入 Web 应用系统” 的全过程。

SpreadJS 学习笔记的配套视频资料，请在文末点击了解更多获取下载。

SpreadJS 的数据绑定

SpreadJS 作为一个类 Excel 的纯前端表格控件，有着和 Excel 高度类似的功能和用户体验，但同时也有很多 Excel 所没有的独特功能，数据绑定就是其中之一。

数据绑定作为 SpreadJS 最常用的功能，主要分为表单级别的绑定、单元格级别的绑定和整个表格的数据绑定。

1. 表单级别绑定

使用 setDataSource 和 getDataSource 方法实现绑定数据源、获取数据源。

绑定列时可以通过设置 formatter 指定列的展示样式，例如数据源的出生日期格式为："DATE_OF_BIRTH":"1958-10-26 00:00:00"，设置 formatter:'yyyy/m/d' 后出生日期显示为：

此外，还可自定义设置某列的样式为 checkbox（单选框）等，例如下图“过敏史”一列：

2. 单元格级别的绑定

使用 getBindingPath 方法，用于获取指定单元格的绑定信息。

点击单元格，如果该单元格绑定了数据源，则可以获取该单元格的绑定信息：

3. 表格绑定

表格绑定，实质上是一种特殊的单元格级别绑定。使用表格绑定，可以给表格绑定不同的数据，例如下图，通过点击按钮，即可实现给表格绑定不同的数据源：

点击按钮，绑定新的数据源，结果如下图：

SpreadJS 数据绑定示例：databind.zip

SpreadJS 的导航、脏数据和单引号前缀

1.SpreadJS 单元格导航行为

在 SpreadJS 中，按下 tab 键，默认是移动到下一个单元格。当然，在 GC.Spread.Sheets.Commands 中可以定义这些导航操作，如下图：切换下拉框的内容，可以重新定义按下 Tab 键时的行为。

当选择"先单元格再控件"时，选中项移动到最后一个单元格时会再次选中页面的其他控件。

2.SpreadJS 如何处理脏数据

在 SpreadJS 中，使用 getDirtyRows 和 getDirtyCells 可以获取表单上发生数据变更的单元格或行，使用 clearPendingChanges ，可以清除值变更、插入/删除行的状态。

"脏数据"的定义：

• 当单元格的值变更时，该单元格为脏数据；
• 当单元格的值变更时，该单元格所在行均为脏数据；
• 当插入一行，并在单元格中设置值时，该行与该单元格不是脏数据

举例：如图所示，插入一行，并在A1中输入123，点击获取插入行，显示新插入的行号为0。此时，点击获取行脏数据、获取单元格脏数据均无反应。

3.SpreadJS单引号前缀

当你输入的值带有单引号前缀'，输入的值会被转换并存储为字符串。如下图：

SpreadJS 导航、脏数据、单引号前缀示例：editCell.zip

OK，今天先记录到这里，下一周学习计划： SpreadJS 的复制粘贴、单元格格式和单元格类型。

PS：点击了解更多，获取文中提到的学习视频和示例源码。

关于葡萄城赋能开发者！葡萄城公司成立于 1980 年，是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构，面向全球市场提供软件研发服务，并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣，在全球被数十万家企业、学校和政府机构广泛应用。