CN116383545B - 一种网页报表模板的生成方法、装置、设备和介质 - Google Patents
一种网页报表模板的生成方法、装置、设备和介质 Download PDFInfo
- Publication number
- CN116383545B CN116383545B CN202310652603.9A CN202310652603A CN116383545B CN 116383545 B CN116383545 B CN 116383545B CN 202310652603 A CN202310652603 A CN 202310652603A CN 116383545 B CN116383545 B CN 116383545B
- Authority
- CN
- China
- Prior art keywords
- field
- icon
- cell
- data
- target
- 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
- 238000000034 method Methods 0.000 title claims abstract description 42
- 238000009877 rendering Methods 0.000 claims abstract description 31
- 238000004364 calculation method Methods 0.000 claims description 14
- 238000004590 computer program Methods 0.000 claims description 13
- 230000004044 response Effects 0.000 claims description 11
- 230000015654 memory Effects 0.000 claims description 10
- 230000006870 function Effects 0.000 description 7
- 238000010586 diagram Methods 0.000 description 5
- 230000008569 process Effects 0.000 description 5
- 238000004891 communication Methods 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000000007 visual effect Effects 0.000 description 3
- 239000003086 colorant Substances 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 238000006467 substitution reaction Methods 0.000 description 2
- 238000010276 construction Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000003780 insertion Methods 0.000 description 1
- 230000037431 insertion Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/186—Templates
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- User Interface Of Digital Computer (AREA)
- Document Processing Apparatus (AREA)
Abstract
本申请提供了一种网页报表模板的生成方法、装置、设备和介质，该方法包括：获取目标报表模板的表格样式数据和表格字段数据；基于表格样式数据在画布区域进行渲染，得到目标报表模板的初始表格；基于表格字段数据中的每个字段，生成每个字段的字段图标，并将字段图标显示在字段显示区域；针对字段显示区域中的每个字段图标，响应针对字段图标的拖拽操作，控制字段图标随着拖拽操作进行移动；针对字段显示区域中的每个字段图标，响应拖拽操作的结束，根据拖拽操作所控制的字段图标所在的位置，将字段图标的字段与目标单元格进行关联；根据画布区域中每个单元格所关联的字段和目标报表模板的表格样式数据，生成目标报表模板的模板数据。
Description
技术领域
本申请涉及报表设计领域，具体而言，涉及一种网页报表模板的生成方法、装置、设备和介质。
背景技术
随着互联网技术的普及，各行各业的企业用户往往会通过超级文本标记语言(Hyper Text Markup Language，HTML)页面中的HTML报表来展示不同类型数据。在现有技术中，网页报表通常需要开发人员根据用户需求，手动编写代码来生成的，并需要为不同的单元格配置不同的字段（比如，表头、编辑功能等），然而在实际应用场景中，不同的企业、同一企业的不同部门、甚至是不同的运行设备，所需要的网页报表的形式可能会存在差异，通常都会需要开发人员提供符合不同形式的网页报表，而由于不同的网页报表需要编写不同的代码，这对开发人员的专业性有较高的要求，而且开发人员需要编写的代码会很多，因此工作效率较低。
发明内容
有鉴于此，本申请的目的在于提供一种网页报表模板的生成方法、装置、设备和介质，用于解决现有技术中生成网页报表的效率较低的问题。
第一方面，本申请实施例提供了一种网页报表模板的生成方法，应用于终端设备，所述终端设备中包括一网页界面，所述网页界面包括画布区域和字段显示区域，包括：
获取目标报表模板的表格样式数据和表格字段数据；
基于所述表格样式数据在画布区域进行渲染，得到目标报表模板的初始表格；所述初始表格中包括多个单元格；
基于所述表格字段数据中的每个字段，生成每个字段的字段图标，并将所述字段图标显示在所述字段显示区域；
针对所述字段显示区域中的每个字段图标，响应针对所述字段图标的拖拽操作，控制所述字段图标随着所述拖拽操作进行移动；
针对所述字段显示区域中的每个字段图标，响应所述拖拽操作的结束，根据所述拖拽操作所控制的字段图标所在的位置，确定所述字段图标的字段需要关联的目标单元格，并将所述字段图标的字段与所述目标单元格进行关联；
根据所述画布区域中每个单元格所关联的字段和所述目标报表模板的表格样式数据，生成所述目标报表模板的模板数据。
可选的，针对所述字段显示区域中的每个字段图标，响应针对所述字段图标的拖拽操作，控制所述字段图标随着所述拖拽操作进行移动，包括：
针对所述字段显示区域中的每个字段图标，响应所述拖拽操作选中所述字段图标，根据所述字段图标的字段的属性信息在所述画布区域中确定推荐关联单元格，并将所述推荐关联单元格进行突出显示。
可选的，根据所述画布区域中每个单元格所关联的字段和所述目标报表模板的表格样式数据，生成所述目标报表模板的模板数据，包括：
根据所述画布区域中每个单元格所关联的字段的属性信息，将所述画布区域中的每个单元格划分为不同的渲染层级；
以所述画布区域中的每个单元格为最小节点，根据每个单元格所属的渲染层级，构建所述画布区域的图层渲染结构；
根据所述画布区域中每个单元格所关联的字段、所述目标报表模板的表格样式数据和所述画布区域的图层渲染结构，生成所述目标报表模板的模板数据。
可选的，针对所述字段显示区域中的每个字段图标，响应所述拖拽操作的结束，根据所述拖拽操作所控制的字段图标所在的位置，确定所述字段图标的字段需要关联的目标单元格，包括：
针对所述字段显示区域中的每个字段图标，响应所述拖拽操作的结束，根据所述拖拽操作所控制的字段图标所在的位置，以及所述字段图标的字段对应属性信息中的计算规则，确定所述字段图标的字段需要关联的目标单元格；所述计算规则涉及到至少两个单元格对应数据之间的运算。
可选的，所述方法还包括：
响应所述字段图标的字段与所述目标单元格的关联完成，则在所述字段显示区域中为所述字段图标设置已用标识；
响应针对设置有已用标识的字段图标的拖拽操作，所述字段图标不随所述拖拽操作进行移动。
可选的，所述方法还包括：
响应所述字段图标的字段与所述目标单元格的关联取消，则在所述字段显示区域中将设置已用标识的所述字段图标恢复为原始状态。
可选的，所述表格字段数据包括多个字段，每个字段有对应的属性信息；所述属性信息包括以下信息中的任意一种或多种：字段标签、字段所对应的计算规则、字段所对应的数据显示区域。
第二方面，本申请实施例提供了一种网页报表模板的生成装置，应用于终端设备，所述终端设备中包括一图形用户界面，所述图形用户界面包括画布区域和字段显示区域，包括：
获取模块，用于获取目标网页报表的表格样式数据和表格字段数据；
渲染模块，用于基于所述表格样式数据在画布区域进行渲染，得到目标网页报表的初始表格；所述初始表格中包括多个单元格；
生成模块，用于基于所述表格字段数据中的每个字段，生成每个字段的字段图标，并将所述字段图标显示在所述字段显示区域；
拖拽模块，用于针对所述字段显示区域中的每个字段图标，响应针对所述字段图标的拖拽操作，控制所述字段图标随着所述拖拽操作进行移动；
关联模块，用于针对所述字段显示区域中的每个字段图标，响应所述拖拽操作的结束，根据所述拖拽操作所控制的字段图标所在的位置，确定所述字段图标的字段需要关联的目标单元格，并将所述字段图标的字段与所述目标单元格进行关联；
生成模块，用于根据所述画布区域中每个单元格所关联的字段，生成所述目标网页报表的网页报表模板。
第三方面，本申请实施例提供了一种计算机设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述方法的步骤。
第四方面，本申请实施例提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行上述方法的步骤。
本申请实施例提出的网页报表模板的生成方法，首先，获取目标报表模板的表格样式数据和表格字段数据；基于所述表格样式数据在画布区域进行渲染，得到目标报表模板的初始表格；所述初始表格中包括多个单元格；基于所述表格字段数据中的每个字段，生成每个字段的字段图标，并将所述字段图标显示在所述字段显示区域；其次，针对所述字段显示区域中的每个字段图标，响应针对所述字段图标的拖拽操作，控制所述字段图标随着所述拖拽操作进行移动；针对所述字段显示区域中的每个字段图标，响应所述拖拽操作的结束，根据所述拖拽操作所控制的字段图标所在的位置，确定所述字段图标的字段需要关联的目标单元格，并将所述字段图标的字段与所述目标单元格进行关联；最后，根据所述画布区域中每个单元格所关联的字段和所述目标报表模板的表格样式数据，生成所述目标报表模板的模板数据。
在某些实施例中，通过视图化的方式显示出需要进行添加字段的空白表格，以及需要向空白表格中添加的字段，然后通过拖拽操作，实现字段与表格的单元格的关联，最后形成网页报表对应的数据，不需要开发人员在编辑代码的过程中通过手动编辑代码将字段与单元格进行关联，减少了因开发人员的失误而导致的报表显示出问题的情况，且通过这种方式生成目标报表模板，不需要开发人员编辑所有的代码，对开发人员的专业性要求比较低，提高了用户体验。
为使本申请的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1为本申请实施例提供的一种网页报表模板的生成方法的流程示意图；
图2为本申请实施例提供的第一种网页页面的示意图；
图3为本申请实施例提供的第二种网页页面的示意图；
图4为本申请实施例提供的第三种网页页面的示意图；
图5为本申请实施例提供的一种网页报表模板的生成装置的结构示意图；
图6为本申请实施例提供的一种计算机设备的结构示意图。
具体实施方式
为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。
现阶段，生成网页报表的方式基本上都是开发人员通过编辑代码的方式生成的，开发人员不仅要设计网页报表的样式，还要通过代码编辑的方式将每个单元格关联到其所涉及到的数据，开发人员的开发工作量很大，且不同企业，同一企业的不同部门等所涉及到的数据可能都是不同的，如果开发人员的代码开发量很大的话，就会降低网页报表的生成效率。
本申请实施例提供了一种网页报表模板的生成方法，如图1所示，应用于终端设备，所述终端设备中包括一网页界面，所述网页界面包括画布区域和字段显示区域，包括：
S101，获取目标网页报表的表格样式数据和表格字段数据；
S102，基于所述表格样式数据在画布区域进行渲染，得到目标网页报表的初始表格；所述初始表格中包括多个单元格；
S103，基于所述表格字段数据中的每个字段，生成每个字段的字段图标，并将所述字段图标显示在所述字段显示区域；
S104，针对所述字段显示区域中的每个字段图标，响应针对所述字段图标的拖拽操作，控制所述字段图标随着所述拖拽操作进行移动；
S105，针对所述字段显示区域中的每个字段图标，响应所述拖拽操作的结束，根据所述拖拽操作所控制的字段图标所在的位置，确定所述字段图标的字段需要关联的目标单元格，并将所述字段图标的字段与所述目标单元格进行关联；
S106，根据所述画布区域中每个单元格所关联的字段和所述目标报表模板的表格样式数据，生成所述目标报表模板的模板数据。
本申请所公开的一种网页报表模板的生成方法，应用于显示有网页界面的终端设备中，网页界面包括画布区域和字段显示区域。
在上述步骤S101中，目标网页报表的表格样式数据为记录有目标网页报表中各个单元格的样式的数据，具体可以包括以下数据中的任意一种或多种：单元格的索引、单元格的行高、单元格的列宽、单元格的背景色、单元格的初始化数据、单元格的配置等。
表格字段数据是目标网页报表中所涉及到的一些能够让用户俩接到表格中某些具体功能的字段，比如，表头字段、编辑栏中的编辑控件对应的字段（合并单元格、公式）等。
具体实施中，目标网页报表的表格样式数据和表格字段数据是分别存储区在不同的数据库中的，为了获取这两样数据，需要先发起目标报表模板的生成请求，基于该生成请求，服务器会分别向存储表格样式数据和表格字段数据的数据库获取对应数据。
在上述步骤S102中，目标报表模板的初始表格是由多个单元格组成的，在初始表格中不存在任何字段。
如图2所示，网页界面中包括左侧的字段显示区域和右侧的画布区域，在画布区域中仅显示不包含字段的初始表格。
在上述步骤S103中，具体实施中，为表格字段数据中的每个字段都生成对应的字段图标，并显示在字段显示区域，以便执行后续的步骤S104至S106。
在上述步骤S104中，拖拽操作为控制拖拽操作所选中的对象在网页界面中进行移动的操作。选中的对象可以是点击鼠标时对象所在区域与鼠标对应的指示标识所在位置重叠的对象；或可以是位于框选操作的框选范围内的对象等。
具体实施中，针对字段显示区域中的每个字段图标，都会执行拖拽操作，通过拖拽操作将字段图标放置在合适的单元格内，也就是，执行后续步骤S105。
在上述步骤S105中，针对所述字段显示区域中的每个字段图标，在拖拽操作结束时（可能是鼠标按键突然被松开时），说明此时字段图标可能已经到了需要填充对应字段的单元格所在位置，这样，根据字段图标当前所在的位置，和目标报表模板中每个单元格的所在位置，确定出字段图标中字段所需要填充的目标单元格，将字段图标的字段与目标单元格进行关联，并在目标单元格中显示字段图标对应的字段。
一般情况下，为了避免在确定字段图标的字段需要关联的目标单元格时，因字段图标放的位置超过目标单元格所在区域，无法准确确定目标单元格的情况，会将字段图标设置为小于目标单元格所在区域的形状。
还有就是，有些情况下，并不是一个单元格只能防止对应一个字段，可能会存在至少两个单元格合并之后对应同一个字段的情况，在这种情况下确定目标单元格的步骤，包括：
步骤1051，针对所述字段显示区域中的每个字段图标，响应所述拖拽操作的结束，根据所述拖拽操作所控制的字段图标所覆盖到的区域，确定所述字段图标的字段需要关联的目标单元格，并将所述字段图标的字段与所述目标单元格进行关联。
在上述步骤1051中，字段图标的形状是有一定大小的，针对所述字段显示区域中的每个字段图标，响应所述拖拽操作的结束，确定字段图标所覆盖到的单元格（所有单元格中单元格所区域与字段图标所在区域存在交集的单元格），将字段图标所覆盖到的单元格军确定为字段图标的字段需要关联的目标单元格，并将所述字段图标的字段与所述目标单元格进行关联。
比如，如图3所示，画布区域的初始表格中还有多个空白单元格，其中拖拽操作结束时，字段图标4覆盖到了单元格1和单元格2所在区域，因此，如图4所示，将单元格1和单元格2进行合并，得到单元格3，在单元格3中显示字段图标4对应的字段4。
在上述步骤S106中，最后根据画布区域中，每个单元格所关联的字段，和目标报表模板的表格样式数据，生成目标报表模板的模板数据。
本申请实施例通过上述六个步骤，通过视图化的方式显示出需要进行添加字段的空白表格，以及需要向空白表格中添加的字段，然后通过拖拽操作，实现字段与表格的单元格的关联，最后形成网页报表对应的数据，不需要开发人员在编辑代码的过程中通过手动编辑代码将字段与单元格进行关联，减少了因开发人员的失误而导致的报表显示出问题的情况，且通过这种方式生成目标报表模板，不需要开发人员编辑所有的代码，对开发人员的专业性要求比较低，提高了用户体验。
在一般情况下，有些字段图标在报表中的位置是比较固定的，也可以说是大多数开发人员会基于操作的便捷性等方面的考虑，将某些基础的字段设置在一个相对固定的位置，也就是，这样方便大多数用户操作，基于上述原因考虑，本申请在拖拽字段图标的过程中，在画布区域为开发人员推荐字段图标对应的字段可以设置的位置，也就是，步骤S104，包括：
步骤1041，针对所述字段显示区域中的每个字段图标，响应所述拖拽操作选中所述字段图标，根据所述字段图标的字段的属性信息在所述画布区域中确定推荐关联单元格，并将所述推荐关联单元格进行突出显示。
在上述步骤1041中，突出显示可以是以下显示方式中的任意一种：单元格的边框加粗、为单元格设置区别于已存在的背景颜色的其他背景颜色、单元格高亮等。字段的属性信息包括以下信息中的任意一种或多种：字段标签、字段所对应的计算规则、字段所对应的数据显示区域。推荐关联单元格是根据字段标签在历史数据中统计得到的，比如，如图4所示，“序号”字段大多数情况下会设置在编辑栏下边的第一行第一列的单元格。历史数据可以是当前正在编辑表格的用户的历史编辑数据，也可以是历史上所有编辑表的用户的历史编辑数据。
具体实施中，针对所述字段显示区域中的每个字段图标，只要拖拽操作选中了该字段图标，服务器就会基于历史数据自动统计出该字段图标对应字段的字段标签经常被放置的位置，也就是，大多数开发人员会将该字段图标放置的位置，这样的位置就可以称为推荐关联单元格，将推荐关联单元格进行突出显示，来提醒开发人员尽快将字段图标放置在较为合适的位置。进而提高了目标报表模板的模板数据的生成效率。
在一个表格基于每个单元格不同的功能，可以将单元格进行分类，分类的要求不同，则分类结果也会不同，比如，本申请中步骤S106，包括：
步骤1061，根据所述画布区域中每个单元格所关联的字段的属性信息，将所述画布区域中的每个单元格划分为不同的渲染层级；
步骤1062，以所述画布区域中的每个单元格为最小节点，根据每个单元格所属的渲染层级，构建所述画布区域的图层渲染结构；
步骤1063，根据所述画布区域中每个单元格所关联的字段、所述目标报表模板的表格样式数据和所述画布区域的图层渲染结构，生成所述目标报表模板的模板数据。
在上述步骤1061中，渲染层级是根据不同单元格多关联的字段的属性信息划分出来的，比如，每个小的单元格就是一个层级，具有相似功能的单元格组成另一个层级（编辑栏中的***区域、公式区域等），相同层级的相似功能又可以组成更高的一个层级（编辑栏、数据填充区等）。
在上述步骤1062中，以所述画布区域中的每个单元格为最小节点，基于每个单元格所属的渲染层级将不同的单元格进行关联，最后构建所述画布区域的图层渲染结构。比如，如图5所示，shape为小单元格，Group为最下单元格的上一层级，layer为Group的更上一层级，stage为layer的更上一层级，且stage为图层渲染结构的最终层级。
在上述步骤1063中，最后将每个单元格所关联的字段、所述目标报表模板的表格样式数据和所述画布区域的图层渲染结构都进行存储，得到用于生成目标报表模板的模板数据。
在报表中，有些字段对应的数据是需要基于至少两个单元格对应数据之间的运算得到的，因此步骤S105，包括：
步骤1052，针对所述字段显示区域中的每个字段图标，响应所述拖拽操作的结束，根据所述拖拽操作所控制的字段图标所在的位置，以及所述字段图标的字段对应属性信息中的计算规则，确定所述字段图标的字段需要关联的目标单元格；所述计算规则涉及到至少两个单元格对应数据之间的运算。
在上述步骤1052中，针对所述字段显示区域中的每个字段图标，响应所述拖拽操作的结束，基于字段图标的字段对应属性信息确定该属性信息中是否存在计算规则，若存在计算规则，则确定计算规则所涉及到的数据对应的第一单元格，然后再基于拖拽操作所控制的字段图标所在的位置确定第二单元格，最后将第一单元格和第二单元格都确定为字段图标的字段需要关联的目标单元格。
字段显示区域包含有多个字段对应的字段图标，为了避免开发人员重复拖拽同一个字段图标，造成目标报表模板生成失败，本申请还提供了以下方法，包括：
步骤107，响应所述字段图标的字段与所述目标单元格的关联完成，则在所述字段显示区域中为所述字段图标设置已用标识；
步骤108，响应针对设置有已用标识的字段图标的拖拽操作，所述字段图标不随所述拖拽操作进行移动。
在上述步骤107和步骤108中，在一个还未填充数据的报表中是不存在相同的字段的，所以当字段显示区域中的某一个字段图标的图标已经与对应的单元格进行关联后，说明该字段图标的字段就不能再与其他单元格进行关联了，为了避免用户对已经处于关联状态下的字段对应的字段图标执行拖拽操作，甚至将该字段进行重复关联的情况，本申请会对已经处于关联状态的字段对应的字段图标设置已用标识。通过已用标识让开发人员明确的了解到当前有哪些字段还未关联，有哪些字段已经关联了，避免了将该字段进行重复关联的情况。已用标识可以是以下标识方式中的任意一种：字段图标的亮度降低、字段图标被覆盖透明灰度层、在字段图标周围设置叉号等。
当然本申请中的字段与单元格进行关联并不是一锤子买卖，开发人员也可以反悔的，也就是，可以取消字段与单元格之间的关联关系，具体的包括：
步骤109，响应所述字段图标的字段与所述目标单元格的关联取消，则在所述字段显示区域中将设置已用标识的所述字段图标恢复为原始状态。
在上述步骤109中，当字段与目标单元格取消关联时，就会控制字段显示区域中能够该字段的字段图标的已用标识去除，还原该字段图标的原始窗状态，也就是，还原该字段图标可以重新被拖动的情况。
本申请实施例提供了一种网页报表模板的生成装置，如图5所示，应用于终端设备，所述终端设备中包括一图形用户界面，所述图形用户界面包括画布区域和字段显示区域，包括：
获取模块501，用于获取目标网页报表的表格样式数据和表格字段数据；
渲染模块502，用于基于所述表格样式数据在画布区域进行渲染，得到目标网页报表的初始表格；所述初始表格中包括多个单元格；
生成模块503，用于基于所述表格字段数据中的每个字段，生成每个字段的字段图标，并将所述字段图标显示在所述字段显示区域；
拖拽模块504，用于针对所述字段显示区域中的每个字段图标，响应针对所述字段图标的拖拽操作，控制所述字段图标随着所述拖拽操作进行移动；
关联模块505，用于针对所述字段显示区域中的每个字段图标，响应所述拖拽操作的结束，根据所述拖拽操作所控制的字段图标所在的位置，确定所述字段图标的字段需要关联的目标单元格，并将所述字段图标的字段与所述目标单元格进行关联；
生成模块506，用于根据所述画布区域中每个单元格所关联的字段，生成所述目标网页报表的网页报表模板。
可选的，拖拽模块，包括：
拖拽单元，用于针对所述字段显示区域中的每个字段图标，响应所述拖拽操作选中所述字段图标，根据所述字段图标的字段的属性信息在所述画布区域中确定推荐关联单元格，并将所述推荐关联单元格进行突出显示。
可选的，生成模块，包括：
划分单元，用于根据所述画布区域中每个单元格所关联的字段的属性信息，将所述画布区域中的每个单元格划分为不同的渲染层级；
构建单元，用于以所述画布区域中的每个单元格为最小节点，根据每个单元格所属的渲染层级，构建所述画布区域的图层渲染结构；
生成单元，用于根据所述画布区域中每个单元格所关联的字段、所述目标报表模板的表格样式数据和所述画布区域的图层渲染结构，生成所述目标报表模板的模板数据。
可选的，关联模块，包括：
关联单元，用于针对所述字段显示区域中的每个字段图标，响应所述拖拽操作的结束，根据所述拖拽操作所控制的字段图标所在的位置，以及所述字段图标的字段对应属性信息中的计算规则，确定所述字段图标的字段需要关联的目标单元格；所述计算规则涉及到至少两个单元格对应数据之间的运算。
可选的，所述装置还包括：
第一响应模块，用于响应所述字段图标的字段与所述目标单元格的关联完成，则在所述字段显示区域中为所述字段图标设置已用标识；
第二响应模块，用于响应针对设置有已用标识的字段图标的拖拽操作，所述字段图标不随所述拖拽操作进行移动。
可选的，所述装置还包括：
恢复模块，用于响应所述字段图标的字段与所述目标单元格的关联取消，则在所述字段显示区域中将设置已用标识的所述字段图标恢复为原始状态。
可选的，所述表格字段数据包括多个字段，每个字段有对应的属性信息；所述属性信息包括以下信息中的任意一种或多种：字段标签、字段所对应的计算规则、字段所对应的数据显示区域。
对应于图1中的网页报表模板的生成方法，本申请实施例还提供了一种计算机设备600，如图6所示，该设备包括存储器601、处理器602及存储在该存储器601上并可在该处理器602上运行的计算机程序，其中，上述处理器602执行上述计算机程序时实现上述网页报表模板的生成方法。
具体地，上述存储器601和处理器602能够为通用的存储器和处理器，这里不做具体限定，当处理器602运行存储器601存储的计算机程序时，能够执行上述网页报表模板的生成方法，解决了现有技术中生成网页报表的效率较低的问题。本申请通过视图化的方式显示出需要进行添加字段的空白表格，以及需要向空白表格中添加的字段，然后通过拖拽操作，实现字段与表格的单元格的关联，最后形成网页报表对应的数据，不需要开发人员在编辑代码的过程中通过手动编辑代码将字段与单元格进行关联，减少了因开发人员的失误而导致的报表显示出问题的情况，且通过这种方式生成目标报表模板，不需要开发人员编辑所有的代码，对开发人员的专业性要求比较低，提高了用户体验。
对应于图1中的网页报表模板的生成方法，本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述网页报表模板的生成方法的步骤。
具体地，该存储介质能够为通用的存储介质，如移动磁盘、硬盘等，该存储介质上的计算机程序被运行时，能够执行上述网页报表模板的生成方法，解决了现有技术中生成网页报表的效率较低的问题，本申请通过视图化的方式显示出需要进行添加字段的空白表格，以及需要向空白表格中添加的字段，然后通过拖拽操作，实现字段与表格的单元格的关联，最后形成网页报表对应的数据，不需要开发人员在编辑代码的过程中通过手动编辑代码将字段与单元格进行关联，减少了因开发人员的失误而导致的报表显示出问题的情况，且通过这种方式生成目标报表模板，不需要开发人员编辑所有的代码，对开发人员的专业性要求比较低，提高了用户体验。
在本申请所提供的实施例中，应该理解到，所揭露方法和装置，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请提供的实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器（ROM，Read-Only Memory）、随机存取存储器（RAM，Random Access Memory）、磁碟或者光盘等各种可以存储程序代码的介质。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释，此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
最后应说明的是：以上所述实施例，仅为本申请的具体实施方式，用以说明本申请的技术方案，而非对其限制，本申请的保护范围并不局限于此，尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本申请实施例技术方案的精神和范围。都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应所述以权利要求的保护范围为准。
Claims (9)
1.一种网页报表模板的生成方法，其特征在于，应用于终端设备，所述终端设备中包括一网页界面，所述网页界面包括画布区域和字段显示区域，包括：
获取目标报表模板的表格样式数据和表格字段数据；
基于所述表格样式数据在画布区域进行渲染，得到目标报表模板的初始表格；所述初始表格中包括多个单元格；
基于所述表格字段数据中的每个字段，生成每个字段的字段图标，并将所述字段图标显示在所述字段显示区域；
针对所述字段显示区域中的每个字段图标，响应拖拽操作选中所述字段图标，根据所述字段图标的字段的属性信息在所述画布区域中确定推荐关联单元格，并将所述推荐关联单元格进行突出显示；
针对所述字段显示区域中的每个字段图标，响应所述拖拽操作的结束，根据所述拖拽操作所控制的字段图标所在的位置，确定所述字段图标的字段需要关联的目标单元格，并将所述字段图标的字段与所述目标单元格进行关联；
根据所述画布区域中每个单元格所关联的字段和所述目标报表模板的表格样式数据，生成所述目标报表模板的模板数据。
2.根据权利要求1所述的方法，其特征在于，根据所述画布区域中每个单元格所关联的字段和所述目标报表模板的表格样式数据，生成所述目标报表模板的模板数据，包括：
根据所述画布区域中每个单元格所关联的字段的属性信息，将所述画布区域中的每个单元格划分为不同的渲染层级；
以所述画布区域中的每个单元格为最小节点，根据每个单元格所属的渲染层级，构建所述画布区域的图层渲染结构；
根据所述画布区域中每个单元格所关联的字段、所述目标报表模板的表格样式数据和所述画布区域的图层渲染结构，生成所述目标报表模板的模板数据。
3.根据权利要求1所述的方法，其特征在于，针对所述字段显示区域中的每个字段图标，响应所述拖拽操作的结束，根据所述拖拽操作所控制的字段图标所在的位置，确定所述字段图标的字段需要关联的目标单元格，包括：
针对所述字段显示区域中的每个字段图标，响应所述拖拽操作的结束，根据所述拖拽操作所控制的字段图标所在的位置，以及所述字段图标的字段对应属性信息中的计算规则，确定所述字段图标的字段需要关联的目标单元格；所述计算规则涉及到至少两个单元格对应数据之间的运算。
4.根据权利要求1所述的方法，其特征在于，所述方法还包括：
响应所述字段图标的字段与所述目标单元格的关联完成，则在所述字段显示区域中为所述字段图标设置已用标识；
响应针对设置有已用标识的字段图标的拖拽操作，所述字段图标不随所述拖拽操作进行移动。
5.根据权利要求4所述的方法，其特征在于，所述方法还包括：
响应所述字段图标的字段与所述目标单元格的关联取消，则在所述字段显示区域中将设置已用标识的所述字段图标恢复为原始状态。
6.根据权利要求1所述的方法，其特征在于，所述表格字段数据包括多个字段，每个字段有对应的属性信息；所述属性信息包括以下信息中的任意一种或多种：字段标签、字段所对应的计算规则、字段所对应的数据显示区域。
7.一种网页报表模板的生成装置，其特征在于，应用于终端设备，所述终端设备中包括一图形用户界面，所述图形用户界面包括画布区域和字段显示区域，包括：
获取模块，用于获取目标网页报表的表格样式数据和表格字段数据；
渲染模块，用于基于所述表格样式数据在画布区域进行渲染，得到目标网页报表的初始表格；所述初始表格中包括多个单元格；
生成模块，用于基于所述表格字段数据中的每个字段，生成每个字段的字段图标，并将所述字段图标显示在所述字段显示区域；
拖拽模块，用于针对所述字段显示区域中的每个字段图标，响应拖拽操作选中所述字段图标，根据所述字段图标的字段的属性信息在所述画布区域中确定推荐关联单元格，并将所述推荐关联单元格进行突出显示；
关联模块，用于针对所述字段显示区域中的每个字段图标，响应所述拖拽操作的结束，根据所述拖拽操作所控制的字段图标所在的位置，确定所述字段图标的字段需要关联的目标单元格，并将所述字段图标的字段与所述目标单元格进行关联；
生成模块，用于根据所述画布区域中每个单元格所关联的字段，生成所述目标网页报表的网页报表模板。
8.一种计算机设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现上述权利要求1-6中任一项所述的方法的步骤。
9.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，其特征在于，所述计算机程序被处理器运行时执行上述权利要求1-6中任一项所述的方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310652603.9A CN116383545B (zh) | 2023-06-05 | 2023-06-05 | 一种网页报表模板的生成方法、装置、设备和介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310652603.9A CN116383545B (zh) | 2023-06-05 | 2023-06-05 | 一种网页报表模板的生成方法、装置、设备和介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116383545A CN116383545A (zh) | 2023-07-04 |
| CN116383545B true CN116383545B (zh) | 2023-08-25 |
Family
ID=86975446
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310652603.9A Active CN116383545B (zh) | 2023-06-05 | 2023-06-05 | 一种网页报表模板的生成方法、装置、设备和介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116383545B (zh) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111596913A (zh) * | 2020-05-22 | 2020-08-28 | 北京达佳互联信息技术有限公司 | 一种可视化组件框架编排方法及装置 |
| CN112650966A (zh) * | 2020-12-28 | 2021-04-13 | 珠海新华通软件股份有限公司 | 在线设计的动态列表页面生成方法、生成器及介质 |
| CN114925665A (zh) * | 2022-06-08 | 2022-08-19 | 杭州比智科技有限公司 | 一种基于web表格的图表数据编辑方法及*** |
| CN115081414A (zh) * | 2022-08-17 | 2022-09-20 | 广州思迈特软件有限公司 | 基于数据模型的电子表格生成方法、装置、设备及介质 |
| CN115982266A (zh) * | 2022-12-02 | 2023-04-18 | 中孚安全技术有限公司 | 基于自定义配置属性字段的页面动态渲染方法及*** |
| WO2023071452A1 (zh) * | 2021-10-28 | 2023-05-04 | 北京字跳网络技术有限公司 | 一种组件的控制方法、装置、电子设备及存储介质 |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20160012030A1 (en) * | 2014-07-08 | 2016-01-14 | Tuyen Tran | Data form generation and gathering |
| US20210174004A1 (en) * | 2019-12-05 | 2021-06-10 | Brad Sherp | Methods and systems for dynamic customization of independent webpage section templates |
-
2023
- 2023-06-05 CN CN202310652603.9A patent/CN116383545B/zh active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111596913A (zh) * | 2020-05-22 | 2020-08-28 | 北京达佳互联信息技术有限公司 | 一种可视化组件框架编排方法及装置 |
| CN112650966A (zh) * | 2020-12-28 | 2021-04-13 | 珠海新华通软件股份有限公司 | 在线设计的动态列表页面生成方法、生成器及介质 |
| WO2023071452A1 (zh) * | 2021-10-28 | 2023-05-04 | 北京字跳网络技术有限公司 | 一种组件的控制方法、装置、电子设备及存储介质 |
| CN114925665A (zh) * | 2022-06-08 | 2022-08-19 | 杭州比智科技有限公司 | 一种基于web表格的图表数据编辑方法及*** |
| CN115081414A (zh) * | 2022-08-17 | 2022-09-20 | 广州思迈特软件有限公司 | 基于数据模型的电子表格生成方法、装置、设备及介质 |
| CN115982266A (zh) * | 2022-12-02 | 2023-04-18 | 中孚安全技术有限公司 | 基于自定义配置属性字段的页面动态渲染方法及*** |
Non-Patent Citations (1)
| Title |
|---|
| 单元格式动态报表的实现原理探究;贺华涛;仇少敏;;城建档案(第04期);第73-75页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116383545A (zh) | 2023-07-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113094037B (zh) | 表单和工作流的交互方法、开发平台、设备及存储介质 | |
| CN109614424B (zh) | 页面布局生成方法、装置、计算设备和介质 | |
| US9058307B2 (en) | Presentation generation using scorecard elements | |
| CN111125560B (zh) | 数据可视化处理方法、装置及计算机*** | |
| US8217945B1 (en) | Social annotation of a single evolving visual representation of a changing dataset | |
| US20080189632A1 (en) | Severity Assessment For Performance Metrics Using Quantitative Model | |
| US20080120257A1 (en) | Automatic online form filling using semantic inference | |
| US10810364B2 (en) | Data flow view for a spreadsheet | |
| US11029806B1 (en) | Digital product navigation tool | |
| CN111444696B (zh) | 报表展示与编辑方法及装置 | |
| CN111126019B (zh) | 基于模式定制的报表生成方法、装置和电子设备 | |
| MX2012012420A (es) | Formateo y graficado temporales de datos seleccionados. | |
| CN104182225B (zh) | 一种通用移动信息***适配方法与装置 | |
| CN112241263A (zh) | 可视化的页面处理方法和设备 | |
| CN112241265A (zh) | 可视化的页面处理方法和设备 | |
| CN110806866A (zh) | 一种前端管理***的生成方法及装置 | |
| CN111124564A (zh) | 显示用户界面的方法及装置 | |
| US8230319B2 (en) | Web-based visualization, refresh, and consumption of data-linked diagrams | |
| CN113255302A (zh) | 组织架构图操作方法、计算机设备及计算机存储介质 | |
| CN102902500B (zh) | 一种数据矩阵信息的显示方法及装置 | |
| CN116383545B (zh) | 一种网页报表模板的生成方法、装置、设备和介质 | |
| KR20220083185A (ko) | 엑셀 도구를 이용한 온라인 보고서 작성 시스템 | |
| CN112558969A (zh) | 一种网页表单生成方法、装置、设备及介质 | |
| CN111158685A (zh) | 静态页面的更新方法、装置、电子设备及存储介质 | |
| CN117054846A (zh) | 一种芯片的可视化测试方法、***、装置及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |