CN111104635A - 一种表格网页的生成方法和装置 - Google Patents

Abstract

本申请涉及一种表格网页的生成方法和装置，其中，该方法包括：调用与获取到的表资源元素信息匹配的初始表资源组件，其中，表资源元素信息用于指示目标表格网页上所包括的表资源元素；建立初始表资源组件与配置数据组件之间的关联关系，其中，配置数据组件用于为具有关联关系的表资源组件提供配置数据；按照关联关系从初始表资源组件对应的配置数据组件中向初始表资源组件中引入目标配置数据，生成目标表资源组件；按照目标布局在初始网页上渲染目标表资源组件，得到目标表格网页。本申请解决了表格网页的生成效率较低的技术问题。

Description

一种表格网页的生成方法和装置

技术领域

本申请涉及计算机领域，尤其涉及一种表格网页的生成方法和装置。

背景技术

随着web技术的快速发展，前端技术的占比越来越重要，各个项目、公司等为了保持项目的可控性，可定制化或者减少运营的工作量，对独自开发管理后台的需求也越来越频繁。针对这一现象，就会出现很多不同类别的管理后台，但是虽然各种管理后台的职能各不相同，但是表格表单的形式是管理后端最常用的功能点。

随着某个项目的逐步迭代，后台人员会花费很大一部分时间用来开发表格表单页面，在实际应用中，在不同的网页或者不同***中，针对数据增删改查的表格资源页面的页面布局往往是类似的，只是表单筛选项不同、表格中展示的数据不同以及分页的页数不相同，但是通常每增加一个新的页面都需要前端开发人员重复工作量去生成页面模版，因此也就导致表格网页的生成效率也非常的低。

针对上述的问题，目前尚未提出有效的解决方案。

发明内容

为了解决上述技术问题或者至少部分地解决上述技术问题，本申请提供了一种表格网页的生成方法和装置。

根据本申请实施例的一个方面，提供了一种表格网页的生成方法，包括：

调用与获取到的表资源元素信息匹配的初始表资源组件，其中，所述表资源元素信息用于指示目标表格网页上所包括的表资源元素；

建立所述初始表资源组件与配置数据组件之间的关联关系，其中，所述配置数据组件用于为具有所述关联关系的表资源组件提供配置数据；

按照所述关联关系从所述初始表资源组件对应的配置数据组件中向所述初始表资源组件中引入目标配置数据，生成目标表资源组件；

按照目标布局在初始网页上渲染所述目标表资源组件，得到所述目标表格网页。

可选地，调用与获取到的表资源元素信息匹配的初始表资源组件包括：

确定所述表资源元素信息所指示的目标表资源元素，其中，所述目标表资源元素包括表格元素以及以下至少之一：表单元素、按钮元素、分页元素；

从表资源组件库中获取与所述表格元素匹配的初始表格组件，并从所述表资源组件库获取以下至少之一：与所述表单元素匹配的初始表单组件、与所述按钮元素匹配的初始按钮组件、与所述分页元素匹配的初始分页组件。

可选地，建立所述初始表资源组件与配置数据组件之间的关联关系包括：

建立所述初始表格组件与表格头部配置组件和表格数据配置组件之间的关联关系，其中，所述表格头部配置组件用于提供表格头部数据，所述表格数据配置组件用于提供表格的单元格数据；

在所述目标表资源元素包括所述表单元素的情况下，建立所述初始表单组件与表单数据配置组件和表单参数配置组件之间的关联关系，其中，所述表单数据配置组件用于提供表单数据，所述表单参数配置用于提供表单参数信息；

在所述目标表资源元素包括所述按钮元素的情况下，建立所述初始按钮组件与按钮数据配置组件之间的关联关系，其中，所述按钮数据配置组件用于提供按钮数据；

在所述目标表资源元素包括所述分页元素的情况下，建立所述初始分页组件与分页数据配置组件之间的关联关系，其中，所述分页数据配置组件用于提供分页数据。

可选地，按照所述关联关系从所述初始表资源组件对应的配置数据组件中向所述初始表资源组件中引入目标配置数据，生成目标表资源组件包括：

将所述表格头部配置组件中存储的表格头部数据和所述表格数据配置组件中存储的单元格数据引入所述初始表格组件，生成目标表格组件；

在所述目标表资源元素包括所述表单元素的情况下，将所述表单数据配置组件中存储的表单数据和所述表单参数配置组件中存储的表单参数信息引入所述初始表单组件，生成目标表单组件；

在所述目标表资源元素包括所述按钮元素的情况下，将所述按钮数据配置组件中存储的按钮数据引入所述初始按钮组件，生成目标按钮组件；

在所述目标表资源元素包括所述分页元素的情况下，将所述分页数据配置组件中存储的分页数据引入所述初始分页组件，生成目标分页组件。

可选地，按照目标布局在初始网页上渲染所述目标表资源组件，得到所述目标表格网页包括：

将所述目标表格组件渲染到所述目标布局所指示的表格位置；

在所述目标表资源元素包括所述表单元素的情况下，将所述目标表单组件渲染到所述目标布局所指示的表单位置；

在所述目标表资源元素包括所述按钮元素的情况下，将所述目标按钮组件渲染到所述目标布局所指示的按钮位置；

在所述目标表资源元素包括所述分页元素的情况下，将所述目标分页组件渲染到所述目标布局所指示的分页位置。

可选地，在按照目标布局在所述初始网页上渲染所述目标表资源组件，得到所述目标表格网页之前，所述方法还包括：

接收配置的所述目标布局；或者，

从布局模板库中获取与所述表资源元素信息匹配的所述目标布局。

根据本申请实施例的另一方面，还提供了一种表格网页的生成装置，包括：

调用模块，用于调用与获取到的表资源元素信息匹配的初始表资源组件，其中，所述表资源元素信息用于指示目标表格网页上所包括的表资源元素；

建立模块，用于建立所述初始表资源组件与配置数据组件之间的关联关系，其中，所述配置数据组件用于为具有所述关联关系的表资源组件提供配置数据；

生成模块，用于按照所述关联关系从所述初始表资源组件对应的配置数据组件中向所述初始表资源组件中引入目标配置数据，生成目标表资源组件；

渲染模块，用于按照目标布局在初始网页上渲染所述目标表资源组件，得到所述目标表格网页。

可选地，所述调用模块包括：

确定单元，用于确定所述表资源元素信息所指示的目标表资源元素，其中，所述目标表资源元素包括表格元素以及以下至少之一：表单元素、按钮元素、分页元素；

获取单元，用于从表资源组件库中获取与所述表格元素匹配的初始表格组件，并从所述表资源组件库获取以下至少之一：与所述表单元素匹配的初始表单组件、与所述按钮元素匹配的初始按钮组件、与所述分页元素匹配的初始分页组件。

可选地，所述建立模块包括：

第一建立单元，用于建立所述初始表格组件与表格头部配置组件和表格数据配置组件之间的关联关系，其中，所述表格头部配置组件用于提供表格头部数据，所述表格数据配置组件用于提供表格的单元格数据；

第二建立单元，用于在所述目标表资源元素包括所述表单元素的情况下，建立所述初始表单组件与表单数据配置组件和表单参数配置组件之间的关联关系，其中，所述表单数据配置组件用于提供表单数据，所述表单参数配置用于提供表单参数信息；

第三建立单元，用于在所述目标表资源元素包括所述按钮元素的情况下，建立所述初始按钮组件与按钮数据配置组件之间的关联关系，其中，所述按钮数据配置组件用于提供按钮数据；

第四建立单元，用于在所述目标表资源元素包括所述分页元素的情况下，建立所述初始分页组件与分页数据配置组件之间的关联关系，其中，所述分页数据配置组件用于提供分页数据。

可选地，所述生成模块包括：

第一生成单元，用于将所述表格头部配置组件中存储的表格头部数据和所述表格数据配置组件中存储的单元格数据引入所述初始表格组件，生成目标表格组件；

第二生成单元，用于在所述目标表资源元素包括所述表单元素的情况下，将所述表单数据配置组件中存储的表单数据和所述表单参数配置组件中存储的表单参数信息引入所述初始表单组件，生成目标表单组件；

第三生成单元，用于在所述目标表资源元素包括所述按钮元素的情况下，将所述按钮数据配置组件中存储的按钮数据引入所述初始按钮组件，生成目标按钮组件；

第四生成单元，用于在所述目标表资源元素包括所述分页元素的情况下，将所述分页数据配置组件中存储的分页数据引入所述初始分页组件，生成目标分页组件。

可选地，所述渲染模块包括：

第一渲染单元，用于将所述目标表格组件渲染到所述目标布局所指示的表格位置；

第二渲染单元，用于在所述目标表资源元素包括所述表单元素的情况下，将所述目标表单组件渲染到所述目标布局所指示的表单位置；

第三渲染单元，用于在所述目标表资源元素包括所述按钮元素的情况下，将所述目标按钮组件渲染到所述目标布局所指示的按钮位置；

第四渲染单元，用于在所述目标表资源元素包括所述分页元素的情况下，将所述目标分页组件渲染到所述目标布局所指示的分页位置。

可选地，其特征在于，所述装置还包括：

接收模块，用于在按照目标布局在所述初始网页上渲染所述目标表资源组件，得到所述目标表格网页之前，接收配置的所述目标布局；或者，

获取模块，用于在按照目标布局在所述初始网页上渲染所述目标表资源组件，得到所述目标表格网页之前，从布局模板库中获取与所述表资源元素信息匹配的所述目标布局。

根据本申请实施例的另一方面，还提供了一种存储介质，该存储介质包括存储的程序，程序运行时执行上述的方法。

根据本申请实施例的另一方面，还提供了一种电子装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器通过计算机程序执行上述的方法。

在本申请实施例中，采用调用与获取到的表资源元素信息匹配的初始表资源组件，其中，表资源元素信息用于指示目标表格网页上所包括的表资源元素；建立初始表资源组件与配置数据组件之间的关联关系，其中，配置数据组件用于为具有关联关系的表资源组件提供配置数据；按照关联关系从初始表资源组件对应的配置数据组件中向初始表资源组件中引入目标配置数据，生成目标表资源组件；按照目标布局在初始网页上渲染目标表资源组件，得到目标表格网页的方式，通过组件形式存储表资源元素的代码或者实现等数据，调用与表资源元素信息匹配的表资源组件作为初始表资源组件并建立初始表资源组件与配置数据组件之间的关联关系，通过该关联关系将配置数据组件中的数据和参数等信息引入到初始表资源组件中生成目标表资源组件，按照目标布局将目标表资源组件渲染到网页上得到目标表格网页，达到了减少工作人员重复的代码编写任务的目的，从而实现了提高表格网页的生成效率的技术效果，进而解决了表格网页的生成效率较低的技术问题。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍。

图1是根据本申请实施例的表格网页的生成方法的硬件环境的示意图；

图2是根据本申请实施例的一种可选的表格网页的生成方法的流程图；

图3是根据本申请实施例的配置数据组件的示意图；

图4是根据本申请可选的实施方式的目标表格网页设计图的示意图一；

图5是根据本申请可选的实施方式的目标表格网页生成流程的示意图；

图6是根据本申请可选的实施方式的目标表格网页设计图的示意图二；

图7是本申请可选实施例的表格表单组件***模块的结构示意图；

图8是根据本申请实施例的一种可选的表格网页的生成装置的示意图；

以及

图9是根据本申请实施例的一种终端的结构框图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、***、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

根据本申请实施例的一方面，提供了一种表格网页的生成的方法实施例。

可选地，在本实施例中，上述表格网页的生成方法可以应用于如图1所示的由终端101和服务器103所构成的硬件环境中。如图1所示，服务器103通过网络与终端101进行连接，可用于为终端或终端上安装的客户端提供服务(如游戏服务、应用服务等)，可在服务器上或独立于服务器设置数据库，用于为服务器103提供数据存储服务，上述网络包括但不限于：广域网、城域网或局域网，终端101并不限定于PC、手机、平板电脑等。本申请实施例的表格网页的生成方法可以由服务器103来执行，也可以由终端101来执行，还可以是由服务器103和终端101共同执行。其中，终端101执行本申请实施例的表格网页的生成方法也可以是由安装在其上的客户端来执行。

图2是根据本申请实施例的一种可选的表格网页的生成方法的流程图，如图2所示，该方法可以包括以下步骤：

步骤S201，调用与获取到的表资源元素信息匹配的初始表资源组件，其中，所述表资源元素信息用于指示目标表格网页上所包括的表资源元素；

步骤S202，建立所述初始表资源组件与配置数据组件之间的关联关系，其中，所述配置数据组件用于为具有所述关联关系的表资源组件提供配置数据；

步骤S203，按照所述关联关系从所述初始表资源组件对应的配置数据组件中向所述初始表资源组件中引入目标配置数据，生成目标表资源组件；

步骤S204，按照目标布局在初始网页上渲染所述目标表资源组件，得到所述目标表格网页。

通过上述步骤S201至步骤S204，采用调用与获取到的表资源元素信息匹配的初始表资源组件，其中，表资源元素信息用于指示目标表格网页上所包括的表资源元素；建立初始表资源组件与配置数据组件之间的关联关系，其中，配置数据组件用于为具有关联关系的表资源组件提供配置数据；按照关联关系从初始表资源组件对应的配置数据组件中向初始表资源组件中引入目标配置数据，生成目标表资源组件；按照目标布局在初始网页上渲染目标表资源组件，得到目标表格网页的方式，通过组件形式存储表资源元素的代码或者实现等数据，调用与表资源元素信息匹配的表资源组件作为初始表资源组件并建立初始表资源组件与配置数据组件之间的关联关系，通过该关联关系将配置数据组件中的数据和参数等信息引入到初始表资源组件中生成目标表资源组件，按照目标布局将目标表资源组件渲染到网页上得到目标表格网页，达到了减少工作人员重复的代码编写任务的目的，从而实现了提高表格网页的生成效率的技术效果，进而解决了表格网页的生成效率较低的技术问题。

在步骤S201提供的技术方案中，表资源可以但不限于包括网页上的表格、表单、按钮、分页等资源，表资源元素可以但不限于包括：表格元素、表单元素、按钮元素、分页元素。比如：表格元素可以但不限于包括：表格头、表格内容、表格行操作项、表格日期单元格、表格超链接单元格等，表单元素可以但不限于包括：搜索框、选择框、时间筛选框等等，按钮元素可以但不限于包括：查询按钮、确定按钮、取消按钮等等，分页元素可以但不限于包括：总页数、页面按钮等等。

在步骤S202提供的技术方案中，配置数据组件用于接收用户对表格中数据的配置信息并为对应的表资源组件提供配置的数据信息。

在步骤S203提供的技术方案中，通过数据的引入，生成与配置数据匹配的目标表资源组件。

在步骤S204提供的技术方案中，将目标表资源组件按照一定的布局方式渲染到初始页面上，得到目标表格网页，从而完成表格网页的自动生成。

作为一种可选的实施例，调用与获取到的表资源元素信息匹配的初始表资源组件包括：

S11，确定所述表资源元素信息所指示的目标表资源元素，其中，所述目标表资源元素包括表格元素以及以下至少之一：表单元素、按钮元素、分页元素；

S12，从表资源组件库中获取与所述表格元素匹配的初始表格组件，并从所述表资源组件库获取以下至少之一：与所述表单元素匹配的初始表单组件、与所述按钮元素匹配的初始按钮组件、与所述分页元素匹配的初始分页组件。

可选地，在本实施例中，表格组件数据可根据不同的目标表格网页，调用或者获取不同的代码，生成表格组件不同的样式布局。

可选地，在本实施例中，表格组件数据可以配合分页组件进行动态联动，获取调用分页组件中的目标的分页数、当前页面，动态的获取服务器当前分页数下的当前页码下的全部数据，并进行表格的渲染，获取目标表格。

可选地，在本实施例中，表格组件数据可以通过数据配置模块，针对每一行的元素配置特定的功能，如：删除当前行、编辑当前行元素等，并且对当前表格元素进行操作后能够动态的进行表格数据的渲染出新的表格数据。

可选地，在本实施例中，表单元素、按钮元素和分页元素在表格网页中为可选项，即一个表格网页中可以包括表单元素、按钮元素和分页元素中的一种或者几种，在一个表格网页中也可以只有表格元素。

可选地，在本实施例中，表单元素对应的表单组件的配置过程中不限制表单的必然存在，支持包括一个或者多个表单元素的目标表格网页，也可支持没有任何表单元素的目标表格网页。

可选地，在本实施例中，表单元素对应的表单组件可以包括以下表单类型，如输入框类型、选择框类型、日期选择类型表单等，每种类型不限制同时存在的个数，同一个目标表格网页中可存在多个输入框类型的表单元素，亦可支持不存在任何输入框类型的表单元素。

可选地，在本实施例中，按钮元素对应的按钮组件所存在的个数没有限制，支持多个按钮元素同时存在，可根据目标表格网页，不同需求功能配置不同的按钮功能，如：查询按钮、下载按钮、新增按钮等。按钮功能灵活性配置，不限制其功能性，可支持任何目标表格网页不同按钮功能。

可选地，在本实施例中，分页组件可根据不同的目标表格网页，通过调用或者获取不同的分页组件代码，以及不同的样式布局，生成不同的分页组件。如：可根据配置数据组件动态配置当前分页组件展示的分页元素模块，总条数、每页的数量、上一页、下一页等。根据目标表格网页的需求，可以配置分页组件展示全部的功能，亦可只配置分页组件展示最基础的页码功能。

可选地，在本实施例中，分页组件与表格数据具有联动性，可以通过点击页码或其他分页功能动态的改变表格数据。

可选地，在本实施例中，分页组件具有非必须存在性，支持不展示分页功能的目标表格网页。

通过上述过程，从表资源组件库中获取与目标表资源元素对应的目标表资源组件，目标表资源元素包括表格，还可以至少包括表单、按钮、分页中的至少之一，使得生成的目标网页能够对表资源元素进行灵活地组合，也能够使得目标网页的样式更加丰富，从而提高了生成目标网页的灵活性和多样性。

作为一种可选的实施例，建立所述初始表资源组件与配置数据组件之间的关联关系包括：

S21，建立所述初始表格组件与表格头部配置组件和表格数据配置组件之间的关联关系，其中，所述表格头部配置组件用于提供表格头部数据，所述表格数据配置组件用于提供表格的单元格数据；

S22，在所述目标表资源元素包括所述表单元素的情况下，建立所述初始表单组件与表单数据配置组件和表单参数配置组件之间的关联关系，其中，所述表单数据配置组件用于提供表单数据，所述表单参数配置用于提供表单参数信息；

S23，在所述目标表资源元素包括所述按钮元素的情况下，建立所述初始按钮组件与按钮数据配置组件之间的关联关系，其中，所述按钮数据配置组件用于提供按钮数据；

S24，在所述目标表资源元素包括所述分页元素的情况下，建立所述初始分页组件与分页数据配置组件之间的关联关系，其中，所述分页数据配置组件用于提供分页数据。

可选地，在本实施例中，配置数据组件用于为具有所述关联关系的表资源组件提供配置数据。图3是根据本申请实施例的配置数据组件的示意图，如图3所示，配置数据组件可以但不限于为全局数据配置组件，其可以但不限于包括：表单数据配置组件用于配置表单数据信息，表单参数配置组件用于配置表单参数信息，按钮数据配置组件用于配置按钮数据信息，表格头部配置组件用于配置表格头部信息，获取表格数据事件组件用于通过异步function来返回listdata数组，分页数据配置组件用于配置分页数据信息。将上述配置数据组件与对应的表资源组件进行关联，从而将数据引入到表资源组件中。

通过上述过程，将不同类型的目标表资源组件关联到其对应的配置数据组件上，通过目标表资源组件所关联的配置数据组件为其提供对应的数据，能够使得目标表格网页上的数据得到更加规范化的配置，从而提高了数据配置过程的效率。

作为一种可选的实施例，按照所述关联关系从所述初始表资源组件对应的配置数据组件中向所述初始表资源组件中引入目标配置数据，生成目标表资源组件包括：

S31，将所述表格头部配置组件中存储的表格头部数据和所述表格数据配置组件中存储的单元格数据引入所述初始表格组件，生成目标表格组件；

S32，在所述目标表资源元素包括所述表单元素的情况下，将所述表单数据配置组件中存储的表单数据和所述表单参数配置组件中存储的表单参数信息引入所述初始表单组件，生成目标表单组件；

S33，在所述目标表资源元素包括所述按钮元素的情况下，将所述按钮数据配置组件中存储的按钮数据引入所述初始按钮组件，生成目标按钮组件；

S34，在所述目标表资源元素包括所述分页元素的情况下，将所述分页数据配置组件中存储的分页数据引入所述初始分页组件，生成目标分页组件。

可选地，在本实施例中，将配置数据组件各个部分获取到的数据引入到相应的表资源组件中生成各个部分的目标表资源组件。

通过上述过程，按照关联关系将配置数据组件中所配置的数据分别引入到与其相关联的表资源组件中，分别生成目标表格组件，还能够根据目标表格网页的需求生成目标表单组件、目标按钮组件、目标分页组件等等，使得表格表单等表元素中数据的配置过程更加地独立，互不干扰，流程清晰，提高了数据配置和引入的效率。

作为一种可选的实施例，按照目标布局在初始网页上渲染所述目标表资源组件，得到所述目标表格网页包括：

S41，将所述目标表格组件渲染到所述目标布局所指示的表格位置；

S42，在所述目标表资源元素包括所述表单元素的情况下，将所述目标表单组件渲染到所述目标布局所指示的表单位置；

S43，在所述目标表资源元素包括所述按钮元素的情况下，将所述目标按钮组件渲染到所述目标布局所指示的按钮位置；

S44，在所述目标表资源元素包括所述分页元素的情况下，将所述目标分页组件渲染到所述目标布局所指示的分页位置。

可选地，在本实施例中，按照目标布局所指示的布局位置将各个表资源元素渲染到目标表格网页的对应位置上。

在一个可选的实施方式中，图4是根据本申请可选的实施方式的目标表格网页设计图的示意图一，如图4所示，目标表格网页中包括表格元素，表单元素，按钮元素和分页元素。以该目标表格网页为例，以下介绍了该目标表格网页的生成过程。

在本可选的实施方式中，图5是根据本申请可选的实施方式的目标表格网页生成流程的示意图，如图5所示，该流程可以但不限于包括以下步骤：

步骤S501,创建一个新的目标表格表单页面，即为当前网页界面要展示的页面。其包含了该网页界面要展示的该表格表单要包含的元素属性及样式布局信息，开发人员可以基于该页面的设计图，来编写对应的程序代码，以生成该页面。在设计图中可以看出该网页展示的表单元素包括：feed id搜索框、操作人搜索框、视频分类选择框、推荐等级选择框、feed状态选择框、开始时间筛选组件等；该网页展示的按钮元素包括：查询按钮；该网页展示的表格元素包括：表格头、表格内容、表格行操作项、表格日期单元格、表格超链接单元格；该网页展示的分页元素包括：总页数、页面按钮。

步骤S502，引入表格表单组件，新的表格表单页面引入表格表单组件。

步骤S503，通过传入tableParams参数，包括表单配置参数数组、按钮配置参数数组，表格配置参数数组、分页配置参数数组等，关联组件数据。表格表单组件根据传入的配置参数动态渲染表格表单页面。

在上述步骤S503中，通过流程S504传入具体的参数，控制表单组件、按钮组件、表格组件、分页组件的展现形式，可以进行如下的参数配置：

流程S505:searchFormFields参数，包括所有表单组件的属性的数组元素，根据不同的属性渲染不同的表单元素，比如配置表单参数[{label:“feed id”,value:“feed_id”,type:“input”},{label:“feed状态”,value:“feed_status”,type:“select”,option:[{label:“正常”,value:“1”}]}….]。

流程S506:searchFormActions参数，包括所有的事件按钮的属性的数组元素，根据按钮的名称，按钮事件，渲染不同的按钮组件。比如配置表单参数[{label:“查询”,action:“searchAction”}]。

流程S507:columns参数，包括所有的表格的表头数据的数组，包括表头的名称，表头所对应的字段，表头的宽度；listdata参数，包含表格数据的数组，每一项包含数据字段，数据的值，数据的展示形式，可以根据此表头数据动态渲染表格。比如配置表格参数{columns:[{value:“feed_id”,label:“feedid”},{value:“circle”,label:“所属圈子”}…]，listdata:[{feed_id:1,circle:‘圈子1’}，{feed_id:2,circle:‘圈子2’}….]。

流程S508:pageOptions参数，包括分页组件所有包含的所有的属性，分页总数、每页数量、当前页数，可以根据此参数动态渲染分页组件,比如配置分页参数{pageTotal:329，pageCur:1,pageSize:10}。

在本可选的实施例中，对如何封装得到组件的方法不做限定，如上分析可以基于React或Vue实现，具体实现过程本可选的实施例不做详细的描述。

图6是根据本申请可选的实施方式的目标表格网页设计图的示意图二，如图6所示，目标表格网页中可以包括表格元素，表单元素和按钮元素，可以不包括分页元素。

通过上述过程，将目标表资源组件分别渲染到其各自对应的网页位置上，从而生成目标表格网页。提高了网页布局的灵活性，使得生成的目标表格网页的形式更加丰富。

作为一种可选的实施例，在按照目标布局在所述初始网页上渲染所述目标表资源组件，得到所述目标表格网页之前，所述方法还包括：

S51，接收配置的所述目标布局；或者，

S52，从布局模板库中获取与所述表资源元素信息匹配的所述目标布局。

可选地，在本实施例中，开发人员可以基于页面的设计图，来编写对应的程序代码，从而提供目标布局。或者也可以从预先存储的模板中选择适合的目标布局。

通过上述过程，目标布局可以是根据需求配置的，从而提高了目标表格网页的灵活性和多样性。目标布局也可以是从布局模板库中选取的，从而简化了对目标布局进行设计的过程，节省了表格网页设计的时间，提高了生成目标表格网页的效率。

本申请还提供了一种可选实施例，该可选实施例提供了一种服务于增删改查的表格表单网页生成装置，利用预先构建的表格表单组件，确定需求目标所涉及到的表单元素，表格展示数据，分页条数，直接调用与匹配表格表单的相关代码，即可生成针对不同需求场景的增删改查的目标表格网页，无需开发人员编写组件代码，关心html页面生成逻辑，提高了开发效率，解决相似功能的表格表单页面重复写入html模版代码的问题。

图7是本申请可选实施例的表格表单组件***模块的结构示意图，如图7所示，该***可以但不限于包括以下模块：

数据配置模块11，用于配制目标表格表单页面所需要的元素以及数据接口属性。

表格表单组件引入模块12，用于引入组件到当前的模块，并关联配置的数据，以渲染成不同的目标表格表单页面。

表格表单组件组合模块13，用于进行表单模块，按钮模块，表格模块，分页模块的组合，获取并调用从数据配置模块获取的数据配置，获取目标的表资源元素以及对应的代码。

表单生成模块14，包括但不限于输入框、选择框、日期选择组件、单选框、多选框等，用于基于数据配置的目标表单项，生成相应的目标表单。包括各种的表单元素，如input,select,日期选择器等。父组件传入searchFormFields参数，包括表单类型，表单值接收容器，以及其他表单配置项(如：宽度，是否不可编辑，选择菜单属性)。表单组件依据表单类型参数属性做判断展示对应的表单元素，最终返回对应的表单值予父级表单参数容器接收。

表格生成模块15，用于基于数据配置的目标表格数据，包括表格头部信息、表格内容区域，根据表格单元格组件模块获取所述的目标表格的展现数据，生成相应的目标表格。接收表格头部数据columns，表格数据listdata，返回表格组件。

表格单元格组件模块18，用于基于数据配置的目标表格内容区域数据，生成不同类型的表格单元格形式，包括但不限于图片展现单元格、链接跳转单元格、数据操作单元格、千分符形式单元格等，生成上述内容属性所对应的目标单元格形式以及相应的表格事件代码。由于每个表格元素的展现形式会有不同，比如图片，链接，数字，文字等不同形式，所以可以对元素内容进行再次封装。父组件传入具体的customRender数据，包括数据的值，展示的类型，该组件返回具体类型的表格数据。

按钮生成模块16，用于基于数据配置的目标按钮项，包括但不限于查询按钮、新建按钮、删除按钮等，用于生成相应的目标按钮以及获取相应的按钮事件代码。接收父组件每页数量pageSize，分页总数pageTotal，当前页数pageCur，返回分页组件，并且可以控制父组件表格数据的变化。

分页组件模块17，用于基于数据配置的分页数据，包括分页的总数、当前分页的条数、分页页码点击事件，生成目标所对应的分页样式布局以及相应的分页页码点击事件代码。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本申请各个实施例所述的方法。

根据本申请实施例的另一个方面，还提供了一种用于实施上述表格网页的生成方法的表格网页的生成装置。图8是根据本申请实施例的一种可选的表格网页的生成装置的示意图，如图8所示，该装置可以包括：

调用模块82，用于调用与获取到的表资源元素信息匹配的初始表资源组件，其中，所述表资源元素信息用于指示目标表格网页上所包括的表资源元素；

建立模块84，用于建立所述初始表资源组件与配置数据组件之间的关联关系，其中，所述配置数据组件用于为具有所述关联关系的表资源组件提供配置数据；

生成模块86，用于按照所述关联关系从所述初始表资源组件对应的配置数据组件中向所述初始表资源组件中引入目标配置数据，生成目标表资源组件；

渲染模块88，用于按照目标布局在初始网页上渲染所述目标表资源组件，得到所述目标表格网页。

需要说明的是，该实施例中的调用模块82可以用于执行本申请实施例中的步骤S201，该实施例中的建立模块84可以用于执行本申请实施例中的步骤S202，该实施例中的生成模块86可以用于执行本申请实施例中的步骤S203，该实施例中的渲染模块88可以用于执行本申请实施例中的步骤S204。

此处需要说明的是，上述模块与对应的步骤所实现的示例和应用场景相同，但不限于上述实施例所公开的内容。需要说明的是，上述模块作为装置的一部分可以运行在如图1所示的硬件环境中，可以通过软件实现，也可以通过硬件实现。

通过上述模块，通过组件形式存储表资源元素的代码或者实现等数据，调用与表资源元素信息匹配的表资源组件作为初始表资源组件并建立初始表资源组件与配置数据组件之间的关联关系，通过该关联关系将配置数据组件中的数据和参数等信息引入到初始表资源组件中生成目标表资源组件，按照目标布局将目标表资源组件渲染到网页上得到目标表格网页，达到了减少工作人员重复的代码编写任务的目的，从而实现了提高表格网页的生成效率的技术效果，进而解决了表格网页的生成效率较低的技术问题。

作为一种可选的实施例，所述调用模块包括：

确定单元，用于确定所述表资源元素信息所指示的目标表资源元素，其中，所述目标表资源元素包括表格元素以及以下至少之一：表单元素、按钮元素、分页元素；

获取单元，用于从表资源组件库中获取与所述表格元素匹配的初始表格组件，并从所述表资源组件库获取以下至少之一：与所述表单元素匹配的初始表单组件、与所述按钮元素匹配的初始按钮组件、与所述分页元素匹配的初始分页组件。

作为一种可选的实施例，所述建立模块包括：

第一建立单元，用于建立所述初始表格组件与表格头部配置组件和表格数据配置组件之间的关联关系，其中，所述表格头部配置组件用于提供表格头部数据，所述表格数据配置组件用于提供表格的单元格数据；

第二建立单元，用于在所述目标表资源元素包括所述表单元素的情况下，建立所述初始表单组件与表单数据配置组件和表单参数配置组件之间的关联关系，其中，所述表单数据配置组件用于提供表单数据，所述表单参数配置用于提供表单参数信息；

第三建立单元，用于在所述目标表资源元素包括所述按钮元素的情况下，建立所述初始按钮组件与按钮数据配置组件之间的关联关系，其中，所述按钮数据配置组件用于提供按钮数据；

第四建立单元，用于在所述目标表资源元素包括所述分页元素的情况下，建立所述初始分页组件与分页数据配置组件之间的关联关系，其中，所述分页数据配置组件用于提供分页数据。

作为一种可选的实施例，所述生成模块包括：

第一生成单元，用于将所述表格头部配置组件中存储的表格头部数据和所述表格数据配置组件中存储的单元格数据引入所述初始表格组件，生成目标表格组件；

第二生成单元，用于在所述目标表资源元素包括所述表单元素的情况下，将所述表单数据配置组件中存储的表单数据和所述表单参数配置组件中存储的表单参数信息引入所述初始表单组件，生成目标表单组件；

第三生成单元，用于在所述目标表资源元素包括所述按钮元素的情况下，将所述按钮数据配置组件中存储的按钮数据引入所述初始按钮组件，生成目标按钮组件；

第四生成单元，用于在所述目标表资源元素包括所述分页元素的情况下，将所述分页数据配置组件中存储的分页数据引入所述初始分页组件，生成目标分页组件。

作为一种可选的实施例，所述渲染模块包括：

第一渲染单元，用于将所述目标表格组件渲染到所述目标布局所指示的表格位置；

第二渲染单元，用于在所述目标表资源元素包括所述表单元素的情况下，将所述目标表单组件渲染到所述目标布局所指示的表单位置；

第三渲染单元，用于在所述目标表资源元素包括所述按钮元素的情况下，将所述目标按钮组件渲染到所述目标布局所指示的按钮位置；

第四渲染单元，用于在所述目标表资源元素包括所述分页元素的情况下，将所述目标分页组件渲染到所述目标布局所指示的分页位置。

作为一种可选的实施例，所述装置还包括：

接收模块，用于在按照目标布局在所述初始网页上渲染所述目标表资源组件，得到所述目标表格网页之前，接收配置的所述目标布局；或者，

获取模块，用于在按照目标布局在所述初始网页上渲染所述目标表资源组件，得到所述目标表格网页之前，从布局模板库中获取与所述表资源元素信息匹配的所述目标布局。

此处需要说明的是，上述模块与对应的步骤所实现的示例和应用场景相同，但不限于上述实施例所公开的内容。需要说明的是，上述模块作为装置的一部分可以运行在如图1所示的硬件环境中，可以通过软件实现，也可以通过硬件实现，其中，硬件环境包括网络环境。

根据本申请实施例的另一个方面，还提供了一种用于实施上述表格网页的生成方法的服务器或终端。

图9是根据本申请实施例的一种终端的结构框图，如图9所示，该终端可以包括：一个或多个(图中仅示出一个)处理器901、存储器903、以及传输装置905，如图9所示，该终端还可以包括输入输出设备907。

其中，存储器903可用于存储软件程序以及模块，如本申请实施例中的表格网页的生成方法和装置对应的程序指令/模块，处理器901通过运行存储在存储器903内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的表格网页的生成方法。存储器903可包括高速随机存储器，还可以包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器903可进一步包括相对于处理器901远程设置的存储器，这些远程存储器可以通过网络连接至终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

上述的传输装置905用于经由一个网络接收或者发送数据，还可以用于处理器与存储器之间的数据传输。上述的网络具体实例可包括有线网络及无线网络。在一个实例中，传输装置905包括一个网络适配器(Network Interface Controller，NIC)，其可通过网线与其他网络设备与路由器相连从而可与互联网或局域网进行通讯。在一个实例中，传输装置905为射频(Radio Frequency，RF)模块，其用于通过无线方式与互联网进行通讯。

其中，具体地，存储器903用于存储应用程序。

处理器901可以通过传输装置905调用存储器903存储的应用程序，以执行下述步骤：

S1，调用与获取到的表资源元素信息匹配的初始表资源组件，其中，所述表资源元素信息用于指示目标表格网页上所包括的表资源元素；

S2，建立所述初始表资源组件与配置数据组件之间的关联关系，其中，所述配置数据组件用于为具有所述关联关系的表资源组件提供配置数据；

S3，按照所述关联关系从所述初始表资源组件对应的配置数据组件中向所述初始表资源组件中引入目标配置数据，生成目标表资源组件；

S4，按照目标布局在初始网页上渲染所述目标表资源组件，得到所述目标表格网页。

采用本申请实施例，提供了一种表格网页的生成的方案。通过组件形式存储表资源元素的代码或者实现等数据，调用与表资源元素信息匹配的表资源组件作为初始表资源组件并建立初始表资源组件与配置数据组件之间的关联关系，通过该关联关系将配置数据组件中的数据和参数等信息引入到初始表资源组件中生成目标表资源组件，按照目标布局将目标表资源组件渲染到网页上得到目标表格网页，达到了减少工作人员重复的代码编写任务的目的，从而实现了提高表格网页的生成效率的技术效果，进而解决了表格网页的生成效率较低的技术问题。

可选地，本实施例中的具体示例可以参考上述实施例中所描述的示例，本实施例在此不再赘述。

本领域普通技术人员可以理解，图9所示的结构仅为示意，终端可以是智能手机(如Android手机、iOS手机等)、平板电脑、掌上电脑以及移动互联网设备(Mobile InternetDevices，MID)、PAD等终端设备。图9其并不对上述电子装置的结构造成限定。例如，终端还可包括比图9中所示更多或者更少的组件(如网络接口、显示装置等)，或者具有与图9所示不同的配置。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令终端设备相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：闪存盘、只读存储器(Read-Only Memory，ROM)、随机存取器(RandomAccess Memory，RAM)、磁盘或光盘等。

本申请的实施例还提供了一种存储介质。可选地，在本实施例中，上述存储介质可以用于执行表格网页的生成方法的程序代码。

可选地，在本实施例中，上述存储介质可以位于上述实施例所示的网络中的多个网络设备中的至少一个网络设备上。

可选地，在本实施例中，存储介质被设置为存储用于执行以下步骤的程序代码：

S1，调用与获取到的表资源元素信息匹配的初始表资源组件，其中，所述表资源元素信息用于指示目标表格网页上所包括的表资源元素；

S2，建立所述初始表资源组件与配置数据组件之间的关联关系，其中，所述配置数据组件用于为具有所述关联关系的表资源组件提供配置数据；

S3，按照所述关联关系从所述初始表资源组件对应的配置数据组件中向所述初始表资源组件中引入目标配置数据，生成目标表资源组件；

S4，按照目标布局在初始网页上渲染所述目标表资源组件，得到所述目标表格网页。

可选地，本实施例中的具体示例可以参考上述实施例中所描述的示例，本实施例在此不再赘述。

可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

上述实施例中的集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在上述计算机可读取的存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在存储介质中，包括若干指令用以使得一台或多台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。

在本申请的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的客户端，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种表格网页的生成方法，其特征在于，包括：

调用与获取到的表资源元素信息匹配的初始表资源组件，其中，所述表资源元素信息用于指示目标表格网页上所包括的表资源元素；

建立所述初始表资源组件与配置数据组件之间的关联关系，其中，所述配置数据组件用于为具有所述关联关系的表资源组件提供配置数据；

按照所述关联关系从所述初始表资源组件对应的配置数据组件中向所述初始表资源组件中引入目标配置数据，生成目标表资源组件；

按照目标布局在初始网页上渲染所述目标表资源组件，得到所述目标表格网页。

2.根据权利要求1所述的方法，其特征在于，调用与获取到的表资源元素信息匹配的初始表资源组件包括：

确定所述表资源元素信息所指示的目标表资源元素，其中，所述目标表资源元素包括表格元素以及以下至少之一：表单元素、按钮元素、分页元素；

从表资源组件库中获取与所述表格元素匹配的初始表格组件，并从所述表资源组件库获取以下至少之一：与所述表单元素匹配的初始表单组件、与所述按钮元素匹配的初始按钮组件、与所述分页元素匹配的初始分页组件。

3.根据权利要求2所述的方法，其特征在于，建立所述初始表资源组件与配置数据组件之间的关联关系包括：

建立所述初始表格组件与表格头部配置组件和表格数据配置组件之间的关联关系，其中，所述表格头部配置组件用于提供表格头部数据，所述表格数据配置组件用于提供表格的单元格数据；

在所述目标表资源元素包括所述表单元素的情况下，建立所述初始表单组件与表单数据配置组件和表单参数配置组件之间的关联关系，其中，所述表单数据配置组件用于提供表单数据，所述表单参数配置用于提供表单参数信息；

在所述目标表资源元素包括所述按钮元素的情况下，建立所述初始按钮组件与按钮数据配置组件之间的关联关系，其中，所述按钮数据配置组件用于提供按钮数据；

在所述目标表资源元素包括所述分页元素的情况下，建立所述初始分页组件与分页数据配置组件之间的关联关系，其中，所述分页数据配置组件用于提供分页数据。

4.根据权利要求3所述的方法，其特征在于，按照所述关联关系从所述初始表资源组件对应的配置数据组件中向所述初始表资源组件中引入目标配置数据，生成目标表资源组件包括：

将所述表格头部配置组件中存储的表格头部数据和所述表格数据配置组件中存储的单元格数据引入所述初始表格组件，生成目标表格组件；

在所述目标表资源元素包括所述表单元素的情况下，将所述表单数据配置组件中存储的表单数据和所述表单参数配置组件中存储的表单参数信息引入所述初始表单组件，生成目标表单组件；

在所述目标表资源元素包括所述按钮元素的情况下，将所述按钮数据配置组件中存储的按钮数据引入所述初始按钮组件，生成目标按钮组件；

在所述目标表资源元素包括所述分页元素的情况下，将所述分页数据配置组件中存储的分页数据引入所述初始分页组件，生成目标分页组件。

5.根据权利要求4所述的方法，其特征在于，按照目标布局在初始网页上渲染所述目标表资源组件，得到所述目标表格网页包括：

将所述目标表格组件渲染到所述目标布局所指示的表格位置；

在所述目标表资源元素包括所述表单元素的情况下，将所述目标表单组件渲染到所述目标布局所指示的表单位置；

在所述目标表资源元素包括所述按钮元素的情况下，将所述目标按钮组件渲染到所述目标布局所指示的按钮位置；

在所述目标表资源元素包括所述分页元素的情况下，将所述目标分页组件渲染到所述目标布局所指示的分页位置。

6.根据权利要求1至5中任一项所述的方法，其特征在于，在按照目标布局在所述初始网页上渲染所述目标表资源组件，得到所述目标表格网页之前，所述方法还包括：

接收配置的所述目标布局；或者，

从布局模板库中获取与所述表资源元素信息匹配的所述目标布局。

7.一种表格网页的生成装置，其特征在于，包括：

调用模块，用于调用与获取到的表资源元素信息匹配的初始表资源组件，其中，所述表资源元素信息用于指示目标表格网页上所包括的表资源元素；

建立模块，用于建立所述初始表资源组件与配置数据组件之间的关联关系，其中，所述配置数据组件用于为具有所述关联关系的表资源组件提供配置数据；

生成模块，用于按照所述关联关系从所述初始表资源组件对应的配置数据组件中向所述初始表资源组件中引入目标配置数据，生成目标表资源组件；

渲染模块，用于按照目标布局在初始网页上渲染所述目标表资源组件，得到所述目标表格网页。

8.根据权利要求7所述的装置，其特征在于，所述调用模块包括：

确定单元，用于确定所述表资源元素信息所指示的目标表资源元素，其中，所述目标表资源元素包括表格元素以及以下至少之一：表单元素、按钮元素、分页元素；

获取单元，用于从表资源组件库中获取与所述表格元素匹配的初始表格组件，并从所述表资源组件库获取以下至少之一：与所述表单元素匹配的初始表单组件、与所述按钮元素匹配的初始按钮组件、与所述分页元素匹配的初始分页组件。

9.一种存储介质，其特征在于，所述存储介质包括存储的程序，其中，所述程序运行时执行上述权利要求1至6任一项中所述的方法。

10.一种电子装置，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器通过所述计算机程序执行上述权利要求1至6任一项中所述的方法。

Images