劉浩

摘要：本文通過對報表的電子化，通過web方式構(gòu)建復(fù)雜表格，設(shè)計表格的報送系統(tǒng)，來實現(xiàn)表格信息的匯總和統(tǒng)計，大幅度的提升了工作效率。

關(guān)鍵詞：數(shù)據(jù)統(tǒng)計;Web;復(fù)雜表格

中圖分類號：TP311.1 文獻(xiàn)標(biāo)識碼：A 文章編號：1007-9416（2019）09-0071-01

1 背景

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

2 需求分析

通過對需要提交的復(fù)雜報表的結(jié)構(gòu)，邏輯關(guān)系進(jìn)行分析，在設(shè)計過程中為滿足以下幾個功能：

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

3 技術(shù)準(zhǔn)備

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

4 應(yīng)用實現(xiàn)

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

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

5 結(jié)語

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

參考文獻(xiàn)

[1] 用AngularJS開發(fā)下一代Web應(yīng)用[M].電子工業(yè)出版社，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