基于web的復雜表格實踐

劉浩

摘要：本文通過對報表的電子化，通過web方式構建復雜表格，設計表格的報送系統，來實現表格信息的匯總和統計，大幅度的提升了工作效率。

關鍵詞：數據統計;Web;復雜表格

中圖分類號：TP311.1 文獻標識碼：A 文章編號：1007-9416（2019）09-0071-01

1 背景

在信息化的過程中，單位需要將一些復雜的表格進行匯總統計，人工進行匯總統計，不僅工作量巨大，在統計過程中還容易出現差錯，校對起來也費時費力，報表的電子化也成為了無法回避剛性的需求。因此將表格電子化，運用計算機軟件對報表的內容進行收集匯總和統計，成為了一個有效率的解決方案。

2 需求分析

通過對需要提交的復雜報表的結構，邏輯關系進行分析，在設計過程中為滿足以下幾個功能：

（1）填寫項數量有190個，主要分為選擇和填空兩種。（2）在填空中，分為必填項和選填項，對所填內容的格式和字數也有一定的要求，有的空只能填寫數字，有的空有字數的限制，填寫數字的選項還需要能進行統計。（3）表格中的幾組空格還有邏輯關系，某幾個填寫項目具有相關性，要進行相關性驗證，有些復選框需要選中后，才能保存后面的內容。有些填寫數字的空格需要進行計算校驗，比如總金額要等于下面各分項金額的和等。（4）所有單位提交上來的表格需要進行分項統計，對一些項目進行數量統計，對一些項目進行求和統計。（5）表格需要按照紙質表格的樣式進行展示，并可以在線打印，打印的時候要保證表格的樣式和紙質的文件結構相同。（6）每一年的表格都有一些調整，會有加進幾個填寫項目，減少幾個填寫項目，但是每年的表格需要保持完整性和回溯性。每年的表格中的相同數據項還需要進行年度趨勢的統計對比。

3 技術準備

研究了一款國外的表格框架和MVC的開發模式：（1）AngularJS是一款優秀的前端JS框架，已經被用于Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVC（Model view controller）、模塊化、自動化雙向數據綁定等。AngularJS在構建一個CRUD（增加Create、查詢Retrieve、更新Update、刪除Delete）的應用時可能用到的內容包括：數據綁定、基本模板標識符、表單驗證、組件重用[1]。AngularJS的設計理念對于表格項目有很好的借鑒意義。（2）MVC是一種使用MVC（Model View Controller模型-視圖-控制器）設計創建Web應用程序的模式：Model（模型）表示應用程序核心（比如數據庫記錄列表）。View（視圖）顯示數據（數據庫記錄）。Controller（控制器）處理輸入（寫入數據庫記錄）。MVC模式同時提供了對 HTML、CSS 和JavaScript的完全控制。Model（模型）是應用程序中用于處理應用程序數據邏輯的部分。通常模型對象負責在數據庫中存取數據。View（視圖）是應用程序中處理數據顯示的部分。通常視圖是依據模型數據創建的。Controller（控制器）是應用程序中處理用戶交互的部分。通?？刂破髫撠煆囊晥D讀取數據，控制用戶輸入，并向模型發送數據。MVC分層有助于管理復雜的應用程序，因為您可以在一個時間內專門關注一個方面。例如，您可以在不依賴業務邏輯的情況下專注于視圖設計。同時也讓應用程序的測試更加容易[2]。

4 應用實現

表格的操作包含了表格初始化，表格的數據驗證，表格數據保存和表格數據展示。因此在設計當中，參考了mvc的設計模型和AngularJS的實現方式，將表格本身提煉了出來，作為一個獨立的表格對象，考慮到和應用的結合需要，將表格的結構直接映射成數據庫表中的字段，展示和添加修改都讀取這個表格對象，保證了表格的完整性，表格校驗也包含在表格對象中，其中包含以下幾個部分：

（1）每個填寫項目都和數據庫中的表格項目一一對應，每個選項的字段名和表格中每個填寫項的id號進行一一對應。這樣每年有增減的時候，大部分的項目都可以保持穩定和延續，增加的項目需要在數據庫的表中對應增加項目，減少的項目仍然保留，以保證前面表格的完整性。在操作的時候，可以通過對表格對象中的填寫項目進行遍歷來構建數據庫語句，完成表格內容的新建和修改，表格的變動和調整不會影響后臺對表格的數據操作。將數據從數據庫中讀取以后，根據每個字段和表格填寫項的對應關系，構建成表格的初始化數據。（2）表格的結構，在實際的測試中發現，使用table，tr和td來構建表格，在打印和顯示控制的時候都出現了瀏覽器的兼容性問題，因此使用div標簽來構建表格，應用了其中table，table-cell，table-row的屬性，由于沒有colspan和rowspan屬性，因此在使用div時，合并表格需要更多的代碼，需要合并的單元格里面再構造一個完整的table屬性的div。一個復雜的表格的代碼看起來變得非常的龐大。但是為了實現與紙質表格結構形式上的一致，保證打印效果和拷貝到word的時候不會變形，因此將表格對象分別使用div和table兩種方式來構建，已滿足不同應用的需要，通過冗余來保證需求的實現。（3）表格中每個填寫項的屬性，在屬性中增加每個選項的類型，最大字符數和填寫出錯的提示信息。填寫項包括文字輸入框，選擇框，多選框，單選框，大文本輸入框。每個填寫項的存儲類型有整型（int），浮點型（float），文本型（string）。（4）對表格完整性和相關性驗證加入到這個對象中。設置了必填項和選填項，對數字進行驗證，在需要填寫數字的項目中不能寫入其他字符，對數字整型和浮點型進行驗證，對選項中的相關性進行驗證，比如有一組選項，只有第一項填寫后，其他項目才能填寫。相關性中還對數字進行驗證，比如求和驗證，每個分項目相加需和填寫的總數相等。（5）展示層通過后臺服務器提供的表格數據和表格對象來構建表格的編輯界面和打印界面。通過對表格元素的改寫和隱藏實現不同模式的加載。在展示表格的時候，需要把輸入框，選擇框全部去掉，把實際的內容加載到原來輸入框和選擇框的位置。在打印和復制到word的時候，需要根據不同的模式，顯示不同的表格對象。（6）統計信息的生成，根據各單位填報的表格數據和需要，進行數據的匯總和實時統計，對大部分填寫項進行數據求和統計，對一組類別里面的填寫項目里面需要算出每個填寫項目所占的比重。對于填寫的數字項目進行分項累加，算出總值。

5 結語

通過對表格對象，表格顯示校驗存儲的一體化設計，帶來的好處：（1）通過mvc的設計模式，將數據邏輯，展現和交互清晰的分隔開來，代碼不再混合，頁面復雜度大大降低。頁面數量也大大減少，以往的模式需要將每個表格的添加修改和展示都編寫一套頁面，現在只需要編寫一套添加修改和打印的頁面就可以滿足需求，展示頁面代碼也變得小巧簡潔，易于維護和擴展。（2）表格的構造，填寫項的類型，出錯提示，邏輯判斷都集中到了一起，更易于表格的維護和修改。（3）將每年的表格單獨保存成一個對象，滿足了每年的表格調整的需要，增強了系統的可擴展性，也保持了數據的完整性和回溯性，也為年度數據之間的趨勢對比提供了數據基礎。（4）滿足了客戶對于展示和留檔統計的需要，能方便的進行擴展，也滿足了客戶每年新增的需求，使項目得以延續。

參考文獻

[1] 用AngularJS開發下一代Web應用[M].電子工業出版社，2013.

Abstract：In this paper through the electronic report forms， through the Web way to build complex forms， design the report system of forms， to achieve the summary and statistics of form information， greatly improving the efficiency of work.

Key words：data statistics;Web;complex tables