還在為滿屏的公式而“內(nèi)牛滿面”嗎？還在為長串的公式解析而發(fā)愁嗎？ 還在定位錯誤的公式而苦惱嗎？上班要寫代碼，加班還要分析這又長又臭的公式。你的發(fā)際線還好嗎？

本文來拯救你的發(fā)際線啦！帶來的不是洗發(fā)水，而是公式追蹤！這一章，帶你用SpreadJS的公式追蹤構(gòu)建公式樹，快（解）速（救）分（你）析（的）公（脫）式（發(fā)）問題。

SpreadJS結(jié)合40余年專業(yè)控件技術(shù)和在電子表格應(yīng)用領(lǐng)域的經(jīng)驗而推出的純前端表格控件，基于 HTML5，兼容 450 多種 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產(chǎn)品特性，備受華為、明源云、遠(yuǎn)光軟件等知名企業(yè)青睞，被中國軟件行業(yè)協(xié)會認(rèn)定為“中國優(yōu)秀軟件產(chǎn)品”。SpreadJS在界面和功能上與 Excel 高度類似，但又不局限于 Excel，而是為企業(yè)信息化系統(tǒng)提供 表格文檔協(xié)同編輯、 數(shù)據(jù)填報 和 類 Excel 報表設(shè)計 的應(yīng)用場景支持，極大降低了企業(yè)研發(fā)成本和項目交付風(fēng)險。

獲取SpreadJS最新正式版下載

背景

在審計、財會、金融等對公式有著大量需求且需要進行分析的行業(yè)中，經(jīng)常會遇見復(fù)雜的公式計算，并且需要知道每一步計算的結(jié)果或者引用的數(shù)據(jù)是否正確。這個時候，滿屏的公式，仿佛在告訴你：別想下班！手動將公式一步一步分解，遇到短的公式還好說。遇到長的公式，不僅工作量大，而且容易出錯，一不小心弄錯了，就錯過了末班車時間。那如何能夠快速地將公式拆解，分析出其中的每一步計算步驟呢？

 這里就可以用到前面說的，利用SpreadJS的計算引擎，把分析交給機器來做，分析完成之后，可以通過SpreadJS自身的形狀功能來繪制一個清晰明了的公式樹。不僅快且穩(wěn)，重要的是可以早點下班，他不香嗎？

ok，那我們來看看效果。

實現(xiàn)步驟

想要實現(xiàn)這樣的公式樹，引入SpreadJS是必不可少的步驟，這里就不再贅述。

可以看到上圖除了用一個工作簿實例用于正常顯示數(shù)據(jù)和公式之外，在下方也是一個工作簿實例，用于通過形狀繪制公式樹。公式樹的實現(xiàn)其實可以更加靈活，比如彈出一個模態(tài)窗，模態(tài)窗中加載一個SpreadJS實例，或者完全自己用DOM來繪制也都是可以的。因為通過SpreadJS的公式追蹤，就可以拿到公式相關(guān)的引用信息，至于怎么畫出來，都是可以的。

我們可以把上方的工作簿對象定義為spread，把下方繪制公式樹的工作簿對象定義為spreadForShow，在默認(rèn)情況下，我們通過css將spreadForShow進行隱藏。

我們通過下面的代碼將兩個工作簿實例進行初始化。

為了能夠更加清晰看到單元格對應(yīng)的公式，這邊也添加了一個公式欄和Spread進行綁定，通過以下代碼即可。

接下來就是創(chuàng)建對應(yīng)的右鍵菜單“鉆取”項，下圖是實現(xiàn)添加右鍵菜單項的效果。

對應(yīng)的，我們需要注冊點擊這個項之后的處理命令。該核心也就是作用主要在于，

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

是控制spreadForShow這個工作簿的顯示。其余代碼可以簡單理解為創(chuàng)建命令的“模板”。詳細(xì)注冊命令可以。

注冊完對應(yīng)的命令之后，為了能夠讓這個項只在由公式的單元格中出現(xiàn)，可以重寫onOpenMenu。在這個方法里面通過getFormula判斷點擊的單元格是否有公式。有公式，則往右鍵菜單數(shù)組里面添加“鉆取”項。

以上就是一些前期的準(zhǔn)備代碼，我們再來看下如何獲取公式的引用信息。通過sheet.getPrecedents(row,col)可以獲取單元格中公式具體引用的單元格，返回的是一個對象數(shù)組。

為了能夠在點擊單元格的時候，提前將公式樹繪制好，這里用了一個事件監(jiān)聽，當(dāng)監(jiān)聽到選區(qū)改變的時候，分別調(diào)用創(chuàng)建節(jié)點以及繪制公式樹的方法（后面會進行介紹）。然后將用顯示公式樹的spreadForShow這個工作簿進行隱藏。因為我們的主要邏輯是通過右鍵顯示公式樹，然后切換單元格的時候關(guān)閉公式樹。

下一步是創(chuàng)建公式引用的節(jié)點，為了能夠在節(jié)點上展示該單元格相關(guān)的更多信息，一個的單元格創(chuàng)建一個對應(yīng)的node對象，包括了單元格值，單元格位置以及單元格描述。

再往下就是從原始公式開始逐層往下找了。從原始的公式單元格出發(fā)，通過sheet.getPrecedents(row,col);找到對應(yīng)引用單元格之后。以找到的單元格為起點，再次往下找，直至找不到為止。

將公式對應(yīng)的節(jié)點逐一找完之后，就可以開始在spreadForShow工作簿上進行繪制了。我們就分別繪制用于展示數(shù)據(jù)的矩形以及用于連接這些形狀的連接器形狀。下面的代碼中g(shù)etRectShape用于創(chuàng)建展示數(shù)據(jù)的矩形，里面通過代碼設(shè)置了文本顏色、填充顏色、字體等。getConnectorShape則是用于創(chuàng)建線條連接器，設(shè)置了線寬、顏色等。

最后就是根據(jù)前面構(gòu)造出來的節(jié)點，以及預(yù)定義好的形狀方法進行公式樹的繪制。在這個if-else中，如果節(jié)點是父節(jié)點，則通過連接器型裝將子節(jié)點相連接，如果沒有子節(jié)點則無需連接。在creatNodeTree方法中，定義的節(jié)點信息，通過拼接的方式，將節(jié)點信息設(shè)置在對應(yīng)的矩形上。也就是一個一個節(jié)點往下繪制，直至繪制完成。

怎么樣？看完上面的介紹可以實現(xiàn)對應(yīng)的功能嗎？想不想立刻擁有如此強大的數(shù)據(jù)？沒有Demo的技術(shù)文章，就跟方便面沒有調(diào)料包一樣，索然無味。還不趕快嘗試一下~

本文內(nèi)容源自