CN109960770A - 一种面向angular架构的蛇形排列数据的方法 - Google Patents

Abstract

本发明公开一种面向angular架构的蛇形排列数据的方法,涉及数据呈现技术领域；将从后台获得的数据转化为数组格式，并定义数组参数及二维数组节点，遍历数据并赋值给二维数组，并根据HTML展示规则进行蛇形排列数据展示；并且本发明方法利用二维数组存储数据，能够以蛇形的展示方式来展示节点，提高用户体验的同时，与普通的从左到右一条横向排列或者从左到右多条横向排列相比较，能够明显提高界面感官效果，更直观的展示节点之间的排列关系。

Description

一种面向angular架构的蛇形排列数据的方法

技术领域

本发明公开一种面向angular架构的蛇形排列数据的方法,涉及数据呈现技术领域。

背景技术

在流水线型展示数据的页面设计中，大多数采用左右到右一次排列然后分页处理，或者还有多行从左到右排列处理。但是这种展示方式不够直观，一方面没法比较，另一方面展现的不明显。流水线输出的方式，影响用户体验。

Angular架构即Angular JS，诞生于2009年，是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心是:MVC(Model–view–controller)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

本发明提出了一种面向angular架构的蛇形排列数据的方法,通过采用二维数组存储数据，以蛇形的展示方式来展示节点，能够明显提高界面感官效果，从而提高用户体验，用户可更清晰的去查看节点之间的关系及查看其它相关数据。

发明内容

本发明针对现有技术的问题，提供一种面向angular架构的蛇形排列数据的方法，旨在为开发、测试人员提供接口管理服务，可以帮助开发者轻松创建、发布、维护api,并可以在前端完成数据源的配置，以及接口的编写及发布等服务。

本发明提出的具体方案是：

一种面向angular架构的蛇形排列数据的方法，具体步骤为：

步骤1：展示数据页面前端请求从后台获取数据，并将数据转化成数组形式，命名为Data，

步骤2：定义每行的节点数Row Number、Row Index、总行数Row Sum及二维数组Node，

步骤3：循环遍历Data，每遍历数组中一条数据Row Index加1，当Row Index大于Row Number时总行数Row Sum加1，

步骤4：将Data依次赋值给二维数组Node，

步骤5：定义HTML展示规则用于蛇形排列数据展示，

步骤6：前端HTML页面中循环遍历二维数组Node，根据HTML展示规则进行蛇形排列数据。

所述的方法中步骤4中Data依次赋值给二维数组Node，其中{Data[0]→Data[RowNumber-1]}为Node[0]的赋值，{Data[Row Number]→Data[Row Number*2-1]}为Node[1]的赋值，直至{Data[Row Number*(Row Sum-1)]→Data最后一条记录}为Node[Row Sum-1]的赋值。

所述的方法中步骤5中HTML展示规则分别定义偶数行节点排列规则、奇数行节点排列规则及箭头指示方向规则。

所述的方法中步骤5中定义HTML展示时，偶数行节点排列从左向右并设置右箭头，奇数行节点排列为从右向左并设置左箭头，除最后一行每行的最后一个节点设置下箭头。

所述的方法中步骤6中前端HTML页面中循环遍历二维数组Node行数，再依次循环遍历二位数组Node每行的列数，展示每个节点数据。

一种面向angular架构的蛇形排列数据的工具，包括数据获取单元、数据处理单元、展示规则定义单元及展示单元，

数据获取单元在展示数据页面前端请求从后台获取数据，并将数据转化成数组形式，命名为Data，传递给数据处理单元，

数据处理单元定义每行的节点数Row Number、Row Index、总行数Row Sum及二维数组Node，

循环遍历Data，每遍历数组中一条数据Row Index加1，当Row Index大于RowNumber时总行数Row Sum加1，

再将Data依次赋值给二维数组Node，

展示规则定义单元定义HTML展示规则用于蛇形排列数据展示，

数据处理单元将赋值后的二维数组发送到前端HTML页面，HTML页面中循环遍历二维数组Node，展示单元根据HTML展示规则进行蛇形排列数据。

所述的工具中展示规则定义单元将HTML展示规则分别定义为偶数行节点排列规则、奇数行节点排列规则及箭头指示方向规则。

所述的工具中展示规则定义单元定义HTML展示时，偶数行节点排列从左向右并设置右箭头，奇数行节点排列为从右向左并设置左箭头，除最后一行每行的最后一个节点设置下箭头。

本发明的有益之处是：

本发明提供一种面向angular架构的蛇形排列数据的方法，将从后台获得的数据转化为数组格式，并定义数组参数及二维数组节点，遍历数据并赋值给二维数组，并根据HTML展示规则进行蛇形排列数据展示；并且本发明方法利用二维数组存储数据，能够以蛇形的展示方式来展示节点，提高用户体验的同时，与普通的从左到右一条横向排列或者从左到右多条横向排列相比较，能够明显提高界面感官效果，更直观的展示节点之间的排列关系。

附图说明

图1是本发明方法流程示意图。

具体实施方式

本发明提供一种面向angular架构的蛇形排列数据的方法，具体步骤为：

步骤1：展示数据页面前端请求从后台获取数据，并将数据转化成数组形式，命名为Data，

步骤2：定义每行的节点数Row Number、Row Index、总行数Row Sum及二维数组Node，

步骤3：循环遍历Data，每遍历数组中一条数据Row Index加1，当Row Index大于Row Number时总行数Row Sum加1，

步骤4：将Data依次赋值给二维数组Node，

步骤5：定义HTML展示规则用于蛇形排列数据展示，

步骤6：前端HTML页面中循环遍历二维数组Node，根据HTML展示规则进行蛇形排列数据。

同时提供与上述方法相对应的一种面向angular架构的蛇形排列数据的工具，包括数据获取单元、数据处理单元、展示规则定义单元及展示单元，数据获取单元在展示数据页面前端请求从后台获取数据，并将数据转化成数组形式，命名为Data，传递给数据处理单元，

数据处理单元定义每行的节点数Row Number、Row Index、总行数Row Sum及二维数组Node，

循环遍历Data，每遍历数组中一条数据Row Index加1，当Row Index大于RowNumber时总行数Row Sum加1，

再将Data依次赋值给二维数组Node，

展示规则定义单元定义HTML展示规则用于蛇形排列数据展示，

数据处理单元将赋值后的二维数组发送到前端HTML页面，HTML页面中循环遍历二维数组Node，展示单元根据HTML展示规则进行蛇形排列数据。

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

利用本发明方法或工具，对某一angular架构前端进行数据的蛇形的展示，具体步骤为：

步骤1：采用HTTP服务，利用HTTP请求从后台获取数据，并将数据转化成数组形式,命名为Data；

步骤2：定义Row Number(每行的节点数)、Row Index(初始为0)、Row Sum(总行数)、二维数组Node，二维数组Node的行数为Row Sum，除最后一行节点个数Row Number，最后一行节点个数为1-Row Number；

步骤3：循环遍历Data，每遍历数组中一条数据Row Index加1，当Row Index大于Row Number时行数Row Sum加1；

步骤4：将Data依次赋值给二维数组Node，Node[0]是{Data[0]→Data[RowNumber-1]}、Node[1]是{Data[Row Number]→Data[Row Number*2-1]}、...、Node[RowSum-1]是{Data[Row Number*(Row Sum-1)]→Data最后一条记录}；

步骤5：定义HTML展示规则，偶数行节点排列从左向右并设置右箭头，偶数行节点设置从左到右排列，例如float：left，

奇数行节点排列为从右向左并设置左箭头，除最后一行每行的最后一个节点设置下箭头，

步骤6：HTML中循环遍历Node，前台HTML页面中循环遍历二维数组Node行数，再依次循环遍历二位数组Node每行的列数展示每个节点，即依次遍历Node[0]→Node[RowIndex-1],Node[0…Row Index-1]并根据HTML展示规则进行蛇形排列数据。

以上所述实施例仅是为充分说明本发明而所举的较佳的实施例，本发明的保护范围不限于此。本技术领域的技术人员在本发明基础上所作的等同替代或变换，均在本发明的保护范围之内。本发明的保护范围以权利要求书为准。

Claims (8)

1.一种面向angular架构的蛇形排列数据的方法，其特征是具体步骤为：

步骤1：展示数据页面前端请求从后台获取数据，并将数据转化成数组形式，命名为Data，

步骤2：定义每行的节点数Row Number、Row Index、总行数Row Sum及二维数组Node，

步骤3：循环遍历Data，每遍历数组中一条数据Row Index加1，当Row Index大于RowNumber时总行数Row Sum加1，

步骤4：将Data依次赋值给二维数组Node，

步骤5：定义HTML展示规则用于蛇形排列数据展示，

步骤6：前端HTML页面中循环遍历二维数组Node，根据HTML展示规则进行蛇形排列数据。

2.根据权利要求1所述的方法，其特征是步骤4中Data依次赋值给二维数组Node，其中{Data[0]→Data[Row Number-1]}为Node[0]的赋值，{Data[Row Number]→Data[RowNumber*2-1]}为Node[1]的赋值，直至{Data[Row Number*(Row Sum-1)]→Data最后一条记录}为Node[Row Sum-1]的赋值。

3.根据权利要求1或2所述的方法，其特征是步骤5中HTML展示规则分别定义偶数行节点排列规则、奇数行节点排列规则及箭头指示方向规则。

4.根据权利要求3所述的方法，其特征是步骤5中定义HTML展示时，偶数行节点排列从左向右并设置右箭头，奇数行节点排列为从右向左并设置左箭头，除最后一行每行的最后一个节点设置下箭头。

5.根据权利要求4所述的方法，其特征是步骤6中前端HTML页面中循环遍历二维数组Node行数，再依次循环遍历二位数组Node每行的列数，展示每个节点数据。

6.一种面向angular架构的蛇形排列数据的工具，其特征是包括数据获取单元、数据处理单元、展示规则定义单元及展示单元，

数据获取单元在展示数据页面前端请求从后台获取数据，并将数据转化成数组形式，命名为Data，传递给数据处理单元，

数据处理单元定义每行的节点数Row Number、Row Index、总行数Row Sum及二维数组Node，

循环遍历Data，每遍历数组中一条数据Row Index加1，当Row Index大于Row Number时总行数Row Sum加1，

再将Data依次赋值给二维数组Node，

展示规则定义单元定义HTML展示规则用于蛇形排列数据展示，

数据处理单元将赋值后的二维数组发送到前端HTML页面，HTML页面中循环遍历二维数组Node，展示单元根据HTML展示规则进行蛇形排列数据。

7.根据权利要求6所述的工具，其特征是展示规则定义单元将HTML展示规则分别定义为偶数行节点排列规则、奇数行节点排列规则及箭头指示方向规则。

8.根据权利要求7所述的工具，其特征是展示规则定义单元定义HTML展示时，偶数行节点排列从左向右并设置右箭头，奇数行节点排列为从右向左并设置左箭头，除最后一行每行的最后一个节点设置下箭头。