CN117055766A - 基于Ant Design的树形数据处理方法、装置、介质及电子设备 - Google Patents

Abstract

本申请的实施例提供了一种基于Ant Design的树形数据处理方法、装置、介质及电子设备。该方法包括：在界面中显示树形列表，所述树形列表包括多个树节点，所述树节点用于在服务器中索引目标业务数据，其中，每一个树节点对应一个层级，且配置有编辑控件；响应于对任意一个树节点所对应编辑控件的点击操作，触发编辑事件，以供用户对所述任意一个树节点的节点信息进行编辑；在对所述任意一个树节点的节点信息编辑完成之后，将所述任意一个树节点的节点信息发送至服务器，以在服务器中更新所述任意一个树节点的节点信息，以及更新与所述任意一个树节点相对应的业务数据。本申请实施例的技术方案可以提高基于Ant Design的树形数据处理的便捷性。

Description

基于Ant Design的树形数据处理方法、装置、介质及电子设备

技术领域

本申请涉及计算机及数据处理技术领域，具体而言，涉及一种基于Ant Design的树形数据处理方法、装置、介质及电子设备。

背景技术

在Ant Design的应用场景中，现有技术中的树结构组件只能根据从服务器下载的数据展示只读树形列表，树形列表在使用时仅支持对原有数据的层级展示和勾选，如果需要编辑树形列表，则需要通过更改源代码的方式来实现，导致基于Ant Design的树形数据处理不够便捷，降低用户体验，基于此，如何提高基于Ant Design的树形数据处理的便捷性是亟待解决的技术问题。

发明内容

本申请的实施例提供了一种基于Ant Design的树形数据处理方法、装置、计算机程序产品或计算机程序、计算机可读存储介质及电子设备，进而至少在一定程度上可以提高基于Ant Design的树形数据处理的便捷性。

本申请的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本申请的实践而习得。

根据本申请实施例的一个方面，提供了一种基于Ant Design的树形数据处理方法，所述方法包括：在界面中显示树形列表，所述树形列表包括多个树节点，所述树节点用于在服务器中索引目标业务数据，其中，每一个树节点对应一个层级，且配置有编辑控件；响应于对任意一个树节点所对应编辑控件的点击操作，触发编辑事件，以供用户对所述任意一个树节点的节点信息进行编辑；在对所述任意一个树节点的节点信息编辑完成之后，将所述任意一个树节点的节点信息发送至服务器，以在服务器中更新所述任意一个树节点的节点信息，以及更新与所述任意一个树节点相对应的业务数据。

在本申请的一些实施例中，基于前述方案，任意一个树节点与其下一个层级的树节点之间存在父子节点关系，所述树形列表包括显示在界面的树节点和隐藏在界面中的树节点，其中，显示在界面中的第一目标树节点配置有展开/收起控件，所述第一目标树节点为不属于最后一个层级的任意一个树节点，所述方法还包括：响应于对第一目标树节点所对应展开/收起控件的点击操作，在界面中展开或者收起第二目标树节点，所述第二目标树节点为所述第一目标树节点的子树节点。

在本申请的一些实施例中，基于前述方案，所述方法还包括：将第三目标树节点对应的编辑控件隐藏在界面中的特定位置，所述第三目标树节点为显示在界面中的任意一个树节点；响应于将界面触控点移动到所述特定位置，显示所述第三目标树节点对应的编辑控件。

在本申请的一些实施例中，基于前述方案，所述编辑控件至少包括树节点新增控件，树节点删除控件，树节点修改控件。

在本申请的一些实施例中，基于前述方案，在触发编辑事件之前，所述方法还包括：获取用户的身份信息，并基于所述身份信息，判断所述用户是否具有触发编辑事件的权限；如果所述用户具有触发编辑事件的权限，则触发编辑事件；如果所述用户不具有触发编辑事件的权限，则拒绝触发编辑事件。

在本申请的一些实施例中，基于前述方案，所述方法还包括：在界面中显示搜索框；响应于对所述搜索框的输入操作，获取用户输入的搜索字段；突出展示与所述搜索字段相关联的树节点。

在本申请的一些实施例中，基于前述方案，所述方法还包括：响应于对任意一个树节点的点击操作，从服务器中下载与所述任意一个树节点相对应的业务数据；将与所述任意一个树节点相对应的业务数据展示在界面的特定区域。

根据本申请实施例的一个方面，提供了一种基于Ant Design的树形数据处理装置，所述装置包括：显示单元，用于在界面中显示树形列表，所述树形列表包括多个树节点，所述树节点用于在服务器中索引目标业务数据，其中，每一个树节点对应一个层级，且配置有编辑控件；触发单元，用于响应于对任意一个树节点所对应编辑控件的点击操作，触发编辑事件，以供用户对所述任意一个树节点的节点信息进行编辑；发送单元，用于在对所述任意一个树节点的节点信息编辑完成之后，将所述任意一个树节点的节点信息发送至服务器，以在服务器中更新所述任意一个树节点的节点信息，以及更新与所述任意一个树节点相对应的业务数据。

根据本申请实施例的一个方面，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述实施例中所述的方法。

根据本申请实施例的一个方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上述实施例中所述的方法。

根据本申请实施例的一个方面，提供了一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如上述实施例中所述的方法。

在本申请的一些实施例所提供的技术方案中，通过为树形列表中每一个树节点配置编辑控件，可以使用户通过点击任意一个树节点所对应编辑控件就能触发编辑事件，进而可以对所述任意一个树节点的节点信息进行编辑，在服务器中更新所述任意一个树节点的节点信息，以及更新与所述任意一个树节点相对应的业务数据，如此一来，提高了基于Ant Design的树形数据处理的便捷性。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1示出了可以应用本申请实施例的技术方案的系统架构图；

图2示出了根据本申请一个实施例的基于Ant Design的树形数据处理方法的流程图；

图3示出了根据本申请一个实施例的基于Ant Design的树形数据处理的界面图；

图4示出了根据本申请一个实施例的基于Ant Design的树形数据处理的界面图；

图5示出了根据本申请一个实施例的基于Ant Design的树形数据处理的界面图；

图6示出了根据本申请一个实施例的基于Ant Design的树形数据处理装置的框图；

图7示出了适于用来实现本申请实施例的电子设备的计算机系统的结构示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本申请将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本申请的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本申请的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本申请的各方面。

附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。

需要说明的是：在本文中提及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

需要注意的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的对象在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在图示或描述的那些以外的顺序实施。

图1示出了可以应用本申请实施例的技术方案的系统架构图。

如图1所示，系统架构可以包括终端设备(如图1中所示智能手机101、平板电脑102和便携式计算机103中的一种或多种，当然也可以是台式计算机等等，但并不局限于此，本申请在此不做限制)、网络104和服务端105。网络104用以在终端设备和服务端105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线通信链路、无线通信链路等等。

需要说明的是，本申请实施例所提供的基于Ant Design的树形数据处理方法可以由终端设备执行，相应地，基于Ant Design的树形数据处理装置一般设置于终端设备中。

以下对本申请实施例的技术方案的实现细节进行详细阐述：

图2示出了根据本申请一个实施例的基于Ant Design的树形数据处理方法的流程图，该基于Ant Design的树形数据处理方法可以由具有计算处理功能的设备来执行，比如可以由图1中所示的终端设备来执行。参照图2所示，该基于Ant Design的树形数据处理方法至少包括步骤210至步骤230，详细介绍如下：

在步骤210中，在界面中显示树形列表，所述树形列表包括多个树节点，所述树节点用于在服务器中索引目标业务数据，其中，每一个树节点对应一个层级，且配置有编辑控件。

在Ant Design设计框架中，树(Tree)是一种支持搜索查看、更新、勾选、点击数据，并和外部数据进行联动的组件，该组件可以将多个层级的数据展示为树状，并支持折叠，将普通数据列表展示为普通列表。

具体的，在本申请中，通过树形列表来管理多个层级的数据，树形列表由多个层级的树节点组成，其中，相邻层级的树节点之间存在父子节点关系(即任意一个树节点与其下一个层级的树节点之间存在父子节点关系)。

例如，在针对在某一业务数据的管理场景中，需要对物料数据进行分类管理，可以将物料数据分为大中小三类，其中大类物料(即根节点)为中类物料的父节点，小类物料为中类物料的子节点。具体的，比如，大类(即第一层级的树节点)可以是日用品类，日用品类下的中类(即第二层级的树节点)可以包括洗衣用品，厨房清洁用品等等，洗衣用品下的小类(即第三层级的树节点)可以包括洗衣液，洗衣粉，肥皂等等，还比如，大类(即第一层级的树节点)可以是酒水类，酒水类下的中类(即第二层级的树节点)可以包括红酒，白酒，饮料等等，饮料下的小类(即第三层级的树节点)可以包括可乐，橙汁等等。

在本申请中，服务器中可以存储树形列表数据，和与树形列表对应的业务数据，用户可以通过浏览器访问服务器，进而在界面中显示树形列表，并可以通过树形列表中的树节点在服务器中索引目标业务数据。

在本申请中，每一个树节点都配置有编辑控件。具体的，编辑控件实际上为一种交互组件，交互组件是接收用户输入(例如键盘或鼠标活动)，可对数据和方法进行封装从而实现某些新的功能的组件，组件有自己的属性和方法，属性是组件数据的简单访问者，方法则是组件的一些简单而可见的功能。

继续参照图2，在步骤220中，响应于对任意一个树节点所对应编辑控件的点击操作，触发编辑事件，以供用户对所述任意一个树节点的节点信息进行编辑。

在本申请中，具体的，编辑控件至少可以包括树节点新增控件，树节点删除控件，树节点修改控件。为了使本领域技术人员更好的理解本申请，下面结合图3和图4，以一个具体示例对本申请进行说明。参见图3和图4，均示出了根据本申请一个实施例的基于AntDesign的树形数据处理的界面图。

如图3(A)，示出了树形列表301，树节点类别A1对应的树节点新增控件302，如图3(B)，示出了树节点类别A1对应的树节点修改控件303，树节点类别A1对应的树节点删除控件304。用户可以通过点击树节点类别A1对应的任意一个编辑控件来触发编辑事件，进而供用户对所述任意一个树节点的节点信息进行编辑。

比如，如图4，用户点击树节点类别A对应的树节点新增控件，可以触发树节点新增事件，进而增加树节点401。

还比如，如图3(B)，用户点击树节点对应的树节点修改控件，可以触发树节点修改事件，进而修改树节点类别A1。

还比如，如图3(B)，用户点击树节点对应的树节点删除控件，可以触发树节点删除事件，进而删除树节点类别A1。

继续参照图2，在步骤230中，在对所述任意一个树节点的节点信息编辑完成之后，将所述任意一个树节点的节点信息发送至服务器，以在服务器中更新所述任意一个树节点的节点信息，以及更新与所述任意一个树节点相对应的业务数据。

在本申请中，在对所述任意一个树节点的节点信息编辑完成之后，可以将所述任意一个树节点的节点信息发送至服务器，以在服务器中更新所述任意一个树节点的节点信息，以及更新与所述任意一个树节点相对应的业务数据。如此一来，基于本申请提出的方案，用户可以便捷的修改树形列表，当其它用户访问服务器时，界面中可以显示更新之后的树形列表。

在本申请中，所述树形列表可以包括显示在界面的树节点和隐藏在界面中的树节点，其中，显示在界面中的第一目标树节点配置有展开/收起控件，所述第一目标树节点为不属于最后一个层级的任意一个树节点，如图3(B)，显示在界面中的树节点类别A1配置有展开/收起控件305。

在本申请中，还可以执行如下步骤241：

步骤241，响应于对第一目标树节点所对应展开/收起控件的点击操作，在界面中展开或者收起第二目标树节点，所述第二目标树节点为所述第一目标树节点的子树节点。

具体的，如图3(B)，通过点击界面中树节点类别A1配置的展开/收起控件305，可以在界面中展开或者收起树节点类别A1的子树节点类别A11。

进一步的，在本申请中，还可以执行如下步骤251至步骤252：

步骤251，将第三目标树节点对应的编辑控件隐藏在界面中的特定位置，所述第三目标树节点为显示在界面中的任意一个树节点。

步骤252，响应于将界面触控点移动到所述特定位置，显示所述第三目标树节点对应的编辑控件。

在本申请中，如果不将界面触控点(比如桌面鼠标)移动到特定位置，对应的编辑控件将隐藏在界面中，如果将界面触控点(比如桌面鼠标)移动到特定位置，对应的编辑控件将显示在界面中。如此一来，可以增加界面的简洁性，提高用户体验。

进一步的，在本申请中，还可以执行如下步骤261至步骤263：

步骤261，获取用户的身份信息，并基于所述身份信息，判断所述用户是否具有触发编辑事件的权限。

步骤262，如果所述用户具有触发编辑事件的权限，则触发编辑事件。

步骤263，如果所述用户不具有触发编辑事件的权限，则拒绝触发编辑事件。

在本申请中，通过用户身份信息可以判断所述用户是否具有触发编辑事件的权限，进而允许用户是否触发编辑事件。这样做的好处在于，可以避免树形列表被恶意编辑，因此保证服务器中业务数据的安全性。

进一步的，在本申请中，还可以执行如下步骤271至步骤273：

步骤271，在界面中显示搜索框。

步骤272，响应于对所述搜索框的输入操作，获取用户输入的搜索字段。

步骤273，突出展示与所述搜索字段相关联的树节点。

具体的，请参照图5，示出了根据本申请一个实施例的基于Ant Design的树形数据处理的界面图。如图5所示，在输入框输入搜索字段A11，可以突出展示与字段A11相关联的树节点502(比如类别A，类别A1，类别A11)。这样做的好处在于，通过不同筛选条件筛选符合条件数据并对各层级树节点进行展开或者折叠以及关键字的突出展示，在树节点数量很多的情况下，可以方便用户查找到目标树节点，进而提高树形数据处理效率，提高用户体验。

进一步的，在本申请中，还可以执行如下步骤281至步骤282：

步骤281，响应于对任意一个树节点的点击操作，从服务器中下载与所述任意一个树节点相对应的业务数据。

步骤282，将与所述任意一个树节点相对应的业务数据展示在界面的特定区域。

在本申请中，需要说明的是，在本申请所提出的技术方案中，可以基于Ant Design框架，来改造树结构组件，其思路可以参照如下几点说明：

1定义组件的基本功能(初始展示数据、数据展示字段、组件属性、操作事件等)。

1.1定义搜索更新树组件需要展示的数据列表(treeDataList)。

1.2定义搜索更新树组件对于层级数据展示在每一层内容的字段(titlePropName)，作为扩展，该组件支持展示数据的多个字段设置和符号组合(combineTitlePropList)。

1.3定义搜索更新树组件的属性。

1.3.1是否存在根位置新增的按钮(hasRootAdd),以及改按钮悬停提示的文案(rootAddTip)。

1.3.2是否有额外的全选框(hasCheckAdd),该多选框可以全选所有数据。

1.3.3是否支持勾选即是否行前出现多选框(checkable),在该情况下是否支持点击行进行勾选框的取消勾选(isClickCheck)。

1.3.4是否有搜索输入框，搜索可实时展开含有输入关键字的层级折叠不符合条件的层级，并在树结构中高亮标出搜索关键字(canSearch)。

1.3.5是否在树层级直接新增编辑(isNewLineAdd)，否的情况可以实现组件外部单独的操作。

除此之外还有多种配置项可以配置该组件的宽高样式等，树是否只读即是否展示每个层级的新增编辑等按钮，树属性使得该组件具有更好的可配置性，适用更多需求场景更加灵活方便。

1.4定义搜索树组件的交互事件，包括编辑点击事件(onEditClick)、新增点击事件(onAddClick)、删除点击事件(onDeleteClick)、行点击事件(onLineClick)、勾选行事件(onCheckChange)、勾选全部数据事件(onCheckAll)、树层级直接输入更新事件(onInputBlur)。交互事件同时将各种需要数据返回，使得组件外部和复杂树组件的数据通信变得简单。

2采用组件封装的模式，运用react和antd的tree相结合的方式来实现组件数据的加载渲染，结合input输入来实现数据层级的展开折叠。

2.1定义展示数据的对象列表，对象包括该展示字段名称、层级唯一标识、父级信息、子级列表、该层级是否可操作等。

2.2可以定义默认展开、默认选中的数据、默认勾选的层级并导出信息。

2.3通过设置层级可操作展示不同鼠标悬停按钮样式。

3编写组件的交互逻辑。

3.1定义初始数据列表。

3.2定义初始的新增、编辑、删除等方法，用户在树结构点击对应按钮等触发交互事件进行对应操作处理。

4将由组件传入的数据、属性在内部统一处理后集成到组件内。

4.1选中、折叠、勾选等默认数据依次进行处理，渲染成组件对应状态展示的样式。

4.2对传入的初始数据(数组对象)进行处理，转换为组件所需要的数据结构。

5处理组件公共的默认数据、空数据以及空值的处理。

5.1对数据类型以及是否为空值的处理。

5.2对传入的数据中包含空值的数据统一转换为字符串空或者空数组的公共处理。

6处理组件的用户键入和用户交互事件。

6.1用户的输入查询筛选事件以及文本框失去焦点事件的处理。

6.2对单选、复选勾选操作的处理、对点击行选择事件的交互处理，并传递对应的数据信息。

7导出用户所需要的数据参数。

7.1导出参数有:className、hasRootAdd、rootAddTip、hasCheckAll、isClickCheck、canSearch、seletedKey、expandedKeyList、checkedKeys、titlePropName、combineTitlePropList、treeDataList、editBtnName、treeWidth、treeListHeight、canDoubleClickEdit、addDisabledVerify等。

进一步的，上述技术方案可以通过改造Ant Design框架中的树结构组件来实现，其组件属性，方法类型注释请参照如下：

export interface CollapsibleSearchTreePropsType{

className？:string；

//是否有在根添加结点的按钮

hasRootAdd？:boolean；

//rootAdd悬停提示文案

rootAddTip？:string；

//是否有额外多选

hasCheckAll？:boolean；

//单击勾选(为true时多选框存在生效，且默认单击选中事件失效)

isClickCheck？:boolean；

//是否有搜索框

canSearch？:boolean；

//选中的树节点id

selectedKey？:string；

//展开的树节点ids

expandedKeyList？:string[]

//勾选的树节点ids

checkedKeys？:string[]；

//树节点展示的数据属性名称

titlePropName？:string；

//树节点展示的数据属性以及符号组合

combineTitlePropList？:string[]；

//树数据源，单个元素必须含有id属性

treeDataList？:CollapsibleSearchTreeItemType[]；

//编辑按钮名称

editBtnName？:string；

//树宽度(悬停展示按钮需要计算宽度)

treeWidth？:number；

//树高度

treeListHeight？:number；

//是否可以双击重命名

canDoubleClickEdit？:boolean；

//是否展示所有节点新增按钮(有权限的时候可以用到)

canAdd？:boolean；

//是否展示所有节点编辑按钮(有权限的时候可以用到)

canEdit？:boolean；

//是否展示所有节点删除按钮(有权限的时候可以用到)

canDelete？:boolean；

//是否可以勾选

checkable？:boolean；

//是否在当前节点下一行新增(设置该属性，编辑相当于重命名)

isNewLineAdd？:boolean；

//新增按钮置灰校验事件

//eslint-disable-next-line no-unused-vars

addDisabledVerfify？:(item:TreeDataItemType)＝>Promise<string>；

//当前节点下一行新增时气泡提示内容

//eslint-disable-next-line no-unused-vars

newLineAddConfirmContent？:string|((item？:TreeDataItemType)＝>string)；

//树输入框校验提示语

//eslint-disable-next-line no-unused-vars

verifyInputTip？:(value？:string|number)＝>string|string；

//点击编辑按钮，设置该属性，不触发树结构上的直接更新，需要另外写编辑逻辑

//eslint-disable-next-line no-unused-vars

onEditClick？:null|((key:string,item？:any)＝>void)；

//点击新增按钮，设置该属性，不触发树结构上的直接更新，需要另外写新增逻辑

//eslint-disable-next-line no-unused-vars

onAddClick？:null|((key？:string,item？:any)＝>void)；

//点击删除按钮(该组件不包括默认删除事件)

//eslint-disable-next-line no-unused-vars

onDeleteClick？:((key？:string,item？:any,parent？:any)＝>void)；

//点击行

//eslint-disable-next-line no-unused-vars

onLineClick？:null|((key:string,item？:any,parent？:any)＝>void)；

//选择的树节点变更回调

//eslint-disable-next-line no-unused-vars

selectKeyChangeCallback？:null|((item？:any,parent？:any)＝>void)；

//勾选的树节点变更回调

//eslint-disable-next-line no-unused-vars

onCheckChange？:(e:any,checkedItems:any)＝>void；

//eslint-disable-next-line no-unused-vars

onCheckAll？:(checked:boolean,checkedItems:any[])＝>void；

//使用isNewLineAdd输入框失去焦点事件

//eslint-disable-next-line no-unused-vars

onInputBlur？:(currentValue？:string|number,status？:string,item？:any)＝>Promise<boolean|undefined>；

}。

其组件的使用示例如下：

在本申请中，通过为树形列表中每一个树节点配置编辑控件，可以使用户通过点击任意一个树节点所对应编辑控件就能触发编辑事件，进而可以对所述任意一个树节点的节点信息进行编辑，在服务器中更新所述任意一个树节点的节点信息，以及更新与所述任意一个树节点相对应的业务数据，如此一来，提高了基于Ant Design的树形数据处理的便捷性。

此外，本申请改造的基于Ant Design的树结构组件，导出用户所需的参数和方法，实现组件的高复用，高扩展，可灵活配置树结构组件所需要的属性和方法，降低了项目开发阶段的开发难度和复杂度，以便用户只关注于业务逻辑层的处理，让团队开发更有效率；除了可以实现树的查询勾选更新操作，还可以实现树组件和其余组件的联动，实现分类展示具体数据的功能。在项目开发时，实现了一个树结构多种状态(只读、可更新、可选)，完成了一次引用，多种展示，做到了组件的高复用和高拓展，大大提高团队的开发效率；实现了在数据展示对有层级数据和普通无层级列表的区分，处理层级数据展示为树结构也可处理非层级数据展示为列表，个性化样式完善，提高了用户的交互体验。

以下介绍本申请的装置实施例，可以用于执行本申请上述实施例中的基于AntDesign的树形数据处理方法。对于本申请装置实施例中未披露的细节，请参照本申请上述的基于Ant Design的树形数据处理方法的实施例。

图6示出了根据本申请一个实施例的基于Ant Design的树形数据处理装置的框图。

参照图6所示，根据本申请一个实施例的基于Ant Design的树形数据处理装置600，包括：显示单元601、触发单元602和发送单元603。

其中，显示单元601，用于在界面中显示树形列表，所述树形列表包括多个树节点，所述树节点用于在服务器中索引目标业务数据，其中，每一个树节点对应一个层级，且配置有编辑控件；触发单元602，用于响应于对任意一个树节点所对应编辑控件的点击操作，触发编辑事件，以供用户对所述任意一个树节点的节点信息进行编辑；发送单元603，用于在对所述任意一个树节点的节点信息编辑完成之后，将所述任意一个树节点的节点信息发送至服务器，以在服务器中更新所述任意一个树节点的节点信息，以及更新与所述任意一个树节点相对应的业务数据。

在本申请的一些实施例中，基于前述方案，任意一个树节点与其下一个层级的树节点之间存在父子节点关系，所述树形列表包括显示在界面的树节点和隐藏在界面中的树节点，其中，显示在界面中的第一目标树节点配置有展开/收起控件，所述第一目标树节点为不属于最后一个层级的任意一个树节点，所述装置还包括：展开或者收起单元，被用于响应于对第一目标树节点所对应展开/收起控件的点击操作，在界面中展开或者收起第二目标树节点，所述第二目标树节点为所述第一目标树节点的子树节点。

在本申请的一些实施例中，基于前述方案，所述装置还包括：隐藏单元，被用于将第三目标树节点对应的编辑控件隐藏在界面中的特定位置，所述第三目标树节点为显示在界面中的任意一个树节点；响应于将界面触控点移动到所述特定位置，显示所述第三目标树节点对应的编辑控件。

在本申请的一些实施例中，基于前述方案，所述编辑控件至少包括树节点新增控件，树节点删除控件，树节点修改控件。

在本申请的一些实施例中，基于前述方案，所述装置还包括：获取单元，被用于在触发编辑事件之前，获取用户的身份信息，并基于所述身份信息，判断所述用户是否具有触发编辑事件的权限；如果所述用户具有触发编辑事件的权限，则触发编辑事件；如果所述用户不具有触发编辑事件的权限，则拒绝触发编辑事件。

在本申请的一些实施例中，基于前述方案，所述显示单元601配置为：在界面中显示搜索框；响应于对所述搜索框的输入操作，获取用户输入的搜索字段；突出展示与所述搜索字段相关联的树节点。

在本申请的一些实施例中，基于前述方案，所述装置还包括：下载单元，被用于响应于对任意一个树节点的点击操作，从服务器中下载与所述任意一个树节点相对应的业务数据；将与所述任意一个树节点相对应的业务数据展示在界面的特定区域。

图7示出了适于用来实现本申请实施例的电子设备的计算机系统的结构示意图。

需要说明的是，图7示出的电子设备的计算机系统700仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图7所示，计算机系统700包括中央处理单元(Central Processing Unit，CPU)701，其可以根据存储在只读存储器(Read-Only Memory，ROM)702中的程序或者从储存部分708加载到随机访问存储器(Random Access Memory，RAM)703中的程序而执行各种适当的动作和处理，例如执行上述实施例中所述的方法。在RAM 703中，还存储有系统操作所需的各种程序和数据。CPU 701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出(Input/Output，I/O)接口705也连接至总线704。

以下部件连接至I/O接口705：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管(Cathode Ray Tube，CRT)、液晶显示器(Liquid Crystal Display，LCD)等以及扬声器等的输出部分707；包括硬盘等的储存部分708；以及包括诸如LAN(Local Area Network，局域网)卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至I/O接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入储存部分708。

特别地，根据本申请的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本申请的实施例包括一种计算机程序产品，其包括承载在计算机可读存储介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。在该计算机程序被中央处理单元(CPU)701执行时，执行本申请的系统中限定的各种功能。

需要说明的是，本申请实施例所示的计算机可读存储介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(Erasable Programmable Read Only Memory，EPROM)、闪存、光纤、便携式紧凑磁盘只读存储器(Compact Disc Read-Only Memory，CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读存储介质，该计算机可读存储介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。

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

描述于本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现，所描述的单元也可以设置在处理器中。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定。

作为另一方面，本申请还提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述实施例中所述的方法。

作为另一方面，本申请还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被一个该电子设备执行时，使得该电子设备实现上述实施例中所述的方法。

应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本申请的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本申请实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务端、触控终端、或者网络设备等)执行根据本申请实施方式的方法。

本领域技术人员在考虑说明书及实践这里公开的实施方式后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求来限制。

Claims (10)

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

在界面中显示树形列表，所述树形列表包括多个树节点，所述树节点用于在服务器中索引目标业务数据，其中，每一个树节点对应一个层级，且配置有编辑控件；

响应于对任意一个树节点所对应编辑控件的点击操作，触发编辑事件，以供用户对所述任意一个树节点的节点信息进行编辑；

在对所述任意一个树节点的节点信息编辑完成之后，将所述任意一个树节点的节点信息发送至服务器，以在服务器中更新所述任意一个树节点的节点信息，以及更新与所述任意一个树节点相对应的业务数据。

2.根据权利要求1所述的方法，其特征在于，任意一个树节点与其下一个层级的树节点之间存在父子节点关系，所述树形列表包括显示在界面的树节点和隐藏在界面中的树节点，其中，显示在界面中的第一目标树节点配置有展开/收起控件，所述第一目标树节点为不属于最后一个层级的任意一个树节点，所述方法还包括：

响应于对第一目标树节点所对应展开/收起控件的点击操作，在界面中展开或者收起第二目标树节点，所述第二目标树节点为所述第一目标树节点的子树节点。

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

将第三目标树节点对应的编辑控件隐藏在界面中的特定位置，所述第三目标树节点为显示在界面中的任意一个树节点；

响应于将界面触控点移动到所述特定位置，显示所述第三目标树节点对应的编辑控件。

4.根据权利要求3所述的方法，其特征在于，所述编辑控件至少包括树节点新增控件，树节点删除控件，树节点修改控件。

5.根据权利要求1所述的方法，其特征在于，在触发编辑事件之前，所述方法还包括：

获取用户的身份信息，并基于所述身份信息，判断所述用户是否具有触发编辑事件的权限；

如果所述用户具有触发编辑事件的权限，则触发编辑事件；

如果所述用户不具有触发编辑事件的权限，则拒绝触发编辑事件。

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

在界面中显示搜索框；

响应于对所述搜索框的输入操作，获取用户输入的搜索字段；

突出展示与所述搜索字段相关联的树节点。

7.根据权利要求1至6任一项所述的方法，其特征在于，所述方法还包括：

响应于对任意一个树节点的点击操作，从服务器中下载与所述任意一个树节点相对应的业务数据；

将与所述任意一个树节点相对应的业务数据展示在界面的特定区域。

8.一种基于Ant Design的树形数据处理装置，其特征在于，所述装置包括：

显示单元，用于在界面中显示树形列表，所述树形列表包括多个树节点，所述树节点用于在服务器中索引目标业务数据，其中，每一个树节点对应一个层级，且配置有编辑控件；

触发单元，用于响应于对任意一个树节点所对应编辑控件的点击操作，触发编辑事件，以供用户对所述任意一个树节点的节点信息进行编辑；

发送单元，用于在对所述任意一个树节点的节点信息编辑完成之后，将所述任意一个树节点的节点信息发送至服务器，以在服务器中更新所述任意一个树节点的节点信息，以及更新与所述任意一个树节点相对应的业务数据。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有至少一条程序代码，所述至少一条程序代码由处理器加载并执行以实现如权利要求1至7任一项所述的方法所执行的操作。

10.一种电子设备，其特征在于，所述电子设备包括一个或多个处理器和一个或多个存储器，所述一个或多个存储器中存储有至少一条程序代码，所述至少一条程序代码由所述一个或多个处理器加载并执行以实现如权利要求1至7任一项所述的方法所执行的操作。