CN103345522B - 数据的展示处理、展示方法及装置 - Google Patents
数据的展示处理、展示方法及装置 Download PDFInfo
- Publication number
- CN103345522B CN103345522B CN201310301441.0A CN201310301441A CN103345522B CN 103345522 B CN103345522 B CN 103345522B CN 201310301441 A CN201310301441 A CN 201310301441A CN 103345522 B CN103345522 B CN 103345522B
- Authority
- CN
- China
- Prior art keywords
- data
- exhibition method
- row
- server end
- cell
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明提供了一种数据的展示处理、展示方法及装置,其中,上述展示处理方法包括:服务器端获取数据表格中每个单元格的展示方式;所述服务器端将所述展示方式发送给客户端。采用本发明提供的上述技术方案,解决了相关技术中,父节点和子节点对格式和层数要求严格,以及支持的html标签不丰富等技术问题,进而达到了可以实现树状结构的无限扩展,父节点和子节点自由度增大以及支持的html标签增多等效果。
Description
技术领域
本发明涉及网络通信领域,具体而言,涉及一种数据的展示处理、展示方法及装置。
背景技术
随着WEB技术的不断发展,企业软件逐渐从C/S结构过渡到B/S结构。原来以C/S架构中复杂数据的展示方式转化成B/S方式成为一个挑战,需要从页面美观、访问性能、高扩展性等各方面进行考虑。
从技术上分析,树状结构的展示并不是难点,通过HTML的table标签进行嵌套的方式或者利用div嵌套的方式即可实现。难点在于如何在原有的实现方式上实现高扩展性,以及大数据量下页面组织展示的问题。
目前,基于WEB技术的树状组件已经有很多种,比如基于JSF的richaface框架如图1所示。PrimeFaces框架中也提供了树状表格组件,具体如图2所示。现在比较流行的JS库EXT中也提供了树状组件,具体如图3所示。
但是上述数据展示方案存在以下问题:
1、树表中每个根节点挂载子节点的层数须是一致的,比如说根节点A为3个层次,那么根节点B也必须为3个层次,才可以使用这些组件。
2、父节点中每列的内容需和子节点每列内容是类似的,比如说父节点第一列是有图片和字符串组成,那么子节点的第一列也需要是图片和字符串组成或者是只有字符串。这种使用方式的限制使得如果父节点所在行的内容如果和子节点所在行的内容不一致时,这些树状组件就无法使用。
3、表格中每列的内容支持的HTML标签不丰富,仅提供节点张开和收缩的功能。如果父节点所在行第二列内容为单选框和下拉框,则大部分树状组件不支持,从而导致无法使用
针对相关技术中的上述问题,目前尚未提出有效的解决方案。
发明内容
针对相关技术中的上述问题,本发明主要目的在于提供一种数据的展示处理、展示方法及装置,以至少解决上述问题。
为了实现上述目的,根据本发明的一个方面,提供了一种数据的展示处理方法,包括:服务器端获取数据表格中每个单元格的展示方式;所述服务器端将所述展示方式发送给客户端。
为了实现上述目的,根据本发明的另一方面,提供了一种数据的展示方法,包括:客户端接收来自服务器端的数据表格中每个单元格的展示方式;所述客户端按照所述展示方式生成数据表格。
根据本发明的又一个方面,提供了一种数据的展示处理装置,应用于服务器端,包括:获取模块,用于获取数据表格中每个单元格的展示方式;发送模块,用于将所述展示方式发送给客户端。
根据本发明的再一个方面,提供一种数据的展示装置,应用于客户端,包括:接收模块,用于接收来自服务器端的数据表格中每个单元格的展示方式;生成模块,用于按照所述展示方式生成数据表格。
通过本发明,在服务器端确定数据表格中每个单元格的展示方式的技术手段,解决了相关技术中,父节点和子节点对格式和层数要求严格,以及支持的html标签不丰富等技术问题,进而达到了可以实现树状结构的无限扩展,父节点和子节点自由度增大以及支持的html标签增多等效果。
附图说明
构成本申请的一部分的附图用来提供对本发明的进一步理解,本发明的示意性实施例及其说明用于解释本发明,并不构成对本发明的不当限定。在附图中:
图1为根据相关技术的richfaces中的树状组件示意图片;
图2为根据相关技术的primefaces中的树状组件示意图片;
图3为根据相关技术的EXT中的树状组件示意图片;
图4为根据本发明实施例1的数据的展示处理方法的流程图;
图5为根据本发明实施例1的数据的展示处理装置的结构框图;
图6为根据本发明实施例1的数据的展示处理装置的另一结构框图;
图7为根据本发明实施例2的数据的展示方法的流程图;
图8为根据本发明实施例2的数据的展示装置的结构框图;
图9为根据本发明实施例2的数据的展示装置的另一结构框图;
图10为根据本发明实施例3的树状表格生成的原理示意图。
具体实施方式
需要说明的是,在不冲突的情况下,本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本发明。
实施例1
图4为根据本发明实施例的数据的展示处理方法的流程图。如图4所示,该方法包括:
步骤S402,服务器端获取数据表格中每个单元格的展示方式;
步骤S404,服务器端将上述展示方式发送给客户端。
通过上述处理过程,由于在服务器端获取了数据表格中每个单元格的展示方式,因此,可以解决父节点和子节点对格式和层数要求严格,以及支持的html标签不丰富等技术问题,进而达到了可以实现树状结构的无限扩展,父节点和子节点自由度增大以及支持的html标签增多等效果。
在本实施例中,服务器端获取数据表格中每个单元格的展示方式的方式有多种,例如可以通过html的方式:对于上述每个单元格,服务器端生成超级文本标记语言(hypertext markup language,简称为html);按照html确定上述展示方式。
在本实施例中,为了在客户端能够生成数据表格,还需要执行以下流程:服务器端将业务数据转化为JSON格式;将转化为JSON后的业务数据发送给上述客户端。其中,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于JavaScript(Standard ECMA-262 3rd Edition-December 1999)的一个子集。JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C,C++,C#,Java,JavaScript,Perl,Python等)。
在本实施例中还提供了一种数据的展示处理装置,该装置应用于服务器端,用于实现上述实施例及优选实施方式,已经进行过说明的不再赘述,下面对该装置中涉及到模块进行说明。如以下所使用的,术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现,但是硬件,或者软件和硬件的组合的实现也是可能并被构想的。图5为根据本发明实施例1的数据的展示处理装置的结构框图。如图5所示,该装置包括:
获取模块50,连接至发送模块52,用于获取数据表格中每个单元格的展示方式;
发送模块52,用于将上述展示方式发送给客户端。
在本实施例中,如图6所示,上述获取模块50包括但不限于以下处理单元:生成单元502,连接至确定单元502,用于对于所述每个单元格,生成html;确定单元502,用于按照该html确定所述展示方式。
实施例2
图7为根据本发明实施例2的数据的展示方法的流程图。如图7所示,该方法包括:
步骤S702,客户端接收来自服务器端的数据表格中每个单元格的展示方式;
步骤S704,客户端按照所述展示方式生成数据表格。
优选地,上述展示方式可以通过以下方式获取:对于上述每个单元格,服务器端生成html;按照html确定上述展示方式。
优选地,客户端按照所述展示方式生成数据表格,可以通过以下处理过程实现:客户端获取服务器端的业务数据;客户端根据该业务数据和上述展示方式生成所述数据表格
图8为根据本发明实施例2的数据的展示装置的结构框图。该装置应用于客户端,如图8所示,该装置包括:
接收模块80,连接至生成模块82,用于接收来自服务器端的数据表格中每个单元格的展示方式;
生成模块82,用于按照上述展示方式生成数据表格。
优选地,如图9所示,生成模块82可以包括但不限于以下处理单元:获取单元820,连接至生成单元822,用于获取服务器端的业务数据;生成单元,用于根据业务数据和上述展示方式生成所述数据表格。
为了更好地理解上述实施例,以下结合实施例3和相关附图详细说明。
实施例3
本实施例提供的方案可以生成父节点任意层次,每个层次所在行任意内容的树状表格,使用者可以控制树状表格的CSS样式甚至是展现方式,给予完全的自由性,无限扩展。只要数据适合结构展示,都可以利用该表格进行展示。
为实现上述目的,本实施例提供的技术方案如下:
本实施例依托于Javascript、Ajax、JSP等web技术实现。本实施例的方案由三部分组成:表格生成框架、服务器端代理、JS生成表格方法。表格生成模型由用户定义,包括表格展现模型、数据格式定义(JSON)两部分组成。服务端代理依照用户定义的数据格式将业务数据转化为相应的JSON格式。Web端利用Ajax交互获取服务器端数据,然后依据表格生成框架及JSON数据利用JS生成表格方法生成数据表格。原理如图10所示。
服务器端代理用servlet实现,通过已有的数据转换方法,可轻松的将业务数据转化为JSON数据。
表格生成框架由两部分组成:表格生成模型和数据格式定义。数据格式定义为JSON格式,服务器端代理依照数据格式将业务数据转化为JSON数据。
JSON格式的定义如下:
{
Index:“该行数据的索引”,
parentIndex:“父节点的索引,如果为根节点则值为空”,
……
}
JS生成表格方法依照数据格式定义来确认每行数据的父子关系,然后生成相关的表格,每行数据都是独立的。
表格展现模型定义了表格每列展现的方式,定义整个树状表格的基本信息,也有JSON格式来描述。
表格数据每列的形式支持常规的复选框、选择框等。另外它还支持html。
{
header:“列标识”,
headerIndex:“获取json数据相关属性的值”,
columntype:{
inputtype:“该列的展现方式,文本、复选框、html等”
}
}
如果设置inputtype类型为html时,用户在服务器端生成的json数据时可以自己定制该列中的显示的HTML内容,由于每行数据的独立性,也使得每层展现方式也具有独立性。
JS生成表格方法会按照用户提供的值来绘制相应的列。如:
{
Index:“该行数据的索引”,
parentIndex:“父节点的索引,如果为根节点则值为空”,
value:“<input type=’text’value=’定制’>”
}
综上所述,本发明实施例实现了以下有益效果:
树状表格可以无限扩展,完全不需要依赖实现约定好的表格的结构,只需在生成JSON格式的时候正确定义JSON数据,每个树节点都可以有自己的层次个数,每个树节点都是相对独立的;包括根节点,每个层次中每列数据都是可以定制的,每层节点的展示完全不受父节点所在行的影响,给了使用者最大的自由度;支持所有html标签,每列数据的CSS样式可以随意定制。
在另外一个实施例中,还提供了一种软件,该软件用于执行上述实施例及优选实施方式中描述的技术方案。
在另外一个实施例中,还提供了一种存储介质,该存储介质中存储有上述软件,该存储介质包括但不限于:光盘、软盘、硬盘、可擦写存储器等。
显然,本领域的技术人员应该明白,上述的本发明的各模块或各步骤可以用通用的计算装置来实现,它们可以集中在单个的计算装置上,或者分布在多个计算装置所组成的网络上,可选地,它们可以用计算装置可执行的程序代码来实现,从而,可以将它们存储在存储装置中由计算装置来执行,或者将它们分别制作成各个集成电路模块,或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样,本发明不限制于任何特定的硬件和软件结合。
以上所述仅为本发明的优选实施例而已,并不用于限制本发明,对于本领域的技术人员来说,本发明可以有各种更改和变化。凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。
Claims (7)
1.一种数据的展示处理方法,其特征在于,包括:
服务器端获取数据表格中每个单元格的展示方式;
所述服务器端将所述展示方式发送给客户端,其中,所述数据表格依照数据格式定义来确认每行数据的父子关系,然后生成相关的表格,所述每行数据都是独立的,其中,
所述服务器端获取数据表格中每个单元格的展示方式,包括:
对于所述每个单元格,所述服务器端生成超级文本标记语言html;
按照所述html确定所述展示方式;
其中,所述数据表格中的列数据为JSON格式,并且列数据包括:列标识、JSON数据的相关属性、列的展现方式。
2.根据权利要求1所述的方法,其特征在于,还包括:
所述服务器端将业务数据转化为JSON格式;
将转化为JSON后的业务数据发送给所述客户端。
3.一种数据的展示方法,其特征在于,包括:
客户端接收来自服务器端的数据表格中每个单元格的展示方式;
所述客户端按照所述展示方式生成数据表格,其中,所述数据表格依照数据格式定义来确认每行数据的父子关系,然后生成相关的表格,所述每行数据都是独立的,其中,
所述展示方式通过以下方式获取:
对于所述每个单元格,所述服务器端生成超级文本标记语言html;
按照所述html确定所述展示方式;
其中,所述数据表格中的列数据为JSON格式,并且列数据包括:列标识、JSON数据的相关属性、列的展现方式。
4.根据权利要求3所述的方法,其特征在于,所述客户端按照所述展示方式生成数据表格,包括:
所述客户端获取服务器端的业务数据;
所述客户端根据所述业务数据和所述展示方式生成所述数据表格。
5.一种数据的展示处理装置,应用于服务器端,其特征在于,包括:
获取模块,用于获取数据表格中每个单元格的展示方式,其中,所述数据表格依照数据格式定义来确认每行数据的父子关系,然后生成相关的表格,所述每行数据都是独立的;
发送模块,用于将所述展示方式发送给客户端;
所述获取模块包括:
生成单元,用于对于所述每个单元格,生成超级文本标记语言html;
确定单元,用于按照所述html确定所述展示方式;
其中,所述数据表格中的列数据为JSON格式,并且列数据包括:列标识、JSON数据的相关属性、列的展现方式。
6.一种数据的展示装置,应用于客户端,其特征在于,包括:
接收模块,用于接收来自服务器端的数据表格中每个单元格的展示方式,其中,所述数据表格依照数据格式定义来确认每行数据的父子关系,然后生成相关的表格,所述每行数据都是独立的,其中,对于所述每个单元格,所述服务器端生成超级文本标记语言html;按照所述html确定所述展示方式;
生成模块,用于按照所述展示方式生成数据表格;
其中,所述数据表格中的列数据为JSON格式,并且列数据包括:列标识、JSON数据的相关属性、列的展现方式。
7.根据权利要求6所述的装置,其特征在于,所述生成模块,包括:
获取单元,用于获取服务器端的业务数据;
生成单元,用于根据所述业务数据和所述展示方式生成所述数据表格。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201310301441.0A CN103345522B (zh) | 2013-07-18 | 2013-07-18 | 数据的展示处理、展示方法及装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201310301441.0A CN103345522B (zh) | 2013-07-18 | 2013-07-18 | 数据的展示处理、展示方法及装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN103345522A CN103345522A (zh) | 2013-10-09 |
CN103345522B true CN103345522B (zh) | 2018-10-19 |
Family
ID=49280317
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201310301441.0A Active CN103345522B (zh) | 2013-07-18 | 2013-07-18 | 数据的展示处理、展示方法及装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN103345522B (zh) |
Families Citing this family (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107818088A (zh) * | 2016-09-05 | 2018-03-20 | 阿里巴巴集团控股有限公司 | 一种列表数据展示方法、装置及终端 |
CN106709697A (zh) * | 2016-11-29 | 2017-05-24 | 用友网络科技股份有限公司 | Erp系统报表数据的转换方法及转换系统 |
EP3559912A1 (en) * | 2017-06-13 | 2019-10-30 | Google LLC | Systems and methods for authoring cross-browser html 5 motion path animation |
CN108280049A (zh) * | 2017-10-25 | 2018-07-13 | 国云科技股份有限公司 | 一种嵌套表格的快速生成方法 |
CN111382192B (zh) * | 2018-12-28 | 2023-11-03 | 北京神州泰岳软件股份有限公司 | 一种数据列表展示方法、装置和电子设备 |
CN112131839A (zh) * | 2020-08-26 | 2020-12-25 | 徐智 | Json数据结构的显示方法及装置 |
CN112464039A (zh) * | 2020-11-11 | 2021-03-09 | 新奥数能科技有限公司 | 树形结构的数据显示方法、装置、电子设备和介质 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
EP0840239A2 (en) * | 1996-10-31 | 1998-05-06 | Ncr International Inc. | Hypertext markup language (HTML) extensions for graphical reporting over an internet |
CN1983257A (zh) * | 2006-05-11 | 2007-06-20 | 华为技术有限公司 | 一种通过树型结构展现数据的方法及系统 |
CN101788994A (zh) * | 2009-08-14 | 2010-07-28 | 成都迪捷信息技术有限公司 | 一种数据展示模型建立方法、数据展示方法及装置 |
-
2013
- 2013-07-18 CN CN201310301441.0A patent/CN103345522B/zh active Active
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
EP0840239A2 (en) * | 1996-10-31 | 1998-05-06 | Ncr International Inc. | Hypertext markup language (HTML) extensions for graphical reporting over an internet |
CN1983257A (zh) * | 2006-05-11 | 2007-06-20 | 华为技术有限公司 | 一种通过树型结构展现数据的方法及系统 |
CN101788994A (zh) * | 2009-08-14 | 2010-07-28 | 成都迪捷信息技术有限公司 | 一种数据展示模型建立方法、数据展示方法及装置 |
Non-Patent Citations (1)
Title |
---|
基于树型结构数据的关系数据库存储与网页显示的研究;李天立等;《北京地区高校研究生学术交流会—通信与信息技术会议》;20061231;正文第1347-1350页 * |
Also Published As
Publication number | Publication date |
---|---|
CN103345522A (zh) | 2013-10-09 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN103345522B (zh) | 数据的展示处理、展示方法及装置 | |
CN106648945B (zh) | 一种接口数据测试方法、装置及电子设备 | |
CN105867931B (zh) | 信息展示界面的变更方法和装置 | |
CN105404665A (zh) | 一种json格式数据的查询管理系统 | |
CN103123631B (zh) | 文案的生成、网页文案的展示方法、装置及网站服务器 | |
CN1987851A (zh) | 一种网页数据的更新显示方法 | |
CN108171600A (zh) | 征信报告解析方法、服务器及存储介质 | |
CN110502212A (zh) | 一种面向多语言的高并发在线开发支撑方法 | |
CN107220274A (zh) | 一种可视化数据接口集市实现方法 | |
Zheng et al. | Design and implementation of teaching system for mobile cross-platform | |
CN105975268A (zh) | 一种用于pc端信息系统网页界面的宽度自适应的方法 | |
CN108153919A (zh) | Dbf数据导出平台及其导出方法 | |
CN106126299B (zh) | 业务插件的处理方法及装置 | |
CN104793933B (zh) | 一种终端数据展现方法和系统 | |
CN109284488A (zh) | 基于本地存储修改前端表格列数据的方法、装置及介质 | |
CN108664546A (zh) | Xml数据结构转换方法和装置 | |
CN106294760A (zh) | 表单处理方法及服务器、客户端 | |
CN109460227A (zh) | 一种网站前端的开发方法、装置、设备及介质 | |
CN107277127A (zh) | 一种基于jersey框架的数据传输方法 | |
CN109033447B (zh) | 一种人脸识别数据可视化系统 | |
CN108427664A (zh) | 一种文档解析方法和装置 | |
US10402482B2 (en) | Content management system | |
CN103778117B (zh) | 一种移动终端信息加载的方法及系统 | |
CN104317875A (zh) | 一种工程图学课程组卷系统 | |
CN104462463A (zh) | JavaScript基于SQL模板的数据访问方法 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |