树组件生成方法、装置、设备和计算机存储介质与流程

本申请涉及计算机技术领域，尤其涉及数据技术领域。

背景技术：

mvvm是model-view-viewmodel的简写。san是一个前端mvvm框架，是百度自己研发的前端技术框架。目前，基于san开发的开源ui(userinterface，用户界面)库中，比较出名的有sui-mui、san-xui，树组件对应的节点都是由组件自身固定的，面对多样化的用后需求，现有的ui库往往难以达到要求。

技术实现要素：

本公开提供了一种树组件生成方法、装置、设备和计算机存储介质。

根据本公开的一方面，提供了一种树组件生成方法，包括：

接收树组件生成请求；树组件生成请求中包括用于生成树组件的预配置数据；预配置数据用于生成树组件的至少一个子组件的可定义属性；

获取与树组件生成请求对应的父组件和至少一个子组件；

根据父组件、至少一个子组件和预配置数据，生成树组件。

根据本公开的另一方面，提供了一种树组件生成装置，包括：

请求接收模块：用于接收树组件生成请求；树组件生成请求中包括用于生成树组件的预配置数据；预配置数据用于生成树组件的至少一个子组件的可定义属性；

获取模块：用于获取与树组件生成请求对应的父组件和至少一个子组件；

生成模块：用于根据父组件、至少一个子组件和预配置数据，生成树组件。

根据本公开的另一方面，提供了一种电子设备，包括：

至少一个处理器；以及

与至少一个处理器通信连接的存储器；其中，

存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行本申请任意一项实施例所提供的方法。

根据本公开的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，计算机指令用于使计算机执行本申请任意一项实施例所提供的方法。

本实施例中，能够根据预配置数据生成子组件，然后根据子组件和父组件生成树组件，从而能够对树组件进行自定义生成，无需依赖ui库，从而能够满足应用过程中树组件的定制化需求。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本申请的限定。其中：

图1是根据本申请实施例的树组件生成方法示意图；

图2是根据本申请实施例的树组件生在一具体场景下的示意图；

图3是根据本申请实施例的树组件生在另一具体场景下的示意图；

图4是根据本申请实施例的树组件生在另一具体场景下的示意图；

图5是根据本申请另一实施例的树组件生成方法示意图；

图6是根据本申请另一实施例的树组件生成方法示意图；

图7是根据本申请再一实施例的树组件生成装置示意图；

图8是根据本申请再一实施例的树组件生成装置示意图；

图9是根据本申请再一实施例的树组件生成装置示意图；

图10是根据本申请再一实施例的树组件生成装置示意图；

图11是根据本申请再一实施例的树组件生成装置示意图；

图12是用来实现本申请实施例的树组件生成方法的电子设备的框图。

具体实施方式

以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

图1示出了根据本申请一种实施例的树组件生成方法流程示意图，如图1所示，包括以下步骤：

步骤101：接收树组件生成请求；树组件生成请求中包括用于生成树组件的预配置数据；预配置数据用于生成树组件的至少一个子组件的可定义属性。

步骤102：获取与树组件生成请求对应的父组件和至少一个子组件。

步骤103：根据父组件、至少一个子组件和预配置数据，生成树组件。

本实施例中，树组件生成请求可以是由客户端发送的用于生成树组件的请求。预配置数据可以是用户预先自定义的数据，用于生成树组件的一个或多个子组件的可定义属性。这些可定义属性是允许用户进行自行配置的，比如树组件的子组件内容、名称、下拉菜单(删除、添加按钮)，以及子组件的自定义元素。

本实施例中，一个树组件对应一个父组件和至少一个子组件，针对树组件生成请求，获取相应的父组件成为树组件的根节点，至少一个子组件作为树组件的根节点的子节点。树组件主要是拆分成两大组件：父组件tree、子组件treenode。父组件中包含一些标准的限制，例如树组件是否默认展开、树组件的形态。子组件一般包含节点信息，例如节点名称、是否选中的展示。

在一种示例中，父组件和子组件可以如图2所示。在树组件中，一般包括一个父组件201，可以包含多个子组件202。这些子组件202以父组件201的子节点的形式与父组件201一起，形成树组件。在本示例中，树组件包括一层子组件202。子组件202中可以包括子节点的名称。父组件201中所包括的信息可以是，限定树组件默认展开，树组件的形态为一层子组件。在其它示例中，父组件中也可以存储限制树组件默认不展开的信息，这种情况下，树组件的子组件可不显示。

在一种示例中，父组件和子组件可以如图3所示。在树组件中，包括一个父组件301和多层子组件302。第一层子组件302的子节点为第二层子组件。在本实例中，树组件包括两层子组件302。子组件302中可以包括该子组件是否选中等。父组件301中所包括的信息可以是，限定树组件默认展开，树组件的形态为二层子组件。在其它示例中，父组件中也可以存储限制树组件默认非展开的信息，这种情况下，树组件的子组件可不显示。

根据父组件、至少一个子组件和预配置数据，生成树组件，将预配置数据加入与之对应的子组件中，将子组件作为父组件的子节点，生成包含父组件、子组件和预配置数据的树组件。本实施例中，预配置数据可以是在子组件原显示名称的位置显示子组件生成的时间戳，也可以用于给子组件添加按钮，比如菜单、删除按钮等。

本实施例中，树组件为基于san的树组件。

目前tree组件(树组件)所使用的库中，比较有名的库包括elementui(为一种vue组件库，目前san语法和vue相近，但不完全一致)。通过elementui生成树组件的解决方案是：tree组件，具有数据管理store(存储单元)，store是一个对象，包括数据和方法。其中，

store的数据：store初始化时，会遍历data(数据)的数据，然后通过newnode(新节点工具)来新建每个节点。这个node包括了checked(检查)、data(数据)、parent(父母)等数据信息。这个store会作为真正的数据传递到treenode(子组件)组件；

store的方法：由于store是一个对象，其在创建时就有很多的方法，这些方法包括了获取当前选中的节点、设置节点选中、追加节点。tree组件通过这个store来初始化数据信息，以及其对应的方法，外部组件可以调用tree组件的一些公用方法、获取对应数据。

目前基于element的tree组件可以涉及绝大部分的应用场景。然而，由于vue语法与san的区别，elementui自定义组件是通过vue语法中的components来进行设置，单独通过san不能这样实现；同时，elementui的树组件设计功能相对庞大，完全参照并无必要。

同时，san开源的ui库中，例如san-mui、san-xui，树组件主要是拆分成两大组件：父组件tree、子组件treenode，一般tree组件都是用于对树组件进行一些标准的限制，例如限制树组件是否默认展开、树组件的形态。treenode一般是用于限定节点信息，例如节点名称、是否选中的展示。在目前的san中，树组件的构件依赖ui库，父组件和子组件的信息都是固定的，难以实现多样化的要求。

因此，本实施例中，能够根据预配置数据生成子组件，然后根据子组件和父组件生成树组件，从而能够对树组件进行自定义生成，能够应用于mvvm的san，无需依赖ui库，从而能够满足应用过程中树组件的需求。

在另一种实施例中，根据父组件、至少一个子组件和预配置数据，生成树组件，包括：

根据预配置数据生成至少一个子组件的临时对象；

将临时对象作为至少一个子组件的子节点；

将至少一个子组件作为父组件的子节点，得到树组件。

在本实施例中，若对应的子组件存在预配置数据，则根据预配置数据生成对应的子组件的临时对象，然后将临时对象以附加的方式添加到子组件，作为子组件的子节点。将带有临时对象的子组件和不带有临时对象的子组件作为父组件的子孙节点，形成树组件。

本实施例中，临时对象可以以子组件的子节点的形式附加在子节点上，如图4所示，在树组件中，存在一个父组件401，一层子组件402。其中，部分子组件402具有预配置数据，这些与配置数据生成的临时对象403以子组件401的子节点的形式附加在子组件上。每个临时对象403，对应一个实例。

当设置树组件设置为自定义组件形式时，父组件tree下的子组件treenode会根据对应自定义组件来新建，并将对应数据融合，使用attach(附加)方法附在treenode子组件中，并保存这个新增的动态子组件对应。

本实施例中，可以通过临时对象保存树组件的自定义的预配置数据，从而实现树组件的自定义，能够应用于mvvm的san，提供多样化的树组件。

在另一种实施方式中，树组件生成方法还包括：

接收用户对至少一个子组件的预配置数据更新请求；

根据预配置数据更新请求，更新至少一个子组件的临时对象；

根据更新后的至少一个子组件的临时对象，更新至少一个子组件。

本实施例中，更新组件的临时对象，可以在子组件对应的临时对象的实例中进行更新。当数据变化时，通过创建子组件时临时保存的对象，使用set(设置)方法更新对应数据。

预配置数据更新请求，可以用于对预配置数据进行更改，例如，预配置数据配置子节点显示时间戳，通过对预配置数据进行更改，修改为子节点显示子节点名称。再如，预配置数据配置子节点显示一个删除按钮，通过对预配置数据进行更改，修改为子节点显示菜单。

本实施例中，用户可直接在子组件对应的临时对象中对子组件进行更新，从而实现对自定义数据的修改。

在本申请另一种实施方式中，树组件生成方法还包括：

树组件根据更新后的临时对象，生成派发消息；

将派发消息发送到树组件的外层组件，使得外层组件得知更新后的临时对象。

本实施例中，树组件可设置对应的message通信，通过dispatch(派发)的方式来将message通知到外层组件。对于外层组件，可以通过发布订阅的模式通知自定义的组件，从而通信。

在本实例中，用户可以通过对子组件进行操作，根据用户对子组件操作，获得执行编码，然后设置一个中间件，该中间件根据执行编码查找到与执行编码对应的操作，然后执行该操作。

通过派发的方式，可将树组件的临时对象更新时间通知外层组件，使得外层组件能够根据树组件的修改内容，确定自身是否需要修改。具体而言，外层组件可以包括菜单栏、按钮组等。

在本申请另一种实施例中，树组件生成方法还包括：

根据父组件，生成可视化的父组件对象；

根据子组件和临时对象，生成可视化的子组件对象；

根据可视化的父组件对象和可视化的子组件对象，生成可视化的树组件对象。

本实施例中，根据父组件和子组件，生成可视化的父组件对象和子组件对象，能够应用于mvvm的san，从而使得自定义的树组件能够以可视化的方式展现出来。

在本申请一种示例中，组件生成方法包括如图5所示的步骤：

步骤501：接收树组件生成请求；树组件生成请求中包括用于生成树组件的预配置数据；预配置数据用于生成树组件的至少一个子组件的可定义属性。

步骤502：获取与树组件生成请求对应的父组件和至少一个子组件。

步骤503：根据预配置数据生成至少一个子组件的临时对象。

步骤504：将临时对象作为至少一个子组件的子节点。

步骤505：将至少一个子组件作为父组件的子节点，得到树组件。

在一种示例中，如图6所示，树组件生成方法还包括：

步骤601：接收源数据。源数据为子组件生成请求或者子组件更新请求。

步骤602：判断源数据是否为第一次传入。若是第一次传入源数据，则表明源数据为子组件生成请求，进入步骤603；否则，表明源数据为子组件更新请求，进入步骤604。

步骤603：生成子组件的临时组件，然后根据临时组件生成子组件。其中，customizenode(临时对象)是通过san的自定义组件新建对象，然后将这个对象attach(附加)到treenode中，并push(推送)到treenode的children(this.children)(子节点)中。数据更新时，可以使用这个customizenode来更新对应自定义子组件的数据。

步骤604：更新子组件的临时组件。

本申请实施例还提供一种树组件生成装置，如图7所示，包括：

请求接收模块701：用于接收树组件生成请求；树组件生成请求中包括用于生成树组件的预配置数据；预配置数据用于生成树组件的至少一个子组件的可定义属性；

获取模块702：用于获取与树组件生成请求对应的父组件和至少一个子组件；

生成模块703：用于根据父组件、至少一个子组件和预配置数据，生成树组件。

在一种实时方式中，树组件生成装置包括图7所示的请求接收模块701、获取模块702、生成模块703，在此基础上，如图8所示，生成模块703包括：

临时对象单元801：用于根据预配置数据生成至少一个子组件的临时对象；

子节点单元802：用于将临时对象作为至少一个子组件的子节点；

附加单元803：用于将至少一个子组件作为父组件的子节点，得到树组件。

在一种实施方式中，树组件生成装置包括图7所示的请求接收模块701、获取模块702、生成模块703，在此基础上，如图9所示，装置还包括：

更新请求模块901：用于接收用户对至少一个子组件的预配置数据更新请求；

临时对象更新模块902：用于根据预配置数据更新请求，更新至少一个子组件的临时对象；

子组件更新模块903：用于根据更新后的至少一个子组件的临时对象，更新至少一个子组件。

树组件生成装置包括图7所示的请求接收模块701、获取模块702、生成模块703，在此基础上，如图10所示，装置还包括：

派发消息模块1001：用于树组件根据更新后的临时对象，生成派发消息；

发送模块1002：用于将派发消息发送到树组件的外层组件，使得外层组件得知更新后的临时对象。

树组件生成装置包括图7所示的请求接收模块701、获取模块702、生成模块703，在此基础上，如图11所示，装置还包括：

父组件对象生成模块1101：用于根据父组件，生成可视化的父组件对象；

子组件对象生成模块1102：用于根据子组件和临时对象，生成可视化的子组件对象；

树组件对象生成模块1103：用于根据可视化的父组件对象和可视化的子组件对象，生成可视化的树组件对象。

根据本申请的实施例，本申请还提供了一种电子设备和一种可读存储介质。

如图12所示，是根据本申请实施例的树组件生成方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。

如图12所示，该电子设备包括：一个或多个处理器1201、存储器1202，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示gui的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个电子设备，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图12中以一个处理器1201为例。

存储器1202即为本申请所提供的非瞬时计算机可读存储介质。其中，存储器存储有可由至少一个处理器执行的指令，以使至少一个处理器执行本申请所提供的树组件生成方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的树组件生成方法。

存储器1202作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的树组件生成方法对应的程序指令/模块(例如，树组件生成装置包括图7所示的请求接收模块701、获取模块702、生成模块703)。处理器1201通过运行存储在存储器1202中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中的树组件生成方法。

存储器1202可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据视频编码电子设备的使用所创建的数据等。此外，存储器1202可以包括高速随机存取存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中，存储器1202可选包括相对于处理器1201远程设置的存储器，这些远程存储器可以通过网络连接至视频编码电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

树组件生成方法的电子设备还可以包括：输入装置1203和输出装置1204。处理器1201、存储器1202、输入装置1203和输出装置1204可以通过总线或者其他方式连接，图12中以通过总线连接为例。

输入装置1203可接收输入的数字或字符信息，以及产生与视频编码电子设备的用户设置以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置1204可以包括显示设备、辅助照明装置(例如，led)和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器(lcd)、发光二极管(led)显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。

此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用asic(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(pld))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，crt(阴极射线管)或者lcd(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(lan)、广域网(wan)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

根据本申请实施例的技术方案，能够根据预配置数据生成子组件，然后根据子组件和父组件生成树组件，从而能够对树组件进行自定义生成，能够应用于mvvm的san，无需依赖ui库，从而能够满足应用过程中树组件的需求。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本申请公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。