CN112698903A - 一种基于ng-zorro的表格滚动条位置控制方法及系统 - Google Patents
一种基于ng-zorro的表格滚动条位置控制方法及系统 Download PDFInfo
- Publication number
- CN112698903A CN112698903A CN202011630641.7A CN202011630641A CN112698903A CN 112698903 A CN112698903 A CN 112698903A CN 202011630641 A CN202011630641 A CN 202011630641A CN 112698903 A CN112698903 A CN 112698903A
- Authority
- CN
- China
- Prior art keywords
- module
- data
- page
- setting
- updating
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 49
- 238000005096 rolling process Methods 0.000 claims abstract description 34
- 230000001419 dependent effect Effects 0.000 claims description 6
- 239000000243 solution Substances 0.000 description 4
- 238000012545 processing Methods 0.000 description 3
- 238000011161 development Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000002457 bidirectional effect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 238000002347 injection Methods 0.000 description 1
- 239000007924 injection Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
- G06F3/04855—Interaction with scrollbars
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种基于NG‑ZORRO的表格滚动条位置控制方法及系统，属于Angular的ElementRef和前端组件库NG‑ZORRO应用领域；所述的方法的具体步骤包括：S1创建变更规格页面组件；S2对规格页面进行变更，对页面组件数据进行更新；S3在数据更新后的方法中，获取规格列表数据和当前实例的规格数据m；S4通过方法计算表格滚动值；S5获取需要设置的页面元素；S6设置元素的滚动位置；本发明通过控制表格的显示和滚动条的位置，相较于传统的表格默认的展示方式，提高了数据阅览的快捷方便和适应性，减少的用户对数据的反复查找，从而提高了用户使用产品的效率和产品使用的快捷和舒适性。
Description
技术领域
本发明公开一种基于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方法获取准确的页面元素。
最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。
Claims (8)
1.一种基于NG-ZORRO的表格滚动条位置控制方法，其特征是所述的方法的具体步骤包括：
S1创建变更规格页面组件；
S2对规格页面进行变更，对页面组件数据进行更新；
S3在数据更新后的方法中，获取规格列表数据和当前实例的规格数据m；
S4通过方法计算表格滚动值；
S5获取需要设置的页面元素；
S6设置元素的滚动位置。
2.根据权利要求1所述的方法，其特征是所述S2对规格页面进行变更，对页面组件数据进行更新的具体步骤包括：
S201在变更规格页面组件中注入依赖ElementRef；
S202在变更规格页面中编写表格代码，在ts中编写页面组件数据更新的方法。
3.根据权利要求2所述的方法，其特征是所述S4通过方法计算表格滚动值的具体步骤包括：
S401设置表格样式确定表格中一条数据的高度h；
S402遍历规格数据列表，比较规格数据m和规格数据列表中第几条数据一致，这个位置为n；
S403若当前规格在规格列表中不存在，则默认n为1；
S404判断是否需要设置表格的滚动值；
S405若n为1，则不需要设置表格滚动值，或者设置表格滚动值为0；
S415若n大于1，则计算表格滚动值为(n-1)*h。
4.根据权利要求3所述的方法，其特征是所述S5获取需要设置的页面元素的具体步骤包括：
S501注入ElementRef依赖；
S502获取ElementRef的nativeElement属性；
S503给元素设置唯一确定的标志
S504通过nativeElement的querySelector方法获取准确的页面元素。
5.一种基于NG-ZORRO的表格滚动条位置控制系统，其特征是所述的方系统包括创建模块、更新模块、获取模块、计算模块、元素模块和设置模块：
创建模块：创建变更规格页面组件；
更新模块：对规格页面进行变更，对页面组件数据进行更新；
获取模块：在数据更新后的方法中，获取规格列表数据和当前实例的规格数据m；
计算模块：通过方法计算表格滚动值；
元素模块：取需要设置的页面元素；
设置模块：设置元素的滚动位置。
6.根据权利要求5所述的系统，其特征是所述更新模块具体包括加注模块A和编写模块：
加注模块A：在变更规格页面组件中注入依赖ElementRef；
编写模块：在变更规格页面中编写表格代码，在ts中编写页面组件数据更新的方法。
7.根据权利要求6所述的系统，其特征是所述计算模块具体包括数据确定模块、数据比较模块、数据默认模块、设置判断模块、设置模块A和设置模块B；
数据确定模块：设置表格样式确定表格中一条数据的高度h；
数据比较模块：遍历规格数据列表，比较规格数据m和规格数据列表中第几条数据一致，这个位置为n；
数据默认模块：若当前规格在规格列表中不存在，则默认n为1；
设置判断模块：判断是否需要设置表格的滚动值；
设置模块A：若n为1，则不需要设置表格滚动值，或者设置表格滚动值为0；
设置模块B：若n大于1，则计算表格滚动值为(n-1)*h。
8.根据权利要求7所述的系统，其特征是所述元素模块具体包括加注模块B、属性获取模块、标志设置模块和元素捕获模块：
加注模块B：注入ElementRef依赖；
属性获取模块：获取ElementRef的nativeElement属性；
标志设置模块：给元素设置唯一确定的标志；
元素捕获模块：通过nativeElement的querySelector方法获取准确的页面元素。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011630641.7A CN112698903A (zh) | 2020-12-31 | 2020-12-31 | 一种基于ng-zorro的表格滚动条位置控制方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011630641.7A CN112698903A (zh) | 2020-12-31 | 2020-12-31 | 一种基于ng-zorro的表格滚动条位置控制方法及系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112698903A true CN112698903A (zh) | 2021-04-23 |
Family
ID=75513537
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011630641.7A Pending CN112698903A (zh) | 2020-12-31 | 2020-12-31 | 一种基于ng-zorro的表格滚动条位置控制方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112698903A (zh) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1815478A (zh) * | 2006-03-06 | 2006-08-09 | 阿里巴巴公司 | 在网页中实现表格局部滚动显示的方法及系统 |
| CN106293409A (zh) * | 2016-08-12 | 2017-01-04 | 福建中金在线信息科技有限公司 | 一种轻量级滚动条的美化方法 |
| CN109491574A (zh) * | 2018-10-26 | 2019-03-19 | 中国工商银行股份有限公司 | 包含表格的页面交互装置及方法 |
| CN111708611A (zh) * | 2020-07-02 | 2020-09-25 | 浪潮云信息技术股份公司 | 轻量级Kubernetes监控系统及方法 |
-
2020
- 2020-12-31 CN CN202011630641.7A patent/CN112698903A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1815478A (zh) * | 2006-03-06 | 2006-08-09 | 阿里巴巴公司 | 在网页中实现表格局部滚动显示的方法及系统 |
| CN106293409A (zh) * | 2016-08-12 | 2017-01-04 | 福建中金在线信息科技有限公司 | 一种轻量级滚动条的美化方法 |
| CN109491574A (zh) * | 2018-10-26 | 2019-03-19 | 中国工商银行股份有限公司 | 包含表格的页面交互装置及方法 |
| CN111708611A (zh) * | 2020-07-02 | 2020-09-25 | 浪潮云信息技术股份公司 | 轻量级Kubernetes监控系统及方法 |
Non-Patent Citations (2)
| Title |
|---|
| 北落师门_ORZ: "angular + ng-zorro后台搜索页面", 《HTTPS://BLOG.CSDN.NET/JUST_LOVE_LE/ARTICLE/DETAILS/109718570》 * |
| 鲜荣彬HERRY: "Angular对native元素的封装操作ElementRef，Renderer2", 《HTTPS://WWW.CNBLOGS.COM/XIANRONGBIN/P/10857916.HTML》 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| KR101524897B1 (ko) | 임시 편집 표면을 이용한 문서 편집 | |
| RU2645276C2 (ru) | Создание вариаций при преобразовании данных в потребляемый контент | |
| CN108762743B (zh) | 一种数据表操作代码生成方法及装置 | |
| CN103425468B (zh) | 插件式软件集成方法及装置 | |
| US20130268850A1 (en) | Methods and apparatus to copy and insert information | |
| CN104090749A (zh) | 一种WinCE产品界面主题更新变换处理方法及系统 | |
| WO2014026067A1 (en) | 3d data environment disambiguation tool | |
| EP1920350A1 (en) | Markup based extensibility for user interfaces | |
| CN107357593A (zh) | 源代码文件组建方法、装置、电子终端及可读存储介质 | |
| CN108804469B (zh) | 一种网页识别方法以及电子设备 | |
| CN111078205B (zh) | 一种模块化编程方法、装置、存储介质及电子设备 | |
| CN102122245A (zh) | 一种配置项设置界面的生成方法及系统 | |
| WO2019083620A1 (en) | COORDINATION OF COMPOUND SCENARIO CONTENT IN MULTIPLE PRODUCTIVITY APPLICATIONS | |
| CN103577522A (zh) | 用于管理数据的方法及其电子装置 | |
| CN108280219A (zh) | 文本翻译方法、装置、计算机设备和存储介质 | |
| US20070245235A1 (en) | Efficient storage of drawing objects in synchronizable electronic documents | |
| WO2020046450A1 (en) | Enhanced techniques for merging content from separate computing devices | |
| EP3821365A1 (en) | Selectively controlling modification states for user-defined subsets of objects within a digital document | |
| US9141867B1 (en) | Determining word segment boundaries | |
| CN112783482B (zh) | 一种可视化表单生成方法、装置、设备及存储介质 | |
| US10592598B1 (en) | Book version mapping | |
| CN102446175A (zh) | 电子装置及网页加注方法 | |
| CN116339818B (zh) | 代码变更类型的筛选方法、电子设备及可读存储介质 | |
| CN112698903A (zh) | 一种基于ng-zorro的表格滚动条位置控制方法及系统 | |
| CN101464875B (zh) | 使用xml表示电子字典数据的方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210423 |