一种基于Angular框架封装表格控件的方法、装置、设备和介质

技术领域

本发明涉及Angular框架技术领域，特别涉及一种基于Angular框架封装表格控件的方法、装置、设备和介质。

背景技术

由于计算机技术的不断进步，客户的需求不断增加，现今软件功能越来越多，对表格控件的使用需求也越来越大。一般通过编写通用控件来节约开发时间与人力成本，同时使代码更具可复用性与可扩展性。

现有技术多为直接使用框架封装的表格控件，这样的表格控件在每个页面中都需要引用，若后续开发维护时对表单的功能进行修改或开发新功能，则需要在所有使用表格控件的页面上更改，此方法耗时耗力，严重降低升级维护效率，不利于产品的二次开发或维护。

发明内容

本发明要解决的技术问题，在于提供一种基于Angular框架封装表格控件的方法、装置、设备和介质，利用通用控件对表格控件进行封装，并进行数据导入及操作导出，调用通用控件代码即可替代原有表格控件的代码来实现表格，使用简单，修改方便，提高开发维护效率。

第一方面，本发明提供了一种基于Angular框架封装表格控件的方法，包括：

获取需要封装的表格控件，然后新建一个基于Angular框架的通用控件，将所述表格控件添加至所述通用控件；

获取所述表格控件的固定参数，然后写入所述通用控件中；

获取所述表格控件的可变参数，然后通过@Input装饰器导入所述通用控件中；

获取所述表格控件的一般操作，然后通过可观察对象向父组件弹射；

获取所述父组件的一般数据，然后在所述通用控件中直接展示；获取所述父组件的特殊数据，按指定方式处理后在所述通用控件中展示；

调用所述通用控件替代所述需要封装的表格控件。

优选的，在将所述表格控件的一般数据直接展示，将所述表格控件的特殊数据进行处理后展示步骤前，还包括：

获取所述表格控件的特殊操作，然后转化为通用表单操作事件，供父组件解析调用，所述特殊操作包括：配置图标操作、预览操作、查看成员操作以及位置调动操作。

优选的，所述通用表单操作事件以字符串形式向父组件弹出。

进一步地，所述固定参数包括：是否前端分页、表格大小以及页数选择器可选值。

进一步地，所述可变参数包括：表头数据、表身数据、行操作数据、分页参数、排序参数以及选中参数。

进一步地，所述一般操作包括：分页查询操作、选中行操作、编辑操作以及删除操作。

第二方面，本发明提供了一种基于Angular框架封装表格控件的装置，包括：通用控件创建模块、固定参数导入模块、可变参数导入模块、一般操作导出模块、数据展示模块以及调用模块；

所述通用控件创建模块，用于获取需要封装的表格控件，然后新建一个基于Angular框架的通用控件，将所述表格控件添加至所述通用控件；

所述固定参数导入模块，用于获取所述表格控件的固定参数，然后写入所述通用控件中；

所述可变参数导入模块，用于获取所述表格控件的可变参数，然后通过@Input装饰器导入所述通用控件中；

所述一般操作导出模块，用于获取所述表格控件的一般操作，然后通过可观察对象向父组件弹射；

所述数据展示模块，用于获取所述父组件的一般数据，然后在所述通用控件中直接展示；获取所述父组件的特殊数据，按指定方式处理后在所述通用控件中展示；

所述调用模块，用于调用所述通用控件替代所述需要封装的表格控件。

优选的，还包括：特殊操作导出模块；

所述特殊操作导出模块，用于获取所述表格控件的特殊操作，然后转化为通用表单操作事件，供父组件解析调用。

第三方面，本发明提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现第一方面所述的方法。

第四方面，本发明提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现第一方面所述的方法。

本发明实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：

1、利用通用控件封装表格控件，并且将表格控件参数导入及操作导出，然后对通用控件进行调用替代原有表格控件的代码，提高开发速度，有助于节约开发与维护成本；

2、克服了现有技术中修改表格控件时需要在所有使用到此表格控件的代码中进行修改的问题，通过封装通用控件并对参数操作进行导出，仅需对通用控件进行修改，所有调用通用控件实现表格控件的页面上都会同步更改，可以大幅度节约开发时间；

3、将原本大量使用的表格控件进行封装，可以减少代码行数，降低代码冗余度，提升控件的复用性与扩展性，方便理解与后续开发。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

下面参照附图结合实施例对本发明作进一步的说明。

图1为本发明实施例一中方法的流程图；

图2为本发明实施例一中另一方法的流程图；

图3为本发明实施例二中装置的结构示意图；

图4为本发明实施例三中电子设备的结构示意图；

图5为本发明实施例四中介质的结构示意图。

具体实施方式

本申请实施例中的技术方案，总体思路如下：

先建一个通用控件将原表格控件封装进去，其次进行相关数据导入与操作导出，实现封装后表格的功能，然后再把一些需要以特殊格式展示的数据进行导入与处理，最后形成通用控件，开发人员调用此通用控件即实现调用了表格控件。

实施例一

本实施例提供一种基于Angular框架封装表格控件的方法，如图1所示，可以包括如下步骤；

步骤10、获取需要封装的表格控件，然后新建一个基于Angular框架的通用控件，将所述表格控件添加至所述通用控件；

比如，需要封装的表格控件为ng-zorro的表格控件，则在新建的通用控件中添加表格控件，也可以根据需要选取其他表格控件进行封装。

步骤20、将表格控件参数导入及操作导出，包括以下几种处理：

1)获取所述表格控件的固定参数，然后写入所述通用控件中；

将固定不变的参数写入表格控件中，包括但不限于是否前端分页、表格大小以及页数选择器可选值；

2)获取所述表格控件的可变参数，然后通过@Input装饰器导入所述通用控件中；

将会随着表格的不同而改变的可变参数使用@Input装饰器传入通用控件，所述可变参数包括表头数据、表身数据、行操作相关数据、分页参数、排序参数以及选中参数等；

3)获取所述表格控件的一般操作，然后通过可观察对象向父组件弹射；

将对表单控件的一般操作通过可观察对象向上弹射，使父组件可以绑定以执行相对应的操作方法，所述一般操作包括分页查询操作、选中行操作、编辑操作以及删除操作等；

4)在另一种可能的实现方式中，如图2所示，还可以进一步获取所述表格控件的特殊操作，然后转化为通用表单操作事件，，供父组件解析调用；所述通用表单操作事件以字符串形式向父组件弹出，再在各个父组件中解析并实现；所述特殊操作包括：配置操作(比如配置图标)、预览操作、查看成员操作以及位置调动操作等。

由于不同的表单有不同的操作，不同的操作都转化为单独事件会使通用表单控件的参数过多，通过编写通用表单操作事件，然后将事件以字符串形式放出，再在各个父组件中解析并实现，可以降低代码冗余度，提升控件的复用性与扩展性。

通过以上将表格控件参数导入及操作导出的处理，仅需对通用控件进行修改，所有调用通用控件实现表格控件的页面上都会同步更改，可以大幅度节约开发时间。

步骤30、获取所述父组件的一般数据，然后在所述通用控件中直接展示；获取所述父组件的特殊数据，按指定方式处理后在所述通用控件中展示；

通用控件可以用于多个父组件，当具体应用于某一父组件时，需要获取所述的父组件的数据进行展示。在父组件中对不能直接展示的特殊数据绑定相应的参数，获取到所述父组件的特殊数据的相应的参数后，按参数对应的显示方式对特殊数据进行显示。

一般数据，比如表头配置，可以直接通过父组件传入的表头配置数据来显示表格所要展示的数据；

特殊数据，比如日期展示，大部分日期数据为Date()格式，无法直接展示，通过formatDate(new Date(),rule,'zh-Hans')将日期转换成rule定义格式，rule可从父组件中定义并导入；

布尔型数据展示，这类原始数据多为true或false，在表单中应转化为‘是’、‘否’标签进行展示，在父组件中转化为‘是’、‘否’，并在通用控件中编写标签来展示数据；

图标展示，此类数据为图标参数，传入通用组件中，在组件中转换成图标显示；

其它特殊数据：将特殊数据及参数从父组件中传进通用控件中，使用filter()将特殊数据转换至特定的显示方式。

步骤40、调用所述通用控件替代所述需要封装的表格控件。

调用所述通用控件替代所述需要封装的表格控件，可以提高开发速度，有助于节约开发与维护成本；修改或更新通用控件时，所有调用通用控件实现表格控件的页面上都会同步更改，从而大幅度节约开发时间。

基于同一发明构思，本申请还提供了与实施例一中的方法对应的装置，详见实施例二。

实施例二

在本实施例中提供了一种基于Angular框架封装表格控件的装置，如图3所示，包括：通用控件创建模块、固定参数导入模块、可变参数导入模块、一般操作导出模块、数据展示模块以及调用模块；

所述通用控件创建模块，用于获取需要封装的表格控件，然后新建一个基于Angular框架的通用控件，将所述表格控件添加至所述通用控件；

所述固定参数导入模块，用于获取所述表格控件的固定参数，然后写入所述通用控件中；

所述可变参数导入模块，用于获取所述表格控件的可变参数，然后通过@Input装饰器导入所述通用控件中；

所述一般操作导出模块，用于获取所述表格控件的一般操作，然后通过可观察对象向父组件弹射；

所述数据展示模块，用于将所述表格控件的一般数据直接展示，将所述表格控件的特殊数据进行处理后展示；

所述调用模块，用于调用所述通用控件替代所述需要封装的表格控件。

在一种可能的实现方式中，还包括：特殊操作导出模块；

所述特殊操作导出模块，用于获取所述表格控件的特殊操作，然后转化为通用表单操作事件，供父组件解析调用。

由于本发明实施例二所介绍的装置，为实施本发明实施例一的方法所采用的装置，故而基于本发明实施例一所介绍的方法，本领域所属人员能够了解该装置的具体结构及变形，故而在此不再赘述。凡是本发明实施例一的方法所采用的装置都属于本发明所欲保护的范围。

基于同一发明构思，本申请提供了实施例一对应的电子设备实施例，详见实施例三。

实施例三

本实施例提供了一种电子设备，如图4所示，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时，可以实现实施例一中任一实施方式。

由于本实施例所介绍的电子设备为实施本申请实施例一中方法所采用的设备，故而基于本申请实施例一中所介绍的方法，本领域所属技术人员能够了解本实施例的电子设备的具体实施方式以及其各种变化形式，所以在此对于该电子设备如何实现本申请实施例中的方法不再详细介绍。只要本领域所属技术人员实施本申请实施例中的方法所采用的设备，都属于本申请所欲保护的范围。

基于同一发明构思，本申请提供了实施例一对应的存储介质，详见实施例四。

实施例四

本实施例提供一种计算机可读存储介质，如图5所示，其上存储有计算机程序，该计算机程序被处理器执行时，可以实现实施例一中任一实施方式。

本申请实施例中提供的技术方案，至少具有如下技术效果或优点：本申请实施例提供的方法、装置、设备及介质，利用通用控件封装表格控件，并且将表格控件参数导入及操作导出，然后对通用控件进行调用替代原有表格控件的代码，提高开发速度，有助于节约开发与维护成本；克服了现有技术中修改表格控件时需要在所有使用到此表格控件的代码中进行修改的问题，通过封装通用控件并对参数操作进行导出，仅需修改一处，所有使用表格控件的页面上都会同步更改，可以大幅度节约开发时间；将原本大量使用的表格控件进行封装，可以减少代码行数，降低代码冗余度，提升控件的复用性与扩展性，方便理解与后续开发。

本领域内的技术人员应明白，本发明的实施例可提供为方法、设备、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。