一种基于JSP技术的网页表格组件的设计与实现

周江，李月

（广东交通职业技术学院，广州510650）

一种基于JSP技术的网页表格组件的设计与实现

周江，李月

（广东交通职业技术学院，广州510650）

B/S信息系统中，表格的响应时间直接影响系统响应时间。通过对比并分析几种主流表格组件的响应时间并分析其原因，提出一种基于JSP技术的网页表格组件的解决方案。该方案具有高效、轻量级的特点，尤其在数据量较大时具有明显的优越性。

表格；Web；组件；JSP

1 开源表格组件的性能对比分析

表格是B/S信息系统中常用的数据表现形式，它能一次显示较多的信息，且方便查看，目前Ecside、Ex⁃tjs、Datatables等开源表格组件使用比较广泛。按照实现方式来分类，可以将这些组件分为以下两种：

（1）在服务端构造表格。此类组件在服务器端构造好HTML代码，输出到浏览器，然后用JavaScript在客户端进行表格的样式调整以及各种表格的事件绑定，代表性的组件有Ecside。

（2）在客户端构造表格。原理是从服务端将数据传回到客户浏览器端，常见的格式是XML或者JSON，也有的使用自定义格式。客户端将格式化好的字符串在浏览器进行对象化，构造出表格对象；然后，为表格的每行构造一个对象，为每行的每个单元格构造一个对象，为每个对象提供各种触发事件绑定；之后，为表格、行、列提供HTML代码创建函数（作为内部方法放入各个对象）；最后，从上至下，遍历所有对象，创建表格的HTML代码。典型代表有ExtJS组件以及Datata⁃bles组件。

图1是在不同数据量情况下几种组件的性能分析对比。从图中可以看出，当数据量比较小，仅为20行× 10列时，纯Html表格的响应时间仅4ms，Ecside、Ex⁃tJS、Datatables三种组件的响应时间均为20ms左右；当数据量上升到50行*20列时，纯Html表格的响应时间依然只有6ms，而Ecside、ExtJS、Datatables的响应时间则分别上升到了80ms、200m和180ms；当数据量上升到200行×10列时，纯HTML表格的响应时间只上升到40ms，而Ecside、ExtJS、Datatables的响应时间则分别上升到了200ms、500m和400ms；当数据量上升到200行×50列时，Ecside组件的响应时间也上升到了900ms，而ExtJS、Datatables的响应时间则达到了4300ms和2000ms，此时纯HTML表格的响应时间仅有62ms。

图1 各种组件显示不同数据量的效率对比

一般认为，一个网页的响应时间不能超过1000ms，如果一个表格组件显示时间就超过1000ms，那么整个页面响应时间会进一步加长，用户体验将显著下降。所以，在较大的数据量（200行×10列）情况下，几种主流的开源网页表格组件的响应时间都非常不理想，这成为了制约B/S信息系统响应时间的一个瓶颈。因此，开发一种高效率显示大数据量的网页表格组件，对满足客户需求而言是非常必须而迫切的。

2 基于JSP技术的网页表格组件的设计及实现

2.1 网页表格组件的设计思想

分析图1的数据及各种组件的技术，可以得到如下结论：

（1）纯HTML表格在不同数据量下的响应时间都是最快的，这是因为浏览器解析HTML代码所用时间非常少，而Ecside等组件包含的Javascript代码执行起来比较费时，导致大量的时间耗费在Javascript代码执行上。但是在实际软件开发中，使用原生表格来开发界面，是不可行的。

（2）随着数据的增大，ExtJS和Datatables的表现非常糟糕，它们的耗时增长速度远高于线性。这是因为ExtJS和Datatables在客户端构造HTML代码，而且创建了大量js对象，导致页面性能消耗很大，比如在数据量为200×50(行×列)的情况下，创建了10000个以上的对象，所以随着数据的增加，响应时间越来越长。

（3）Ecside采用服务器端生成HTML代码，所以Ecside耗时增长基本接近线性，明显优于ExtJS和Datatables。但是在200×50(行×列)的情况下依然超过1000ms，用户体验也将显著下降。造成Ecside耗时长的原因有两点。其一，Ecside组件虽然是客户端生成HTML代码，但还是在客户端构造了大量JavaScript对象，另外对表格样式调整、事件绑定等也消耗了很多时间。其二，由于Ecside是通用组件，考虑的表格通用功能非常多，例如可编辑、排序、拖动、统计、导出、打印等各种通用功能集成，存在一定时间消耗，所以也在页面显示的效率方面打了折扣。

通过比较分析，笔者吸取这几种主流组件的精华，重新规划，开发了一种全新的基于JSP技术的网页表格组件，笔者将此组件取名为OgTable。

OgTable组件实现的主要架构如图2所示。其主要设计思想有如下几点：

（1）为了保证访问的效率，采用服务端生成网页表格HTML代码的方式。虽然从软件工程角度来看，从客户端生成HTML代码耦合度低、代码可读性高，可维护性强，也更方便程序员使用，但是在必要的时候需要牺牲代码结构去获取性能，是在软件开发中经常需要做的一个取舍。

（2）采用JSP的Taglib的技术，即自定义标签，便于封装数据。

（3）表格输出以后，极端简化js代码，后续操作需要的js对象在触发事件以后根据需要再单独生成，HT⁃ML中对象需要绑定的事件，全部在html代码中生成，不采用js的方式绑定。

（4）在OgTable实现过程中，去掉表格的大部分通用功能，只提供表格的基本功能。附加功能采用外置接口，由用户选择配置，尽量使OgTable组件轻量化。

图2 自定义的网页表格组件（OgTable）原理图

2.2 OgTablee表格组件中客户端的实现及效率提升

OgTable包含基本的表格功能，如表头固定功能、表格列宽调整功能、表格翻页功能等，同时为了保证效率，从以下几点来考虑实现的细节：

（1）表头固定功能

这是指表格滚动条上下拉动时表头固定不动。在数据量大，主要是行数比较多的时候，表头固定功能就显得特别重要。为了加快响应速度，OgTable摒弃了一般的用JavaScript代码捕捉鼠标位置固定表头的方法，而是将表格实际分为了两个表格，上面的表格仅显示表头一行，下面的表格显示数据。在表格初始化的时候用JavaScript代码保证两个表格所有的列都同宽，这样可以达到表头固定功能的效果。

（2）表格列宽调整功能

表格列宽调整功能，类似于Excel在表头通过鼠标拖动改变列宽的功能，在鼠标移动到表头，点击左键以后，触发JavaScript事件，改变鼠标形状，并且根据鼠标的移动位置调整列的宽度。考虑到效率问题，调整列宽并不是实时处理，而是等待鼠标的左键释放以后再调整。这种处理方式将对客户端电脑配置较差的用户提供一个较好的体验。

（3）表格翻页功能

在OgTable组件中，表格翻页功能采用AJAX技术，通用的表格组件通常是使用AJAX获取格式化的数据（XML或者JSON等其他格式）。同样是考虑到客户端重新封装代码的效率将比较低，所以OgTable将直接从服务器端获取到封装好的可以直接显示为表格的HTML代码，通过这种方式，节省了客户端解析数据和构造HTML代码的时间，从而提高OgTable组件在数据量较大的时候的翻页效率。

2.3 OgTablee表格组件在服务器端的实现

服务器端主体由OGTableTag（表格标签）、OGRowTag（行标签）、OGColumnTag（列标签）、OGAt⁃tributeTag（属性标签）四个标签构成，类图如图3所示：

在图3中，需要说明如下几点：

（1）OGTableTag类、OGRowTag类、OGColumnTag类都继承了OGBaseTag类，成为3个独立的自定义标签类。这样它们可以拥有自己的属性方法。

（2）在JSP中OGTableTag类是OGRowTag类的父节点，OGRowTag类是OGColumnTag父亲节点。所以在服务器端，OGTableTag类、OGRowTag类、OGColumn⁃Tag类存在依赖关系。

（3）在Jsp中OGTableTag类、OGRowTag类、OG⁃ColumnTag类都有OGAttribute类的子节点，便于给这三种Tag类添加各种属性，所以在服务器端OGTable⁃Tag类、OGRowTag类、OGColumnTag类对OGAttribute类有依赖关系。

（4）OGTableTag有各种节点html代码的构造方法，OGRowTag有行高，背景颜色等属性，OGColumnTag有列宽，是否可排序，是否可以拖动等属性。

（5）OGTableTag中的doEndTag方法（超类方法）中调用各层的构造HTML代码构造方法，并拼装起来，形成一个完整的表格代码，用out.print输出。doEndTag方法还会输出一些js代码用来完成table的脚本初始化。

3 OgTable表格组件的性能测试及分析

OgTable组件开发完毕后，将该组件在“校园问卷调查系统”、“学生医疗保险信息系统”等中应用，得到良好的效果。在相同场景下，将OgTable组件与Ec⁃side、ExtJS、Datatables等表格组件进行了性能对比，得到结果如图4所示。

图3 服务器端实现的类图

从图4可以看出，在大数据量，即200×10(行×列)和200×50(行×列)时，使用OgTable表格组件的响应时间相对其他的几种网页组件有显著降低，更接近纯HTML表格的效率。因此，本文提出的基于JSP技术的网页表格组件OgTable是符合实际需要并且切实有效的，解决了较大数据量用表格展示时响应时间相对较慢的瓶颈。

4 结语

本文提出的基于JSP技术的OgTable表格组件的设计及实现，使用了Taglib自定义标签技术，在服务器端生成表格代码，在前端去掉使用频率低的通用功能，具有高效、轻量级的特点。在200行×10列以上数据量时，和主流组件对比，具有明显的优越性。OgTable组件解决了在Web信息系统中，用表格显示较大数据量时的响应时间过长的问题。

图4 OgTable与开源组件性能对比

[1]黄灯.ExtJS 4.2实战[M].北京：清华大学出版社，2014.

[2]李华彪.Java中间件技术及其应用开发[M].北京:中国水利水电出版社,2012.

[3]邓伟成，范轶翔，夏翔，等.ExtJS框架下Grid组件的扩展及应用[J].计算机应用，2012，32（S1）:80-82.

[4]戴丽华.嵌入式Web服务器的研究与应用[J].轻工科技，2013（11）:72-73.

Design and Implementation of a Page form Component Based on JSP Technology

ZHOU Jiang，LI Yue

In the B/S information system,the response time of the table directly affects the system response time.By comparing several major table controls,propose a solution of developing a kind of table control used in pages,the solution is efficient and lightweight,especially when the data volume is large,and it has obvious superiority.

1007-1423（2017）21-0048-04

10.3969/j.issn.1007-1423.2017.21.010

周江（1978-），女，湖南浏阳人，硕士，研究方向为信息通信、软件工程；李月（1979-），女，湖北荆门人，硕士，研究方向为软件工程、人工智能；

2017-07-06

2017-07-16

Table;Web;Component;JSP