一种基于NG-ZORRO的表格滚动条位置控制方法及系统

摘要

本发明公开了一种基于NG‑ZORRO的表格滚动条位置控制方法及系统，属于Angular的ElementRef和前端组件库NG‑ZORRO应用领域；所述的方法的具体步骤包括：S1创建变更规格页面组件；S2对规格页面进行变更，对页面组件数据进行更新；S3在数据更新后的方法中，获取规格列表数据和当前实例的规格数据m；S4通过方法计算表格滚动值；S5获取需要设置的页面元素；S6设置元素的滚动位置；本发明通过控制表格的显示和滚动条的位置，相较于传统的表格默认的展示方式，提高了数据阅览的快捷方便和适应性，减少的用户对数据的反复查找，从而提高了用户使用产品的效率和产品使用的快捷和舒适性。

说明书

技术领域

本发明公开一种基于NG-ZORRO的表格滚动条位置控制方法及系统，涉及Angular的ElementRef和前端组件库NG-ZORRO应用技术领域。

背景技术

目前随着互联网技术的飞速发展，网络在人们的日常生活中越来越重要。在当前云计算、大数据的背景下，现代企业和政府的数据正在朝着大容量方向发展，随着大数据平台的新兴技术的发展，人们获得信息的方式越来越丰富。当数据较多且复杂时，人们倾向于阅览最直接的数据，摒除杂乱无效数据的影响。当云环境上数据库实例可选择的规格种类较多的时候，针对其变更规格管理工作比较复杂。

Angular是一个强大的前端框架，其强大之处主要是可以把静态页面与动态数据绑定起来。其特点是数据的双向绑定，代码模块化，可以封装标签、属性和注释，强大的依赖注入等；NG-ZORRO由阿里计算平台事业部、阿里云等不同部门的开发人员在原业务组件的基础上构建而成的前端UI组件库，使用NG-ZORRO有很多原因，比如组件类型丰富，生态可以结合ant-design，结合阿里在自己项目中的经验，版本更新迭代很快，界面漂亮一些等。

目前现有页面表格，是默认展示全部数据，并默认展示顶部数据，未对数据进行区分处理和个性化展示。我们可以看到，用户对于页面的使用体验和复杂数据的阅读受制于当前这种展示方式，无法获得更方便快捷贴心的服务，造成体验差，系统使用复杂的情况，这是亟待解决的问题。

发明内容

本发明针对现有技术的问题，提供一种基于NG-ZORRO的表格滚动条位置控制方法及系统，所采用的技术方案为：一种基于NG-ZORRO的表格滚动条位置控制方法，所述的方法的具体步骤包括：

S1创建变更规格页面组件；

S2对规格页面进行变更，对页面组件数据进行更新；

S3在数据更新后的方法中，获取规格列表数据和当前实例的规格数据m；

S4通过方法计算表格滚动值；

S5获取需要设置的页面元素；

S6设置元素的滚动位置。

所述S2对规格页面进行变更，对页面组件数据进行更新的具体步骤包括：

S201在变更规格页面组件中注入依赖ElementRef；

S202在变更规格页面中编写表格代码，在ts中编写页面组件数据更新的方法。

所述S4通过方法计算表格滚动值的具体步骤包括：

S401设置表格样式确定表格中一条数据的高度h；

S402遍历规格数据列表，比较规格数据m和规格数据列表中第几条数据一致，这个位置为n；

S403若当前规格在规格列表中不存在，则默认n为1；

S404判断是否需要设置表格的滚动值；

S405若n为1，则不需要设置表格滚动值，或者设置表格滚动值为0；

S415若n大于1，则计算表格滚动值为(n-1)*h。

所述S5获取需要设置的页面元素的具体步骤包括：

S501注入ElementRef依赖；

S502获取ElementRef的nativeElement属性；

S503给元素设置唯一确定的标志；

S504通过nativeElement的querySelector方法获取准确的页面元素。

一种基于NG-ZORRO的表格滚动条位置控制系统，所述的方系统包括创建模块、更新模块、获取模块、计算模块、元素模块和设置模块：

创建模块：创建变更规格页面组件；

更新模块：对规格页面进行变更，对页面组件数据进行更新；

获取模块：在数据更新后的方法中，获取规格列表数据和当前实例的规格数据m；

计算模块：通过方法计算表格滚动值；

元素模块：取需要设置的页面元素；

设置模块：设置元素的滚动位置。

所述更新模块具体包括加注模块A和编写模块：

加注模块A：在变更规格页面组件中注入依赖ElementRef；

编写模块：在变更规格页面中编写表格代码，在ts中编写页面组件数据更新的方法。

所述计算模块具体包括数据确定模块、数据比较模块、数据默认模块、设置判断模块、设置模块A和设置模块B；

数据确定模块：设置表格样式确定表格中一条数据的高度h；

数据比较模块：遍历规格数据列表，比较规格数据m和规格数据列表中第几条数据一致，这个位置为n；

数据默认模块：若当前规格在规格列表中不存在，则默认n为1；

设置判断模块：判断是否需要设置表格的滚动值；

设置模块A：若n为1，则不需要设置表格滚动值，或者设置表格滚动值为0；

设置模块B：若n大于1，则计算表格滚动值为(n-1)*h。

所述元素模块具体包括加注模块B、属性获取模块、标志设置模块和元素捕获模块：

加注模块B：注入ElementRef依赖；

属性获取模块：获取ElementRef的nativeElement属性；

标志设置模块：给元素设置唯一确定的标志；

元素捕获模块：通过nativeElement的querySelector方法获取准确的页面元素。

本发明的有益效果为：本申请公开基于NG-ZORRO的表格滚动条位置控制方法及系统，该方法页面表格组件展示时，根据用户需求和本着使用便捷性舒适性的要求，控制表格显示的位置，用户使用系统进行规格变更操作时，只需要关注需升级的规格内容即可，对不符合升级的规格进行隐藏显示，确保用户使用的便捷性，满足用户使用系统的需求；

同时，本发明的复用性较高，用户只需要确保Angular环境和NG-ZORRO组件库，直接使用该发明逻辑即可，不必进行额外操作，提高了复用性，并保证了执行的准确性。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本发明方法的流程图；图2是本发明系统的结构示意图；图3是本发明实施例的整体流程图；图4是本发明实施例中获取表格流动值的流程图。

具体实施方式

下面结合附图和具体实施例对本发明作进一步说明，以使本领域的技术人员可以更好地理解本发明并能予以实施，但所举实施例不作为对本发明的限定。

本发明实施的前提条件：

前提条件：

(1)部署在公有云环境上的数据库实例能够正常进行业务操作。

(2)规格列表数据能正常从BSS侧获取到。

实施例一：

一种基于NG-ZORRO的表格滚动条位置控制方法，所述的方法的具体步骤包括：

S1创建变更规格页面组件；

S2对规格页面进行变更，对页面组件数据进行更新；

S3在数据更新后的方法中，获取规格列表数据和当前实例的规格数据m；

S4通过方法计算表格滚动值；

S5获取需要设置的页面元素；

S6设置元素的滚动位置；

本发明旨在提供基于NG-ZORRO的控制表格滚动条位置方法，该方法通过对Angular的ElementRef的应用以及表格数据的逻辑处理，可以实现页面表格显示的控制；本发明方法通过控制表格的显示和滚动条的位置，相较于传统的表格默认的展示方式，提高了数据阅览的快捷方便和适应性，减少的用户对数据的反复查找，从而提高了用户使用产品的效率和产品使用的快捷和舒适性；

进一步的，所述S2对规格页面进行变更，对页面组件数据进行更新的具体步骤包括：

S201在变更规格页面组件中注入依赖ElementRef；

S202在变更规格页面中编写表格代码，在ts中编写页面组件数据更新的方法；

进一步的，所述S4通过方法计算表格滚动值的具体步骤包括：

S401设置表格样式确定表格中一条数据的高度h；

S402遍历规格数据列表，比较规格数据m和规格数据列表中第几条数据一致，这个位置为n；

S403若当前规格在规格列表中不存在，则默认n为1；

S404判断是否需要设置表格的滚动值；

S405若n为1，则不需要设置表格滚动值，或者设置表格滚动值为0；

S415若n大于1，则计算表格滚动值为(n-1)*h；

再进一步的，所述S5获取需要设置的页面元素的具体步骤包括：

S501注入ElementRef依赖；

S502获取ElementRef的nativeElement属性；

S503给元素设置id或class作为唯一确定的标志；

S504通过nativeElement的querySelector方法获取准确的页面元素。

实施例二：

一种基于NG-ZORRO的表格滚动条位置控制系统，所述的方系统包括创建模块、创建模块、获取模块、计算模块、元素模块和设置模块：

创建模块：创建变更规格页面组件；

更新模块：对规格页面进行变更，对页面组件数据进行更新；

获取模块：在数据更新后的方法中，获取规格列表数据和当前实例的规格数据m；

计算模块：通过方法计算表格滚动值；

元素模块：获取需要设置的页面元素；

设置模块：设置元素的滚动位置；

本系统通过对Angular的ElementRef的应用以及表格数据的逻辑处理，可以实现页面表格显示的控制；本发明方法通过控制表格的显示和滚动条的位置，相较于传统的表格默认的展示方式，提高了数据阅览的快捷方便和适应性，减少的用户对数据的反复查找，从而提高了用户使用产品的效率和产品使用的快捷和舒适性；

所述更新模块具体包括加注模块A和编写模块：

加注模块A：在变更规格页面组件中注入依赖ElementRef；

编写模块：在变更规格页面中编写表格代码，在ts中编写页面组件数据更新的方法；

所述计算模块具体包括数据确定模块、数据比较模块、数据默认模块、设置判断模块、设置模块A和设置模块B；

数据确定模块：设置表格样式确定表格中一条数据的高度h；

数据比较模块：遍历规格数据列表，比较规格数据m和规格数据列表中第几条数据一致，这个位置为n；

数据默认模块：若当前规格在规格列表中不存在，则默认n为1；

设置判断模块：判断是否需要设置表格的滚动值；

设置模块A：若n为1，则不需要设置表格滚动值，或者设置表格滚动值为0；

设置模块B：若n大于1，则计算表格滚动值为(n-1)*h；

再进一步的，所述元素模块具体包括加注模块B、属性获取模块、标志设置模块和元素捕获模块：

加注模块B：注入ElementRef依赖；

属性获取模块：获取ElementRef的nativeElement属性；

标志设置模块：给元素设置id或class作为唯一确定的标志；

元素捕获模块：通过nativeElement的querySelector方法获取准确的页面元素。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。