基于web的復(fù)雜表格實(shí)踐

劉浩

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

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

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

1 背景

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

2 需求分析

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

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

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

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

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

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

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

5 結(jié)語(yǔ)

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

參考文獻(xiàn)

[1] 用AngularJS開(kāi)發(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