表單&函數(shù)

闊別多日， SpreadJS 新人學習筆記，本周起正式回歸！

（在斷更的這一個月中，我為大家先后錄制了14期 SpreadJS 產(chǎn)品入門系列學習視頻，希望幫助那些正在學習和使用 SpreadJS 的同學全面、快速地了解產(chǎn)品，并盡快在實際項目中感受到 SpreadJS 強大的前端表格功能！這些視頻目前已經(jīng)在 GCDN 技術論壇中發(fā)布，歡迎大家觀看學習，并提出意見和建議。）

本周，我會詳細介紹 SpreadJS 的表單及函數(shù)，希望我的學習筆記能夠幫助你們，從零開始學習 SpreadJS，并逐步精通。

本周學習計劃一：SpreadJS 的表單

初始化 SpreadJS 表單

你可以在 SpreadJS 中添加一個或多個表單。如圖所示，點擊按鈕，即可新增、刪除、清空表單：

SpreadJS 邊框網(wǎng)格線

SpreadJS 可自定義是否顯示網(wǎng)格線，并允許設置各種邊框的樣式。

隱藏與顯示

SpreadJS 用于控制隱藏顯示的代碼為：sheet.visible(false)

點擊【隱藏】【顯示】按鈕可依次隱藏、顯示表單。

縮放

SpreadJS 通過以下方法控制縮放：sheet.zoom(number)，number 的值在0-1之間會縮小，1以上會放大。

行頭與列頭

SpreadJS 可以對行頭、列頭的樣式進行自定義，比如增加行頭、合并行頭單元格、設置寬度等，還可控制是否顯示行頭列頭，并將行標列表設定為空、數(shù)字或字母。

合并單元格

sheet.addSpan() 方法可以實現(xiàn)合并單元格：

SpreadJS 允許用戶通過拖拽的方式合并單元格：

凍結行列

SpreadJS 可以控制凍結行列，上圖中的紅線為凍結線，凍結線顏色、樣式均可自定義，如將凍結線的顏色設置為紅色：sheet.options.frozenlineColor = ‘red’

獲取與設置數(shù)據(jù)

SpreadJS 用于操作數(shù)據(jù)的方法包含：setText、getText、copyTo、moveTo、clear 五種。

舉例：

// 如將行索引5、列索引4的內(nèi)容，復制到行索引6、列索引5，并復制2行1列，可以設置如下參數(shù)

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

設置公式

SpreadJS支持在單元格中設置公式，如下圖實現(xiàn)的簡單加法公式：

設置字體

SpreadJS 提供字體設置，允許用戶設置字體風格、大小、斜體等：

設置樣式

SpreadJS 可以自定義單元格樣式，如背景色、字體顏色、內(nèi)容排列方向等。此外，還可以設定一套常用的樣式模板，一鍵套用。

SpreadJS 單元格的樣式在不同的層級結構中具有不同的優(yōu)先級別, 如下: 單元格 > 行 > 列

精確選擇單元格

SpreadJS 可以設定最小選擇單元為：單元格、行或列的任意一項，例如設定最小選擇列，點選任意單元格會選中整列：

自定義行為

SpreadJS 支持撤銷/取消撤銷操作，快捷鍵為 ctrl z/ctrl y。

表單保護

通過設置 isProtected 屬性可以保護表單不被用戶編輯。設置 protectionOptions 屬性可以限制用戶的各種行為。

例如過濾權限被放開時，點列頭下拉框可以進行過濾操作，取消該權限則點不動向下箭頭：

允許插入行時，在行頭處點擊右鍵，即可插入新行：

分組列

對于有分層結構的數(shù)據(jù)，可以通過 SpreadJS 讓數(shù)據(jù)呈現(xiàn)樹形結構，如下圖。此外，用戶還可以自定義圖標、控制 checkbox 顯示狀態(tài)：

基本函數(shù)、INDIRECT、通配符

setFormula 用于設置基本函數(shù)，如求平均值、合計、最大值和最小值，INDIRECT 函數(shù)用于返回特定單元格的內(nèi)容，如 INDIRECT（“B4”）返回B4單元格的內(nèi)容。需要注意：若傳參不帶引號，則返回單元格所指向的內(nèi)容，如 INDIRECT（E4）返回的是 E4 所指向的單元格的數(shù)據(jù)。

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

INDIRECT（E4） = 丁玉琴

SpreadJS Demo 示例

以下是我在學習 SpreadJS 表單的過程中，自己寫的 Demo 示例，供大家參考。

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

本周學習計劃二：SpreadJS 的函數(shù)

自定義函數(shù)

SpreadJS 內(nèi)置了很多函數(shù)，包括很多常用的基本函數(shù)，但是在遇見較為特殊的方法，基本函數(shù)無法滿足需求時，可以添加自定義函數(shù)。

例如，根據(jù)三角形的底和高來求三角形的面積，我們可以自定義函數(shù) calcuArea，用 addCustomFunction 方法將該自定義函數(shù)加在表單中，再使用 setFormula 給單元格綁定自定義函數(shù)。

數(shù)組公式

SpreadJS 使用 setArrayFormula 方法來設置數(shù)組公式。如下圖，E5 到 E8 便是使用數(shù)組公式計算出來的三角形面積

異步函數(shù)

當計算方法或者數(shù)據(jù)不能立刻獲取時，可以使用異步函數(shù)來進行計算。SpreadJS 可使用添加自定義函數(shù)的方法來添加并定義異步函數(shù)，通過設置 defaultValue 的值，在計算結果還出來時代替計算結果，通過使用 evaluateAsync 方法來進行計算，并且在異步計算完畢后使用context.setAsyncResult 方法返回 SpreadJS 。

如下圖，E8位置的數(shù)據(jù)使用異步函數(shù)計算，在前三秒顯示【計算中… 】，計算好后顯示結果35：

您也可獲取當前時刻的異步函數(shù)，如每秒獲取一次當前時刻：

SpreadJS Demo 示例

以下是我在學習 SpreadJS 函數(shù)的過程中，自己寫的Demo示例，供大家參考。

• function.zip

OK，今天先記錄到這里，下一周學習計劃： SpreadJS 的數(shù)據(jù)綁定、臟數(shù)據(jù)和單引號前綴。

PS：文中提到的學習視頻和示例源碼，都已經(jīng)上傳到 SpreadJS 官網(wǎng)的【入門視頻】中，歡迎大家點擊了解更多，觀看學習。

關于葡萄城

賦能開發(fā)者！葡萄城公司成立于 1980 年，是全球領先的集開發(fā)工具、商業(yè)智能解決方案、管理系統(tǒng)設計工具于一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟件研發(fā)服務，并為中國企業(yè)的信息化提供國際先進的開發(fā)工具、軟件和研發(fā)咨詢服務。葡萄城的控件和軟件產(chǎn)品在國內(nèi)外屢獲殊榮，在全球被數(shù)十萬家企業(yè)、學校和政府機構廣泛應用。