CN114757159A - 一种多功能数据表格组件的封装开发方法及系统 - Google Patents

Abstract

本发明涉及Web前端开发技术领域，公开了一种多功能数据表格组件的封装开发方法，包括以下步骤：S1，构建表格组件基础信息：根据外部的表头名称及其对应的数据字段名传入表格组件，生成表格组件基础信息；S2，加载数据：将外部数据加载到表格数据栏，将表头信息展示到表格头部。本发明解决了现有技术存在的存在大量重复或类似的开发工作、维护工作繁琐、工作效率低下等问题。

Description

一种多功能数据表格组件的封装开发方法及系统

技术领域

本发明涉及Web前端开发技术领域，具体是一种多功能数据表格组件的封装开发方法及系统。

背景技术

随着云计算技术的发展，各行各业上云成了时代的趋势，B/S架构的Web应用越来越广泛，系统功能也随之越来越复杂和强大，随着编码工作量的增大，Web程序前后端分离开发成为必由之路。在Web前端开发工作中，为减少大量代码的重复使用并提供方便且强大的功能，多样的框架和组件库在开发过程中便得到工程师的使用，但是多数组件都只针对单一模块和功能进行开发。以后台管理系统中最常使用的数据表格为例，除了基础的table表格数据展示，还包含刷新、增删改、翻页、条件查询、导出、单选多选等等功能。因此，不同的功能页面存在大量重复或类似的开发工作，另一方面，若有新的功能增加或旧功能缺陷修复，也会产生繁琐的维护工作，导致工作效率低下。

发明内容

为克服现有技术的不足，本发明提供了一种多功能数据表格组件的封装开发方法及系统，解决现有技术存在的存在大量重复或类似的开发工作、维护工作繁琐、工作效率低下等问题。

本发明解决上述问题所采用的技术方案是：

一种多功能数据表格组件的封装开发方法，包括以下步骤：

S1，构建表格组件基础信息：根据外部的表头名称及其对应的数据字段名传入表格组件，生成表格组件基础信息；

S2，加载数据：将外部数据加载到表格数据栏，将表头信息展示到表格头部。

作为一种优选的技术方案，步骤S1中，将表头名称及其对应的数据字段名通过模板插槽或标签属性参数形式传入表格组件。

作为一种优选的技术方案，步骤S2中，将接口请求API以标签属性参数形式传入表格组件，并构建数据加载函数,当运行数据加载函数时向服务端发送网络请求，将从API获取到的数据映射到表格内。

作为一种优选的技术方案，还包括以下步骤：

S3，选取数据：根据标签属性参数值决定在表格首列生成Radio或CheckBox选择框，同时在表格组件内开辟缓存区，当点击选择框时，将表格的行数据存入缓存区。

作为一种优选的技术方案，还包括以下步骤：

S4，刷新数据及翻页：在表格组件顶部设置刷新按钮，将数据加载函数绑定到刷新按钮的点击事件；和/或；在表格组件底部设置翻页组件，将数据加载函数绑定到翻页组件的change事件。

作为一种优选的技术方案，还包括以下步骤：

S5，筛查数据：将条件查询表单传入表格组件，在表格组件内置查询函数和重置函数，运行查询函数时将条件查询表单的参数传入数据加载函数，运行重置函数时将条件查询表单内容清空。

作为一种优选的技术方案，还包括以下步骤：

S6，导出数据：通过标签属性将API地址和文件名传入至表格组件内，在表格组件内置文件流数据请求函数，当运行文件流数据请求函数时，将从API获取到的数据流转换为本地下载链接，最后下载到本地客户端。

一种多功能数据表格组件的封装开发系统，基于所述的一种多功能数据表格组件的封装开发方法，包括相互电相连的以下模块：

表格组件基础信息构建模块：用以，根据外部的表头名称及其对应的数据字段名传入表格组件，生成表格组件基础信息；

数据加载模块：用以，将外部数据加载到表格数据栏，将表头信息展示到表格头部。

作为一种优选的技术方案，还包括与电相连的数据选取模块，数据选取模块用以：根据标签属性传入的参数决定在表格首列生成Radio或CheckBox选择框，同时在表格组件内开辟缓存区，当点击选择框时，将对应的行数据存入缓存区。

作为一种优选的技术方案，还包括：

数据刷新翻页模块：用以，在表格组件顶部设置刷新按钮，将数据加载函数绑定到刷新按钮的点击事件；和/或；在表格组件底部设置翻页组件，将数据加载函数绑定到翻页组件的change事件；

数据筛查模块：用以，在表格组件内置查询函数和重置函数，运行查询函数时将条件查询表单的参数传入数据加载函数，运行重置函数时将条件查询表单内容清空；

数据导出模块：通过标签属性将API地址和文件名传入至表格组件内，在表格组件内置文件流数据请求函数，当运行文件流数据请求函数时，将从API获取到的数据流转换为本地下载链接，最后下载到本地客户端；

数据刷新翻页模块、数据筛查模块、数据导出模块分别与数据加载模块电相连。

本发明相比于现有技术，具有以下有益效果：

本发明使前端表格开发工作得到有效简化，通过传递动态参数代替重复的函数或方法编写、变量声明和赋值、表格结构布局等工作，尤其适合包含大量表格数据的后台管理系统，本发明能极大提高代码的复用率，降低前期开发和后期维护的工作量，使前端开发工作更灵活高效。

附图说明

图1为本发明所述的一种多功能数据表格组件的封装开发方法的步骤示意图；

图2为本发明所述的一种多功能数据表格组件的封装开发系统的结构示意图。

具体实施方式

下面结合实施例及附图，对本发明作进一步的详细说明，但本发明的实施方式不限于此。

实施例1

如图1、图2所示，一种多功能数据表格组件的封装开发方法，包括以下步骤：

S1，构建表格组件基础信息：根据外部的表头名称及其对应的数据字段名传入表格组件，生成表格组件基础信息；

S2，加载数据：将外部数据加载到表格数据栏，将表头信息展示到表格头部。

通过以上技术方案构建表格组件基础信息及加载数据，使前端表格开发工作得到有效简化，提高代码的复用率，降低前期开发和后期维护的工作量，使前端开发工作更灵活高效。

作为一种优选的技术方案，步骤S1中，将表头名称及其对应的数据字段名通过模板插槽或标签属性参数形式传入表格组件。

通过模板插槽传入的好处是使程序数据与渲染逻辑分离，代码更直观形象；标签属性参数形式传入的好处是兼容JSX方式。

作为一种优选的技术方案，步骤S2中，将接口请求API以标签属性参数形式传入表格组件，并构建数据加载函数,当运行数据加载函数时向服务端发送网络请求，将从API获取到的数据映射到表格内。

以这种方式加载数据更简易，省去了外部重复编写数据加载函数的繁琐。

作为一种优选的技术方案，还包括以下步骤：

S3，选取数据：根据标签属性参数值决定在表格首列生成Radio或CheckBox选择框，同时在表格组件内开辟缓存区，当点击选择框时，将表格的行数据存入缓存区。

这便捷地实现了选取数据的功能。

作为一种优选的技术方案，还包括以下步骤：

S4，刷新数据及翻页：在表格组件顶部设置刷新按钮，将数据加载函数绑定到刷新按钮的点击事件；和/或；在表格组件底部设置翻页组件，将数据加载函数绑定到翻页组件的change事件。

这便捷地实现了刷新数据及翻页的功能。

作为一种优选的技术方案，还包括以下步骤：

S5，筛查数据：将条件查询表单传入表格组件，在表格组件内置查询函数和重置函数，运行查询函数时将条件查询表单的参数传入数据加载函数，运行重置函数时将条件查询表单内容清空。

这便捷地实现了筛查数据的功能。

作为一种优选的技术方案，还包括以下步骤：

S6，导出数据：通过标签属性将API地址和文件名传入至表格组件内，在表格组件内置文件流数据请求函数，当运行文件流数据请求函数时，将从API获取到的数据流转换为本地下载链接，最后下载到本地客户端。

这便捷地实现了导出数据的功能。

值得说明的是，本发明中步骤S1～S6，并不限于从S1至S6的依次顺序；其中，S3～S6可以为在步骤S2后的并列步骤，也可另外组成先后顺序。

一种多功能数据表格组件的封装开发系统，基于所述的一种多功能数据表格组件的封装开发方法，包括相互电相连的以下模块：

表格组件基础信息构建模块：用以，根据外部的表头名称及其对应的数据字段名传入表格组件，生成表格组件基础信息；

数据加载模块：用以，将外部数据加载到表格数据栏，将表头信息展示到表格头部。

通过以上技术方案构建表格组件基础信息及加载数据，使前端表格开发工作得到有效简化，提高代码的复用率，降低前期开发和后期维护的工作量，使前端开发工作更灵活高效。

作为一种优选的技术方案，还包括与电相连的数据选取模块，数据选取模块用以：根据标签属性传入的参数决定在表格首列生成Radio或CheckBox选择框，同时在表格组件内开辟缓存区，当点击选择框时，将对应的行数据存入缓存区。

这便捷地实现了选取数据的功能。

作为一种优选的技术方案，还包括：

数据刷新翻页模块：用以，在表格组件顶部设置刷新按钮，将数据加载函数绑定到刷新按钮的点击事件；和/或；在表格组件底部设置翻页组件，将数据加载函数绑定到翻页组件的change事件；

数据筛查模块：用以，在表格组件内置查询函数和重置函数，运行查询函数时将条件查询表单的参数传入数据加载函数，运行重置函数时将条件查询表单内容清空；

数据导出模块：通过标签属性将API地址和文件名传入至表格组件内，在表格组件内置文件流数据请求函数，当运行文件流数据请求函数时，将从API获取到的数据流转换为本地下载链接，最后下载到本地客户端；

数据刷新翻页模块、数据筛查模块、数据导出模块分别与数据加载模块电相连。

优选的，还包括功能权限控制模块，用以决定是否启用相应的功能模块(数据刷新翻页模块、数据筛查模块、数据导出模块)和按钮。

这便捷地实现了刷新数据及翻页、筛查数据、导出数据的功能。

实施例2

如图1、图2所示，作为实施例1的进一步优化，本实施例包含了实施例1的全部技术特征，除此之外，本实施例还包括以下技术特征：

针对现有状况中的问题，本发明提供一种功能丰富、使用方便快捷的表格组件封装方法及组件，能有效提高前端工程师的开发和维护效率。

采用以下步骤如下：

第一步，构建表格组件的基础信息，将表头名称和对应的数据字段通过模板插槽传入表格组件，为了兼容JSX方式，也可通过标签属性将JS对象传入表格组件(JS对象包含表头名称和对应的数据字段，以及其他属性如表格的列宽度、元素对齐方式、字体颜色和大小、数据解析函数等)。

第二步，加载数据，普通的做法是在外部通过Ajax或Axios请求后台接口获取到数据后再应用到表格。本发明使用更简易的方式，即将接口请求API以标签属性参数形式传入表格组件，并构建数据加载函数,当运行该函数时向服务端发送网络请求，将从API获取到的数据映射到表格内，省去外部重复编写数据加载函数。如遇特殊情况内置的函数无法正确处理数据，则可通过外部传入函数来提取并处理接口返回的数据。

优选的，还具备以下功能：

数据的刷新和翻页：将刷新功能按钮内置到表格组件顶部，同时绑定click或touch事件(即点击事件)调用数据加载方法(即将数据加载函数绑定到该按钮的click或touch事件)。另外将翻页组件固定到表格组件底部，并内置默认的单页数据条数，该条数可通过外部标签属性传入参数来灵活配置。将翻页组件的change事件绑定到第二步的数据加载函数即可实现数据翻页操作，同时，在第二步数据提取操作中将后台数据总量total传递给翻页组件对应的total参数，即可实现完整的翻页组件功能。

数据的选取：本发明为表格组件具有行数据单选或多选功能，通过标签属性传入的参数来识别应该提供单选还是多选功能。根据参数值决定在表格首列生成Radio或CheckBox选择框，同时在组件内开辟缓存区，当点击选择框时，将对应的行数据存入缓存区，当反选时则将对应的行数据从缓存中删除。每次有选择操作时，通过内部事件向外抛出缓存区数据，外部组件可通过监听事件来即时获取选择的表格数据。

数据导出：通过标签属性将API地址和文件名传入至表格组件内，在表格组件内置文件流数据请求函数，当点击导出按钮时运行文件流数据请求函数，将获取到的数据流转换为本地下载链接，并优选进一步地将传入的文件名和导出操作的时间日期进行拼接以作为最终文件名，如此以来文件名更清晰且避免重名，最后将文件下载到本地客户端。

数据筛查：由于每个功能页面展示的数据字段不尽相同，遂通过插槽将条件查询表单传入表格组件，组件内置查询和重置方法，点击查询按钮时运行查询函数将条件查询表单的参数传入数据加载函数，实现数据筛查功能；点击重置按钮时运行重置函数将条件查询表单内容清空，即可清除查询条件以恢复原数据，也方便重新填写查询条件来做数据筛查。

功能权限控制：本发明的表格组件包含数据刷新、翻页、筛查、导出等多项功能模块和按钮，作为公用组件，内部不能事先决定某个模块是否启用，因此组件通过检测外部传入的权限参数来决定是否启用相应的功能模块和按钮。此功能可配合本组件所在的软件系统实现用户权限管理功能。

上述技术方案可使前端表格开发工作得到有效简化，通过传递动态参数代替重复的函数编写、变量声明和赋值、表格结构布局等工作，尤其适合包含大量表格数据的后台管理系统，该方案能极大提高代码的复用率，降低前期开发和后期维护的工作量，使前端开发工作更灵活高效。

如上所述，可较好地实现本发明。

本说明书中所有实施例公开的所有特征，或隐含公开的所有方法或过程中的步骤，除了互相排斥的特征和/或步骤以外，均可以以任何方式组合和/或扩展、替换。

以上所述，仅是本发明的较佳实施例而已，并非对本发明作任何形式上的限制，依据本发明的技术实质，在本发明的精神和原则之内，对以上实施例所作的任何简单的修改、等同替换与改进等，均仍属于本发明技术方案的保护范围之内。

Claims (10)

1.一种多功能数据表格组件的封装开发方法，其特征在于，包括以下步骤：

S1，构建表格组件基础信息：根据外部的表头名称及其对应的数据字段名传入表格组件，生成表格组件基础信息；

S2，加载数据：将外部数据加载到表格数据栏，将表头信息展示到表格头部。

2.根据权利要求1所述的一种多功能数据表格组件的封装开发方法，其特征在于，步骤S1中，将表头名称及其对应的数据字段名通过模板插槽或标签属性参数形式传入表格组件。

3.根据权利要求1所述的一种多功能数据表格组件的封装开发方法，其特征在于，步骤S2中，将接口请求API以标签属性参数形式传入表格组件，并构建数据加载函数,当运行数据加载函数时向服务端发送网络请求，将从API获取到的数据映射到表格内。

4.根据权利要求2或3所述的一种多功能数据表格组件的封装开发方法，其特征在于，还包括以下步骤：

S3，选取数据：根据标签属性参数值决定在表格首列生成Radio或CheckBox选择框，同时在表格组件内开辟缓存区，当点击选择框时，将表格的行数据存入缓存区。

5.根据权利要求4所述的一种多功能数据表格组件的封装开发方法，其特征在于，还包括以下步骤：

S4，刷新数据及翻页：在表格组件顶部设置刷新按钮，将数据加载函数绑定到刷新按钮的点击事件；和/或；在表格组件底部设置翻页组件，将数据加载函数绑定到翻页组件的change事件。

6.根据权利要求5所述的一种多功能数据表格组件的封装开发方法，其特征在于，还包括以下步骤：

S5，筛查数据：将条件查询表单传入表格组件，在表格组件内置查询函数和重置函数，运行查询函数时将条件查询表单的参数传入数据加载函数，运行重置函数时将条件查询表单内容清空。

7.根据权利要求1所述的一种多功能数据表格组件的封装开发方法，其特征在于，还包括以下步骤：

S6，导出数据：通过标签属性将API地址和文件名传入至表格组件内，在表格组件内置文件流数据请求函数，当运行文件流数据请求函数时，将从API获取到的数据流转换为本地下载链接，最后下载到本地客户端。

8.一种多功能数据表格组件的封装开发系统，其特征在于，基于权利要求1至7任一项所述的一种多功能数据表格组件的封装开发方法，包括相互电相连的以下模块：

表格组件基础信息构建模块：用以，根据外部的表头名称及其对应的数据字段名传入表格组件，生成表格组件基础信息；

数据加载模块：用以，将外部数据加载到表格数据栏，将表头信息展示到表格头部。

9.根据权利要求8所述的一种多功能数据表格组件的封装开发系统，其特征在于，还包括与电相连的数据选取模块，数据选取模块用以：根据标签属性传入的参数决定在表格首列生成Radio或CheckBox选择框，同时在表格组件内开辟缓存区，当点击选择框时，将对应的行数据存入缓存区。

10.根据权利要求9所述的一种多功能数据表格组件的封装开发系统，其特征在于，还包括：

数据刷新翻页模块：用以，在表格组件顶部设置刷新按钮，将数据加载函数绑定到刷新按钮的点击事件；和/或；在表格组件底部设置翻页组件，将步骤S2的数据加载函数绑定到翻页组件的change事件；

数据筛查模块：用以，在表格组件内置查询函数和重置函数，运行查询函数时将条件查询表单的参数传入数据加载函数，运行重置函数时将条件查询表单内容清空；

数据导出模块：通过标签属性将API地址和文件名传入至表格组件内，在表格组件内置文件流数据请求函数，当运行文件流数据请求函数时，将从API获取到的数据流转换为本地下载链接，最后下载到本地客户端；

数据刷新翻页模块、数据筛查模块、数据导出模块分别与数据加载模块电相连。

Images