表單&函數(shù)

闊別多日， SpreadJS 新人學(xué)習(xí)筆記，本周起正式回歸！

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

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

本周學(xué)習(xí)計(jì)劃一：SpreadJS 的表單

初始化 SpreadJS 表單

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

SpreadJS 邊框網(wǎng)格線

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

隱藏與顯示

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

點(diǎn)擊【隱藏】【顯示】按鈕可依次隱藏、顯示表單。

縮放

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

行頭與列頭

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

合并單元格

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

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

凍結(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è)置公式，如下圖實(shí)現(xiàn)的簡(jiǎn)單加法公式：

設(shè)置字體

SpreadJS 提供字體設(shè)置，允許用戶設(shè)置字體風(fēng)格、大小、斜體等：

設(shè)置樣式

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

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

精確選擇單元格

SpreadJS 可以設(shè)定最小選擇單元為：?jiǎn)卧?、行或列的任意一?xiàng)，例如設(shè)定最小選擇列，點(diǎn)選任意單元格會(huì)選中整列：

自定義行為

SpreadJS 支持撤銷(xiāo)/取消撤銷(xiāo)操作，快捷鍵為 ctrl z/ctrl y。

表單保護(hù)

通過(guò)設(shè)置 isProtected 屬性可以保護(hù)表單不被用戶編輯。設(shè)置 protectionOptions 屬性可以限制用戶的各種行為。

例如過(guò)濾權(quán)限被放開(kāi)時(shí)，點(diǎn)列頭下拉框可以進(jìn)行過(guò)濾操作，取消該權(quán)限則點(diǎn)不動(dòng)向下箭頭：

允許插入行時(shí)，在行頭處點(diǎn)擊右鍵，即可插入新行：

分組列

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

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

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

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

INDIRECT（E4） = 丁玉琴

SpreadJS Demo 示例

以下是我在學(xué)習(xí) SpreadJS 表單的過(guò)程中，自己寫(xiě)的 Demo 示例，供大家參考。

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

本周學(xué)習(xí)計(jì)劃二：SpreadJS 的函數(shù)

自定義函數(shù)

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

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

數(shù)組公式

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

異步函數(shù)

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

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

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

SpreadJS Demo 示例

以下是我在學(xué)習(xí) SpreadJS 函數(shù)的過(guò)程中，自己寫(xiě)的Demo示例，供大家參考。

• function.zip

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

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

關(guān)于葡萄城

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