拒绝996！巧用SpreadJS构建公式树-控件新闻-慧都网

拒绝996！巧用SpreadJS构建公式树

转帖|使用教程|编辑：龚雪|2023-06-09 10:15:09.250|阅读 41 次

概述：本文介绍如何使用SpreadJS的公式追踪构建公式树，欢迎下载最新版体验！

还在为满屏的公式而“内牛满面”吗？还在为长串的公式解析而发愁吗？还在定位错误的公式而苦恼吗？上班要写代码，加班还要分析这又长又臭的公式。你的发际线还好吗？

本文来拯救你的发际线啦！带来的不是洗发水，而是公式追踪！这一章，带你用SpreadJS的公式追踪构建公式树，快（解）速（救）分（你）析（的）公（脱）式（发）问题。

SpreadJS结合40余年专业控件技术和在电子表格应用领域的经验而推出的纯前端表格控件，基于 HTML5，兼容 450 多种 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、明源云、远光软件等知名企业青睐，被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS在界面和功能上与 Excel 高度类似，但又不局限于 Excel，而是为企业信息化系统提供表格文档协同编辑、数据填报和类 Excel 报表设计的应用场景支持，极大降低了企业研发成本和项目交付风险。

获取SpreadJS最新正式版下载

背景

在审计、财会、金融等对公式有着大量需求且需要进行分析的行业中，经常会遇见复杂的公式计算，并且需要知道每一步计算的结果或者引用的数据是否正确。这个时候，满屏的公式，仿佛在告诉你：别想下班！手动将公式一步一步分解，遇到短的公式还好说。遇到长的公式，不仅工作量大，而且容易出错，一不小心弄错了，就错过了末班车时间。那如何能够快速地将公式拆解，分析出其中的每一步计算步骤呢？

这里就可以用到前面说的，利用SpreadJS的计算引擎，把分析交给机器来做，分析完成之后，可以通过SpreadJS自身的形状功能来绘制一个清晰明了的公式树。不仅快且稳，重要的是可以早点下班，他不香吗？

ok，那我们来看看效果。

实现步骤

想要实现这样的公式树，引入SpreadJS是必不可少的步骤，这里就不再赘述。

可以看到上图除了用一个工作簿实例用于正常显示数据和公式之外，在下方也是一个工作簿实例，用于通过形状绘制公式树。公式树的实现其实可以更加灵活，比如弹出一个模态窗，模态窗中加载一个SpreadJS实例，或者完全自己用DOM来绘制也都是可以的。因为通过SpreadJS的公式追踪，就可以拿到公式相关的引用信息，至于怎么画出来，都是可以的。

我们可以把上方的工作簿对象定义为spread，把下方绘制公式树的工作簿对象定义为spreadForShow，在默认情况下，我们通过css将spreadForShow进行隐藏。

我们通过下面的代码将两个工作簿实例进行初始化。

为了能够更加清晰看到单元格对应的公式，这边也添加了一个公式栏和Spread进行绑定，通过以下代码即可。

接下来就是创建对应的右键菜单“钻取”项，下图是实现添加右键菜单项的效果。

对应的，我们需要注册点击这个项之后的处理命令。该核心也就是作用主要在于，

document.getElementById("show").style.visibility = "visible";

是控制spreadForShow这个工作簿的显示。其余代码可以简单理解为创建命令的“模板”。详细注册命令可以。

注册完对应的命令之后，为了能够让这个项只在由公式的单元格中出现，可以重写onOpenMenu。在这个方法里面通过getFormula判断点击的单元格是否有公式。有公式，则往右键菜单数组里面添加“钻取”项。

以上就是一些前期的准备代码，我们再来看下如何获取公式的引用信息。通过sheet.getPrecedents(row,col)可以获取单元格中公式具体引用的单元格，返回的是一个对象数组。

为了能够在点击单元格的时候，提前将公式树绘制好，这里用了一个事件监听，当监听到选区改变的时候，分别调用创建节点以及绘制公式树的方法（后面会进行介绍）。然后将用显示公式树的spreadForShow这个工作簿进行隐藏。因为我们的主要逻辑是通过右键显示公式树，然后切换单元格的时候关闭公式树。

下一步是创建公式引用的节点，为了能够在节点上展示该单元格相关的更多信息，一个的单元格创建一个对应的node对象，包括了单元格值，单元格位置以及单元格描述。

再往下就是从原始公式开始逐层往下找了。从原始的公式单元格出发，通过sheet.getPrecedents(row,col);找到对应引用单元格之后。以找到的单元格为起点，再次往下找，直至找不到为止。

将公式对应的节点逐一找完之后，就可以开始在spreadForShow工作簿上进行绘制了。我们就分别绘制用于展示数据的矩形以及用于连接这些形状的连接器形状。下面的代码中getRectShape用于创建展示数据的矩形，里面通过代码设置了文本颜色、填充颜色、字体等。getConnectorShape则是用于创建线条连接器，设置了线宽、颜色等。

最后就是根据前面构造出来的节点，以及预定义好的形状方法进行公式树的绘制。在这个if-else中，如果节点是父节点，则通过连接器型装将子节点相连接，如果没有子节点则无需连接。在creatNodeTree方法中，定义的节点信息，通过拼接的方式，将节点信息设置在对应的矩形上。也就是一个一个节点往下绘制，直至绘制完成。