轉帖|使用教程|編輯:王香|2019-04-02 13:55:25.000|閱讀 523 次
概述:SpreadJS表格控件有著很強大的功能:序列化與反序列化表格。熟練使用該功能達到加快開發進度,減少代碼量,降低業務邏輯復雜度,處理一些特殊邏輯需求等效果。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
SpreadJS表格控件有著很強大的功能:序列化與反序列化表格。熟練使用該功能達到加快開發進度,減少代碼量,降低業務邏輯復雜度,處理一些特殊邏輯需求等效果。
功能使用介紹:
通過序列化可以將當前的整個spread序列化成為JSON格式進行存儲。通過spread.toJSON(serializationOption)方法就可以做到,方法中還提供一些選項可以用來控制序列化的結果:
var serializationOption = { ignoreFormula: true, // 如果設置為true則忽略公式,不會序列化公式,只會將公式計算的結果序列化到JSON中。 ignoreStyle: true, // 如果設置為true則忽略樣式,所有style中的屬性將不會序列化到JSON中 rowHeadersAsFrozenColumns: true, // 將行頭轉換為凍結列序列化 columnHeadersAsFrozenRows: true, // 將列頭轉換為凍結行序列化 includeBindingSource: true // 將數據綁定的數據源也序列化到json中 }
通過反序列化可以將之前序列化的JSON格式的對象反序列化成為頁面進行展示。通過spread2.fromJSON(json, jsonOptions)方法可以做到,同樣方法中也提供一些選項來控制反序列化的結果:
var jsonOptions = { ignoreFormula: true, // 如果設置為true則忽略公式,反序列化時忽略公式,只會將公式計算的結果反序列化展示到頁面中。 ignoreStyle: true, // 如果設置為true則忽略樣式,不會將style中的屬性反序列化展示 frozenColumnsAsRowHeaders: true, // 將凍結列轉換為行頭 frozenRowsAsColumnHeaders: true, // 將凍結行轉換為列頭 doNotRecalculateAfterLoad: true, // 反序列化后公式不進行重新計算 }
1、在設計器中使用序列化和反序列化:
通過SpreadJS提供的設計器可以快速的進行模板設計,設計器中可以通過拖拽,點擊,配置等操作快速進行模板設置從而節省大量的代碼編輯操作。當在設計器中設計好模板之后可以通過設計器提供的導出功能,將模板導出成ssjson文件(該文件就是將序列化toJSON之后生成JSON格式保存成的文件)。
在頁面展示的時候我們可以在js中讀取該文件(例如jquery的\$.getJSON(),通過js文件讀取等方式),并將獲取到的json對象通過spread.fromJSON反序列化成頁面展示。這樣就完成了模板的快速構建。
2、差異化處理
在用戶的業務邏輯中經常需要進行一些差異化的處理,例如:填報模板的中設置的公式,不希望在導出的時候被導出。那么可以通過在tojson中進行設置來忽略。
3、多列頭的導出
SpreadJS中有一些擴展的功能例如多列頭是Excel不支持的,而該功能經常在業務邏輯中被使用,所以如果有同時需要導出Excel的處理這種魚和熊掌不可兼得的事情往往會產生很多困擾,那么為了解決這樣的問題,在導出之前的toJSON時就可以通過設置columnHeadersAsFrozenRows屬性,之后將生成的json在導出時傳遞給ExcelIO,這樣導出的Excel中會將SpreadJS的多列頭通過凍結行來進行顯示。例如下面的表格:
設置了多行頭與多列頭,要想導出Excel中包含行頭和列頭的信息,可以在toJSON的時候設置rowHeadersAsFrozenColumns與columnHeadersAsFrozenRows這兩個屬性,那么導出之后就可以將行頭列頭信息顯示在Excel中,像這樣:
純前端表格控件SpreadJS,是市面上布局與功能都與 Excel 高度類似的一款表格控件,全中文操作界面,適用于.NET、Java、移動端等多個平臺的類 Excel 數據開發,備受華為、中通、民航飛行學院等國內知名企業客戶青睞。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn