CN110688531B - 树组件渲染方法和装置、数据处理设备及介质 - Google Patents

Abstract

本发明公开了树组件渲染方法和装置、数据处理设备及介质。该树组件渲染方法包括：得到列表形式的数据节点；标记数据节点的索引值和节点关系；确定待渲染的数据节点；基于数据节点的所述索引值和所述节点关系，确定待渲染的数据节点的显示位置并在内部第二标签中进行待渲染的数据节点层级的显示，其中在渲染之前，设置父级标签、内部第一标签、所述内部第二标签，其中：父级标签的高度为画面可视区高度；内部第一标签的高度与待显示的数据节点列表的高度相同，用于支撑树结构，并且形成用于滚动显示的滚动条；内部第二标签用于渲染待渲染的数据节点。本发明能够实现支持大量数据渲染的树组件。

Description

树组件渲染方法和装置、数据处理设备及介质

技术领域

本发明涉及数据处理技术，尤其涉及数据处理方法和装置、数据处理设备及介质。

背景技术

树是前端页面中常用的组件，但是，一般的树组件只能支持少量数据的使用，一般在3000个以上的数据节点就会有明显的渲染延迟、选中及检索操作卡顿等问题。无法实现上万乃至更多数据节点的流畅渲染和操作。

对于一些应用场景，比如安防行业的几万路相机所构成的树结构的一次性展示，需要具备高性能的树组件。

发明内容

为了解决以上问题之一，本发明提供了树组件渲染方法和装置、数据处理设备及介质，以提供高性能的树组件。

根据本发明的一个实施例，提供一种树组件渲染方法，该方法包括：扁平化步骤，得到列表形式的数据节点；信息标记步骤，标记数据节点的索引值和节点关系；节点确定步骤，确定待渲染的数据节点；渲染步骤，基于数据节点的所述索引值和所述节点关系，确定待渲染的数据节点的显示位置并在内部第二标签中进行待渲染的数据节点层级的显示，其中在渲染之前，设置父级标签、内部第一标签、所述内部第二标签，其中：父级标签的高度为画面可视区高度；内部第一标签的高度与待显示的数据节点列表的高度相同，用于支撑树结构，并且形成用于滚动显示的滚动条；内部第二标签用于渲染待渲染的数据节点。

根据本发明的一个实施例，提供一种树组件渲染装置，该装置包括：扁平化模块，得到列表形式的数据节点；信息标记模块，用于标记数据节点的节点关系；渲染模块，用于基于数据节点的索引值和所述节点关系，确定待渲染的数据节点的显示位置并在内部第二标签中进行待渲染的数据节点层级的显示，其中在渲染之前，设置父级标签、内部第一标签、所述内部第二标签，其中：父级标签的高度为画面可视区高度；内部第一标签的高度与待显示的数据节点列表的高度相同，用于支撑树结构，并且形成用于滚动显示的滚动条；内部第二标签用于渲染待渲染的数据节点。

根据本发明的再一个实施例，提供一种数据处理设备，包括：处理器；以及存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行上面描述的方法之一。

根据本发明的又一个实施例，提供一种非暂时性机器可读存储介质，其上存储有可执行代码，当所述可执行代码被处理器执行时，使所述处理器执行上面描述的方法之一。

本发明实施例通过将树结构的数据节点扁平化为数据节点列表，以列表可视区渲染的方式实现渲染，大大提高了渲染效率；利用信息标记步骤标记的数据节点的索引值和节点关系，能够快速查找到当前数据节点的子节点和祖先节点，从而能够快速筛选出所要渲染的数据节点。

另外，在本发明实施例中，利用信息标记步骤标记的数据节点的索引值和节点关系，可以高效获取当前节点的相关节点，从而实现高效的节点选中操作。

从而，本发明能够实现支持大量数据渲染的树组件，并能进行流畅的节点显示、节点查找、节点选中等操作。

附图说明

通过结合附图对本公开示例性实施方式进行更详细的描述，本公开的上述以及其它目的、特征和优势将变得更加明显，其中，在本公开示例性实施方式中，相同的附图标记通常代表相同部件。

图1示出了根据本发明的一个示例性实施例的树组件渲染方法的示意性流程图。

图2示出了根据本发明的一个示例性实施例的树组件视图环境。

图3给出了根据本发明的一个示例性实施例的用于解释树组件的节点索引值和节点关系的示意图。

图4给出了根据本发明的一个示例性实施例的树组件的呈现方式的示意图。

图5给出了根据本发明的一个示例性实施例的用于解释树组件的节点选中的示意图。

图6给出了根据本发明的一个示例性实施例的一个相对完整的树组件渲染过程的示意性流程图。

图7给出了根据本发明的一个示例性实施例的树组件渲染装置的示意性框图。

图8给出了根据本发明的一个示例性实施例的数据处理设备的示意性框图。

具体实施方式

下面将参照附图更详细地描述本公开的优选实施方式。虽然附图中显示了本公开的优选实施方式，然而应该理解，可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。这里需要说明的是，本申请中的数字、序号以及附图标记仅是为了方便描述而出现的，对于本发明的步骤、顺序等等均不构成任何限制，除非在说明书中明确指出了步骤的执行有特定的先后顺序。

为了解决树组件在大量数据传入时的渲染缓慢、查找筛选、联动选择卡顿甚至页面假死的问题，本发明提出了基于可视区渲染的支持大数据量(例如十万多的数据量)的高性能树组件。

具体地，如图1所示，根据本发明的一个示例性实施例的树组件渲染方法可以包含以下步骤。

步骤S100为扁平化步骤，得到列表形式的数据节点。

本发明实施例可以在可视区域以树结构的形式展示数据节点。

在传统方法中，将数据节点存储为树组件(树组件包括数据节点)，以树结构的形式渲染数据节点，这种渲染方式导致渲染效率低下。本发明实施例先将树结构的数据节点扁平化为列表形式的数据节点，以列表的形式进行数据节点的渲染，可提高渲染效率。

步骤S120为信息标记步骤，用于标记每个数据节点的索引值和节点关系。

树结构的数据节点被扁平化为列表形式后，无法通过数据节点的结构获知数据节点的层级关系，因此需要对列表形式的数据节点进行标记。通过标记每个数据节点的索引值和节点关系来获知数据节点之间的层级关系。

数据节点可以包括若干关键字段信息，其中节点ID用来唯一地标识各个数据节点。除节点ID外，数据节点的关键字段信息还包括索引值和节点关系。索引值也用来唯一地标识各个数据节点，与节点ID不同的是，索引值与数据节点的层级关系有关，且其数值具有一定的变化规律。利用信息标记步骤标记的数据节点的索引值和节点关系，能够快速查找到当前数据节点的子节点和祖先节点，从而能够快速筛选出所要渲染的数据节点。

步骤S120为节点确定步骤，用于确定待渲染的数据节点。

在每一次渲染前都要确定待渲染的数据节点。待渲染的数据节点为待显示的数据节点的子集。待显示的数据节点为用户所要查看的全部数据节点，待渲染的数据节点为用户通过本次渲染能够看到的数据节点。受限于显示屏的大小，当待显示的数据节点较多时，无法在一屏中看到全部的待显示的数据节点，只能先渲染并显示一部分数据节点，用户浏览完这部分数据节点后会滚动滚动条，根据滚动条滚动的距离，可获知下一次渲染所要使用的待渲染的数据节点。

例如，目前用户需要以树结构的形式在电子设备的显示屏中显示A区域的所有相机，其中A区域包含A-1、A-2、A-33个子区域，每个子区域下有4个相机，每个相机是一个数据节点，共有12个数据节点，这12个数据节点为待显示的数据节点。然而，受限于显示屏的大小，无法一次显示所有数据节点，只能先渲染8个数据节点并显示在显示屏中，这8个数据节点为本次渲染对应的待渲染的数据节点。用户查看这8个数据节点后再会滚动滚动条，根据滚动条滚动的距离，可获知下一次渲染所要使用的待渲染的数据节点为剩余的4个数据节点，即对于下一次渲染来说，待渲染的节点为剩余的4个数据节点。

步骤S130为渲染步骤，用于基于数据节点的所述索引值和所述节点关系，确定待渲染的数据节点的显示位置并在内部第二标签中进行待渲染的数据节点层级的显示。

其中，在渲染之前，设置父级标签、内部第一标签、所述内部第二标签，如图2所示，父级标签(父级div)的高度为画面可视区高度；内部第一标签(内部div1)的高度与待显示的数据节点列表的高度(在前例中，为12个数据节点的高度)相同，用于支撑树结构，并且形成用于滚动显示的滚动条；内部第二标签(内部div2)用于渲染待渲染的数据节点，内部第一标签和内部第二标签的顶部始终平齐。

待渲染的数据节点渲染在内部第二标签中时，需要确定待渲染的数据节点、待渲染数据节点的显示位置、每个待渲染数据节点的层级，如此才能将待渲染的数据节点在可视区内显示为树结构。为将所有待渲染的数据节点显示在可视区中，待渲染的数据节点在内部第二标签中的起始显示位置(即待渲染的数据节点中的第一个节点在内部第二标签中的显示位置)位于画面可视区顶部，内部第二标签的顶部到起始位置之间的区域用空白填充，内部第二标签的顶部到起始位置之间的区域的高度为填充高度。

在一个例子中，为了提高渲染速度，可以把内部第一标签设置为空。

可以理解的是，当待显示的数据节点列表的高度大于画面可视区高度时，在内部第一标签中形成用于滚动显示的滚动条。当待显示的数据节点列表的高度小于或等于画面可视区高度时，在内部第一标签中不形成滚动条，待渲染的数据节点与待显示的数据节点相同。

本发明实施例通过将树结构的数据节点扁平化为数据节点列表，以列表可视区渲染的方式实现渲染，大大提高了渲染效率；利用信息标记步骤标记的数据节点的索引值和节点关系，能够快速查找到当前数据节点的子节点和祖先节点，从而能够快速筛选出所要渲染的数据节点，以进一步提高渲染效率。

在一个实施例中，步骤S110包括步骤S150：对于每个数据节点，用层级标记来表示该节点对应的层级，用父级标记来表示该节点的父级。

其中，所述节点关系包括节点的层级标记和父级标记信息。

层级标记(可以用‘z’来表示)用于标记当前节点对应的层级，在一个例子中，层级标记越大，数据节点的层级越低。在另一个例子中，层级标记越小，数据节点的层级越低。

图3显示了一个渲染完成的树结构的数据节点页面，每行代表一个数据节点，数据节点的左缩进值越大，数据节点的层级越低。每行的长数字为该数据节点的节点ID。为便于理解，在该页面上手动标注了每个数据节点的层级标记(图3中每行第一个数字)，真实的显示页面并不包含层级标记。例如层级标记为0代表该数据节点是父级(图3中未显示)，层级标记为1的数据节点是层级标记为0的数据节点的子级，层级标记为2的数据节点是层级标记为1的数据节点的子级，以此类推)。

在一个例子中，可以根据节点的层级标记生成节点ID，例如将节点的层级标记作为节点ID的第一位数字。

父级标记用来记录当前节点的父级。父级标记可以包含父级节点的节点ID，也可以包含父级节点的索引值。

在一个例子中，在步骤S110中所述标记数据节点的索引值包括：将数据节点展开，其中，所述展开是指如果一个父节点有子节点，则在该父节点下排列其所有子节点，按照展开后的数据节点的排列顺序赋予每个数据节点索引值，其中相邻节点之间的索引值按照固定值递增或递减。

图3中还标注了每个数据节点的索引值(右侧数字)。在本例中，由上至下的相邻数据节点的索引值依次按照固定值1递增。

在一个实施例中，步骤S110还包括：通过生成映射对象来建立节点ID和节点的对应关系。

如此便可以根据数据节点的节点ID直接找到数据节点，提高数据节点的查找速度。

在一个实施例中，步骤S120包括：

步骤S160：确定待显示的数据节点。

待显示的数据节点可以是全部数据节点，也可以是满足检索查找条件的数据节点，还可以是某些数据节点响应于用户的节点展开指令而展开后所得到的数据节点。

续举前例，待显示的数据节点可以为A区域的全部12个数据节点，也可以为A-1区域的4个数据节点。

步骤S170：根据在节点浏览时所述滚动条滚动的距离和所述画面可视区高度，计算出待渲染的数据节点在待显示的数据节点中的起始位置和结束位置，并从待显示的数据节点中截取出待渲染的数据节点。

例如，第一次节点浏览时用户未滚动滚动条，根据在节点浏览时所述滚动条滚动的距离和所述画面可视区高度，计算出待渲染的数据节点在待显示的数据节点中的起始位置为第1个节点，结束位置为第8个节点，从待显示的12个数据节点中截取出第1-8个数据节点作为本次待渲染的数据节点，并将这8个数据节点渲染并显示在可视区中。

用户浏览完这8个节点后滚动滚动条，滚动条的滚动即触发下一次数据节点的渲染。根据在节点浏览时所述滚动条滚动的距离和所述画面可视区高度，计算出待渲染的数据节点在待显示的数据节点中的起始位置为第9个节点，结束位置为第12个节点，从待显示的12个数据节点中截取出第9-12个数据节点作为待渲染的数据节点，并将这4个数据节点渲染并显示在可视区中，从而完成全部待显示的数据节点的显示。

在一个实施例中，步骤S160包括：

步骤S170：响应于用户的检索指令，确定出满足检索条件的数据节点，所述检索条件包含在检索指令中。

待显示的数据节点可以不是所有的数据节点，而是满足特定检索条件的数据节点，检索条件可以包含在检索指令中，检索指令可以由用户通过显示页面的检索框输入。检索条件可以是某个或某些数据节点的节点ID或索引值，也可以是某个或某些数据节点的节点ID或索引值的一部分。例如当检索条件为“123456”时，可检索出节点ID或索引值中含有123456的数据节点。

步骤S180：由所述满足检索条件的数据节点确定出所述满足检索条件的数据节点的祖先节点，所述待显示的数据节点包括所述满足检索条件的数据节点以及所述满足检索条件的数据节点的祖先节点。

当检索出满足某些特定检索条件的数据节点后，用户通常希望看到的不是孤零零的数据节点，而是这些数据节点及与这些数据节点相关的数据节点组成的树结构。在一个例子中，当检索出满足某些特定检索条件的数据节点后，待显示的数据节点包括所述满足检索条件的数据节点以及所述满足检索条件的数据节点的祖先节点。如此，用户可获知满足检索条件的数据节点在树结构中所在的层级。

在一个实施例中，步骤S160还包括：

步骤S180：响应于用户的节点展开指令，确定出展开节点的子节点，其中，所述节点展开指令包括所述展开节点，所述展开节点选自具有子节点的数据节点。

在一个例子中，当检索出满足某些特定检索条件的数据节点后，待显示的数据节点包括所述满足检索条件的数据节点以及所述满足检索条件的数据节点的祖先节点，而默认不包括满足检索条件的数据节点的子节点，以避免待显示的数据节点过多，使满足检索条件的数据节点在树结构的层级不能明了的展示给用户。然而，用户可以通过节点展开指令，使满足条件的数据节点的子节点也得以显示。在一个例子中，节点展开指令可以通过点击节点展开按钮给出。如图3所示，数据节点左侧的三角形即为该数据节点对应的节点展开按钮，节点展开按钮为朝向右侧的三角形时，其对应的数据节点的子节点不展开显示，此时点击节点展开按钮，节点展开按钮变为倒三角形，其对应的数据节点的子节点展开显示。此时再次点击节点展开按钮，节点展开按钮变回朝向右侧的三角形，其对应的数据节点的子节点不展开显示。对于无子节点的数据节点，其左侧没有节点展开按钮。

步骤S190：由所述展开节点确定出所述展开节点的祖先节点，所述待显示的数据节点包括所述展开节点、所述展开节点的祖先节点以及所述展开节点的子节点。

当用户对某个数据节点给出节点展开指令时，把该数据节点称为展开节点。此时待显示的数据节点不仅包括所述展开节点、所述展开节点的祖先节点，还包括所述展开节点的子节点。

在一个实施例中，步骤S180包括：

步骤S200：根据用户的节点展开指令，确定所述展开节点。

可以理解，用户对哪个数据节点给出节点展开指令，哪个节点即为要展开子节点的展开节点。

步骤S210：从索引值为所述展开节点的索引值与所述固定值相加之和或与所述固定值相减之差的数据节点处开始，逐一查看索引值递增或递减的数据节点，当查看到层级标记小于等于或大于等于所述展开节点的层级标记值的数据节点时，则停止查看，并将在该查看过程中查看到的全部节点作为所述展开节点的子节点。

标记索引值时，是在父节点的下方展开其所有子节点，按照展开后的数据节点由上至下的排列顺序依次递增或递减的赋予每个数据节点索引值，也即，展开节点下方的第一个子节点的索引值比展开节点的索引值增加或减少固定值，展开节点的最后一个子节点的下一个子节点不再是展开节点的子节点，其层级等于或高于展开节点。因此，要想查找一个数据节点的子节点，需要从索引值为所述展开节点的索引值与所述固定值相加之和或相减之差的数据节点(即该展开节点下的第一个数据节点)处开始，到层级等于或高于展开节点的数据节点为止(若层级标记越小，层级越高，则到层级标记小于等于展开节点的层级标记的数据节点为止；若层级标记越大，层级越高，则到层级标记大于等于展开节点的层级标记的数据节点为止)。

在一个例子中，索引值的标记规则可以为：由上至下的相邻数据节点的索引值依次按照固定值1递增；层级标记的标记规则可以为，层级标记越小，数据节点的层级越高。此时查找展开节点的子节点的方式为，从索引值为所述展开节点的索引值+1的数据节点处开始，逐一查看索引值递增的数据节点的层级标记，当查看到层级标记小于或等于所述展开节点的层级标记值的数据节点时，则停止查看，并将在该查看过程中查看到的除最后一个查看的数据节点以外的全部节点作为所述展开节点的子节点。例如，图3中索引值为2346、层级标记为2的数据节点为展开节点，从索引值为2347的数据节点开始，逐一查看索引值递增的数据节点的层级标记，当查看到索引值为2353的数据节点时，其层级标记等于展开节点的层级标记，此时停止查看，并将查看过程中查看到的除索引值为2353的数据节点以外的全部数据节点(即索引值为2347-2352的数据节点)作为索引值为2346的数据节点的子节点。再例如，假设当前节点的索引值是2351，则从2352开始查找，发现2352的层级标记小于或等于当前节点的层级标记，则停止查找，由此判断当前节点没有子节点。

如此，可快速获得展开节点的子节点，进一步提高渲染效率。

下两个实施例中将描述如何由一个数据节点获得其祖先节点。

在一个实施例中，步骤S180和/或步骤S190包括：通过当前节点的所述父级标记得到该节点的父节点的节点ID或索引值，再从该父节点的父级标记得到该父节点的父节点的节点ID或索引值，直到得到当前节点的所有祖先节点。

在本实施例中，一个数据节点的父级标记包含该数据节点的父节点的节点ID或索引值。通过父级标记逐层查找，即可得到当前节点的所有祖先节点。

在另一个实施例中，步骤S180和/或步骤S190包括：

所述节点关系还包括节点的父级标记集合，所述父级标记集合用于记录一个节点的所有祖先节点的节点ID或索引值，

通过当前节点的父级标记集合，得到该节点的所有祖先节点。

在本实施例中，一个数据节点的所有祖先节点的节点ID或索引值已经汇聚在该数据节点的父级标记集合中，无需逐层查找即可一次性的得到所有祖先节点的节点ID或索引值。

以上两个实施例的方案，可快速获得当前节点的祖先节点，进一步提高渲染效率。

在一个实施例中，步骤S130包括：

步骤S220:根据待渲染的数据节点在待显示的数据节点中的起始位置，确定待渲染的数据节点在内部第二标签中的起始显示位置。

可以根据待渲染的数据节点在待显示的数据节点中的起始位置来设置填充高度，填充区域下方的位置即为待渲染的数据节点的在内部第二标签中的起始显示位置。假如待渲染的数据节点中的第一个数据节点为待显示的2000个数据节点中的第10个(一个数据节点为一行，待渲染的数据节点在待显示的数据节点中的起始位置为第10行)，即前面有9个数据节点，那么填充高度就是9*节点行高(这里假定每个节点，无论父节点还是子节点，它们的行高都是一样的)。

滚动条滚动时，内部第一标签和内部第二标签的顶部总是对齐并绑定在一起的，顶部相对于父级标签的可视区滚动。例如滚动条向下滚动时，内部第一标签和内部第二标签的顶部相对于父级标签的可视区向上滚动。待渲染的数据节点在待显示的数据节点中的起始位置为第3行时，内部第一标签和内部第二标签的顶部距离父级标签的可视区很近或者就在可视区内，需要较小的填充高度(2*节点行高)就能把要待渲染的数据节点显示在可视区，待渲染的数据节点在待显示的数据节点中的起始位置为第300行时，内部第一标签和内部第二标签的顶部距离可视区很远，需要较大的填充高度(299*节点行高)才能把待渲染的数据节点显示在可视区。

步骤S230：根据待渲染的数据节点的层级标记来设置待渲染的数据节点显示的左缩进值。

依据通常的显示习惯，层级标记对应的层级越高，左缩进值越小。

确定了待渲染的数据节点的起始显示为止和左缩进值，才能对数据节点进行渲染并得到以树结构显示数据节点的效果。

请注意，步骤S220和S230可先后执行或同时执行，本发明对于二者的执行顺序无需做任何限定。

在一个实施例中，步骤S130包括：

步骤S240：根据用户的节点选择指令，确定待渲染的数据节点的选中状态并在所述内部第二标签中进行选中状态的显示。

在某些情况下，用户需要对某些数据节点而非全部数据节点进行后续操作，这时用户可通过节点选择指令选择需要执行后续操作的节点。这时就需要在展示给用户的渲染页面体现数据节点的选中状态。

数据节点可以以选中标记(例如ifChecked)来表示其选中状态，通过更改数据节点的ifChecked属性，即可更改其选中状态。不具有子节点的数据节点的选中状态可以为选中或未选中。具有子节点的数据节点的选中状态可以为选中、未选中或半选中(当其部分子节点被选中，部分子节点未被选中时)。

可以理解的是，为提高渲染效率，可以只对选中状态发生变化的数据节点进行重新渲染，而不渲染选中状态未发生变化的数据节点。

在一个例子中，用户的节点选择指令可以为勾选，数据节点的选中状态可通过数据节点的选中标记(例如可以是位于数据节点前面的选择框)的不同状态表示。如图4所示，当选择框为空白时，表示该数据节点的选中状态为未选中；当选择框为对号时，表示该数据节点的选中状态为选中；当选择框为减号时，表示该数据节点的选中状态为半选中，“半选中”表示该数据节点的部分子节点被选中，部分子节点未被选中。

在一个实施例中，步骤S240包括：根据用户的节点选择指令，确定用户选择的数据节点的选中状态，并且，基于所述用户选择的数据节点的选中状态，对用户选择的数据节点的子节点和/或祖先节点进行选中状态的设置或更改。

可以理解的是，当一个数据节点的选中状态被改变时，其子节点或祖先节点的选中状态也会被改变。例如，当一个数据节点被选中时，其子节点的选中状态均改为被选中。当一个数据节点的选中状态由选中变为未选中时，如果该数据节点的父节点的其他子节点的选中状态均为未选中且未发生变化，那么该数据节点的父节点的选中状态将由半选中变为未选中，如果该数据节点的父节点的其他子节点的选中状态均为选中且未发生变化，那么该数据节点的父节点的选中状态将由选中变为半选中。因此，需要基于所述用户选择的数据节点的选中状态，对用户选择的数据节点的子节点和/或祖先节点进行选中状态的联动设置。

用户的节点选择指令可以为非批量节点选择指令和批量节点选择指令。

非批量节点选择指令可以由用户通过勾选选择的几个或几十个数据节点来输入。在这种情况下，因为选中状态发生变化而需要重新渲染的数据节点的数据较少，对渲染效率要求不高。

在一个实施例中，对于非批量节点选择指令，可以通过以下步骤确定选中状态发生改变的节点(当前节点)的子节点和父节点的选中状态：

1)设置当前节点的选中状态。

2)设置当前节点的子节点的选中状态。

首先，需要查找当前节点的子节点。如前所述，可以从当前节点的索引值+1开始查找，查找到层级标记值小于或等于当前节点的层级标记值的数据节点，则停止查找，这样就能找到当前节点的全部子节点。

然后，根据当前节点的选中状态，更改其所有子节点的选中状态。当前节点为选中，则其子节点的选中状态为选中；当前节点为未选中，则其子节点的选中状态为未选中(在本实施例中，当前节点的选中状态由用户通过勾选确定，因此当前节点不存在半选中的选中状态)。

3)设置父节点的选中状态。

首先，需要查找父节点。在本实施例中，可以通过当前节点的父级标记来递归查找当前节点的祖先节点，或通过当前节点的父级标记集合以反向遍历的形式实现祖先节点的快速查找。

然后，需要确定父节点的状态。如前所述，在子节点全选中或全未选中时，对应的父节点的状态为选中或未选中，而如果有些子节点选中有些子节点未选中，则父节点的状态为半选。

批量节点选择指令可以由用户通过批量输入需要改变选中状态的数据节点ID来输入。在这种情况下，因为选中状态发生变化而需要重新渲染的数据节点的数据较多(例如，几千个)，对渲染效率要求很高，这就需要快速获取选中状态需要变化的数据节点。以下两个实施例描述在获取到批量节点选择指令后，如何快速获取选中状态需要变化的数据节点。可以理解的是，如果获取到的是非批量节点选择指令，也可以通过以下两个实施例中描述的方法快速获取选中状态需要变化的数据节点。

在一个实施例中，，步骤S240包括：

1)遍历用户选择的数据节点中的选中节点以去除下述这样的子节点：在节点选择指令中，该子节点的所有同级子节点均被选中，并且该子节点的父节点也被选中；

2)在上述的去除子节点的操作之后，对剩余的被选中节点进行关联设置，即在设置父节点选中时，同时设置该父节点的所有子节点为选中状态。

由于要改变大量数据节点的选中状态，希望对一个数据节点，只改变其选中状态一次，而不重复改变数据节点的选中状态，从而提高效率。例如在同一时刻批量选中了A、B、A1、A2、A3，其中A1、A2、A3是A的全部子节点。因为A被选中，其子节点A1-A4的选中状态都会随之变为选中，即使不单独设置A1、A2、A3的选中状态，A1、A2、A3的选中状态也会变为选中。为避免重复设置，可以先遍历用户选择的数据节点中的选中节点以去除A1、A2、A3，然后对A、B及其子节点进行关联设置。通过关联设置，可以在设置父节点选中的时候，批量设置该父节点的所有子节点为相同的选中状态，以提高数据节点选中状态的设置效率。

在一个实施例中，步骤S240还包括：步骤S250：若某个子节点为选中节点，则先缓存需要更改选中状态的该子节点的祖先节点，然后在接收到用户一时间段内的所有节点选择指令后，将缓存的祖先节点排序，从该子节点的父节点开始，按照层级由低到高的顺序依次设置或更改各层级祖先节点的选中状态。

在步骤S250中，首先查找父节点。当数据量大时，通过父级标记来递归查找祖先节点的方式在性能上会有明显的延迟，因此，根据本发明的实施例，可以通过当前节点的父级标记集合进行祖先节点的快速查找。

然后，确定各祖先节点的选中状态。先缓存需要更改选中状态的祖先节点，然后将这些祖先节点按照其层级排序，再从层级最低的祖先节点开始，依次更改各级祖先节点的选中状态。

如此，能够避免对祖先节点的选中状态进行重复设置，从而能够提高数据节点选中状态的设置效率。

下面通过图5中的例子进行说明以更好的理解步骤S250。两个方框对应的两个数据节点为并列的子节点，箭头所指的数据节点为二者的父节点，该父节点的选中状态受两个子节点选中状态的影响。当其中一个方框对应的子节点选中时，需要更改其父节点的状态，但是这时不急于更改其父节点的选中状态，而是把该父节点的选中状态缓存起来，以防另一个方框对应的子节点的选中状态更改时，该父节点的选中状态需要再重复设置一次。可以理解的是，该父节点的选中状态改变后，可能会影响该父节点的父节点以及更高级的祖先节点的选中状态。同样的，为避免这些祖先节点选中状态的重复设置，需要把该父节点的祖先节点的选中状态缓存起来。

当其选中状态被两个方框对应的两个子节点的选中状态影响的祖先节点(在图4中，为箭头所指的父节点和其祖先节点)都缓存完毕后，将这些祖先节点排序，再从层级最低的数据节点(即箭头所指的父节点)开始，依次设置各级数据节点的选中状态。在进行选中状态的设置时，如果某个祖先节点的选中状态是半选中，那么比他层级更高的祖先节点的选中状态也一定是半选中，这样就避免了重新获取子节点来校验父节点选中状态的计算步骤。

图6给出了根据本发明的一个示例性实施例的一个相对完整的树组件渲染过程的示意性流程图。

如图6所示，在数据节点传入时，先判断传入的数据节点的结构是否为列表形式，如果是，则直接转化为节点数据。如果不是，则需要对其进行扁平化处理，得到列表形式的数据节点。

根据用户的检索指令，进行数据的查找筛选，得到满足检索指令中的检索条件的数据节点，满足检索指令中的检索条件的数据节点即为待显示的数据节点。

内部第一标签的高度大于父级标签的高度，因此会生成滚动条。根据滚动条的滚动距离，可以从待显示的数据节点中确定除待渲染的数据节点。

然后，确定待渲染的数据节点的显示位置并在内部第二标签中进行待渲染的数据节点层级的显示，以进行渲染。

本发明实施例通过将树结构的数据节点扁平化为数据节点列表，以列表可视区渲染的方式实现渲染，大大提高了渲染效率；利用信息标记步骤标记的数据节点的索引值和节点关系，能够快速查找到当前数据节点的子节点和祖先节点，从而能够快速筛选出所要渲染的数据节点。

另外，在本发明实施例中，利用信息标记步骤标记的数据节点的索引值和节点关系，可以高效获取当前节点的相关节点，从而实现高效的节点选中操作。

从而，本发明能够实现支持大量数据渲染的树组件，并能进行流畅的节点显示、节点查找、节点选中等操作。

图7给出了根据本发明的一个示例性实施例的树组件渲染装置1000的示意性框图。

如图7所示，该树组件渲染装置1000可以包括扁平化模块100、信息标记模块110、节点确定模块120、渲染模块130。

其中，扁平化模块100可以用于得到列表形式的数据节点。

信息标记模块110可以用于标记数据节点的节点关系。

节点确定模块120可以用于确定待渲染的数据节点。

渲染模块130可以用于基于数据节点的索引值和上述的节点关系，确定待渲染的数据节点的显示位置并在内部第二标签中进行待渲染的数据节点层级的显示。

并且，在渲染之前，设置父级标签、内部第一标签、上述的内部第二标签。其中，父级标签的高度为画面可视区高度；内部第一标签的高度与待显示的数据节点列表的高度相同，用于支撑树结构，并且形成用于滚动显示的滚动条；而内部第二标签用于渲染待渲染的数据节点。

另外，根据本发明的另一个示例性实施例，渲染模块130可以根据用户的节点选择指令，确定待渲染的数据节点的选中状态并在所述内部第二标签中进行选中状态的显示。

请注意，上述的扁平化模块100、信息标记模块110、节点确定模块120、渲染模块130的操作与上述的树渲染方法中的步骤S100、S110、S120、以及S130的操作相对应，因此不再赘述。

另外，上述的其他步骤的操作也可以由树组件渲染装置1000(具体地，比如该装置中的相应模块)来执行，在此不再赘述。

图8给出了根据本发明的一个示例性实施例的数据处理设备的示意性框图。

参见图8，该数据处理设备1包括存储器10和处理器20。

处理器20可以是一个多核的处理器，也可以包含多个处理器。在一些实施例中，处理器20可以包含一个通用的主处理器以及一个或多个特殊的协处理器，例如图形处理器(GPU)、数字信号处理器(DSP)等等。在一些实施例中，处理器20可以使用定制的电路实现，例如特定用途集成电路(ASIC，Application Specific Integrated Circuit)或者现场可编程逻辑门阵列(FPGA，Field Programmable Gate Arrays)。

存储器10上存储有可执行代码，当所述可执行代码被所述处理器20执行时，使所述处理器20执行上面描述的方法之一。其中，存储器10可以包括各种类型的存储单元，例如系统内存、只读存储器(ROM)，和永久存储装置。其中，ROM可以存储处理器20或者计算机的其他模块需要的静态数据或者指令。永久存储装置可以是可读写的存储装置。永久存储装置可以是即使计算机断电后也不会失去存储的指令和数据的非易失性存储设备。在一些实施方式中，永久性存储装置采用大容量存储装置(例如磁或光盘、闪存)作为永久存储装置。另外一些实施方式中，永久性存储装置可以是可移除的存储设备(例如软盘、光驱)。系统内存可以是可读写存储设备或者易失性可读写存储设备，例如动态随机访问内存。系统内存可以存储一些或者所有处理器在运行时需要的指令和数据。此外，存储器10可以包括任意计算机可读存储媒介的组合，包括各种类型的半导体存储芯片(DRAM，SRAM，SDRAM，闪存，可编程只读存储器)，磁盘和/或光盘也可以采用。在一些实施方式中，存储器10可以包括可读和/或写的可移除的存储设备，例如激光唱片(CD)、只读数字多功能光盘(例如DVD-ROM，双层DVD-ROM)、只读蓝光光盘、超密度光盘、闪存卡(例如SD卡、min SD卡、Micro-SD卡等等)、磁性软盘等等。计算机可读存储媒介不包含载波和通过无线或有线传输的瞬间电子信号。

此外，根据本发明的方法还可以实现为一种计算机程序或计算机程序产品，该计算机程序或计算机程序产品包括用于执行本发明的上述方法中限定的上述各步骤的计算机程序代码指令。

或者，本发明还可以实施为一种非暂时性机器可读存储介质(或计算机可读存储介质、或机器可读存储介质)，其上存储有可执行代码(或计算机程序、或计算机指令代码)，当所述可执行代码(或计算机程序、或计算机指令代码)被电子设备(或计算设备、服务器等)的处理器执行时，使所述处理器执行根据本发明的上述方法的各个步骤。

本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。

附图中的流程图和框图等等显示了根据本发明的多个实施例的系统和方法的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标记的功能也可以以不同于附图中所标记的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。

Claims (18)

1.一种树组件渲染方法，其特征在于，该方法包括：

扁平化步骤，得到列表形式的数据节点；

信息标记步骤，标记数据节点的索引值和节点关系；所述标记数据节点的索引值包括将所述数据节点展开，按照展开后数据节点的排列顺序赋予每个数据节点索引值，其中相邻节点之间的索引值按照固定值递增或递减；

节点确定步骤，确定待渲染的数据节点；

渲染步骤，基于数据节点的所述索引值和所述节点关系，确定待渲染的数据节点的显示位置并将待渲染的数据节点层级显示在内部第二标签中，其中在渲染之前，设置父级标签、内部第一标签、所述内部第二标签，其中：父级标签的高度为画面可视区高度；内部第一标签的高度与待显示的数据节点列表的高度相同，用于支撑树结构，并且形成用于滚动显示的滚动条；内部第二标签用于渲染待渲染的数据节点。

2.如权利要求1所述的树组件渲染方法，其特征在于，所述标记数据节点的索引值和节点关系包括：对于每个数据节点，用层级标记来表示该节点对应的层级，用父级标记来表示该节点的父级，

其中，所述节点关系包括节点的层级标记和父级标记信息。

3.如权利要求2所述的树组件渲染方法，其特征在于，所述标记数据节点的索引值包括：

将数据节点展开，其中，所述展开是指如果一个父节点有子节点，则在该父节点下排列其所有子节点；

按照展开后的数据节点的排列顺序赋予每个数据节点索引值，其中相邻节点之间的索引值按照固定值递增或递减。

4.如权利要求2所述的树组件渲染方法，其特征在于，所述信息标记步骤还包括：通过生成映射对象来建立节点ID和节点的对应关系。

5.如权利要求3所述的树组件渲染方法，其特征在于，所述确定待渲染的数据节点包括：

确定待显示的数据节点，

根据在节点浏览时所述滚动条滚动的距离和所述画面可视区高度，计算出待渲染的数据节点在待显示的数据节点中的起始位置和结束位置，并从待显示的数据节点中截取出待渲染的数据节点。

6.如权利要求5所述的树组件渲染方法，其特征在于，所述确定待显示的数据节点包括:

响应于用户的检索指令，确定出满足检索条件的数据节点，

由所述满足检索条件的数据节点确定出所述满足检索条件的数据节点的祖先节点，

所述待显示的数据节点包括所述满足检索条件的数据节点以及所述满足检索条件的数据节点的祖先节点，

其中，所述检索条件包含在检索指令中。

7.如权利要求6所述的树组件渲染方法，其特征在于，所述确定待显示的数据节点还包括：

响应于用户的节点展开指令，确定出展开节点的子节点，其中，所述节点展开指令包括所述展开节点，所述展开节点选自具有子节点的数据节点；

由所述展开节点确定出所述展开节点的祖先节点，

所述待显示的数据节点包括所述展开节点、所述展开节点的祖先节点以及所述展开节点的子节点。

8.如权利要求7所述的树组件渲染方法，其特征在于，所述响应于用户的节点展开指令，确定出展开节点的子节点包括：

根据用户的节点展开指令，确定所述展开节点；

从索引值为所述展开节点的索引值与所述固定值相加之和或与所述固定值相减之差的数据节点处开始，逐一查看索引值递增或递减的数据节点，当查看到层级标记小于等于或大于等于所述展开节点的层级标记值的数据节点时，则停止查看，并将在该查看过程中查看到的除最后一个查看的数据节点以外的全部节点作为所述展开节点的子节点。

9.如权利要求7所述的树组件渲染方法，其特征在于，所述由所述满足检索条件的数据节点确定出所述满足检索条件的数据节点的祖先节点，和/或所述由所述展开节点确定出所述展开节点的祖先节点包括：

通过当前节点的所述父级标记得到该节点的父节点的节点ID或索引值，再从该父节点的父级标记得到该父节点的父节点的节点ID或索引值，直到得到当前节点的所有祖先节点。

10.如权利要求7所述的树组件渲染方法，其特征在于，

所述由所述满足检索条件的数据节点确定出所述满足检索条件的数据节点的祖先节点，和/或所述由所述展开节点确定出所述展开节点的祖先节点包括：

所述节点关系还包括节点的父级标记集合，所述父级标记集合用于记录一个节点的所有祖先节点的节点ID或索引值，

通过当前节点的父级标记集合，得到该节点的所有祖先节点。

11.如权利要求5所述的树组件渲染方法，其特征在于，所述基于数据节点的所述索引值和所述节点关系，确定待渲染的数据节点的显示位置并将待渲染的数据节点层级显示在内部第二标签中包括：

根据待渲染的数据节点在待显示的数据节点中的起始位置，确定待渲染的数据节点在内部第二标签中的起始显示位置，

根据待渲染的数据节点的层级标记来设置待渲染的数据节点显示的左缩进值，从而进行待渲染的数据节点层级的显示。

12.如权利要求1所述的树组件渲染方法，其特征在于，所述渲染步骤还包括：

根据用户的节点选择指令，确定待渲染的数据节点的选中状态并在所述内部第二标签中进行所述选中状态的显示。

13.如权利要求12所述的树组件渲染方法，其特征在于，所述根据用户的节点选择指令，确定待渲染的数据节点的选中状态包括：

根据用户的节点选择指令，确定用户选择的数据节点的选中状态，并且，基于所述用户选择的数据节点的选中状态，对所述用户选择的数据节点的子节点和/或祖先节点进行选中状态的设置或更改。

14.如权利要求13所述的树组件渲染方法，其特征在于，所述基于所述用户选择的数据节点的选中状态，对所述用户选择的数据节点的子节点和/或祖先节点进行选中状态的设置或更改包括：

1)遍历用户选择的数据节点中的选中节点以去除下述这样的子节点：在节点选择指令中，该子节点的所有同级子节点均被选中，并且该子节点的父节点也被选中；

2)在去除子节点的操作之后，对剩余的被选中节点进行关联设置，即在设置父节点选中时，同时设置该父节点的所有子节点为选中状态。

15.如权利要求13或14所述的树组件渲染方法，其特征在于，所述基于所述用户选择的数据节点的选中状态，对所述用户选择的数据节点的子节点和/或祖先节点进行选中状态的设置或更改还包括：

若某个子节点为选中节点，则先缓存需要更改选中状态的该子节点的祖先节点，然后在接收到用户一时间段内的所有节点选择指令后，将缓存的祖先节点排序，从该子节点的父节点开始，按照层级由低到高的顺序依次设置或更改各层级祖先节点的选中状态。

16.一种树组件渲染装置，其特征在于，该装置包括：

扁平化模块，用于得到列表形式的数据节点；

信息标记模块，用于标记数据节点的索引值和节点关系；所述标记数据节点的索引值包括将所述数据节点展开，按照展开后数据节点的排列顺序赋予每个数据节点索引值，其中相邻节点之间的索引值按照固定值递增或递减；

渲染模块，用于基于数据节点的索引值和所述节点关系，确定待渲染的数据节点的显示位置并将待渲染的数据节点层级显示在内部第二标签中，其中在渲染之前，设置父级标签、内部第一标签、所述内部第二标签，其中：父级标签的高度为画面可视区高度；内部第一标签的高度与待显示的数据节点列表的高度相同，用于支撑树结构，并且形成用于滚动显示的滚动条；内部第二标签用于渲染待渲染的数据节点。

17.一种数据处理设备，包括：

处理器；以及

存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如权利要求1～15中任何一项所述的方法。

18.一种非暂时性机器可读存储介质，其上存储有可执行代码，当所述可执行代码被处理器执行时，使所述处理器执行如权利要求1～15中任何一项所述的方法。

Images