基于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.

[2] 基于MVC的javascript web富应用开发[M].电子工业出版社,2012.

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

推荐访问: 表格 实践 web

【基于web的复杂表格实践】相关推荐

工作总结最新推荐

NEW
  • XX委高度重视党校的建设和发展,出台《创建全省一流州市党校(行政学院)实施方案》及系列人才培养政策,为党校人才队伍建设提供了有力的政策支撑。州委党校在省委党校的悉心指导下、州委的正确领导下,深入贯彻落

  • 为推动“不忘初心、牢记使命”主题教育常态化,树牢“清新简约、务本责实、实干兴洛”作风导向,打造忠诚干净担当、敢于善于斗争的执纪执法铁军,经县纪委常委会会议研究,决定在全县纪检监察系统开展“转变作风工作

  • 为进一步发展壮大农村集体经济,增强村级发展活力,按照中共XXX市委抓党建促乡村振兴工作领导小组《关于印发全面抓党建促乡村振兴四个工作计划的通知》要求,工作队与村“两委”结合本村实际,共同研究谋划xx村

  • 今年来,我区围绕“产城融合美丽XX”总体目标,按照“城在林中,水在城中,山水相连,林水相依”以及“城乡一体、景城一体、园城一体”的建设思路,强力推进城市基础设施建设、棚户区改造、房地产开发和城市风貌塑

  • 同志们:新冠疫情发生至今已有近三年时间。三年来,在广大干群的共同努力下,我们坚决打好疫情防控阻击战,集团公司范围内未发生一起确诊病例,疫情防控工作取得了阶段性胜利。当前国际疫情仍在扩散蔓延,国内疫情多

  • 我是毕业于XX大学的定向选调生,当初怀着奉献家乡、服务人民的初心回到XX,在市委的关心关爱下,获得了这个与青年为友的宝贵历练机会。一年感悟如下。一要对党忠诚,做政治坚定的擎旗手。习近平总书记指出,优秀

  • 同志们:今天召开这个会议,主要任务是深入学习贯彻习近平总书记重要指示批示精神,以及李克强总理批示要求,认真落实全国安全生产电视电话会议和全省、全市安全生产电视电话会议精神,研究我县安全生产和安全隐患大

  • 2022年市委政研室机关党的建设工作的总体要求是:坚持以XXX新时代中国特色社会主义思想为指导,全面贯彻党的XX届X中X会和省、市第十二次党代会精神,自觉运用党的百年奋斗历史经验,弘扬伟大建党精神,深

  • 同志们:今天,我们在这里召开市直机关基层党建示范点工作会议,一方面是对各示范点单位进行表彰授牌,另一方面是想通过这种会议交流的方式,给大家提供一个相互学习、取长补短的平台和机会。市直工委历来把创建基层

  • 新冠疫情暴发以来,学校党委坚决贯彻习近平总书记关于疫情防控工作的指示要求和党中央的决策部署,严格执行×××部、×××厅关于疫情防控的系列要求,认真落实驻地防疫部门的工作举措,继承发扬优良传统,以最高标