【案例分享】在 React 框架中使用 SpreadJS 純前端表格控制項

 本期葡萄城公開課，將由國電聯合動力技術有限公司，資深前端開發工程師——李林慧女士，與大家在線分享「在 React 框架中使用 SpreadJS 純前端表格控制項」的實戰開發經驗。

 

直播地址：http://live.vhall.com/723418543

直播時間：2019-07-03（星期三）下午 14:00

國電聯合動力技術有限公司於2007年6月成立，註冊資本3.13億元，擁有五個全資子公司及五個控股公司，總部位於北京，在全國設有多家生產基地。作為中國國電集團為發展中國綠色能源事業需要，解決風電關鍵、重大設備國產化問題而組建的高新技術公司，國電聯合動力技術有限公司為構建低碳和諧社會、鑄造值得信賴的國產風機品牌提供了強大的技術支持，公司主營業務包括風電機組設計、生產製造、研究開發、銷售服務等。

 

以下是本期公開課部分精彩導讀，更多內容還請預約觀看交流。

 

項目背景：

公司採購SpreadJS 純前端表格控制項，其主要應用場景是開發一套完善的日常業務流程管理系統，該系統以部門為單位劃分，每周由各部門填報人員，根據系統運行情況、日常運營數據等在系統中進行填報，後交由部門進行數據匯總，並在移動端/PC端系統頁面進行數據展示。

 

在採購SpreadJS 純前端表格控制項之前，公司使用excel進行數據匯總，無法保證各部門的數據流通及時、共享。在經過技術調研後，決定使用SpreadJS（該控制項的功能、布局和操作均接近原生Excel）開發業務流程管理系統。通過該系統，部門領導可以實時查看業務運行狀況並給予反饋意見，保證數據流通實時、有效。

了解更多 SpreadJS 純前端表格控制項：https://www.grapecity.com.cn/developer/spreadjs

 

選擇SpreadJS的主要原因：

1.     功能、布局與Excel高度一致，數據操作、使用習慣均接近原生Excel

2.     可在前端導入、導出 Excel 文件，且保持文件的最大完整性

3.     支持所有常見的Excel公式函數

 

本期公開課大綱：

1.     SpreadJS常用組件及其屬性

a.     SpreadSheets

b.     Worksheet

2.     渲染過程

3.     自定義數據驗證及Demo演示

4.     課程答疑

 

SpreadJS常用組件及其屬性

<SpreadSheets>

 

·       rowChanged：主要用於刪除整行觸發，需要判斷 propertyName 屬性

 

·       valueChanged：改變單元格值觸發

·  

·      rangeChanged：輸入公式、delete 刪除數據、移動單元格觸發

  workbookInitialized：初始化表格控制項，返回一個 spread 實例

 

 

<Worksheet>

 

·       dataSource：數據源

·       name：工作簿名稱

·      < Column>

……

 

渲染過程

1.     workbookInitialized返回一個spread實例，在init方法裡可以對options按需進行配置。有了spread實例後也就可以生成一個Excel實例對象，其中包含了常用的spread和spreadNS，以及自定義的一些常用spread方法，比如搜索功能、自適應高度等。

 

2.     從伺服器端獲取報表數據後，再根據報表保存的模板id獲取對應的表頭模板，渲染表頭時可以做一些前期工作，如定義選項類的單元格、定義單元格的格式、公式等。

 

3.     將報表數據賦值給Worksheet組件的dataSource屬性。

4.     渲染完畢。

 

自定義數據驗證及Demo演示

1.     數據驗證高亮樣式（Data Validation Highlight Style）：SpreadJS 支持自定義數據驗證樣式和不同的單元格突出顯示類型，包括 circle，dogear 和 icon。

 

2.     數據驗證代碼

  

  

 

課程答疑Q&A

Q：為何數據量很小，但頁面加載時會出現卡頓

A：凡是涉及到表格重繪的地方最好都用 spread.suspendPaint() 和 spread.resumePaint() 包裹起來，避免頻繁重繪引起卡頓。

 

 

Q： 如何渲染多重表頭？

A：Column組件尚未支持多重表頭，針對這個問題，可以在渲染表頭步驟時（此時已獲取到有樹形結構的表頭模板），先給表格setDataSource，獲取所有表頭模板的葉子節點後按列進行表單級別的綁定，然後通過操作表頭區域的賦值、合併單元格等操作手動渲染表頭。

 

 

Q：為什麼要引入表頭模板？

A：SpreadJS中每一列的列頭顯示的是中文，但是實際上存取對應的是資料庫中的一個欄位，所以需要通過數據綁定把表格數據和欄位映射起來。其中模板在系統管理內另有維護入口，支持增刪改等基本功能。

 

 

 

關於葡萄城（https://www.grapecity.com.cn/）

賦能開發者！葡萄城公司成立於 1980 年，是全球領先的集開發工具、商業智能解決方案、管理系統設計工具於一身的軟體和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟體研發服務，並為中國企業的信息化提供國際先進的開發工具、軟體和研發諮詢服務。葡萄城的控制項和軟體產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。

【免責聲明：CSDN本欄目發布信息，目的在於傳播更多信息，豐富網絡文化，稿件僅代表作者個人觀點，與CSDN無關。其原創性以及中文陳述文字和文字內容未經本網證實，對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本網不做任何保證或者承諾，請讀者僅作參考，並請自行核實相關內容。凡註明為其他媒體來源的信息，均為轉載自其他媒體，轉載並不代表本網贊同其觀點，也不代表本網對其真實性負責。您若對該稿件由任何懷疑或質疑，請即與CSDN聯繫，我們將迅速給您回應並做處理。】