表单&函数

阔别多日， SpreadJS 新人学习笔记，本周起正式回归！

（在断更的这一个月中，我为大家先后录制了14期 SpreadJS 产品入门系列学习视频，希望帮助那些正在学习和使用 SpreadJS 的同学全面、快速地了解产品，并尽快在实际项目中感受到 SpreadJS 强大的前端表格功能！这些视频目前已经在 GCDN 技术论坛中发布，欢迎大家观看学习，并提出意见和建议。）

本周，我会详细介绍 SpreadJS 的表单及函数，希望我的学习笔记能够帮助你们，从零开始学习 SpreadJS，并逐步精通。

本周学习计划一：SpreadJS 的表单

初始化 SpreadJS 表单

你可以在 SpreadJS 中添加一个或多个表单。如图所示，点击按钮，即可新增、删除、清空表单：

SpreadJS 边框网格线

SpreadJS 可自定义是否显示网格线，并允许设置各种边框的样式。

隐藏与显示

SpreadJS 用于控制隐藏显示的代码为：sheet.visible(false)

点击【隐藏】【显示】按钮可依次隐藏、显示表单。

缩放

SpreadJS 通过以下方法控制缩放：sheet.zoom(number)，number 的值在0-1之间会缩小，1以上会放大。

行头与列头

SpreadJS 可以对行头、列头的样式进行自定义，比如增加行头、合并行头单元格、设置宽度等，还可控制是否显示行头列头，并将行标列表设定为空、数字或字母。

合并单元格

sheet.addSpan() 方法可以实现合并单元格：

SpreadJS 允许用户通过拖拽的方式合并单元格：

冻结行列

SpreadJS 可以控制冻结行列，上图中的红线为冻结线，冻结线颜色、样式均可自定义，如将冻结线的颜色设置为红色：sheet.options.frozenlineColor = ‘red’

获取与设置数据

SpreadJS 用于操作数据的方法包含：setText、getText、copyTo、moveTo、clear 五种。

举例：

// 如将行索引5、列索引4的内容，复制到行索引6、列索引5，并复制2行1列，可以设置如下参数

sheet.copyTo(5, 4, 6, 5, 2, 1, spreadNS.CopyToOptions.all);

设置公式

SpreadJS支持在单元格中设置公式，如下图实现的简单加法公式：

设置字体

SpreadJS 提供字体设置，允许用户设置字体风格、大小、斜体等：

设置样式

SpreadJS 可以自定义单元格样式，如背景色、字体颜色、内容排列方向等。此外，还可以设定一套常用的样式模板，一键套用。

SpreadJS 单元格的样式在不同的层级结构中具有不同的优先级别, 如下: 单元格 > 行 > 列

精确选择单元格

SpreadJS 可以设定最小选择单元为：单元格、行或列的任意一项，例如设定最小选择列，点选任意单元格会选中整列：

自定义行为

SpreadJS 支持撤销/取消撤销操作，快捷键为 ctrl z/ctrl y。

表单保护

通过设置 isProtected 属性可以保护表单不被用户编辑。设置 protectionOptions 属性可以限制用户的各种行为。

例如过滤权限被放开时，点列头下拉框可以进行过滤操作，取消该权限则点不动向下箭头：

允许插入行时，在行头处点击右键，即可插入新行：

分组列

对于有分层结构的数据，可以通过 SpreadJS 让数据呈现树形结构，如下图。此外，用户还可以自定义图标、控制 checkbox 显示状态：

基本函数、INDIRECT、通配符

setFormula 用于设置基本函数，如求平均值、合计、最大值和最小值，INDIRECT 函数用于返回特定单元格的内容，如 INDIRECT（“B4”）返回B4单元格的内容。需要注意：若传参不带引号，则返回单元格所指向的内容，如 INDIRECT（E4）返回的是 E4 所指向的单元格的数据。

如下图：INDIRECT（“B4”） = 丁玉琴

INDIRECT（E4） = 丁玉琴

SpreadJS Demo 示例

以下是我在学习 SpreadJS 表单的过程中，自己写的 Demo 示例，供大家参考。

• sheetDemo1.zip
• sheetDemo2.zip
• sheetDemo3_protect_outlineCol.zip
• unction.zip

本周学习计划二：SpreadJS 的函数

自定义函数

SpreadJS 内置了很多函数，包括很多常用的基本函数，但是在遇见较为特殊的方法，基本函数无法满足需求时，可以添加自定义函数。

例如，根据三角形的底和高来求三角形的面积，我们可以自定义函数 calcuArea，用 addCustomFunction 方法将该自定义函数加在表单中，再使用 setFormula 给单元格绑定自定义函数。

数组公式

SpreadJS 使用 setArrayFormula 方法来设置数组公式。如下图，E5 到 E8 便是使用数组公式计算出来的三角形面积

异步函数

当计算方法或者数据不能立刻获取时，可以使用异步函数来进行计算。SpreadJS 可使用添加自定义函数的方法来添加并定义异步函数，通过设置 defaultValue 的值，在计算结果还出来时代替计算结果，通过使用 evaluateAsync 方法来进行计算，并且在异步计算完毕后使用context.setAsyncResult 方法返回 SpreadJS 。

如下图，E8位置的数据使用异步函数计算，在前三秒显示【计算中… 】，计算好后显示结果35：

您也可获取当前时刻的异步函数，如每秒获取一次当前时刻：

SpreadJS Demo 示例

以下是我在学习 SpreadJS 函数的过程中，自己写的Demo示例，供大家参考。

• function.zip

OK，今天先记录到这里，下一周学习计划： SpreadJS 的数据绑定、脏数据和单引号前缀。

PS：文中提到的学习视频和示例源码，都已经上传到 SpreadJS 官网的【入门视频】中，欢迎大家点击了解更多，观看学习。

关于葡萄城

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