摘要：復(fù)制粘貼單元格格式和單元格類型本周，讓我們一起來學(xué)習(xí)的復(fù)制粘貼單元格格式和單元格類型，希望我的學(xué)習(xí)筆記能夠幫助你們，從零開始學(xué)習(xí)，并逐步精通。

本周，讓我們一起來學(xué)習(xí)SpreadJS 的復(fù)制粘貼、單元格格式和單元格類型，希望我的學(xué)習(xí)筆記能夠幫助你們，從零開始學(xué)習(xí) SpreadJS，并逐步精通。

在此前的學(xué)習(xí)筆記中，相信大家已經(jīng)學(xué)會并熟練掌握了SpreadJS的基本使用方法。下面，我們將更進(jìn)一步，深入了解SpreadJS的數(shù)據(jù)綁定、單元格類型及前端導(dǎo)入導(dǎo)出Excel等核心功能，充分體驗“僅需100多行代碼，就可將Excel嵌入Web應(yīng)用系統(tǒng)” 的全過程。

SpreadJS 學(xué)習(xí)筆記的配套視頻資料，請在此頁面觀看、下載。

將模板內(nèi)容復(fù)制粘貼到Excel

SpreadJS 支持將模板內(nèi)容通過復(fù)制粘貼的方式，導(dǎo)入Excel中，且保持復(fù)制粘貼內(nèi)容的最大完整性和樣式，通過設(shè)置Workbook的options屬性的allowCopyPasteExcelStyle方法，可設(shè)置復(fù)制粘貼是否帶樣式。

如果允許復(fù)制粘貼樣式，即可選擇并復(fù)制一片帶樣式的區(qū)域，在Excel中的粘貼效果如下：

如果取消允許復(fù)制粘貼樣式，此時再次執(zhí)行復(fù)制粘貼操作，則會在 Excel中顯示如下（樣式未被粘貼）：

擴(kuò)展 SpreadJS 的粘貼區(qū)域

當(dāng)粘貼區(qū)域不夠時，SpreadJS支持自動擴(kuò)展，可通過設(shè)置workbook.options.allowExtendPasteRange 屬性來實現(xiàn)此效果。
舉例，復(fù)制10行數(shù)據(jù)，在第28行的位置粘貼，SpreadJS模板的行數(shù)自動擴(kuò)展到40行。取消選擇【擴(kuò)展粘貼區(qū)域】這個功能項時，無法粘貼成功。

復(fù)制粘貼增強(qiáng)

SpreadJS 的復(fù)制粘貼增強(qiáng)功能包含：復(fù)制時是否帶行頭列頭。通過workbook.options.copyPasteHeaderOptions 屬性可設(shè)置復(fù)制時是否帶行頭、列頭，
如下圖，在【復(fù)制粘貼增強(qiáng)】下拉框中選擇含行頭列頭，選中整個B列、復(fù)制，在Excel中粘貼，效果如下，發(fā)現(xiàn)表頭B也被粘貼上：

SpreadJS 復(fù)制粘貼示例：copyPaste.zip

使用 SpreadJS 可以為每個單元格設(shè)定不同的格式，常用的有時間格式、數(shù)字格式等。當(dāng)原始數(shù)據(jù)不是我們想要的樣子時，都可以通過setFormatter方法設(shè)定格式。

如下圖，輸入框中輸入日期時間和數(shù)字，點擊下圖中的設(shè)置格式按鈕，即可在【展示效果】列生成展示效果：

自定義單元格格式

如果您需要創(chuàng)建一套有特殊規(guī)則的格式，例如下圖中的余額列：當(dāng)余額為負(fù)數(shù)的時候顯示紅色，0-1000為黃色、1000以上為綠色時，對于這樣的需求可以使用自定義格式，效果如下圖：

會計專用格式

SpreadJS支持會計專用格式，可以滿足幾乎所有日常財務(wù)需要，最為常用的是數(shù)字格式化，為數(shù)字設(shè)置貨幣符號如人民幣符號"￥"、美元符號"$"、保留確定位數(shù)的小數(shù)位等。對于會計專業(yè)會使用到的：添加空格、重復(fù)字符、千分符與數(shù)值縮放、百分?jǐn)?shù)、數(shù)字占位符等都可以使用下圖中展示的方式來設(shè)置：

SpreadJS 自定義單元格格式示例：CellFormatter.zip

SpreadJS 中的單元格可以被設(shè)置為不同的類型，如按鈕、checkbox、下拉框、超鏈接、或自定義單元格等。您可以多帶帶給一個單元格設(shè)置類型，也可以把單元格類型綁定到某一列上，讓某一列成為一種類型的單元格。

按鈕單元格

您通過【按鈕單元格】可設(shè)定按鈕在單元格的位置，距離各邊距的位置、背景色和文字等。

// CellTypes可以是 Button、CheckBox、Combobox、hyperlink

var b1 = new GC.Spread.Sheets.CellTypes.Button();

sheet.setCellType(3, 2, b1, GC.Spread.Sheets.SheetArea.viewport);

復(fù)選框單元格

SpreadJS的【復(fù)選框單元格】默認(rèn)有兩種狀態(tài)：選中和未選中。當(dāng)然，用戶也可通過isThreeState(true) 設(shè)定為三種狀態(tài)：選中、未選中和不確定狀態(tài)。

普通組合框單元格（單選下拉框）

通過設(shè)定是否可編輯editable()，您可以控制單元格是單選可輸入框或者單選不可輸入框。

超鏈接單元格

您可設(shè)置鼠標(biāo)懸浮提示信息、設(shè)置未訪問及以訪問過的字體顏色、控制文本縮進(jìn)、對齊方式、自動換行、設(shè)置回調(diào)函數(shù)等。如在下圖中，點擊超鏈接在回調(diào)中改變了表單名的樣式。

自定義單元格

在下面的例子中，姓名列為自定義單元格列，點擊后可多帶帶編輯：

自定義列頭

設(shè)定一個自定義超鏈接格式的列頭，點擊后對該列進(jìn)行排序：

具體實現(xiàn)方法請查看示例：cellType.rar

以上就是SpreadJS 復(fù)制粘貼、單元格格式和單元格類型的學(xué)習(xí)筆記，希望通過我的記錄，您能快速掌握這些知識。也歡迎您加入葡萄城前端技術(shù)QQ群（720389894），第一時間獲取產(chǎn)品更新資訊以及前端開發(fā)趨勢。

下一周學(xué)習(xí)計劃： SpreadJS的圖表與形狀。

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

>>視頻地址