CN110569469B

CN110569469B - 基于数据配置动态生成html表格的方法

Info

Publication number: CN110569469B
Application number: CN201910847128.4A
Authority: CN
Inventors: 郭勇军; 张丽娟; 漆尧; 蒲文龙; 唐军
Original assignee: Sichuan Changhong Electric Co Ltd
Current assignee: Sichuan Changhong Electric Co Ltd
Priority date: 2019-09-06
Filing date: 2019-09-06
Publication date: 2022-02-01
Anticipated expiration: 2039-09-06
Also published as: CN110569469A

Abstract

本发明公开了基于数据配置动态生成HTML表格的方法，通过数据库配置和Java后端技术及springboot后端框架，结合vuejs前端框架实现的动态生成HTML表格的方法，通过该方法，可以在需要时调整表格视觉效果、表格内容而不需要代码的修改，既方便又快捷。能够快速的响应用户的需求。

Description

基于数据配置动态生成HTML表格的方法

技术领域

本发明涉及JAVA及数据库技术领域，尤其涉及基于数据配置动态生成HTML表格的方法。

背景技术

在业务系统中，用户要统计查看系统中业务开展情况，并且需要对每一项的值进行反向查询，列出清单明显。这就需要明确用户点击的确切位置，是哪个表格的哪一行哪一列。基于数据库的动态表格是一种比较好的实现方式。

目前基于数据库配置实现HTML页面动态生成，主要用于解决页面动态布局和简单数据内容呈现两个方面。常见的动态数据呈现有列表数据，表单数据，图表数据等。基于数据配置动态生成HTML表格是属于列表数据范畴的。列表数据动态呈现主要的方式有表格方式和list方式(即通过前端的li标签或者div标签实现)，list方式是比较常规的方式，经常用于简单的多数据分页显示。表格方式大多数也是用于简单的多数据分页显示，但是也可以用于复杂的数据显示。多数情况下，表格内容动态显示，表格头部、样式、跨行跨列等都是固定，所以对前端的依赖比较大，调整表头、跨行跨列和表格样式都需要代码开发。而本专利提出基于数据配置动态生成HTML表格也是有它的局限性的，也是它的缺陷，就是不支持分页，只能支持固定行列内容数据的显示。其优点在于能够动态调整表格的全部内容，包括表格标题、表头、跨行跨列、样式、是否链接、及链接地址等等；一旦前端代码完成，这些内容的调整都不需要再次进行前端代码开发。

发明内容

本发明的目的就在于为了解决数据呈现这个方面的细节问题，而提供基于数据配置动态生成HTML表格的方法，动态显示前端表格，并且准确知道用户点击的是表格的行列，表格的显示可以后端配置调整，不用修改代码，即可调整表格的显示。

本发明通过以下技术方案来实现上述目的：

基于数据配置动态生成HTML表格的方法，包括以下步骤：

步骤1，设计数据库，建立表格、行、列信息表；将表格按照面向对象的思想，建立表格对象，表格行对象，表格列对象；结合关系性数据库技术，确定他们的关系为表格和表格行为一对多的关系；表格和表格列是一对多的关系；也就是说表格包含有多行，行包含有多列；其中对象的主要属性如下：

表格的主要信息包括：名称，ID，编码，标题，CSS样式类，CSS样式，页面编码；

行的主要信息包括：名称，ID，编码，表格信息ID，是否表头，CSS样式类，CSS样式；

列的主要信息包括：名称，ID，编码，行信息ID，跨行数，跨列数，内容数据，内容数据类型(固定值或非固定值)，详情查询接口地址，查询参数；

步骤2，使用Java技术和springboot框架搭建restful服务接口；通过编码建立restful接口，该接口根据页面编码和表格面组合作为参数查询相关的完整表格及相关数据；

步骤3，前端使用vuejs框架根据后端接口返回的数据在浏览器中渲染相应的表格，将表格的行列完整的显示出来；前端根据表格是否有相应的配置而显示或者不显示某些内容，也可以根据CSS相关配置，美化或者调整表格视觉效果；根据是否有数据明细接口地址来判断是否可以点击查询明细内容。

进一步方案为，所述步骤1中，其中表格和行是一对多的关系，行和列是一对多的关系；如果行是表头，则行信息中是否为表头字段必为1；通过设置跨行或者跨列数量，可以实现较为复杂的表头，实现表格中的单元个合并效果；列的内容数据类型为固定值，则无需和业务数据整合；反之，则需要根据关键信息与业务数据进行整合。

进一步方案为，前端根据后端接口返回的数据在浏览器中渲染相应的表格，将表格的行列完整的显示出来；前端根据表格是否有相应的配置而显示或者不显示某些内容，也可以根据CSS相关配置，美化或者调整表格视觉效果。根据是否有数据明细接口地址来判断是否可以点击查询明细内容。

进一步方案为，所述步骤2中，使用Java和springboot框架搭建JavaWeb服务端，提供关键的接口；该接口的实现基于restful技术，为分层系统提供API接口；接口这样设计使得系统内前端和后端耦合降低，接口也可以为多个系统的前端提供服务；运用数据库技术表格信息，将业务数据和列配置信息中的非固定值信息整合，形成完整的列信息；接口将完整的表格，包括行、列的信息和数据一起返回，提供给接口使用方。

进一步方案为，所述步骤3中，运用前端框架根据后端接口返回的数据在浏览器中渲染相应的表格，将表格的行列完整的显示出来；首先显示表格基本信息，判断是否有标题，有则显示；判断是否有CSS样式设置，有则设置样式；其次显示行基本信息，判断是否有CSS样式设置，有则设置样式；判断行是否为表头，如果为表头则使用表头标签，反之使用行标签；显示每行的每个列，判断是否有CSS样式设置，有则设置样式；判断跨列和跨行数是否大于1，如果大于1则设置相应的跨行、跨列；判断详情查询接口地址长度是否为非空且大于1，如果是则列标签内容设置链接并可以点击。

本发明的有益效果在于：

本发明的基于数据配置动态生成HTML表格的方法，通过数据库配置和Java后端技术及springboot后端框架，结合vuejs前端框架实现的动态生成HTML表格的方法，通过该方法，可以在需要时调整表格视觉效果、表格内容而不需要代码的修改，既方便又快捷。能够快速的响应用户的需求。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述中所需要实用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本实施例的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明流程图。

图2初始显示效果图。

图3第三行字体设置显示效果图。

图4第三行链接设置显示效果图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将对本发明的技术方案进行详细的描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施方式，都属于本发明所保护的范围。

在任一实施例中，如图1-4所示，本发明的基于数据配置动态生成HTML表格的方法，包括以下步骤：

步骤1，设计数据库，建立表格、行、列信息表；将表格按照面向对象的思想，建立表格对象，表格行对象，表格列对象；结合关系性数据库技术，确定他们的关系为表格和表格行为一对多的关系；表格和表格列是一对多的关系；也就是说表格包含有多行，行包含有多列；

其中对象的主要属性如下：

列的主要信息包括：名称，ID，编码，行信息ID，跨行数，跨列数，内容数据，内容数据类型，详情查询接口地址，查询参数；

所述步骤1中，其中表格和行是一对多的关系，行和列是一对多的关系；如果行是表头，则行信息中是否为表头字段必为1；通过设置跨行或者跨列数量，可以实现较为复杂的表头，实现表格中的单元个合并效果；列的内容数据类型为固定值，则无需和业务数据整合；反之，则需要根据关键信息与业务数据进行整合。

前端根据后端接口返回的数据在浏览器中渲染相应的表格，将表格的行列完整的显示出来；前端根据表格是否有相应的配置而显示或者不显示某些内容，也可以根据CSS相关配置，美化或者调整表格视觉效果。根据是否有数据明细接口地址来判断是否可以点击查询明细内容。

所述步骤2中，使用Java和springboot框架搭建JavaWeb服务端，提供关键的接口；该接口的实现基于restful技术，为分层系统提供API接口；接口这样设计使得系统内前端和后端耦合降低，接口也可以为多个系统的前端提供服务；运用数据库技术表格信息，将业务数据和列配置信息中的非固定值信息整合，形成完整的列信息；接口将完整的表格，包括行、列的信息和数据一起返回，提供给接口使用方。

所述步骤3中，运用前端框架根据后端接口返回的数据在浏览器中渲染相应的表格，将表格的行列完整的显示出来；首先显示表格基本信息，判断是否有标题，有则显示；判断是否有CSS样式设置，有则设置样式；其次显示行基本信息，判断是否有CSS样式设置，有则设置样式；判断行是否为表头，如果为表头则使用表头标签，反之使用行标签；显示每行的每个列，判断是否有CSS样式设置，有则设置样式；判断跨列和跨行数是否大于1，如果大于1则设置相应的跨行、跨列；判断详情查询接口地址长度是否为非空且大于1，如果是则列标签内容设置链接并可以点击。

其中表格和行是一对多的关系，行和列是一对多的关系。如果行是表头，则行信息中是否为表头字段必为1。通过设置跨行或者跨列数量，可以实现较为复杂的表头，实现表格中的单元个合并效果。列的内容数据类型为固定值，则无需和业务数据整合；反之，则需要根据关键信息与业务数据进行整合。数据库设计中，包含有“CSS样式类，CSS样式”，可以方便通过配置引用前端已知的CSS样式，也可以自定义指定CSS样式。

在一个具体实施例中，如图1-4所示，本发明的一种基于数据配置动态生成HTML表格的方法，其实现步骤如下：

步骤1，设计数据库，建立表格、行、列信息表。

1)在MySql数据库中，建立相关的数据库表。具体如下：

表格基本信息：

CREATE TABLE`html_table_info`(

`id`int(11)NOT NULL AUTO_INCREMENT COMMENT′ID′，

`code`varchar(64)NOT NULL COMMENT′编码′，

`name`varchar(128)NOT NULL COMMENT′名称′，

`page_code`varchar(64)DEFAULT NULL COMMENT′表格属于哪个页面，页面编码′，

`css_class`varchar(128)DEFAULT NULL COMMENT′CSS样式class，用空格分隔′，

`css_style`varchar(512)DEFAULT NULL COMMENT′CSS内联样式′，

`caption`varchar(128)DEFAULT NULL COMMENT′表格标题′，

PRIMARY KEY(`id`)

)ENGINE＝InnoDB DEFAULT CHARSET＝utf8 COMMENT＝′HTML表格信息′；

行基本信息：

CREATE TABLE`html_row_info`(

`id`int(11)NOT NULL AUTO_INCREMENT COMMENT′ID′，

`table_id`int(11)NOT NULL COMMENT′表格信息ID′，

`code`varchar(64)NOT NULL COMMENT′编码′，

`name`varchar(64)DEFAULT NULL COMMENT′名称′，

`sort_num`int(11)NOT NULL COMMENT′排序号。′，

`ess_style`varchar(512)DEFAULT NULL COMMENT′CSS内联样式′，

`is_header`int(1)NOT NULL DEFAULT′0′COMMENT′是否表头。0，否；1，是。′，

PRIMARY KEY(`id`)

)ENGINE＝InnoDB DEFAULT CHARSET＝utf8 COMMENT＝′HTML表格行信息′；

列基本信息：

CREATE TABLE`htrnl_column_info`(

`id`int(11)NOT NULL AUTO_INCREMENT COMMENT′ID′，

`row_id`int(11)NOT NULL COMMENT′行信息ID。′，

`code`varchar(64)NOT NULL COMMENT′编码′，

`name`varchar(64)NOT NULL，

`sort_num`int(2)NOT NULL COMMENT′排序号′，

`rowspan`int(2)DEFAULT NULL COMMENT′跨行′，

`colspan`int(2)DEFAULT NULL COMMENT′跨列′，

`data`varchar(255)DEFAULT NULL COMMENT′数据′，

`data_type`int(1)DEFAULT′1′COMMENT′数据类型。1，固定值；2，非固定值。′，

`css_class`varchar(128)DEFAULT NULL COMMENT′CSS样式class′，

`css_style`varchar(512)DEFAULT NULL COMMENT′CSS内联样式′，

`detail_url`varchar(255)DEFAULT NULL COMMENT′详情查询接口地址′，

`detail_query_params`varchar(1024)DEFAULT NULL COMMENT′详情查询请求参数，json对象字符串′，

PRIMARY KEY(`id`)

)ENGINE＝InnoDB DEFAULT CHARSET＝utf8 COMMENT＝′HTML表格列信息′；

2)向数据库中插入数据

表格

Insert into html_table_info(id，name，code，page_code，css_style)

Values(1，’表0011’，’tb0011’，’pg01’，’font-size：20px；’)；

行

Insert into html_row_info(id，table_id，name，code，sort_num，is_header)

Values(1，1，’表头01’，’th01’，1，0)；

Insert into html_row_info(id，table_id，name，code，sort_num，is_header)

Values(2，1，’表头02’，’th02’，2，0)；

Insert into html_row_info(id，table_id，name，code，sort_num，is_header)

Values(3，1，’行01’，’tr01’，3，0)；

列

跨行

Insert into html_column_info(id，row_id，code，sort_num，rowspan，colspan，data，data_type，detail_url)Values(1，1，’td01’，1，2，1，’项目’，1，”)；

跨列且内容居中

Insert into html_column_info(id，row_id，code，sort_num，rowspan，colspan，data，data_type，detail_url，css_style)Values(2，1，’td02’，2，1，3，’一季度’，1，’’，’text-align：center；’)；

普通

Insert into html_column_info(id，row_id，code，sort_num，rowspan，colspan，data，data_type，detail_url)Values(3，2，’td01’，1，0，0，’1月’，1，’’)；

Insert into html_column_info(id，row_id，code，sort_num，rowspan，colspan，data，data_type，detail_url)Values(4，2，’td02’，2，0，0，’2月’，1，”)；

Insert into html_column_info(id，row_id，code，sort_num，rowspan，colspan，data，data_type，detail_url)Values(5，2，’td03’，3，0，0，’3月’，1，’’)；

Insert into html_column_info(id，row_id，code，sort_num，rowspan，colspan，data，data_type，detail_url)Values(6，3，’td01’，1，0，0，’收入’，1，’’)；

Insert into html_column_info(id，row_id，code，sort_num，rowspan，colspan，data，data_type，detail_url)Values(7，3，’td02’，2，0，0，’5000.00’，0，’’)；

Insert into html_column_info(id，row_id，code，sort_num，rowspan，colspan，data，data_type，detail_url)Values(8，3，’td03’，3，0，0，’10000.00’，0，’’)；

Insert into html_column_info(id，row_id，code，sort_num，rowspan，colspan，data，data_type，detail_url)Values(9，3，’td04’，4，0，0，’12000.00’，0，”)；

步骤2，使用Java技术和springboot框架搭建restful服务接口。通过编码建立2类主要的restful接口：接口1，该接口根据页面编码和表格面组合作为参数查询相关的完整表格及相关数据；接口2，该类接口主要根据列信息ID和其他请求参数查询相应的详细信息，并返回相应的数据；

根据请求参数查询page_code为’pg01’的表格信息，先查询表格基本信息，获取到表格ID为1；用表格ID——1，查询行信息，获取到三条行记录信息；循环每个行信息，根据行信息ID查询行的列信息，第一行2列，第二行3列，第三行4列；查询业务数据，将业务数据整合到第三行的第2、3、4列。将这些信息组织成json格式数据。

数据组织完成后如下所示：

步骤3，前端使用vuejs框架根据后端接口返回的数据在浏览器中渲染相应的表格，将表格的行列完整的显示出来。前端根据表格是否有相应的配置而显示或者不显示某些内容，也可以根据CSS相关配置，美化或者调整表格视觉效果。下面是具体的三个显示效果：

1)根据初始值显示效果如图2所示。

2)设置第三行的字体大小为14px；

update html_row_info set css_style＝’font-size：14px；’where id＝3。

显示效果图如图3所示。

3)为第三行的第2、3、4列设置链接；

update html_column_info set detail_url＝’detail/001’where id＝7；

update html_column_info set detail_url＝’detail/003’where id＝8

update html_column_info set detail_url＝’detail/002’where id＝9。

显示效果如图4所示。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。

Claims

1.基于数据配置动态生成HTML表格的方法，其特征在于，包括以下步骤：

步骤1，设计数据库，建立表格、行、列信息表；将表格按照面向对象的思想，建立表格对象，表格行对象，表格列对象；结合关系型数据库，确定他们的关系为表格和表格行为一对多的关系；表格和表格列是一对多的关系；也就是说表格包含有多行，行包含有多列；其中对象的主要属性如下：

步骤2，使用Java技术和springboot框架搭建restful服务接口；通过编码建立restful接口，该接口根据页面编码和表格组合作为参数查询相关的完整表格及相关数据；

2.如权利要求1所述的基于数据配置动态生成HTML表格的方法，其特征在于，所述步骤1中，其中表格和行是一对多的关系，行和列是一对多的关系；如果行是表头，则行信息中是否为表头字段必为1；通过设置跨行或者跨列数量，可以实现较为复杂的表头，实现表格中的单元格合并效果；列的内容数据类型为固定值，则无需和业务数据整合，反之，则需要根据关键信息与业务数据进行整合。

3.如权利要求1所述的基于数据配置动态生成HTML表格的方法，其特征在于，前端根据后端接口返回的数据在浏览器中渲染相应的表格，将表格的行列完整的显示出来；前端根据表格是否有相应的配置而显示或者不显示某些内容，也可以根据CSS相关配置，美化或者调整表格视觉效果，根据是否有数据明细接口地址来判断是否可以点击查询明细内容。

4.如权利要求1所述的基于数据配置动态生成HTML表格的方法，其特征在于，所述步骤2中，使用Java和springboot框架搭建JavaWeb服务端，提供关键的接口；该接口的实现基于restful技术，为分层系统提供API接口；接口这样设计使得系统内前端和后端耦合降低，接口也可以为多个系统的前端提供服务；运用数据库技术表格信息，将业务数据和列配置信息中的非固定值信息整合，形成完整的列信息；接口将完整的表格，包括行、列的信息和数据一起返回，提供给接口使用方。

5.如权利要求1所述的基于数据配置动态生成HTML表格的方法，其特征在于，所述步骤3中，运用前端框架根据后端接口返回的数据在浏览器中渲染相应的表格，将表格的行列完整的显示出来；首先显示表格基本信息，判断是否有标题，有则显示；判断是否有CSS样式设置，有则设置样式；其次显示行基本信息，判断是否有CSS样式设置，有则设置样式；判断行是否为表头，如果为表头则使用表头标签，反之使用行标签；显示每行的每个列，判断是否有CSS样式设置，有则设置样式；判断跨列和跨行数是否大于1，如果大于1则设置相应的跨行、跨列；判断详情查询接口地址长度是否为非空且大于1，如果是则列标签内容设置链接并可以点击。