表單&函數(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è)置寬度等，還可控制是否顯示行頭列頭，并將行標(biāo)列表設(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è)置字體風(fēng)格、大小、斜體等：

設(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)，如下圖。此外，用戶還可以自定義圖標(biāo)、控制 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ù)

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

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

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

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)用。