CN114186155A - 一种页面渲染方法、装置、电子终端及存储介质 - Google Patents

Abstract

本发明实施例公开了一种页面渲染方法、装置、电子终端及存储介质，该方法包括：对树结构的目标数据中各节点进行遍历，得到二维数组；二维数组中第一维度表征树结构的层级，第二维度表征同层级的节点；对二维数组进行遍历，确定各层级的节点数，以及确定各层级中从属于相同父节点的兄弟节点；针对各层级，创建包含全部节点的第一标签，以及在第一标签内创建包含兄弟节点的第二标签；根据页面参数、各层级的节点数以及各节点的从属关系，确定第一标签和第二标签的绘制参数；根据第一标签和第二标签的绘制参数，对目标数据进行页面渲染。能够展示整体层级结构、提高可视化区域利用率。

Description

一种页面渲染方法、装置、电子终端及存储介质

技术领域

本发明实施例涉及计算机技术，尤其涉及一种页面渲染方法、装置、电子终端及存储介质。

背景技术

现有技术中，常采用列表的形式对层级关系的数据进行页面渲染，通常包括：响应于列表中某节点的展开操作，从服务器请求该节点的子节点数据；将子节点数据渲染成页面文字元素插入到该节点的下方。响应于该节点的收起操作，删除其子节点数据对应的页面文字元素。

现有技术的不足之处至少包括：展示数据少，无法直观的展示整体层级结构；页面留白、空缺多，可视化区域利用率低。

发明内容

有鉴于此，本发明实施例提供了一种页面渲染方法、装置、电子终端及存储介质，能够展示整体层级结构、提高可视化区域利用率。

第一方面，本发明实施例提供了一种页面渲染方法，包括：

对树结构的目标数据中各节点进行遍历，得到二维数组；所述二维数组中第一维度表征所述树结构的层级，第二维度表征同层级的节点；

对所述二维数组进行遍历，确定各层级的节点数，以及确定所述各层级中从属于相同父节点的兄弟节点；

针对所述各层级，创建包含全部节点的第一标签，以及在所述第一标签内创建包含所述兄弟节点的第二标签；

根据页面参数、所述各层级的节点数以及所述各节点的从属关系，确定所述第一标签和所述第二标签的绘制参数；

根据所述第一标签和所述第二标签的绘制参数，对所述目标数据进行页面渲染。

第二方面，本发明实施例还提供了一种页面渲染装置，包括：

数据遍历模块，用于对树结构的目标数据中各节点进行遍历，得到二维数组；所述二维数组中第一维度表征所述树结构的层级，第二维度表征同层级的节点；

数组遍历模块，用于对所述二维数组进行遍历，确定各层级的节点数，以及确定所述各层级中从属于相同父节点的兄弟节点；

标签创建模块，用于针对所述各层级，创建包含全部节点的第一标签，以及在所述第一标签内创建包含所述兄弟节点的第二标签；

参数确定模块，用于根据页面参数、所述各层级的节点数以及所述各节点的从属关系，确定所述第一标签和所述第二标签的绘制参数；

渲染模块，用于根据所述第一标签和所述第二标签的绘制参数，对所述目标数据进行页面渲染。

第三方面，本发明实施例还提供了一种电子终端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如本申请任意实施例提供的页面渲染方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如本申请任意实施例提供的页面渲染方法。

本发明实施例提供的一种页面渲染方法、装置、电子终端及存储介质，该页面渲染方法包括：对树结构的目标数据中各节点进行遍历，得到二维数组；二维数组中第一维度表征树结构的层级，第二维度表征同层级的节点；对二维数组进行遍历，确定各层级的节点数，以及确定各层级中从属于相同父节点的兄弟节点；针对各层级，创建包含全部节点的第一标签，以及在第一标签内创建包含兄弟节点的第二标签；根据页面参数、各层级的节点数以及各节点的从属关系，确定第一标签和第二标签的绘制参数；根据第一标签和第二标签的绘制参数，对目标数据进行页面渲染。

本发明实施例提供的技术方案中，通过遍历展开树结构的目标数据，能够得到可直观体现节点间的层级关系的二维数组。相较于遍历树结构的目标数据，本实施例通过遍历二维数组得到各层级的节点数和兄弟节点，能够加快遍历效率。通过将各层级包裹为第一标签，将各第一标签中每组兄弟节点包裹为第二标签，能够实现不同层级节点的区域划分，以及相同层级中从属于不同父节点的兄弟节点的区域划分。通过综合页面参数、各层级的节点数以及各节点的从属关系，确定第一标签和第二标签的绘制参数，并根据第一标签和第二标签的绘制参数对目标数据进行页面渲染，能够实现将树结构的目标数据完整、自适应地展示在页面上，提高可视化区域利用率。

附图说明

图1是本发明实施例一提供的一种页面渲染方法的流程示意图；

图2是本发明实施例一提供的一种页面渲染方法中树结构的目标数据的示意图；

图3是本发明实施例一提供的一种页面渲染方法中目标数据中节点的示意图；

图4是本发明实施例一提供的一种页面渲染方法中树结构的目标数据与二维数组的对应关系图；

图5是本发明实施例一提供的一种页面渲染方法中的DOM结构图；

图6是本发明实施例一提供的一种页面渲染方法中组织架构的页面渲染效果图；

图7是本发明实施例三提供的一种页面渲染装置的结构示意图；

图8是本发明实施例四提供的一种电子终端的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，以下将参照本发明实施例中的附图，通过实施方式清楚、完整地描述本发明的技术方案，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。下述各实施例中，每个实施例中同时提供了可选特征和示例，实施例中记载的各个特征可进行组合，形成多个可选方案，不应将每个编号的实施例仅视为一个技术方案。

实施例一

图1是本发明实施例一提供的一种页面渲染方法的流程示意图。本实施例可适用于在页面中渲染树结构的目标数据的情况。该方法可以由本发明实施例提供的页面渲染装置来执行，该装置采用软件和/或硬件的方式实现，且可配安装于电子终端中，例如手机、电脑等终端中。

参见图1，本实施例提供的页面渲染方法，可以包括如下步骤：

S110、对树结构的目标数据中各节点进行遍历，得到二维数组；二维数组中第一维度表征树结构的层级，第二维度表征同层级的节点。

在计算机领域，树结构是以分支关系定义的层级结构，该结构由有限个节点组成。若一个节点含有子节点，则可将这个节点称为其子节点的父节点。若多个节点具有相同的父节点，则可将该多个节点互称为兄弟节点。

其中，可将节点包含的子节点的个数定义为节点的度。树结构中度为零的点可以称为叶节点，度不为零的点可以称为分支节点，且可将父节点为空的特殊分支节点称为根节点。通常树结构以倒挂的“树”的形式表示，即根节点在上，叶节点在下。可以将根节点作为树结构的第一层级，将根节点的子节点作为树结构的第二层级，以此类推。可以认为距离根节点越远，层级越高。

本实施例中，树结构的目标数据可以指具有上述树结构性质的数据集合。其中，树结构的目标数据可以包括但不限于组织架构数据、文件目录数据等。示例性的，图2是本发明实施例一提供的一种页面渲染方法中树结构的目标数据的示意图。图2中，树结构的目标数据可以由六个节点(N1-N6)的数据组成，该六个节点的数据可以分为三个层级。其中，第一层可以包括根节点(N1)的数据，第二层可以包括一个叶节点(N2)的数据和一个分支节点(N3)的数据，第三层级可以包括三个叶节点(N4、N5、N6)的数据。

为了方便绘制目标数据，可以对目标数据进行预处理。由于基于树结构的节点操作，例如遍历、查询等，其操作效率较低，不利于实现页面快速渲染。在预处理中，可以先将树结构的目标数据转换为二维数组的形式。

其中，目标数据的各节点可以包括至少一个字段的数据。示例性的，图3是本发明实施例一提供的一种页面渲染方法中目标数据中节点的示意图。目标数据中节点可以包括内容字段、本节点标识字段、父节点标识字段和子节点字段等字段的数据。参见图3，当目标数据为组织架构数据时，内容字段例如可以为名称字段name，可以表征组织的名称；本节点标识字段id可唯一标识节点的索引值；父节点标识字段pid可唯一标识父节点的索引值，且根节点的父节点可以为0；子节点字段child中可以存储所有子节点信息。

其中，父节点标识字段、子节点字段等可以表征各节点间的从属关系。在遍历树结构的目标数据时，可以根据各节点中表征从属关系的字段的数据对目标数据中每个节点都进行遍历，并存储为对应的二维数组。

例如，在一些实施方式中，对树结构的目标数据中各节点进行遍历，得到二维数组，可包括：将目标数据的根节点作为当前节点；循环根据当前节点的子节点字段的数据，遍历当前节点的子节点，并将当前节点的子节点依次作为新的当前节点，直至各节点均被遍历为止；在遍历过程中将同层级的节点的数据存储为一维数组，在遍历完毕时根据各一维数组生成二维数组。

在这些实施方式中，可以基于广度遍历算法对树结构的目标数据进行遍历展开。广度遍历算法可以认为是从根节点开始，沿着树结构的宽度遍历节点的算法，直至所有节点均被访问终止。具体可以为，先将根节点作为当前节点，确定当前节点的所有子节点，可以用该些子节点的个数表示该层级的宽度。沿宽度遍历节点可以认为是，依次将该些子节点作为当前节点，再次确定其子节点。在确定每个层级的节点后，可以按照层级对节点进行存储得到一维数组。在遍历完毕时，可以把所有层级的一位数组再储存到数组，得到二维数组。

示例性的，图4是本发明实施例一提供的一种页面渲染方法中树结构的目标数据与二维数组的对应关系图。图4中，树结构的目标数据与图2所示的目标数据相同，与目标数据对应的二维数组的行维度可以表征树结构的层级，列维度可以表征同层级的节点。参见图4，目标数据包含三个层级的节点，则对应的二维数组的行数为三；目标数据第一层的根节点(N1)，与二维数组第一行包含的一个元素(A1)对应；目标数据第二层的叶节点(N2)和分支节点(N3)，分别与二维数组第二行包含的两个元素(A2和A3)对应；目标数据第三层的叶节点(N4、N5、N6)，分别与二维数组第三行包含的(A4、A5、A6)对应。

通过一次遍历将目标数据以二维数组的形式存储，能够在后续操作中用操作二维数组来替换操作树结构，可以提高操作效率，有利于实现页面快速渲染。

S120、对二维数组进行遍历，确定各层级的节点数，以及确定各层级中从属于相同父节点的兄弟节点。

在预处理中，在得到与目标数据对应的二维数组后，还可以对二维数组进行遍历，以确定目标数据的层级结构。其中，对二维数组进行遍历可以按第一维度进行遍历，即按层级进行遍历。在遍历每层节点时，可以统计得到节点数，并且可以根据本层各节点的父节点标识字段、或前一层各节点的子节点字段等可表征各节点间的从属关系的字段数据，划分兄弟节点。

具体的，在一些实施方式中，确定各层级中从属于相同父节点的兄弟节点，可以包括：将各层级中父节点标识字段的数据相同的节点，确定为从属于相同父节点的兄弟节点。此外，可以将划分为兄弟节点的节点记为一个群组(group Array)，以便于后续根据groupArray数据进行页面渲染，从而可以使绘制好的节点按照树结构放置。

S130、针对各层级，创建包含全部节点的第一标签，以及在第一标签内创建包含兄弟节点的第二标签。

本发明实施例中，第一标签和第二标签可以指超级文本标记语言(Hyper TextMarkup Language，HTML)代码中用于分割内容的标签，例如可以为DIV标签。HTML标签通常以开始标签和结束标签的形式成对出现，且两标签之间可以包含内容。

在预处理结束后，可以对第一标签和第二标签进行创建。本实施例中，第一标签的内容可以为对应层级的节点的数据。可以在第一标签内部遍历该层级的节点，且可以根据group Array的兄弟节点创建对应数量个第二标签，以使各第二标签的内容分别为各groupArray的兄弟节点的数据。

将HTML代码加载到浏览器的时候，浏览器会解析载入HTML代码中各标签的内容，以构建DOM结构图，进而可根据DOM结构图渲染浏览器的页面。示例性的，图5是本发明实施例一提供的一种页面渲染方法中的DOM结构图。参见图5，目标数据对应的DOM结构图中，可以包括目标数据对应层级个第一标签，且每个第一标签内可创建对应group Array数量个第二标签。

通过将各层级包裹为第一标签，将各第一标签中每组兄弟节点包裹为第二标签，能够实现不同层级节点的区域划分，以及相同层级中从属于不同父节点的兄弟节点的区域划分。

S140、根据页面参数、各层级的节点数以及各节点的从属关系，确定第一标签和第二标签的绘制参数。

其中，页面参数可以指浏览器窗口内页面的宽、高等参数。通过综合页面参数、目标数据对应的层数、各层级的节点数以及节点间的从属关系等因素，不仅可自适应确定目标数据的布局方向(例如从上到下或从左到右布局根节点到叶节点)，还可自适应确定第一标签和第二标签的尺寸、位置等绘制参数，进而还可确定各第二标签内节点对应的页面控件的尺寸、位置等绘制参数。

其中，根据各因素确定第一标签和第二标签的绘制参数时，可以由全局到局部来确定绘制参数，例如可以先确定各第一标签的绘制参数，再在第一标签内部确定各第二标签的绘制参数，从而可以保证页面尽可能将树结构的目标数据完整地展现，且提高可视化区域利用率。

此外，也可以由局部到全局来确定绘制参数，例如可以先确定各第二标签的绘制参数，再确定包裹第二标签的第一标签的绘制参数，从而可以保证局部内容可以清晰地展示，保证观看效果。

S150、根据第一标签和第二标签的绘制参数，对目标数据进行页面渲染。

在确定第一标签和第二标签的绘制参数后，可以基于相应接口(例如Canvas API)根据第一标签和第二标签的绘制参数，对其内部包裹的节点的数据进行绘制，以实现页面渲染。

在一些实施方式中，对目标数据进行页面渲染，可以包括：将目标数据中各节点的内容字段的数据，与各节点对应的页面控件进行绑定；对绑定后的页面控件进行渲染。在这些实施方式中，对标签内部节点的数据进行绘制，可以为对节点的内容字段的数据进行绘制。具体的，首先可以在第二标签内部创建各节点对应的页面控件，并设置页面控件的绘制参数(例如宽、高等)；然后可以将节点的内容字段的数据与第二标签内创建的页面控件(例如文本控件、图片控件等)进行绑定；最后可以对绑定后的页面控件进行渲染，以展示节点的内容字段的数据。

示例性的，图6是本发明实施例一提供的一种页面渲染方法中组织架构的页面渲染效果图。

参见图6，树结构的目标数据可以为医院的组织架构数据，页面中可以对目标数据各节点的名称字段的数据进行渲染。图6中，组织架构数据可以分为四个层级，且可以从上到下布局目标数据的各层节点。其中，第一层级为根节点，渲染的数据可为医院名称，例如××妇幼保健。第二层级为根节点的子节点层级，渲染的数据可包括医院下级组织的名称，例如护理部、保健科、医务科、药剂科、社发部和财务科等。第二层级中除医务科和财务科为分支节点外，其他可为叶节点。第三层级为第二层级中分支节点的子节点层级，渲染的数据可以包括医务科的子节点名称，例如临床科室和病案科室，还可包括财务科的子节点名称，例如结账处和收费处。第三层级中出临床科室为分支节点外，其他可以为叶节点。第四层级为第三层级中分子节点的子节点层，渲染的数据可以包括临床科室的子节点名称，例如门诊、急诊和内科等。

通过可视化展示医院的组织架构，可以使用户简单明了地了解医院的主要组成部分，以及各组织之间的从属关系。

本实施例可以用于浏览器Web页面的渲染，只需利用基础的JavaScript和CSS技术即可完成开发。由于第一标签和第二标签可以设置不同样式，渲染得到的页面的美化效果更佳、观赏性好。并且，展示在Web页面的目标数据可以直接进行网页打印，对打印操作十分友好。

本发明实施例提供的一种页面渲染方法，对树结构的目标数据中各节点进行遍历，得到二维数组；二维数组中第一维度表征树结构的层级，第二维度表征同层级的节点；对二维数组进行遍历，确定各层级的节点数，以及确定各层级中从属于相同父节点的兄弟节点；针对各层级，创建包含全部节点的第一标签，以及在第一标签内创建包含兄弟节点的第二标签；根据页面参数、各层级的节点数以及各节点的从属关系，确定第一标签和第二标签的绘制参数；根据第一标签和第二标签的绘制参数，对目标数据进行页面渲染。

本发明实施例提供的技术方案中，通过遍历展开树结构的目标数据，能够得到可直观体现节点间的层级关系的二维数组。相较于遍历树结构的目标数据，本实施例通过遍历二维数组得到各层级的节点数和兄弟节点，能够加快遍历效率。通过将各层级包裹为第一标签，将各第一标签中每组兄弟节点包裹为第二标签，能够实现不同层级节点的区域划分，以及相同层级中从属于不同父节点的兄弟节点的区域划分。通过综合页面参数、各层级的节点数以及各节点的从属关系，确定第一标签和第二标签的绘制参数，并根据第一标签和第二标签的绘制参数对目标数据进行页面渲染，能够实现将树结构的目标数据完整、自适应地展示在页面上，提高可视化区域利用率。

实施例二

本实施例提供的页面渲染方法，能够与上述实施例中所提供的页面渲染方法中各个可选方案相结合。本实施例提供的生页面渲染方法，对确定第一标签和第二标签的绘制参数的步骤进行了详细描述。

通过根据页面参数和各层级节点数的最大值确定节点对应的页面控件的尺寸，能够避免各节点对应的页面控件之间重叠。通过根据每个第二标签中包含的兄弟节点的数量，可以确定第二标签的尺寸，进而可以确定包含第二标签的第一标签的尺寸，从而可以自适应设置各层级的区域尺寸。通过从目标数据的最低层级(即根节点所在层级)开始，根据页面参数设置第一标签的位置，以及根据节点之间从属关系设置第一标签中第二标签的位置，直到最高层级结束。不仅有利于确定各节点对应的页面控件的位置，还可以保证各节点对应的页面控件按照树结构的关系进行绘制。

本实施方式中，可以由局部到全局来确定绘制参数。在一些实现方式中，根据页面参数、各层级的节点数以及各节点的从属关系，确定第一标签和第二标签的绘制参数，可以包括：

步骤1，根据页面参数和各层级的节点数的最大值，确定各节点对应的页面控件的尺寸。

当从上到下布局目标数据的各层节点时，可以将页面参数中的宽度page Width除以节点数的最大数max Length，以根据求得的page Width/max Length设置各节点对应的页面控件的宽度，从而可以避免各页面控件在横向上重叠。当从左到右布局目标数据的各层节点时，可以将页面参数中的高度page Height除以节点数的最大数max Length，以根据求得的page Height/max Length设置各节点对应的页面控件的高度，从而可以避免各页面控件在纵向上重叠。

其中，可以根据目标数据和页面参数的具体情况，选择从上到下布局或从左到右布局目标数据的各层节点，以得到最佳的展示效果佳。

步骤2，根据各节点对应的页面控件的尺寸，以及各第二标签中包含的兄弟节点的数量，确定各第二标签的尺寸。

根据内层的页面控件尺寸和数量，可以适应性确定外层的第二标签的尺寸。示例性的，假设各节点对应页面控件的尺寸可以为w1×h1，第二标签内包含两个兄弟节点，且页面控件在第二标签内横向布局。那么，第二标签的尺寸可以为(2*w1+3*w2)×(h1+2*h2)，其中w2可以表示页面控件之间的横向间距，h2可以表示页面控件与第二标签边界框的纵向间距。

步骤3，根据各第一标签中包含的各第二标签的尺寸，确定各第一标签的尺寸。

通过根据每个第二标签中包含的兄弟节点的数量，可以确定第二标签的尺寸，进而可以确定包含第二标签的第一标签的尺寸，从而可以自适应设置各层级的区域尺寸。

示例性的，假设各第二标签的尺寸可以为w3×h3，第一标签内包含两个第二标签，且第二标签在第一标签内横向布局。那么，第一标签的尺寸可以为(2*w3+3*w4)×(h3+2*h4)，其中w4可以表示第二标签之间的横向间距，h4可以表示第二标签与第一标签边界框的纵向间距。

步骤4，将各层级按照由低到高的顺序，依次根据页面参数确定对应的第一标签的位置，以及根据对应的第二标签中各节点从属的父节点的位置，确定对应的第二标签的位置。

当从上到下布局目标数据的各层节点时，可以将页面从上到下依次布局各层级对应的第一标签，且根节点层级(即最低层级)对应的第一标签可以位于页面上方，即得到各第一标签的位置。并且，第二标签中兄弟节点可在低一层级中从属的父节点的位置下方，且可以左右排列，从而可以确定包裹该些兄弟节点的第二标签的位置。

当从左到右布局目标数据的各层节点时，可以将页面从左到右依次布局各层级对应的第一标签，且根节点层级(即最低层级)对应的第一标签可以位于页面左侧，即得到各第一标签的位置。并且，第二标签中兄弟节点可在低一层级中从属的父节点的位置右侧，且可以上下排列，从而可以确定包裹该些兄弟节点的第二标签的位置。

其中，可以通过浏览器提供的get Bounding Client Rect的方法，返回父节点的大小及其相对于视口的位置等参数，以便于进行第二标签位置的确定。

通过从目标数据的最低层级(即根节点所在层级)开始，根据页面参数设置第一标签的位置，以及根据节点之间从属关系设置第一标签中第二标签的位置，直到最高层级结束。不仅有利于确定各节点对应的页面控件的位置，还可以保证各节点对应的页面控件按照树结构的关系进行绘制。

在一些实施方式中，在根据对应的第二标签中各节点从属的父节点的位置，确定对应的第二标签的位置之前，还包括：根据当前层级对应的第二标签中任一节点的父节点标识字段的数据，以及当前层级的低一层级中节点的本节点标识字段的数据，确定对应的第二标签中各节点从属的父节点。

在这些实现方式中，可以遍历在当前层级对应的各第二标签，且可以在第二标签中任一节点的父节点标识字段的数据，与当前层级的低一层级中节点的本节点标识字段的数据相同时，将其确定为第二标签中各节点的父节点。进而可以确定父节点的位置等参数，以设置第二标签的位置参数。

本发明实施例提供的页面渲染方法，对确定第一标签和第二标签的绘制参数的步骤进行了详细描述。通过根据页面参数和各层级节点数的最大值确定节点对应的页面控件的尺寸，能够避免各节点对应的页面控件之间重叠。通过根据每个第二标签中包含的兄弟节点的数量，可以确定第二标签的尺寸，进而可以确定包含第二标签的第一标签的尺寸，从而可以自适应设置各层级的区域尺寸。通过从目标数据的最低层级(即根节点所在层级)开始，根据页面参数设置第一标签的位置，以及根据节点之间从属关系设置第一标签中第二标签的位置，直到最高层级结束。不仅有利于确定各节点对应的页面控件的位置，还可以保证各节点对应的页面控件按照树结构的关系进行绘制。

此外，本实施例提供的页面渲染方法与上述实施例提供的页面渲染方法属于同一技术构思，未在本实施例中详尽描述的技术细节可参见上述实施例，并且相同的技术特征在本实施例与上述实施例中具有相同的有益效果。

实施例三

图7是本发明实施例三提供的一种页面渲染装置的结构示意图。本实施例提供的页面渲染装置可适用于在页面中渲染树结构的目标数据的情况。

参见图7，本发明提供的页面渲染装置，可以包括：

数据遍历模块710，用于对树结构的目标数据中各节点进行遍历，得到二维数组；二维数组中第一维度表征树结构的层级，第二维度表征同层级的节点；

数组遍历模块720，用于对二维数组进行遍历，确定各层级的节点数，以及确定各层级中从属于相同父节点的兄弟节点；

标签创建模块730，用于针对各层级，创建包含全部节点的第一标签，以及在第一标签内创建包含兄弟节点的第二标签；

参数确定模块740，用于根据页面参数、各层级的节点数以及各节点的从属关系，确定第一标签和第二标签的绘制参数；

渲染模块750，用于根据第一标签和第二标签的绘制参数，对目标数据进行页面渲染。

在一些可选的实施方式中，数据遍历模块，可以具体用于：

将目标数据的根节点作为当前节点；

循环根据当前节点的子节点字段的数据，遍历当前节点的子节点，并将当前节点的子节点依次作为新的当前节点，直至各节点均被遍历为止；

在遍历过程中将同层级的节点的数据存储为一维数组，在遍历完毕时根据各一维数组生成二维数组。

在一些可选的实施方式中，数组遍历模块，可以具体用于：

将各层级中父节点标识字段的数据相同的节点，确定为从属于相同父节点的兄弟节点。

在一些可选的实施方式中，参数确定模块，可以具体用于：

根据页面参数和各层级的节点数的最大值，确定各节点对应的页面控件的尺寸；

根据各节点对应的页面控件的尺寸，以及各第二标签中包含的兄弟节点的数量，确定各第二标签的尺寸；

根据各第一标签中包含的各第二标签的尺寸，确定各第一标签的尺寸；

将各层级按照由低到高的顺序，依次根据页面参数确定对应的第一标签的位置，以及根据对应的第二标签中各节点从属的父节点的位置，确定对应的第二标签的位置。

在一些可选的实施方式中，参数确定模块，可以具体用于：

在根据对应的第二标签中各节点从属的父节点的位置，确定对应的第二标签的位置之前，根据当前层级对应的第二标签中任一节点的父节点标识字段的数据，以及当前层级的低一层级中节点的本节点标识字段的数据，确定对应的第二标签中各节点从属的父节点。

在一些可选的实施方式中，渲染模块，可以具体用于：

将目标数据中各节点的内容字段的数据，与各节点对应的页面控件进行绑定；

对绑定后的页面控件进行渲染。

在一些可选的实施方式中，目标数据包括组织架构数据。

本发明实施例所提供的页面渲染装置可执行本发明实施例所提供的页面渲染方法，具备执行方法相应的功能模块和有益效果。未详尽描述的技术细节，可参见本发明实施例所提供的页面渲染方法。

实施例四

图8是本发明实施例四提供的一种电子终端的结构示意图。图8示出了适于用来实现本发明实施方式的示例性电子终端12的框图。图8显示的电子终端12仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。设备12典型的是承担页面渲染功能的电子终端。

如图8所示，电子终端12以通用计算设备的形式表现。电子终端12的组件可以包括但不限于：一个或者多个处理器或者处理单元16，存储器28，连接不同组件(包括存储器28和处理单元16)的总线18。

总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(Industry StandardArchitecture，ISA)总线，微通道体系结构(Micro Channel Architecture，MCA)总线，增强型ISA总线、视频电子标准协会(Video Electronics Standards Association，VESA)局域总线以及外围组件互连(Peripheral Component Interconnect，PCI)总线。

电子终端12典型地包括多种计算机可读介质。这些介质可以是任何能够被电子终端12访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

存储器28可以包括易失性存储器形式的计算机装置可读介质，例如随机存取存储器(Random Access Memory，RAM)30和/或高速缓存存储器32。电子终端12可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机存储介质。仅作为举例，存储系统34可以用于读写不可移动的、非易失性磁介质(图8未显示，通常称为“硬盘驱动器”)。尽管图8中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如只读光盘(Compact Disc-Read Only Memory，CD-ROM)、数字视盘(Digital Video Disc-Read Only Memory，DVD-ROM)或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。存储器28可以包括至少一个程序产品40，该程序产品40具有一组程序模块42，这些程序模块被配置以执行本发明各实施例的功能。程序产品40，可以存储在例如存储器28中，这样的程序模块42包括但不限于一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本发明所描述的实施例中的功能和/或方法。

电子终端12也可以与一个或多个外部设备14(例如键盘、鼠标、摄像头等和显示器)通信，还可与一个或者多个使得用户能与该电子终端12交互的设备通信，和/或与使得该电子终端12能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口22进行。并且，电子终端12还可以通过网络适配器20与一个或者多个网络(例如局域网(Local Area Network，LAN)，广域网WideArea Network，WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器20通过总线18与电子终端12的其它模块通信。应当明白，尽管图中未示出，可以结合电子终端12使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、磁盘阵列(Redundant Arrays of Independent Disks，RAID)装置、磁带驱动器以及数据备份存储装置等。

处理器16通过运行存储在存储器28中的程序，从而执行各种功能应用以及数据处理，例如实现本发明上述实施例所提供的页面渲染方法，包括：

对树结构的目标数据中各节点进行遍历，得到二维数组；二维数组中第一维度表征树结构的层级，第二维度表征同层级的节点；对二维数组进行遍历，确定各层级的节点数，以及确定各层级中从属于相同父节点的兄弟节点；针对各层级，创建包含全部节点的第一标签，以及在第一标签内创建包含兄弟节点的第二标签；根据页面参数、各层级的节点数以及各节点的从属关系，确定第一标签和第二标签的绘制参数；根据第一标签和第二标签的绘制参数，对目标数据进行页面渲染。

当然，本领域技术人员可以理解，处理器还可以实现本发明实施例所提供的页面渲染方法的技术方案。

实施例五

本发明实施例五还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明实施例所提供的页面渲染方法，该方法包括：

对树结构的目标数据中各节点进行遍历，得到二维数组；二维数组中第一维度表征树结构的层级，第二维度表征同层级的节点；对二维数组进行遍历，确定各层级的节点数，以及确定各层级中从属于相同父节点的兄弟节点；针对各层级，创建包含全部节点的第一标签，以及在第一标签内创建包含兄弟节点的第二标签；根据页面参数、各层级的节点数以及各节点的从属关系，确定第一标签和第二标签的绘制参数；根据第一标签和第二标签的绘制参数，对目标数据进行页面渲染。

当然，本发明实施例所提供的一种计算机可读存储介质，其上存储的计算机程序不限于如上的方法操作，还可以执行本发明实施例所提供的页面渲染方法。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的装置、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行装置、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行装置、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (10)

1.一种页面渲染方法，其特征在于，包括：

对树结构的目标数据中各节点进行遍历，得到二维数组；所述二维数组中第一维度表征所述树结构的层级，第二维度表征同层级的节点；

对所述二维数组进行遍历，确定各层级的节点数，以及确定所述各层级中从属于相同父节点的兄弟节点；

针对所述各层级，创建包含全部节点的第一标签，以及在所述第一标签内创建包含所述兄弟节点的第二标签；

根据页面参数、所述各层级的节点数以及所述各节点的从属关系，确定所述第一标签和所述第二标签的绘制参数；

根据所述第一标签和所述第二标签的绘制参数，对所述目标数据进行页面渲染。

2.根据权利要求1所述的方法，其特征在于，所述对树结构的目标数据中各节点进行遍历，得到二维数组，包括：

将目标数据的根节点作为当前节点；

循环根据所述当前节点的子节点字段的数据，遍历所述当前节点的子节点，并将所述当前节点的子节点依次作为新的当前节点，直至所述各节点均被遍历为止；

在遍历过程中将同层级的节点的数据存储为一维数组，在遍历完毕时根据各所述一维数组生成二维数组。

3.根据权利要求1所述的方法，其特征在于，所述确定所述各层级中从属于相同父节点的兄弟节点，包括：

将各层级中父节点标识字段的数据相同的节点，确定为从属于相同父节点的兄弟节点。

4.根据权利要求1所述的方法，其特征在于，所述根据页面参数、所述各层级的节点数以及所述各节点的从属关系，确定所述第一标签和所述第二标签的绘制参数，包括：

根据页面参数和所述各层级的节点数的最大值，确定所述各节点对应的页面控件的尺寸；

根据所述各节点对应的页面控件的尺寸，以及各所述第二标签中包含的兄弟节点的数量，确定各所述第二标签的尺寸；

根据各所述第一标签中包含的各所述第二标签的尺寸，确定各所述第一标签的尺寸；

将各所述层级按照由低到高的顺序，依次根据所述页面参数确定对应的第一标签的位置，以及根据对应的第二标签中各节点从属的父节点的位置，确定对应的第二标签的位置。

5.根据权利要求4所述的方法，其特征在于，在所述根据对应的第二标签中各节点从属的父节点的位置，确定对应的第二标签的位置之前，还包括：

根据当前层级对应的第二标签中任一节点的父节点标识字段的数据，以及所述当前层级的低一层级中节点的本节点标识字段的数据，确定所述对应的第二标签中各节点从属的父节点。

6.根据权利要求1所述的方法，其特征在于，对所述目标数据进行页面渲染，包括：

将所述目标数据中各节点的内容字段的数据，与所述各节点对应的页面控件进行绑定；

对绑定后的页面控件进行渲染。

7.根据权利要求1-6中任一所述的方法，其特征在于，所述目标数据包括组织架构数据。

8.一种页面渲染装置，其特征在于，包括：

数据遍历模块，用于对树结构的目标数据中各节点进行遍历，得到二维数组；所述二维数组中第一维度表征所述树结构的层级，第二维度表征同层级的节点；

数组遍历模块，用于对所述二维数组进行遍历，确定各层级的节点数，以及确定所述各层级中从属于相同父节点的兄弟节点；

标签创建模块，用于针对所述各层级，创建包含全部节点的第一标签，以及在所述第一标签内创建包含所述兄弟节点的第二标签；

参数确定模块，用于根据页面参数、所述各层级的节点数以及所述各节点的从属关系，确定所述第一标签和所述第二标签的绘制参数；

渲染模块，用于根据所述第一标签和所述第二标签的绘制参数，对所述目标数据进行页面渲染。

9.一种电子终端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-7中任一所述的页面渲染方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-7中任一所述的页面渲染方法。

Images