CN103677789A

CN103677789A - 基于grid组件的列表数据展现方法及系统

Info

Publication number: CN103677789A
Application number: CN201210361334.2A
Authority: CN
Inventors: 王琳; 朱奎; 李洪
Original assignee: SHENZHEN GOLDEN SQUARE TECHNOLOGY CO LTD
Current assignee: Shenzhen jinzhengfang Technology Co.,Ltd.
Priority date: 2012-09-25
Filing date: 2012-09-25
Publication date: 2014-03-26
Anticipated expiration: 2032-09-25
Also published as: CN103677789B

Abstract

本发明提出了一种基于GRID组件的列表数据展现方法及系统，所述方法包括以下步骤：步骤S1：后台对所述列表数据进行封装其交互方式及格式，得到预设标准样式的封装数据；步骤S2：前台将各类参数设置和业务控制抽取共性并封装；步骤S3：后台从数据库中获取所需的列表数据，转换成GRID组件能识别的数据格式，然后将返回到前台；步骤S4：前台根据所述JSP自定义标签将列表数据加载到所述GRID组件中，所述GRID组件按照所述预设标准样式自动展示所述列表数据。本发明基于GRID组件的列表数据展现方法及系统实现了低代码、低技术含量、高效率、高扩展行、较佳用户体验及扩展性强的列表数据展现方法及系统。

Description

基于GRID组件的列表数据展现方法及系统

技术领域

本发明涉及计算机技术领域，特别涉及一种基于GRID组件的列表数据展现方法及系统。

背景技术

在软件设计开发中，经常需要在前台进行列表数据展示。现有技术中大多采用后台封装数据成List或其它数组类型数据传入到前台，再在前台页面中对数组类型数据进行遍历，将数据填充到table、div等Html表格中展示出来。

上述方法在实际应用中存在很多明显不足的地方：

1、代码量大，数据层数处理过多，需要传输的数据量太大，造成显示缓慢且容易出错，不利于维护；

2、开发效率低下，无法实现代码的重用。后台的查询和页面的遍历都已经写死，无法在其他模块或项目中重复使用，增加了工作量；

3、开发人员技术要求高，开发人员需要对MVC或系统设计有足够的了解，需要关注的地方较多；

4、风格样式难以控制、用户体验不友好、扩展性太差。每个列表的开发，都需要开发人员单个处理，无法做到统一控制，而且用户体验及扩展性太差。

发明内容

本发明的目的是提出一种基于GRID组件的列表数据展现方法，能解决列表数据展现的代码量大、开发效率低下及用户体验及扩展性差的问题。

为达到上述目的，本发明提出了一种基于GRID组件的列表数据展现方法，包括以下步骤：

步骤S1：后台接到前台的列表数据展现命令后，通过JS及CSS模块对所述列表数据进行封装，并通过AJAX模块对所述列表数据进一步封装其交互方式及格式，得到预设标准样式的封装数据；

步骤S2：前台中设定JSP自定义标签，通过该JSP自定义标签将各类参数设置和业务控制抽取共性并封装；

步骤S3：后台从数据库中获取所需的列表数据，通过OR-Mapping机制将所述需要展示的列表数据转换成GRID组件能识别的数据格式，然后将转换好的数据同样通过AJAX方式返回到前台；

步骤S4：前台根据所述JSP自定义标签将列表数据加载到所述GRID组件中，所述GRID组件根据OR-Mapping数据对应关系，按照所述预设标准样式自动展示所述列表数据。

进一步，在上述基于GRID组件的列表数据展现方法中，所述步骤S1具体包括：

后台接到前台的列表数据展现命令后，通过JS模块对所述命令转换成键值对格式的JSON数据并根据自定义和CSS模块的样式进行封装，并通过AJAX模块对所述命令进一步封装其交互方式及格式，并将其提交到后台。

进一步，在上述基于GRID组件的列表数据展现方法中，所述步骤S2具体包括：

前台中在页面上采用类似HTML语言的方式设定JSP自定义标签，通过该JSP自定义标签将各类参数设置和业务控制抽取包括样式、宽度、字体大小、格式的数据共性特性并封装成公用的JAVA和JS代码，最终以HTML网页格式展示。

进一步，在上述基于GRID组件的列表数据展现方法中，所述步骤S3中后台从数据库中获取所需的列表数据的步骤具体包括：

后台通过异步方式从数据库中获取所需的列表数据。

进一步，在上述基于GRID组件的列表数据展现方法中，所述步骤S3中通过OR-Mapping机制将所述需要展示的列表数据转换成GRID组件能识别的数据格式的步骤具体包括：

后台通过OR-Mapping机制将所述列表数据与实例对应起来，并通过调用公用类将转换成GRID组件能识别的数据格式。

进一步，在上述基于GRID组件的列表数据展现方法中，所述步骤S4之后还包括：通过异步CDUQ模块对所述列表数据进行增、删或改、查。

本发明还提供一种基于GRID组件的列表数据展现系统，所述系统包括：后台及前台，所述后台中设有JS及CSS模块、AJAX模块及GRID组件转化模块，所述前台中设有JSP标签模块、GRID组件加载模块及列表数据展示模块；

所述JS及CSS模块用于对所述列表数据进行封装，所述AJAX模块连接于JS及CSS模块，用于对所述列表数据进一步封装其交互方式及格式，得到预设标准样式的封装数据。所述GRID组件转化模块用于通过OR-Mapping机制将从数据库中获取所需的列表数据转换成所需数据格式的GRID组件。

所述JSP标签模块用于设定JSP自定义标签，通过该JSP自定义标签将各类参数设置和业务控制抽取共性并封装。

所述GRID组件加载模块连接于所述JSP标签模块，用于根据所述JSP自定义标签将列表数据加载到所述GRID组件中；所述列表数据展示模块连接于所述GRID组件加载模块，用于根据OR-Mapping数据对应关系，按照所述预设标准样式自动展示所述列表数据。

进一步，在上述基于GRID组件的列表数据展现系统中，所述前台还包括异步CDUQ模块，用于对所述列表数据进行增、删或改、查。

本发明基于GRID组件的列表数据展现方法及系统利用JS+CSS+AJAX封装前台数据显示和交互方式，利用JSP标签封装业务逻辑和数据控制，通过灵活的各类参数设置实现各类基础和高级应用，实现了异步刷新列表数据和页面统一布局，实现了低代码、低技术含量、高效率、高扩展行、较佳用户体验及扩展性强的列表数据展现方法及系统。

附图说明

图1为本发明基于GRID组件的列表数据展现方法一实施例的结构示意图；

图2为本发明基于GRID组件的列表数据展现方法另一实施例的结构示意图。

具体实施方式

下面结合附图详细说明本发明的优选实施例。

本发明基于GRID组件的列表数据展现方法通过JS+CSS+AJAX技术来处理数据展示和传输，实现了异步刷新列表数据和页面统一布局，实现了代码的重用性，减少和优化了代码程序，使开发工作更加简洁、快速和高效，提升了用户体验及列表数据展现的扩展性能。

请参阅图1，本发明基于GRID组件的列表数据展现方法包括以下步骤：

步骤S3：后台从数据库中获取所需的列表数据，通过OR-Mapping(对象关系映射)机制将所述需要展示的列表数据转换成GRID组件能识别的数据格式(JSON格式)，然后将转换好的数据同样通过AJAX方式返回到前台；

步骤S4：前台根据所述JSP自定义标签将列表数据加载到所述GRID组件中，所述GRID组件根据OR-Mapping(对象关系映射)数据对应关系，按照所述预设标准样式自动展示所述列表数据。例如A行A列数据对应哪个单元格，样式是如何等等。

其中，所述步骤S1具体包括：

所述步骤S2具体包括：

所述步骤S3中后台从数据库中获取所需的列表数据的步骤具体包括：

后台通过AJAX异步方式从数据库中获取所需的列表数据。所谓异步方式是指在不刷新页面或局部刷新页面的情况下，动态地向后台传输和获取数据，最终将新数据展示在页面上的方式。

所述步骤S3中通过OR-Mapping机制将所述需要展示的列表数据转换成GRID能识别的数据格式的步骤具体包括：

所述步骤S4之后还包括：通过异步CDUQ模块对所述列表数据进行增、删或改、查。所述异步CDUQ包括：Create：增加、Delete：删除、Update：修改及Query：查询。

请参阅图2，本发明还提供一种基于GRID组件的列表数据展现系统，所述系统包括：后台1及前台2，所述后台1中设有JS及CSS模块10、AJAX模块12及GRID组件转化模块14，所述前台2中设有JSP标签模块20、GRID组件加载模块22及列表数据展示模块24；

所述JS及CSS模块10用于对所述列表数据进行封装，所述AJAX模块12连接于JS及CSS模块10，用于对所述列表数据进一步封装其交互方式及格式，得到预设标准样式的封装数据。所述GRID组件转化模块14用于通过OR-Mapping机制将从数据库中获取所需的列表数据转换成所需数据格式的GRID组件。

所述JSP标签模块20用于设定JSP自定义标签，通过该JSP自定义标签将各类参数设置和业务控制抽取共性并封装。

所述GRID组件加载模块22连接于所述JSP标签模块20，用于根据所述JSP自定义标签将列表数据加载到所述GRID组件中；所述列表数据展示模块24连接于所述GRID组件加载模块22，用于根据OR-Mapping数据对应关系，按照所述预设标准样式自动展示所述列表数据。

其中，所述前台2还包括异步CDUQ模块26，用于对所述列表数据进行增、删或改、查。

相比于现有技术，本发明一种基于GRID组件的列表数据展现方法及系统具有如下有益效果：

(1)采用了JS+C2SS+AJAX技术来处理数据展示和传输，实现了异步刷新和页面统一布局，完美解决系统样式风格问题，最大程度地增强了用户体验效果，增加客户满意度。

(2)通过JSP标签封装业务逻辑处理，实现了代码的重用性，减少和优化了代码程序，使开发工作更加简洁、快速和高效。

(3)组件化开发，可灵活调用，支持热插拔式的调用模式。可自定义样式风格，可动态添加导出、编辑、删除等高级应用

(4)统一的开发模式、傻瓜式的复制粘贴，将开发的技术含量与工作量降至最低，为项目和公司节约成本。

综上，本发明基于GRID组件的列表数据展现方法及系统利用JS+CSS+AJAX封装前台数据显示和交互方式，利用JSP标签封装业务逻辑和数据控制，通过灵活的各类参数设置实现各类基础和高级应用，实现了异步刷新列表数据和页面统一布局，解决了传统技术列表数据展示中代码量过大、数据分层过多、开发效率低下、技术要求高、扩展性差等问题，最终实现低代码、低技术含量、高效率、高扩展行的目标。同时在此基础上，增加异步CDUQ(增、删、改、查)功能，真正做到无缝无跳转的完美客户体验效果。

这里本发明的描述和应用是说明性的，并非想将本发明的范围限制在上述实施例中。这里所披露的实施例的变形和改变是可能的，对于那些本领域的普通技术人员来说实施例的替换和等效的各种部件是公知的。本领域技术人员应该清楚的是，在不脱离本发明的精神或本质特征的情况下，本发明可以以其它形式、结构、布置、比例，以及用其它组件、材料和部件来实现。在不脱离本发明范围和精神的情况下，可以对这里所披露的实施例进行其它变形和改变。

Claims

1.一种基于GRID组件的列表数据展现方法，其特征在于，所述方法包括以下步骤：

2.根据权利要求1所述的基于GRID组件的列表数据展现方法，其特征在于，所述步骤S1具体包括：

3.根据权利要求1所述的基于GRID组件的列表数据展现方法，其特征在于，所述步骤S2具体包括：

4.根据权利要求1所述的基于GRID组件的列表数据展现方法，其特征在于，所述步骤S3中后台从数据库中获取所需的列表数据的步骤具体包括：

后台通过异步方式从数据库中获取所需的列表数据。

5.根据权利要求4所述的基于GRID组件的列表数据展现方法，其特征在于，所述步骤S3中通过OR-Mapping机制将所述需要展示的列表数据转换成GRID组件能识别的数据格式的步骤具体包括：

6.根据权利要求1所述的基于GRID组件的列表数据展现方法，其特征在于，所述步骤S4之后还包括：通过异步CDUQ模块对所述列表数据进行增、删或改、查。

7.一种基于GRID组件的列表数据展现系统，其特征在于，所述系统包括：后台及前台，所述后台中设有JS及CSS模块、AJAX模块及GRID组件转化模块，所述前台中设有JSP标签模块、GRID组件加载模块及列表数据展示模块；

8.根据权利要求7所述的基于GRID组件的列表数据展现系统，其特征在于，所述前台还包括异步CDUQ模块，用于对所述列表数据进行增、删或改、查。