从零开始，SpreadJS新人学习笔记【第3周】

表单&函数

阔别多日&＃xff0c; SpreadJS新人学习笔记&＃xff0c;本周起正式回归&＃xff01;&＃xff08;在断更的这一个月中&＃xff0c;我为大家先后录制了14期SpreadJS产品入门系列学习视频&＃xff0c;希望帮助那些正在学习和使用 SpreadJS 的同学全面、快速地了解产品&＃xff0c;并尽快在实际项目中感受到 SpreadJS强大的前端表格功能&＃xff01;这些视频目前已经在GCDN技术论坛中发布&＃xff0c;欢迎大家观看学习&＃xff0c;并提出意见和建议。&＃xff09;

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

本周学习计划一&＃xff1a;SpreadJS 的表单

初始化 SpreadJS 表单

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

SpreadJS 边框网格线

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

隐藏与显示

SpreadJS 用于控制隐藏显示的代码为&＃xff1a;sheet.visible(false)
点击【隐藏】【显示】按钮可依次隐藏、显示表单

缩放

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

行头与列头

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

合并单元格

sheet.addSpan() 方法可以实现合并单元格&＃xff1a;
 SpreadJS允许用户通过拖拽的方式合并单元格&＃xff1a;

冻结行列

SpreadJS可以控制冻结行列&＃xff0c;上图中的红线为冻结线&＃xff0c;冻结线颜色、样式均可自定义&＃xff0c;如将冻结线的颜色设置为红色&＃xff1a;sheet.options.frozenlineColor &＃61; &＃39;red&＃39;

获取与设置数据

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

举例&＃xff1a;

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

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

设置公式

SpreadJS支持在单元格中设置公式&＃xff0c;如下图实现的简单加法公式&＃xff1a;
 

设置字体

SpreadJS提供字体设置&＃xff0c;允许用户设置字体风格、大小、斜体等&＃xff1a;

设置样式

SpreadJS 可以自定义单元格样式&＃xff0c;如背景色、字体颜色、内容排列方向等。此外&＃xff0c;还可以设定一套常用的样式模板&＃xff0c;一键套用。
SpreadJS单元格的样式在不同的层级结构中具有不同的优先级别, 如下: 单元格 > 行 > 列

精确选择单元格

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

自定义行为

SpreadJS支持撤销/取消撤销操作&＃xff0c;快捷键为ctrl&＃43;z/ctrl&＃43;y。

表单保护

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

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

允许插入行时&＃xff0c;在行头处点击右键&＃xff0c;即可插入新行&＃xff1a;
 

分组列

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

基本函数、INDIRECT、通配符

setFormula用于设置基本函数&＃xff0c;如求平均值、合计、最大值和最小值&＃xff0c;INDIRECT函数用于返回特定单元格的内容&＃xff0c;如INDIRECT&＃xff08;“B4”&＃xff09;返回B4单元格的内容。需要注意&＃xff1a;若传参不带引号&＃xff0c;则返回单元格所指向的内容&＃xff0c;如INDIRECT&＃xff08;E4&＃xff09;返回的是E4所指向的单元格的数据。
如下图&＃xff1a;INDIRECT&＃xff08;“B4”&＃xff09; &＃61; 丁玉琴

INDIRECT&＃xff08;E4&＃xff09; &＃61; 丁玉琴

SpreadJS Demo 示例

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

l  sheetDemo1.zip

l  sheetDemo2.zip

l  sheetDemo3_protect_outlineCol.zip

l  function.zip

本周学习计划二&＃xff1a;SpreadJS 的函数

自定义函数

SpreadJS内置了很多函数&＃xff0c;包括很多常用的基本函数&＃xff0c;但是在遇见较为特殊的方法&＃xff0c;基本函数无法满足需求时&＃xff0c;可以添加自定义函数。例如&＃xff0c;根据三角形的底和高来求三角形的面积&＃xff0c;我们可以自定义函数calcuArea&＃xff0c;用addCustomFunction方法将该自定义函数加在表单中&＃xff0c;再使用setFormula给单元格绑定自定义函数。

数组公式

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

异步函数

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

如下图&＃xff0c;E8位置的数据使用异步函数计算&＃xff0c;在前三秒显示【计算中... 】&＃xff0c;计算好后显示结果35&＃xff1a;
 

您也可获取当前时刻的异步函数&＃xff0c;如每秒获取一次当前时刻&＃xff1a;

SpreadJS Demo 示例

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

l  function.zip

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

PS&＃xff1a;文中提到的学习视频和示例源码&＃xff0c;都已经上传到SpreadJS官网的【入门视频】中&＃xff0c;欢迎大家观看学习。

>>视频地址