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

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

A packaging development method and system of multifunctional data table components

【技术实现步骤摘要】
一种多功能数据表格组件的封装开发方法及系统


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

技术介绍

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

技术实现思路

[0003]为克服现有技术的不足，本专利技术提供了一种多功能数据表格组件的封装开发方法及系统，解决现有技术存在的存在大量重复或类似的开发工作、维护工作繁琐、工作效率低下等问题。
[0004]本专利技术解决上述问题所采用的技术方案是：
[0005]一种多功能数据表格组件的封装开发方法，包括以下步骤：
[0006]S1，构建表格组件基础信息：根据外部的表头名称及其对应的数据字段名传入表格组件，生成表格组件基础信息；
[0007]S2，加载数据：将外部数据加载到表格数据栏，将表头信息展示到表格头部。
[0008]作为一种优选的技术方案，步骤S1中，将表头名称及其对应的数据字段名通过模板插槽或标签属性参数形式传入表格组件。
[0009]作为一种优选的技术方案，步骤S2中，将接口请求API以标签属性参数形式传入表格组件，并构建数据加载函数,当运行数据加载函数时向服务端发送网络请求，将从API获取到的数据映射到表格内。
[0010]作为一种优选的技术方案，还包括以下步骤：
[0011]S3，选取数据：根据标签属性参数值决定在表格首列生成Radio或CheckBox选择框，同时在表格组件内开辟缓存区，当点击选择框时，将表格的行数据存入缓存区。
[0012]作为一种优选的技术方案，还包括以下步骤：
[0013]S4，刷新数据及翻页：在表格组件顶部设置刷新按钮，将数据加载函数绑定到刷新按钮的点击事件；和/或；在表格组件底部设置翻页组件，将数据加载函数绑定到翻页组件的change事件。
[0014]作为一种优选的技术方案，还包括以下步骤：
[0015]S5，筛查数据：将条件查询表单传入表格组件，在表格组件内置查询函数和重置函数，运行查询函数时将条件查询表单的参数传入数据加载函数，运行重置函数时将条件查询表单内容清空。
[0016]作为一种优选的技术方案，还包括以下步骤：
[0017]S6，导出数据：通过标签属性将API地址和文件名传入至表格组件内，在表格组件内置文件流数据请求函数，当运行文件流数据请求函数时，将从API获取到的数据流转换为本地下载链接，最后下载到本地客户端。
[0018]一种多功能数据表格组件的封装开发系统，基于所述的一种多功能数据表格组件的封装开发方法，包括相互电相连的以下模块：
[0019]表格组件基础信息构建模块：用以，根据外部的表头名称及其对应的数据字段名传入表格组件，生成表格组件基础信息；
[0020]数据加载模块：用以，将外部数据加载到表格数据栏，将表头信息展示到表格头部。
[0021]作为一种优选的技术方案，还包括与电相连的数据选取模块，数据选取模块用以：根据标签属性传入的参数决定在表格首列生成Radio或CheckBox选择框，同时在表格组件内开辟缓存区，当点击选择框时，将对应的行数据存入缓存区。
[0022]作为一种优选的技术方案，还包括：
[0023]数据刷新翻页模块：用以，在表格组件顶部设置刷新按钮，将数据加载函数绑定到刷新按钮的点击事件；和/或；在表格组件底部设置翻页组件，将数据加载函数绑定到翻页组件的change事件；
[0024]数据筛查模块：用以，在表格组件内置查询函数和重置函数，运行查询函数时将条件查询表单的参数传入数据加载函数，运行重置函数时将条件查询表单内容清空；
[0025]数据导出模块：通过标签属性将API地址和文件名传入至表格组件内，在表格组件内置文件流数据请求函数，当运行文件流数据请求函数时，将从API获取到的数据流转换为本地下载链接，最后下载到本地客户端；
[0026]数据刷新翻页模块、数据筛查模块、数据导出模块分别与数据加载模块电相连。
[0027]本专利技术相比于现有技术，具有以下有益效果：
[0028]本专利技术使前端表格开发工作得到有效简化，通过传递动态参数代替重复的函数或方法编写、变量声明和赋值、表格结构布局等工作，尤其适合包含大量表格数据的后台管理系统，本专利技术能极大提高代码的复用率，降低前期开发和后期维护的工作量，使前端开发工作更灵活高效。
附图说明
[0029]图1为本专利技术所述的一种多功能数据表格组件的封装开发方法的步骤示意图；
[0030]图2为本专利技术所述的一种多功能数据表格组件的封装开发系统的结构示意图。
具体实施方式
[0031]下面结合实施例及附图，对本专利技术作进一步的详细说明，但本专利技术的实施方式不限于此。
[0032]实施例1
[0033]如图1、图2所示，一种多功能数据表格组件的封装开发方法，包括以下步骤：
[0034]S1，构建表格组件基础信息：根据外部的表头名称及其对应的数据字段名传入表格组件，生成表格组件基础信息；
[0035]S2，加载数据：将外部数据加载到表格数据栏，将表头信息展示到表格头部。
[0036]通过以上技术方案构建表格组件基础信息及加载数据，使前端表格开发工作得到有效简化，提高代码的复用率，降低前期开发和后期维护的工作量，使前端开发工作更灵活高效。
[0037]作为一种优选的技术方案，步骤S1中，将表头名称及其对应的数据字段名通过模板插槽或标签属性参数形式传入表格组件。
[0038]通过模板插槽传入的好处是使程序数据与渲染逻辑分离，代码更直观形象；标签属性参数形式传入的好处是兼容JSX方式。
[0039]作为一种优选的技术方案，步骤S2中，将接口请求API以标签属性参数形式传入表格组件，并构建数据加载函数,当运行数据加载函数时向服务端发送网络请求，将从API获取到的数据映射到表格内。
[0040]以这种方式加载数据更简易，省去了外部重复编写数据加载函数的繁琐。
[0041]作为一种优选的技术方案，还包括以下步骤：
[0042]S3，选取数据：根据标签属性参数值决定在表格首列生成Radio或CheckBox选择框，同时在表格组件内开辟缓存区，当点击选择框时，将表格的本文档来自技高网...

【技术保护点】

【技术特征摘要】
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所述的一种多功能数据表格组件的封装开发方法，其特征在于，还包括以下步骤...

【专利技术属性】
技术研发人员：杜恒，张兴亮，文健，杜刚，
申请(专利权)人：优捷特清洁能源有限公司，
类型：发明
国别省市：