基于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（控制器）是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。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