表單&函數(shù)
闊別多日， SpreadJS 新人學(xué)習(xí)筆記，本周起正式回歸！
（在斷更的這一個月中，我為大家先后錄制了14期 SpreadJS 產(chǎn)品入門系列學(xué)習(xí)視頻，希望幫助那些正在學(xué)習(xí)和使用 SpreadJS 的同學(xué)全面、快速地了解產(chǎn)品，并盡快在實際項目中感受到 SpreadJS 強大的前端表格功能！這些視頻目前已經(jīng)在 GCDN 技術(shù)論壇中發(fā)布，歡迎大家觀看學(xué)習(xí)，并提出意見和建議。）
本周，我會詳細介紹 SpreadJS 的表單及函數(shù)，希望我的學(xué)習(xí)筆記能夠幫助你們，從零開始學(xué)習(xí) SpreadJS，并逐步精通。
本周學(xué)習(xí)計劃一：SpreadJS 的表單
初始化 SpreadJS 表單
你可以在 SpreadJS 中添加一個或多個表單。如圖所示，點擊按鈕，即可新增、刪除、清空表單：
SpreadJS 邊框網(wǎng)格線
SpreadJS 可自定義是否顯示網(wǎng)格線，并允許設(shè)置各種邊框的樣式。
隱藏與顯示
SpreadJS 用于控制隱藏顯示的代碼為：sheet.visible(false)
點擊【隱藏】【顯示】按鈕可依次隱藏、顯示表單。
縮放
SpreadJS 通過以下方法控制縮放：sheet.zoom(number)，number 的值在0-1之間會縮小，1以上會放大。
行頭與列頭
SpreadJS 可以對行頭、列頭的樣式進行自定義，比如增加行頭、合并行頭單元格、設(shè)置寬度等，還可控制是否顯示行頭列頭，并將行標列表設(shè)定為空、數(shù)字或字母。
合并單元格
sheet.addSpan() 方法可以實現(xiàn)合并單元格：
SpreadJS 允許用戶通過拖拽的方式合并單元格：
凍結(jié)行列
SpreadJS 可以控制凍結(jié)行列，上圖中的紅線為凍結(jié)線，凍結(jié)線顏色、樣式均可自定義，如將凍結(jié)線的顏色設(shè)置為紅色：sheet.options.frozenlineColor = \’red\’
獲取與設(shè)置數(shù)據(jù)
SpreadJS 用于操作數(shù)據(jù)的方法包含：setText、getText、copyTo、moveTo、clear 五種。
舉例：
// 如將行索引5、列索引4的內(nèi)容，復(fù)制到行索引6、列索引5，并復(fù)制2行1列，可以設(shè)置如下參數(shù)
sheet.copyTo(5, 4, 6, 5, 2, 1, spreadNS.CopyToOptions.all);
設(shè)置公式
SpreadJS支持在單元格中設(shè)置公式，如下圖實現(xiàn)的簡單加法公式：
設(shè)置字體
SpreadJS 提供字體設(shè)置，允許用戶設(shè)置字體風格、大小、斜體等：
設(shè)置樣式
SpreadJS 可以自定義單元格樣式，如背景色、字體顏色、內(nèi)容排列方向等。此外，還可以設(shè)定一套常用的樣式模板，一鍵套用。
SpreadJS 單元格的樣式在不同的層級結(jié)構(gòu)中具有不同的優(yōu)先級別, 如下: 單元格 > 行 > 列
精確選擇單元格
SpreadJS 可以設(shè)定最小選擇單元為：單元格、行或列的任意一項，例如設(shè)定最小選擇列，點選任意單元格會選中整列：
自定義行為
SpreadJS 支持撤銷/取消撤銷操作，快捷鍵為 ctrl z/ctrl y。
表單保護
通過設(shè)置 isProtected 屬性可以保護表單不被用戶編輯。設(shè)置 protectionOptions 屬性可以限制用戶的各種行為。
例如過濾權(quán)限被放開時，點列頭下拉框可以進行過濾操作，取消該權(quán)限則點不動向下箭頭：
允許插入行時，在行頭處點擊右鍵，即可插入新行：
分組列
對于有分層結(jié)構(gòu)的數(shù)據(jù)，可以通過 SpreadJS 讓數(shù)據(jù)呈現(xiàn)樹形結(jié)構(gòu)，如下圖。此外，用戶還可以自定義圖標、控制 checkbox 顯示狀態(tài)：
基本函數(shù)、INDIRECT、通配符
setFormula 用于設(shè)置基本函數(shù)，如求平均值、合計、最大值和最小值，INDIRECT 函數(shù)用于返回特定單元格的內(nèi)容，如 INDIRECT（“B4”）返回B4單元格的內(nèi)容。需要注意：若傳參不帶引號，則返回單元格所指向的內(nèi)容，如 INDIRECT（E4）返回的是 E4 所指向的單元格的數(shù)據(jù)。
如下圖：INDIRECT（“B4”） = 丁玉琴
INDIRECT（E4） = 丁玉琴
SpreadJS Demo 示例
以下是我在學(xué)習(xí) SpreadJS 表單的過程中，自己寫的 Demo 示例，供大家參考。
- sheetDemo1.zip
- sheetDemo2.zip
- sheetDemo3_protect_outlineCol.zip
- unction.zip
本周學(xué)習(xí)計劃二：SpreadJS 的函數(shù)
自定義函數(shù)
SpreadJS 內(nèi)置了很多函數(shù)，包括很多常用的基本函數(shù)，但是在遇見較為特殊的方法，基本函數(shù)無法滿足需求時，可以添加自定義函數(shù)。
例如，根據(jù)三角形的底和高來求三角形的面積，我們可以自定義函數(shù) calcuArea，用 addCustomFunction 方法將該自定義函數(shù)加在表單中，再使用 setFormula 給單元格綁定自定義函數(shù)。
數(shù)組公式
SpreadJS 使用 setArrayFormula 方法來設(shè)置數(shù)組公式。如下圖，E5 到 E8 便是使用數(shù)組公式計算出來的三角形面積
異步函數(shù)
當計算方法或者數(shù)據(jù)不能立刻獲取時，可以使用異步函數(shù)來進行計算。SpreadJS 可使用添加自定義函數(shù)的方法來添加并定義異步函數(shù)，通過設(shè)置 defaultValue 的值，在計算結(jié)果還出來時代替計算結(jié)果，通過使用 evaluateAsync 方法來進行計算，并且在異步計算完畢后使用context.setAsyncResult 方法返回 SpreadJS 。
如下圖，E8位置的數(shù)據(jù)使用異步函數(shù)計算，在前三秒顯示【計算中… 】，計算好后顯示結(jié)果35：
您也可獲取當前時刻的異步函數(shù)，如每秒獲取一次當前時刻：
SpreadJS Demo 示例
以下是我在學(xué)習(xí) SpreadJS 函數(shù)的過程中，自己寫的Demo示例，供大家參考。
- function.zip
OK，今天先記錄到這里，下一周學(xué)習(xí)計劃： SpreadJS 的數(shù)據(jù)綁定、臟數(shù)據(jù)和單引號前綴。
PS：文中提到的學(xué)習(xí)視頻和示例源碼，都已經(jīng)上傳到 SpreadJS 官網(wǎng)的【入門視頻】中，歡迎大家點擊了解更多，觀看學(xué)習(xí)。
關(guān)于葡萄城
賦能開發(fā)者！葡萄城公司成立于 1980 年，是全球領(lǐng)先的集開發(fā)工具、商業(yè)智能解決方案、管理系統(tǒng)設(shè)計工具于一身的軟件和服務(wù)提供商。西安葡萄城是其在中國的分支機構(gòu)，面向全球市場提供軟件研發(fā)服務(wù)，并為中國企業(yè)的信息化提供國際先進的開發(fā)工具、軟件和研發(fā)咨詢服務(wù)。葡萄城的控件和軟件產(chǎn)品在國內(nèi)外屢獲殊榮，在全球被數(shù)十萬家企業(yè)、學(xué)校和政府機構(gòu)廣泛應(yīng)用。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔相關(guān)法律責任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報，一經(jīng)查實，本站將立刻刪除。