電子表格控制元件SpreadJS開發案例：一鍵實現多人協同線上表格編輯

一. 企業背景

中國民用航空飛行學院（Civil Aviation Flight University of China）位於成都平原的腹地——四川省廣漢市，是中央部屬高校、聯合國重點推廣的“MPL”課程試點單位，被譽為中國民航飛行員的“搖籃”、中國民航管理幹部的“黃埔軍校”。

二. 專案概況

“人事工資薪酬管理系統”目前主要應用於中國民用航空飛行學院管理內部人員薪資的管理與發放，適用各種工資津貼獎金的彙總、統計和各類財務報表的生成和展示。

三. 選擇表格控制元件SpreadJS的主要原因

表格資料展現：這是我們通過使用 SpreadJS 應用最廣泛的使用場景。把資料庫中的資料以表格的方式加以展現，對資料進行分組、排序、篩選；支援定義顏色、字型字號、填充等多種樣式；允許編輯資料並儲存回資料庫。

在管理平臺中嵌入 Excel 功能：我們的人事薪資管理系統需要象 Excel 一樣豐富的公式和資料處理功能，SpreadJS 很好的幫助我們將這些功能嵌入到企業管理系統中，比如財務資料模型、風險分析、保險計算、工程應用等。

Excel 檔案輸入輸出：我們需要藉助 SpreadJS 把內部資料儲存為 Excel 格式用於對外分發。同樣，我們也需要基於 SpreadJS 把 Excel 檔案中的資料儲存到企業資料資料庫中。

高效能的設計器：通過 Spread 設計器我們已經實現了複雜的商業文件的錄入介面，比如複雜的訂單、發票、保單、報稅表等。

立即體驗電子表格控制元件SpreadJS

四. 實際使用情況

（一）使用模板設計器進行快速開發

通過類似 Excel 的 SpreadJS 設計器，我和同事可以輕鬆設計模板，節約應用程式開發所需的時間和精力。無需編碼，財務、人事管理人員等均可通過 Excel 軟體設計介面，設計計算公式，然後輕鬆匯入設計器或 SpreadJS 中，就可實現模板重用。這大大減輕了工作強度，使得快速開發得以實現。

輕鬆實現資料庫資料繫結設計介面。如下圖，在右側設計好欄位和其型別之後，拖拽到左邊對應的單元格即可。

（二）、應用於各種工資津貼獎金的發放

1、資料展示，繫結資料，方便快捷

SpreadJS 展示資料美觀大方，無論樣式外觀、操作習慣都與 EXCEL 一致，符合很多人事、財務管理人員的檢視習慣。資料繫結可以用 JSON 載入資料，非常方便。實際效果如圖所示：

我們新增了多表對比查詢模組，表內可任意篩選、排序。

2、高速低耗

2678 條資料，瞬時載入，對內部管理系統豪無壓力。

3、方便的編輯儲存

根據需要，系統中使用了兩種編輯資料的樣式，一種是彈窗編輯。這種方式程式設計師要另外編寫程式碼，工作量大。如圖所示：

另一種是直接使用 SpreadJS 進行資料編輯，預設採用行內編輯方式。類似於 EXCEL 操作，很多管理人員喜歡這種簡單的方式。這種方式無需編寫介面相關程式碼，節約開發人員時間成本。

（三）、應用於各類統計報表的生成與展示

1、資料包表是個很麻煩的事兒，但 SpreadJS 可以方便的生成報表

2、報表列印

網頁列印也是蠻麻煩的，SpreadJS 很好的解決這一問題。只需要一個按鍵，和簡單兩行程式碼就搞定了。

下面是我們的列印測試資料：

五. SpreadJS 對於專案的價值

SpreadJS 表單控制元件主要應用於本專案中各類工資表格的展示、編輯和查詢，最後用於彙總生成各類報表並進行展示。

我們的體會是，使用 SpreadJS 我們可以輕鬆設計模板，節約應用程式開發所需的時間和精力。無需編碼，財務、人事管理人員均可通過 Excel 軟體設計介面，設計計算公式，然後輕鬆匯入設計器或 SpreadJS 中，就可實現模板重用。這大大減輕了工作強度，使得快速開發得以實現。

SpreadJS 載入速度快，對內部管理系統無壓力。並且生成報表和網頁列印報表這些麻煩事兒，SpreadJS 都很好的解決了!

六. 關於 SpreadJS 前端表格控制元件

SpreadJS 純前端表格控制元件是基於 HTML5 的 JavaScript 電子表格和網格功能控制元件，適用於 .NET、Java 和移動端等各平臺線上編輯類 Excel 功能的表格程式開發。全中文操作介面，零學習成本！便於您在系統開發過程中，更好的顯示和管理類似 Excel 的資料，更方便的進行公式引擎、排序、過濾、輸入控制元件、資料視覺化、Excel 匯入/匯出等操作。

點選這裡獲取更多文章教程>>