表單&函數
闊別多日， 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示例，供大家參考。
l sheetDemo3_protect_outlineCol.zip
本周學習計划二：SpreadJS 的函數
自定義函數
SpreadJS內置了很多函數，包括很多常用的基本函數，但是在遇見較為特殊的方法，基本函數無法滿足需求時，可以添加自定義函數。例如，根據三角形的底和高來求三角形的面積，我們可以自定義函數calcuArea，用addCustomFunction方法將該自定義函數加在表單中，再使用setFormula給單元格綁定自定義函數。
數組公式
SpreadJS使用setArrayFormula方法來設置數組公式。如下圖，E5到E8便是使用數組公式計算出來的三角形面積
異步函數
當計算方法或者數據不能立刻獲取時，可以使用異步函數來進行計算。SpreadJS可使用添加自定義函數的方法來添加並定義異步函數，通過設置defaultValue的值，在計算結果還出來時代替計算結果，通過使用evaluateAsync方法來進行計算，並且在異步計算完畢后使用context.setAsyncResult方法返回SpreadJS 。
如下圖，E8位置的數據使用異步函數計算，在前三秒顯示【計算中... 】，計算好后顯示結果35：
您也可獲取當前時刻的異步函數，如每秒獲取一次當前時刻：
SpreadJS Demo 示例
以下是我在學習 SpreadJS 函數的過程中，自己寫的Demo示例，供大家參考。
OK，今天先記錄到這里，下一周學習計划： SpreadJS的數據綁定、臟數據和單引號前綴。
PS：文中提到的學習視頻和示例源碼，都已經上傳到SpreadJS官網的【入門視頻】中，歡迎大家觀看學習。
>>視頻地址