CN114090157A - 树形控件的数据处理方法、装置、设备和存储介质 - Google Patents

Abstract

本申请提出一种树形控件的数据处理方法、装置、设备和存储介质，该方法包括：从树形控件的树结构数据中获取树形控件中第一叶子节点的节点数据；根据从第一叶子节点的节点数据中提取的键和值，构建第一叶子节点的map；响应于对展示的树形控件上的第一叶子节点的第一点击事件，将被选中的第一叶子节点作为目标叶子节点；将目标叶子节点的键作为目标键，从对应的map中获取目标键对应的值作为目标值；结合目标叶子节点所配置的辅助控件对目标叶子节点的目标值进行渲染，将渲染后得到的渲染数据展示在页面上。本申请通过map映射，减少了对整个树结构数据的循环遍历，能够快速获取到待渲染的数据并进行渲染，进而减少了页面卡顿。

Description

树形控件的数据处理方法、装置、设备和存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种树形控件的数据处理方法、装置、设备和存储介质。

背景技术

树形结构选择控件和表格控件是现在系统中广泛使用的控件。使用树形控件可以对事物进行分类，例如对动物分为哺乳动物、非哺乳动物等，再对哺乳动物进行分类，分为猫类、犬类等，一级一级分类就形成了一个具有多个分支的树。树形控件很好的解决了种类过多导致数据混乱的问题。

在选择了树形控件的节点后，有的节点的节点数据需要辅助控件进行渲染后显示。因此，需要在树形控件对应的树结构数据中通过遍历查找需要渲染的节点数据，由于树形控件的数据庞大，如果有较多需要渲染的节点数据，则遍历查找需要花费较多时间，导致加载时间过长、页面卡顿。

另外，如果树形控件层级或分支较多的话，如果需要重新选取树形控件的一些节点则需要花时间去树形控件中展开并取消已勾选的节点或新增未勾选的节点，在多次对树形控件进行重新选择时，需要花费大量时间，用户体验不理想。

发明内容

为了解决现有技术中通过遍历查找节点数据导致数据加载时间过长、页面卡顿、以及重新取消选择树形控件的节点需要花费大量时间展开查找的技术问题。本申请提供了一种树形控件的数据处理方法、装置、设备和存储介质，其主要目的在于减少对整个树结构数据的遍历进而减少页面卡顿，同时实现了渲染数据与树形控件的联动。

为实现上述目的，本申请提供了一种树形控件的数据处理方法，该方法包括：

从树形控件的树结构数据中获取树形控件中第一叶子节点的节点数据，其中，第一叶子节点为配置有辅助控件的叶子节点，辅助控件用于渲染第一叶子节点的节点数据；

根据从第一叶子节点的节点数据中提取的键和值，构建第一叶子节点的map，map中存储有第一叶子节点的键与值的映射；

响应于对展示的树形控件上的第一叶子节点的第一点击事件，将被选中的第一叶子节点作为第一目标叶子节点；

从对应的map中获取第一目标键对应的值作为第一目标值，其中，第一目标键为第一目标叶子节点的键；

结合第一目标叶子节点所配置的辅助控件对第一目标叶子节点的第一目标值进行渲染，将渲染后得到的第一渲染数据展示在页面上。

此外，为实现上述目的，本申请还提供了一种树形控件的数据处理装置，该装置包括：

第一数据获取模块，用于从树形控件的树结构数据中获取树形控件中第一叶子节点的节点数据，其中，第一叶子节点为配置有辅助控件的叶子节点，辅助控件用于渲染第一叶子节点的节点数据；

映射构建模块，用于根据从第一叶子节点的节点数据中提取的键和值，构建第一叶子节点的map，map中存储有第一叶子节点的键与值的映射；

第一响应模块，用于响应于对展示的树形控件上的第一叶子节点的第一点击事件，将被选中的第一叶子节点作为第一目标叶子节点；

第一查找模块，用于从对应的map中获取第一目标键对应的值作为第一目标值，第一目标键为第一目标叶子节点的键；

第一渲染模块，用于结合第一目标叶子节点所配置的辅助控件对第一目标叶子节点的第一目标值进行渲染，将渲染后得到的第一渲染数据展示在页面上。

为实现上述目的，本申请还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机可读指令，处理器执行计算机可读指令时执行如前面任一项的树形控件的数据处理方法的步骤。

为实现上述目的，本申请还提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机可读指令，计算机可读指令被处理器执行时，使得处理器执行如前面任一项的树形控件的数据处理方法的步骤。

本申请提出的树形控件的数据处理方法、装置、设备和存储介质，通过map映射，构建待渲染数据与对应叶子节点之间的映射关系，当需要渲染某些叶子节点的待渲染数据时，直接从map中查找对应的待渲染数据，减少了对整个树结构数据的循环遍历，进而能够快速获取到待渲染数据并进行渲染，减少加载时长，进而减少了页面卡顿。解决了现有技术中每次都要循环遍历树形控件对应的树结构数据，导致页面卡顿的技术问题。

附图说明

图1为本申请一实施例中树形控件的数据处理方法的应用场景图；

图2为本申请一实施例中树形控件的数据处理方法的流程示意图；

图3为本申请一实施例中树形控件的展示效果图；

图4为本申请一实施例中树形控件的数据处理装置的结构框图；

图5为本申请一实施例中计算机设备的内部结构框图。

本申请目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请的一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请提供的树形控件的数据处理方法，可应用在如图1的树形控件的数据处理系统中。该树形控件的数据处理系统包括通过网络通信的终端设备110和服务器端120。终端设备110可以但不限于各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备。服务器端120可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

服务器端120从树形控件的树结构数据中获取树形控件中第一叶子节点的节点数据，其中，第一叶子节点为配置有辅助控件的叶子节点，辅助控件用于渲染第一叶子节点的节点数据；服务器端120根据从第一叶子节点的节点数据中提取的键和值，构建第一叶子节点的map，map中存储有第一叶子节点的键与值的映射；服务器端120响应于对展示在终端设备110上的树形控件的第一叶子节点的第一点击事件，将被选中的第一叶子节点作为第一目标叶子节点；服务器端120将第一目标叶子节点的键作为第一目标键，从对应的map中获取第一目标键对应的值作为第一目标值；服务器端120将第一目标值下发给终端设备110，终端设备110结合第一目标叶子节点所配置的辅助控件对第一目标叶子节点的第一目标值进行渲染，将渲染后得到的第一渲染数据展示在终端设备110的页面上。

图2为本申请一实施例中树形控件的数据处理方法的流程示意图。参考图2。该执行树形控件的数据处理方法包括以下步骤S100-S500。

S100：从树形控件的树结构数据中获取树形控件中第一叶子节点的节点数据，其中，第一叶子节点为配置有辅助控件的叶子节点，辅助控件用于渲染第一叶子节点的节点数据。

具体地，树结构数据为在后端存储的一个数组。该数组以嵌套的方式存储了所有节点的节点数据，即从根节点开始，根节点对应的第一数组中存储了其子节点的第二数组，子节点作为父节点时，其第二数组中又存储了其下一层级的子节点的第三数组，以此类推。树结构数据实际也反应了节点之间的层级关系，该层级关系表征了每个节点的父节点或父节点及子节点。

例如，树结构数据为：

[{title:‘药品,key:‘0-0’,children:[{title:‘感冒药’,key:‘0-0-0’,children:[{title:‘白加黑',key:‘0-0-0-0',data:{name:‘白加黑',price:29.90,num:90,code:‘cx892380830823'}},{title:‘999感冒灵',key:‘0-0-0-1',data:{name:‘999感冒灵',price:29.90,num:90,code:‘cx892380830823'}}]},{title:‘消炎药’,key:‘0-0-1’,children:[{title:‘甲硝唑',key:‘0-0-0-2',data:{name:‘甲硝唑',price:29.90,num:90,code:‘cx892380830823'}}]}]}]。

其中，根节点药品下有两个子节点感冒药和消炎药；感冒药作为父节点时，其下有子节点白加黑和感冒灵；消炎药作为父节点时，其下有子节点甲硝唑。白加黑、感冒灵和甲硝唑都是没有子节点的叶子节点，其节点数据为其自身的属性数据，例如包括price、num、code、name、title和key。有子节点的叶子节点其节点数据包括title、key和children，其中，key即为叶子节点的键，title为叶子节点的名称，children用于存储对应的子节点的节点数据。

一个树形控件有多个分支，分支之间的叶子节点具有层级关系，例如父子节点关系、兄弟节点关系。图3为本申请一实施例中树形控件的展示效果图。键为0-0的叶子节点、键为0-1的叶子节点和键为0-2的叶子节点为同一层级的叶子节点；键为0-0-0的叶子节点、键为0-0-1的叶子节点和键为0-0-2的叶子节点均为键为0-0的叶子节点的子节点，且为同一层级的叶子节点；键为0-0-0-0的叶子节点、键为0-0-0-1的叶子节点和键为0-0-0-2的叶子节点均为键为0-0-0的叶子节点的子节点，且为同一层级的叶子节点；键为0-0-1-0的叶子节点、键为0-0-1-1的叶子节点和键为0-0-1-2的叶子节点均为键为0-0-1的叶子节点的子节点，且为同一层级的叶子节点。

树形控件中节点数据中包括了需要渲染的数据叶子节点为第一叶子节点。第一叶子节点配置有辅助渲染的辅助控件，因此，其渲染过程较复杂，且其最终呈现展示的渲染效果需要在树形控件之外的地方展示，快速加载到第一叶子节点对应的值，可以加快渲染速度，提高页面加载速度，减少页面卡顿。

S200：根据从第一叶子节点的节点数据中提取的键和值，构建第一叶子节点的map，map中存储有第一叶子节点的键与值的映射。

具体地，map就是从键(key)到值(value)的映射。在树形控件中，将每一个第一叶子节点的key作为map的key，map的value值设置为第一叶子节点对应的需要渲染的数据，第一叶子节点对应的需要渲染的数据存储在该第一叶子节点对应的节点数据中。

所有第一叶子节点的key-value数据可以存储在同一个map容器中，也可以各自独立一个map。由于树形控件中有些叶子节点没有配置辅助控件，即没有需要辅助控件渲染的数据，因此在对应的map中其值(value)为空。

其中，map中的值包含了对应的第一叶子节点的节点数据中需要辅助控件渲染的数据。

Map中的键为对应的第一叶子节点或树形控件中叶子节点的唯一标识，用于区分同一个树形控件中不同的叶子节点。不论哪个层级的叶子节点都有对应的键。

S300：响应于对展示的树形控件上的第一叶子节点的第一点击事件，将被选中的第一叶子节点作为第一目标叶子节点。

具体地，从根节点到其下各个层级的叶子节点，可能多个第一叶子节点对应同一个父节点，因此，在前端对于共用一个父节点的多个兄弟叶子节点设置有复选选项框，用户通过对复选选项框的点选操作来选择展示哪个或哪些兄弟叶子节点对应的数据，达到选择要展示的数据或效果的目的。被选中的第一叶子节点即为第一目标叶子节点。第一目标叶子节点可以包括多个。

第一点击事件具体为对复选选项框的选择或点击操作。

S400：从对应的map中获取第一目标键对应的值作为第一目标值，其中，第一目标键为第一目标叶子节点的键。

具体地，本实施例通过第一目标叶子节点的第一目标键(key)在对应的map中查找对应的第一目标值(value)，而不需要遍历整个树结构数据去查找对应的第一目标值，节省了待渲染数据的查找时间，进而减少了数据加载时间。

S500：结合第一目标叶子节点所配置的辅助控件对第一目标叶子节点的第一目标值进行渲染，将渲染后得到的第一渲染数据展示在页面上。

具体地，辅助控件用于对对应的第一目标叶子节点的第一目标值即待渲染数据进行渲染。渲染后得到的第一渲染数据会以一定的渲染效果展示在页面上。辅助控件可以包括表格控件。

本实施例采用map映射的方式，构建待渲染数据与对应叶子节点之间的映射关系，当需要渲染某些叶子节点的待渲染数据时，直接从map中查找对应的待渲染数据，减少了对整个树结构数据的循环遍历，进而能够快速获取到待渲染数据并进行渲染，减少加载时长，进而减少了页面卡顿。解决了现有技术中每次都要循环遍历树形控件对应的树结构数据，导致页面卡顿的技术问题。

在一个实施例中，辅助控件包括表格控件；

步骤S500具体包括以下步骤：

展示为第一目标叶子节点所配置的表格控件，

将第一目标值填充至表格控件对应的单元格中，在单元格中展示第一目标值。

具体地，当辅助控件包括表格控件时，具体的渲染过程是将节点数据中的第一目标值填充至表格控件中对应的单元格中，实现了在单元格中展示节点数据的目的。

本实施例结合树形控件和表格控件来展示用户选择的叶子节点所对应的数据或效果。第一叶子节点配置有表格控件，表格控件包括至少一个可填充的单元格，每个单元格上面还包括描述字段。第一目标叶子节点的第一目标值中包括至少一个字段及对应的字段取值，根据字段将字段取值填充至表格控件中对应的单元格中。例如将“白加黑”填充至描述字段为“药名”的单元格，将“29.90”填充至描述字段为“价格”的单元格，将“90”填充至描述字段为“数量”的单元格，将“cx892380830823”填充至描述字段为“编码”的单元格，等等。这样填充完成的单元格就展示在页面上。

在一个实施例中，步骤S400具体包括以下步骤：

将第一目标叶子节点的键作为第一目标键添加至目标数组中；

根据目标数组中的第一目标键从对应的map中获取对应的值作为第一目标值。

具体地，目标数组可以是在第一点击事件之前就已经创建好的，也可以是响应于对第一叶子节点的第一点击事件，联动创建的。

本实施例将勾选的第一目标叶子节点的键(key)放入同一个目标数组中，该目标数组用于存储和集中管理第一目标叶子节点的key。然后根据目标数组中的第一目标键(key)去对应的map中获取对应的第一目标值(value)，这样就不需要去数据庞大的树结构数据中去遍历查找对应的第一目标值(value)，加快了数据加载和渲染速度，提高了页面显示速度减少页面卡顿。

另外，目标数组也可以在预设时长内没有key后移除。

在一个实施例中，该方法还包括以下步骤：

在页面上增加并展示每一个第一渲染数据所对应的删除按钮；

响应于对至少一个删除按钮的第二点击事件，将待删渲染数据的第一目标键从目标数组中删除，待删渲染数据为被点击的删除按钮所对应的第一渲染数据；

刷新页面以取消对待删渲染数据的展示；

响应于对目标数组中待删渲染数据的第一目标键的删除事件，在所树形控件上联动取消选择待删渲染数据对应的第一目标叶子节点。

具体地，本实施例的执行是基于上一个实施例的基础之上的。删除按钮与对应的第一渲染数据展示在同一个页面，每个展示的第一渲染数据都对应有一个删除按钮，删除按钮可以展示在对应的第一渲染数据的右侧，以便于用户正确无误使用删除按钮。通过删除按钮，用户可以直接删除不需要展示的第一渲染数据，而不需要通过去树形控件中取消勾选待删渲染数据对应的第一叶子节点，来达到取消展示待删渲染数据的目的。减少了用户重新展开翻找已勾选的叶子节点的繁琐操作，节省了用户时间，提高了用户使用体验。

取消对待删渲染数据的展示即为隐藏待删渲染数据使其在页面上不可见。

点击删除按钮的同时联动取消在树形控件上对待删渲染数据对应的第一目标叶子节点的选择，实现了用户选择哪些节点就展示哪些渲染数据，用户不需要展示的渲染数据，其树形控件对应的节点也相应取消选择，解决了树形控件中叶子节点的选择和展示的渲染数据的联动。

本实施例由于采用了map映射的方式，将树形控件叶子节点的选择和第一渲染数据联动了起来。如果树形控件和渲染后的第一渲染数据展示在同一个页面，则在勾选了树形控件的叶子节点之后，直接在同一页面显示对应的第一渲染数据；当通过点击了第一渲染数据的删除按钮后，该第一渲染数据作为待删渲染数据被取消展示，同时，联动取消勾选树形控件上对应的叶子节点，这样保证了树形控件和渲染数据的统一，也明确地体现了当前选择了哪些叶子节点。且本实施例实现了通过删除按钮直接删除不需要展示的数据。

当然，树形控件和渲染后的第一渲染数据也可以展示在不同的页面上，在确定了树形控件哪些叶子节点被选择和/或展开后，跳转到新的页面展示渲染数据。

在一个具体实施例中，如果辅助控件包括表格控件；

则该方法还包括：

在页面上增加并展示表格控件对应的删除按钮；

响应于对至少一个删除按钮的第二点击事件，将待删表格控件对应的第一目标键从目标数组中删除，待删表格控件为被点击的删除按钮所对应的表格控件；

刷新页面以取消对待删表格控件的展示；

响应于对目标数组中待删表格控件的第一目标键的删除事件，在树形控件上联动取消选择待删表格控件对应的第一目标叶子节点。

具体地，取消对待删表格控件的展示即为隐藏待删表格控件使其在页面上不可见。点击删除按钮的同时联动取消选择树形控件上待删表格控件对应的第一目标叶子节点。

如果辅助控件包括表格控件，则每次删除表格中的数据的时候，把被删除的表格所对应的第一目标键从目标数组里面去掉，再重新获取一遍目标数组中剩下的第一目标键所对应的第一目标值，这样就解决了树形控件中叶子节点的选择和表格数据的联动及同步。

在一个实施例中，刷新页面以取消对待删渲染数据的展示，包括：

从对应的map中重新获取第二目标键所对应的值作为第二目标值，其中，第二目标键为目标数组中余下的键；

结合第二目标叶子节点所配置的辅助控件对第二目标叶子节点的第二目标值进行渲染，将渲染后得到的第二渲染数据展示在页面上，其中，第二目标叶子节点为第二目标键所对应的第一叶子节点。

具体地，每次在前端点击删除已展示的第一渲染数据后，把被删除的第一渲染数据所对应的第一目标键从目标数组中去掉，再重新获取一遍目标数组中剩下的第二目标键所对应的第二目标值，并通过对应的辅助控件重新对第二目标值进行渲染，得到第二渲染数据，在页面上展示第二渲染数据。这样就实现了刷新页面以展示第二渲染数据。

在一个实施例中，该方法还包括：

响应于对第一目标叶子节点的第三点击事件，将待删目标叶子节点的第一目标键从目标数组中删除，其中，待删目标叶子节点为为树形控件上被取消选择的第一目标叶子节点；

刷新页面以取消对待删目标叶子节点所对应的第一渲染数据的展示。

具体地，第三点击事件用于在树形控件上取消选择已勾选的第一目标叶子节点。本实施例用于在对已勾选的第一目标叶子节点取消勾选时同步取消其对应的第一渲染数据在前端的展示。本实施例实现了通过取消勾选叶子节点的方式来取消对应渲染数据在页面的展示。从另一方面实现了渲染数据的展示与树形控件叶子节点选择的联动。

在一个实施例中，刷新页面以取消对待删目标叶子节点所对应的第一渲染数据的展示，包括：

从对应的map中重新获取第三目标键所对应的值作为第三目标值，其中，第三目标键为目标数组中余下的键；

结合第三目标叶子节点所配置的辅助控件对第三目标叶子节点的第三目标值进行渲染，将渲染后得到的第三渲染数据展示在页面上，其中，第三目标叶子节点为第三目标键所对应的第一叶子节点。

具体地，本实施例用户在树形控件上取消了对某些第一目标叶子节点的勾选后，将取消勾选的第一目标叶子节点作为待删目标叶子节点，将待删目标叶子节点对应的第一目标键从目标数组中删除，将标数组中余下的键作为第三目标键，根据第三目标键从map中查找对应的第三目标值，重新通过对应的辅助控件对第三目标值进行渲染，得到第三渲染数据，将第三渲染数据展示在页面上，实现了页面刷新以取消对待删目标叶子节点对应的第一渲染数据的展示。

在一个实施例中，该方法还包括：

响应于对除第一目标叶子节点之外的其他第一叶子节点的第四点击事件，将待增目标叶子节点的键新增至目标数组中，其中，待增目标叶子节点包括将被选中的其他第一叶子节点；

刷新页面以增加对待增目标叶子节点所对应的渲染数据的展示。

具体地，第四点击事件用于增加勾选新的未勾选的第一叶子节点，将待增目标叶子节点添加至目标数组中，根据待增目标叶子节点的目标键从map中查找对应的目标值，利用待增目标叶子节点对应的辅助控件对待增目标叶子节点的目标值进行渲染，将渲染后得到的渲染数据展示在页面上。而目标数组中原本存在的第一目标键仍然存在，页面上仍然显示有这些第一目标键对应的第一渲染数据。

在一个实施例中，该方法还包括：

响应于对除第一目标叶子节点之外的其他第一叶子节点的第四点击事件，将待增目标叶子节点的键新增至目标数组中，其中，待增目标叶子节点包括被选中的其他第一叶子节点；

从对应的map中重新获取第四目标键所对应的值作为第四目标值，其中，第四目标键为新增后的目标数组中的键；

结合第四目标叶子节点所配置的辅助控件对第四目标叶子节点的第四目标值进行渲染，将渲染后得到的第四渲染数据展示在页面上，其中，第四目标叶子节点为第四目标键对应的第一叶子节点。

具体地，如果通过树形控件勾选新的第一叶子节点，则继续在目标数组中添加新的第一叶子节点的目标键，将目标数组中的键作为第四目标键，并从对应的map中重新获取目标数组下所有第四目标键对应的第四目标值，结合当前目标数组中所有第四目标叶子节点所对应的辅助控件对当前目标数组中所有第四目标叶子节点的第四目标值进行渲染，将渲染后的数据展示在页面上以刷新页面展示。

本实施例实现了在通过树形控件增加选择第一叶子节点后，将新增加的第一叶子节点的目标键加入到目标数组中，通过map重新获取目标数组中的所有键的值，并利用对应的辅助控件重新对对应的值进行渲染得到渲染数据，以在页面上增加展示新勾选的第一叶子节点对应的渲染数据。实现了新增勾选叶子节点也同样实现展示的渲染数据与树形控件中叶子节点选择的同步。

在一个实施例中，将渲染后得到的第一渲染数据展示在页面上，包括：

在展开树形控件的同一页面展示第一目标叶子节点所对应的第一渲染数据。

具体地，可以在同一个页面的左右两边或上下两边分别展示树形控件和渲染后的第一渲染数据。多个第一目标叶子节点对应的第一渲染数据上下依次展示。

当然，也可以在展开的树形控件的不同页面展示第一目标叶子节点所对应的第一渲染数据。即，在第一点击事件之后，从树形控件所在的页面跳转到新的页面展示第一渲染数据。

当辅助控件为表格控件时，可以在同一个页面的左右两边或上下两边分别展示树形控件和表格控件。多个第一目标叶子节点对应的表格控件上下依次展示。当然，也可以在展开的树形控件的不同页面展示第一目标叶子节点所对应的表格控件。即，在第一点击事件之后，从树形控件所在的页面跳转到新的页面展示表格控件。

在一个实施例中，将渲染后得到的第二渲染数据展示在页面上，包括：

在展开树形控件的同一页面展示第二目标叶子节点所对应的第二渲染数据。

在一个实施例中，将渲染后得到的第三渲染数据展示在页面上，包括：

在展开树形控件的同一页面展示第三目标叶子节点所对应的第三渲染数据。

在一个实施例中，将渲染后得到的第四渲染数据展示在页面上，包括：

在展开树形控件的同一页面展示第四目标叶子节点所对应的第四渲染数据。

在一个实施例中，在步骤S300之前，该方法还包括：

响应于对展示的树形控件中叶子节点的展开选择操作，根据对不同叶子节点的展开选择操作的先后顺序，依次加载候选叶子节点的节点数据，其中，候选叶子节点包括已展开的叶子节点和已选择的叶子节点；

根据候选叶子节点之间的层级关系，从层级最高的候选叶子节点开始、通过递归算法将子节点的节点数据加载至对应父节点的节点数据中以进行数据重组，重组完成后得到加载数据，其中，父节点位于对应的子节点的上一个层级。

具体地，在前端，树形控件在最初始状态是折叠展示在可视化界面的，且只显示了最高层级的父节点。展开选择操作具体为对树形控件中的节点的展开操作和选择操作。从根节点开始，用户可以通过点击依次展开树形控件中部分或全部节点。树形控件中有子节点的叶子节点可以展开其子节点，无子节点的叶子节点没有可展开的子节点。展开状态具体为展开使能显示其子节点。

根据展开选择操作只加载候选叶子节点对应的节点数据得到加载数据，对树形控件中除候选叶子节点之外的其他叶子节点的节点数据则不需要加载，从而根据用户的点击操作有针对性的加载数据，克服了现有技术中加载树形控件的全部数据，导致页面卡顿甚至页面崩溃的技术问题。

获取树形控件对应的树结构数据，树结构数据包括树形控件所有节点的节点数据以及节点之间的层级关系；通过遍历可以从树结构数据中提取出每个候选叶子节点的节点数据。

例如，如果候选叶子节点包括药品、感冒药、白加黑和感冒灵，则将药品的title和key提取出来组成第一数组，将感冒药的key和title提取出来组成第二数组，将白加黑和感冒灵的title、key、data都提取出来分别组成第三数组和第四数组。因为药品的children包括感冒药，因此，确定感冒药为药品的子节点，将感冒药的第二数组加载至药品的第一数组中，得到更新后的第一数组为加载数据。如果继续展开感冒药，因为感冒药的children包括白加黑和感冒灵，因此，确定白加黑和感冒灵为感冒药的子节点，通过递归的方式将白加黑和感冒灵的第三数组和第四数组加载至第一数组中的第二数组中得到更新的第一数组，更新的第一数组为重组完成后得到的加载数据。根据得到的加载数据可以展开树形控件中的部分或全部叶子节点。而携带有需要渲染的数据的叶子节点，则通过上述方法对需要渲染的数据进行渲染后得到渲染数据展示在树形控件之外的页面上。

本实施例根据用户对树形组件的展开选择操作来有针对性的加载展开以及选择的叶子节点对应的节点数据，对于未展开的叶子节点的节点数据则不加载，实现了有目的性的分级加载，解决了树形控件数据过大全部加载导致页面卡顿甚至页面崩溃的问题，提高了用户体验。

本申请提出的树形控件的数据处理方法、装置、设备和存储介质，通过map映射，构建待渲染数据与对应叶子节点之间的映射关系，当需要渲染某些叶子节点的待渲染数据时，直接从map中查找对应的待渲染数据，减少了对整个树结构数据的循环遍历，进而能够快速获取到待渲染数据并进行渲染，减少加载时长，进而减少了页面卡顿。解决了现有技术中每次都要循环遍历树形控件对应的树结构数据，导致页面卡顿的技术问题。

另外，本申请构建目标数组，将待渲染的节点数据所对应的节点的键都存入同一个目标数组进行管理，展示目标数组中对应的键的渲染数据，当要删除已展示的渲染数据时，在删除展示的渲染数据的同时联动取消勾选树形控件中对应的已勾选的叶子节点，解决了树形控件的数据和渲染数据的联动，让用户对树形控件已选叶子节点一目了然。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

图4为本申请一实施例中树形控件的数据处理装置的结构框图。参考图4，该装置包括：

第一数据获取模块100，用于从树形控件的树结构数据中获取树形控件中第一叶子节点的节点数据，其中，第一叶子节点为配置有辅助控件的叶子节点，辅助控件用于渲染第一叶子节点的节点数据；

映射构建模块200，用于根据从第一叶子节点的节点数据中提取的键和值，构建第一叶子节点的map，map中存储有第一叶子节点的键与值的映射；

第一响应模块300，用于响应于对展示的树形控件上的第一叶子节点的第一点击事件，将被选中的第一叶子节点作为第一目标叶子节点；

第一查找模块400，用于从对应的map中获取第一目标键对应的值作为第一目标值，其中，第一目标键为第一目标叶子节点的键；

第一渲染模块500，用于结合第一目标叶子节点所配置的辅助控件对第一目标叶子节点的第一目标值进行渲染，将渲染后得到的第一渲染数据展示在页面上。

在一个实施例中，辅助控件包括表格控件；

第一渲染模块500具体包括：

第一展示模块，用于展示为第一目标叶子节点所配置的表格控件，

数据填充模块，用于将第一目标值填充至表格控件对应的单元格中，在单元格中展示第一目标值。

在一个实施例中，第一查找模块400具体包括：

第一数组管理模块，用于将第一目标叶子节点的键作为第一目标键添加至目标数组中；

子查找模块，用于根据目标数组中的第一目标键从对应的map中获取对应的值作为第一目标值。

在一个实施例中，该装置还包括：

第二展示模块，用于在页面上增加并展示每一个第一渲染数据所对应的删除按钮；

第二数组管理模块，用于响应于对至少一个删除按钮的第二点击事件，将待删渲染数据的第一目标键从目标数组中删除，待删渲染数据为被点击的删除按钮所对应的第一渲染数据；

第一页面刷新模块，用于刷新页面以取消对待删渲染数据的展示；

第一联动模块，用于响应于对目标数组中待删渲染数据的第一目标键的删除事件，在所树形控件上联动取消选择待删渲染数据对应的第一目标叶子节点。

在一个实施例中，第一页面刷新模块具体包括：

第二查找模块，用于从对应的map中重新获取第二目标键所对应的值作为第二目标值，其中，第二目标键为目标数组中余下的键；

第二渲染模块，用于结合第二目标叶子节点所配置的辅助控件对第二目标叶子节点的第二目标值进行渲染，将渲染后得到的第二渲染数据展示在页面上，其中，第二目标叶子节点为第二目标键所对应的第一叶子节点。

在一个实施例中，该装置还包括：

第三数组管理模块，用于响应于对第一目标叶子节点的第三点击事件，将待删目标叶子节点的第一目标键从目标数组中删除，待删目标叶子节点为树形控件上将被取消选择的第一目标叶子节点；

第二页面刷新模块，用于刷新页面以取消对待删目标叶子节点所对应的第一渲染数据的展示。

在一个实施例中，第二页面刷新模块具体包括：

第三查找模块，用于从对应的map中重新获取第三目标键所对应的值作为第三目标值，其中，第三目标键为目标数组中余下的键；

第三渲染模块，用于结合第三目标叶子节点所配置的辅助控件对第三目标叶子节点的第三目标值进行渲染，将渲染后得到的第三渲染数据展示在页面上，其中，第三目标叶子节点为第三目标键所对应的第一叶子节点。

在一个实施例中，该装置还包括：

第四数组管理模块，响应于对除第一目标叶子节点之外的其他第一叶子节点的第四点击事件，将待增目标叶子节点的键新增至目标数组中，其中，待增目标叶子节点包括被选中的其他第一叶子节点；

第四查找模块，用于从对应的map中重新获取第四目标键所对应的值作为第四目标值，其中，第四目标键为新增后的目标数组中的键；

第四渲染模块，用于结合第四目标叶子节点所配置的辅助控件对第四目标叶子节点的第四目标值进行渲染，将渲染后得到的第四渲染数据展示在页面上，其中，第四目标叶子节点为第四目标键对应的第一叶子节点。

在一个实施例中，第一渲染模块500具体用于在展开树形控件的同一页面展示第一目标叶子节点所对应的第一渲染数据。

其中上述模块/单元中的“第一”和“第二”的意义仅在于将不同的模块/单元加以区分，并不用于限定哪个模块/单元的优先级更高或者其它的限定意义。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或模块的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或模块，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或模块，本申请中所出现的模块的划分，仅仅是一种逻辑上的划分，实际应用中实现时可以有另外的划分方式。

关于树形控件的数据处理装置的具体限定可以参见上文中对于树形控件的数据处理方法的限定，在此不再赘述。上述树形控件的数据处理装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

图5为本申请一实施例中计算机设备的内部结构框图。如图5所示，该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、输入装置和展示屏。其中，该计算机设备的处理器用于提供计算和控制能力。存储器包括存储介质和内存储器。存储介质可以是非易失性存储介质，也可以是易失性存储介质。存储介质存储有操作系统，还可存储有计算机可读指令，该计算机可读指令被处理器执行时，可使得处理器实现树形控件的数据处理方法。该内存储器为存储介质中的操作系统和计算机可读指令的运行提供环境。该内存储器中也可储存有计算机可读指令，该计算机可读指令被处理器执行时，可使得处理器执行树形控件的数据处理方法。该计算机设备的网络接口用于与外部服务器通过网络连接通信。计算机设备的展示屏可以是液晶展示屏或者电子墨水展示屏，计算机设备的输入装置可以是展示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机可读指令(例如计算机程序)，处理器执行计算机可读指令时实现上述实施例中树形控件的数据处理方法的步骤，例如图2所示的步骤S100至步骤S500及该方法的其它扩展和相关步骤的延伸。或者，处理器执行计算机可读指令时实现上述实施例中树形控件的数据处理装置的各模块/单元的功能，例如图4所示模块100至模块500的功能。为避免重复，这里不再赘述。

处理器可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable GateArray，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件控件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，处理器是计算机装置的控制中心，利用各种接口和线路连接整个计算机装置的各个部分。

存储器可用于存储计算机可读指令和/或模块，处理器通过运行或执行存储在存储器内的计算机可读指令和/或模块，以及调用存储在存储器内的数据，实现计算机装置的各种功能。存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、视频数据等)等。

存储器可以集成在处理器中，也可以与处理器分开设置。

本领域技术人员可以理解，图5中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机可读指令，计算机可读指令被处理器执行时实现上述实施例中树形控件的数据处理方法的步骤，例如图2所示的步骤S100至步骤S500及该方法的其它扩展和相关步骤的延伸。或者，计算机可读指令被处理器执行时实现上述实施例中树形控件的数据处理装置的各模块/单元的功能，例如图4所示模块100至模块500的功能。为避免重复，这里不再赘述。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指示相关的硬件来完成，所述的计算机可读指令可存储于一计算机可读取存储介质中，该计算机可读指令在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双倍速率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、装置、物品或者方法不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、装置、物品或者方法所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、装置、物品或者方法中还存在另外的相同要素。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本申请各个实施例所述的方法。

以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。

Claims (12)

1.一种树形控件的数据处理方法，其特征在于，所述方法包括：

从树形控件的树结构数据中获取所述树形控件中第一叶子节点的节点数据，其中，所述第一叶子节点为配置有辅助控件的叶子节点，所述辅助控件用于渲染所述第一叶子节点的节点数据；

根据从所述第一叶子节点的节点数据中提取的键和值，构建所述第一叶子节点的map，所述map中存储有所述第一叶子节点的键与值的映射；

响应于对展示的树形控件上的所述第一叶子节点的第一点击事件，将被选中的第一叶子节点作为第一目标叶子节点；

从对应的所述map中获取第一目标键对应的值作为第一目标值，其中，所述第一目标键为所述第一目标叶子节点的键；

结合所述第一目标叶子节点所配置的辅助控件对所述第一目标叶子节点的第一目标值进行渲染，将渲染后得到的第一渲染数据展示在页面上。

2.根据权利要求1所述的方法，其特征在于，所述辅助控件包括表格控件；

所述结合所述第一目标叶子节点所配置的辅助控件对所述第一目标叶子节点的第一目标值进行渲染，将渲染后得到的第一渲染数据展示在页面上，包括：

展示为所述第一目标叶子节点所配置的表格控件，

将所述第一目标值填充至所述表格控件对应的单元格中，在所述单元格中展示所述第一目标值。

3.根据权利要求1所述的方法，其特征在于，所述从对应的所述map中获取第一目标键对应的值作为第一目标值，包括：

将所述第一目标叶子节点的键作为第一目标键添加至目标数组中；

根据所述目标数组中的第一目标键从对应的所述map中获取对应的值作为第一目标值。

4.根据权利要求3所述的方法，其特征在于，所述方法还包括：

在所述页面上增加并展示每一个所述第一渲染数据所对应的删除按钮；

响应于对至少一个所述删除按钮的第二点击事件，将待删渲染数据对应的第一目标键从所述目标数组中删除，所述待删渲染数据为被点击的删除按钮所对应的第一渲染数据；

刷新页面以取消对所述待删渲染数据的展示；

响应于对所述目标数组中待删渲染数据的第一目标键的删除事件，在所述树形控件上联动取消选择所述待删渲染数据对应的第一目标叶子节点。

5.根据权利要求4所述的方法，其特征在于，所述刷新页面以取消对所述待删渲染数据的展示，包括：

从对应的所述map中重新获取第二目标键所对应的值作为第二目标值，其中，所述第二目标键为所述目标数组中余下的键；

结合第二目标叶子节点所配置的辅助控件对所述第二目标叶子节点的第二目标值进行渲染，将渲染后得到的第二渲染数据展示在页面上，其中，所述第二目标叶子节点为所述第二目标键所对应的第一叶子节点。

6.根据权利要求3所述的方法，其特征在于，所述方法还包括：

响应于对所述第一目标叶子节点的第三点击事件，将待删目标叶子节点的第一目标键从所述目标数组中删除，其中，所述待删目标叶子节点为树形控件上被取消选择的第一目标叶子节点；

刷新页面以取消对所述待删目标叶子节点所对应的第一渲染数据的展示。

7.根据权利要求6所述的方法，其特征在于，所述刷新页面以取消对所述待删目标叶子节点所对应的第一渲染数据的展示，包括：

从对应的所述map中重新获取第三目标键所对应的值作为第三目标值，其中，所述第三目标键为所述目标数组中余下的键；

结合第三目标叶子节点所配置的辅助控件对所述第三目标叶子节点的第三目标值进行渲染，将渲染后得到的第三渲染数据展示在页面上，其中，所述第三目标叶子节点为所述第三目标键所对应的第一叶子节点。

8.根据权利要求3所述的方法，其特征在于，所述方法还包括：

响应于对除所述第一目标叶子节点之外的其他第一叶子节点的第四点击事件，将待增目标叶子节点的键新增至所述目标数组中，其中，所述待增目标叶子节点包括被选中的其他第一叶子节点；

从对应的所述map中重新获取第四目标键所对应的值作为第四目标值，其中，所述第四目标键为新增后的目标数组中的键；

结合第四目标叶子节点所配置的辅助控件对所述第四目标叶子节点的第四目标值进行渲染，将渲染后得到的第四渲染数据展示在页面上，其中，所述第四目标叶子节点为所述第四目标键对应的第一叶子节点。

9.根据权利要求1所述的方法，其特征在于，所述将渲染后得到的第一渲染数据展示在页面上，包括：

在展开所述树形控件的同一页面展示所述第一目标叶子节点所对应的第一渲染数据。

10.一种树形控件的数据处理装置，其特征在于，所述装置包括：

第一数据获取模块，用于从树形控件的树结构数据中获取所述树形控件中第一叶子节点的节点数据，其中，所述第一叶子节点为配置有辅助控件的叶子节点，所述辅助控件用于渲染所述第一叶子节点的节点数据；

映射构建模块，用于根据从所述第一叶子节点的节点数据中提取的键和值，构建所述第一叶子节点的map，所述map中存储有所述第一叶子节点的键与值的映射；

第一响应模块，用于响应于对展示的树形控件上的所述第一叶子节点的第一点击事件，将被选中的第一叶子节点作为第一目标叶子节点；

第一查找模块，用于从对应的所述map中获取第一目标键对应的值作为第一目标值，其中，所述第一目标键为所述第一目标叶子节点的键；

第一渲染模块，用于结合所述第一目标叶子节点所配置的辅助控件对所述第一目标叶子节点的第一目标值进行渲染，将渲染后得到的第一渲染数据展示在页面上。

11.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机可读指令，其特征在于，所述处理器执行所述计算机可读指令时执行如权利要求1-9任一项所述的树形控件的数据处理方法的步骤。

12.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机可读指令，其特征在于，所述计算机可读指令被处理器执行时，使得所述处理器执行如权利要求1-9任一项所述的树形控件的数据处理方法的步骤。

Images