CN114840293A - 树形控件的渲染方法、装置、计算机设备及存储介质 - Google Patents
树形控件的渲染方法、装置、计算机设备及存储介质 Download PDFInfo
- Publication number
- CN114840293A CN114840293A CN202210432269.1A CN202210432269A CN114840293A CN 114840293 A CN114840293 A CN 114840293A CN 202210432269 A CN202210432269 A CN 202210432269A CN 114840293 A CN114840293 A CN 114840293A
- Authority
- CN
- China
- Prior art keywords
- node
- tree
- data
- rendering
- target
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 108
- 238000000034 method Methods 0.000 title claims abstract description 36
- 238000000547 structure data Methods 0.000 claims abstract description 51
- 238000012986 modification Methods 0.000 claims abstract description 45
- 230000004048 modification Effects 0.000 claims abstract description 45
- 238000004590 computer program Methods 0.000 claims description 9
- 238000012545 processing Methods 0.000 claims description 5
- 238000010586 diagram Methods 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 230000001960 triggered effect Effects 0.000 description 3
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 238000000926 separation method Methods 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000005259 measurement Methods 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本申请提供一种树形控件的渲染方法、装置、计算机设备及存储介质，其方法包括：获取第一树形数据源，渲染生成第一树形控件；接收第一树形控件中任一一级节点的图标展开指令，根据图标展开指令，获取待展开节点的子节点数据；对待展开节点的子节点数据进行格式化后填充至第一树形数据源，渲染得到目标树形控件；接收目标树形控件的操作指令，操作指令包括操作内容和待操作节点标识；根据待操作节点标识和操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，及根据修改结果与预先存储的目标树形控件的树结构数据，渲染生成目标页面。本申请能够加快接口的请求速度，并且避免节点修改后页面渲染恢复初始样。
Description
技术领域
本申请涉及数据处理领域，更具体地涉及一种树形控件的渲染方法、装置、计算机设备及计算机可读存储介质。
背景技术
目前一些常用UI组件库的树形控件具有展示层级结构和显示信息的功能，但在软件后台管理过程中，经常需要根据不同的层级实现树结构,以及实现树节点的附加操作功能。
目前有在常用树形控件的节点上添加操作控件，一般通过操作控件对树形控件的节点进行修改操作后，页面无法直接看到修改结果，需要重新加载整个树结构，则导致修改之前的节点状态无法保留，比如选中、展开、收起等状态无法保留，并且在节点数据量很大时，接口请求时间较长，页面渲染时间也增加。
发明内容
鉴于以上内容，有必要提供一种树形控件的渲染方法、装置、计算机设备及计算机可读存储介质。
第一方面，本申请的实施例提供一种树形控件的渲染方法，包括：
获取第一树形数据源，渲染生成第一树形控件；
接收所述第一树形控件中任一一级节点的图标展开指令，根据所述图标展开指令，获取待展开节点的子节点数据；
对所述待展开节点的子节点数据进行格式化后填充至所述第一树形数据源，渲染得到目标树形控件；
接收所述目标树形控件的操作指令，所述操作指令包括操作内容和待操作节点标识；
根据所述待操作节点标识和所述操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，及根据修改结果与预先存储的所述目标树形控件的树结构数据，渲染生成目标页面。
在一些实施例中，所述对所述待展开节点的子节点数据进行格式化后填充至所述第一树形数据源，包括：
根据所述待展开节点的子节点数据的数组长度，为所述待展开节点添加树特征属性后，得到第二树形数据源；
将第二树形数据源填充至所述第一树形数据源后并进行存储。
在一些实施例中，所述树特征属性包括子节点属性、叶子属性以及层级属性。
在一些实施例中，所述操作内容包括新增子节点操作项；所述待操作节点标识包括当前待新增节点的层级标识和身份标识；所述根据所述待操作节点标识和所述操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，及根据修改结果与预先存储的所述目标树形控件的树结构数据，渲染生成目标页面，包括：
根据所述当前待新增节点的身份标识，获取当前待新增节点的子节点数据以进行格式化处理，并新增子节点；
根据所述当前待新增节点的层级标识，确定新增子节点的层级标识，以得到当前待新增节点的树结构数据；
根据所述目标树形控件的树结构数据、当前待新增节点的树结构数据和层级标识，渲染生成第一页面。
在一些实施例中，所述操作内容包括编辑节点操作项和编辑名称；所述待操作节点标识包括当前待编辑节点的层级标识；所述根据所述待操作节点标识和所述操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，及根据修改结果与预先存储的所述目标树形控件的树结构数据，渲染生成目标页面，包括：
根据当前待编辑节点的层级标识和编辑名称，获取所述当前待编辑节点的节点名称并修改为所述编辑名称，以更新所述当前待编辑节点的节点数据；
根据所述目标树形控件的树结构数据、当前待编辑节点的节点数据和层级标识，渲染生成第二页面。
在一些实施例中，所述操作内容包括删除节点操作项；所述待操作节点标识包括当前待删除节点的层级标识和身份标识；所述根据所述待操作节点标识和所述操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，及根据修改结果与预先存储的所述目标树形控件的树结构数据，渲染生成目标页面，包括：
根据当前待删除节点的层级标识，查询当前待删除节点的父节点；
在所述当前待删除节点的父节点的子节点属性中删除所述当前待删除节点，并更新当前选中节点为已删除节点的目标关联节点；
根据所述目标树形控件的树结构数据和目标关联节点的层级标识，渲染生成第三页面。
在一些实施例中，所述操作内容包括移动节点操作项；所述待操作节点标识包括所述当前待移动节点的层级标识和移动目的节点的身份标识；所述根据所述待操作节点标识和所述操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，及根据修改结果与预先存储的所述目标树形控件的树结构数据，渲染生成目标页面，包括：
根据所述当前待移动节点的层级标识，查询所述当前待移动节点的父节点，在所述当前待移动节点的父节点的子节点属性中删除所述当前待移动节点；
根据所述移动目的节点的身份标识，获取所述移动目的节点的子节点数据，在所述移动目的节点的子节点属性和层级属性中新增移动节点，并更新当前选中节点为已移动节点；
根据所述目标树形控件的树结构数据、移动目的节点的树结构数据和已移动节点的层级标识，渲染生成第四页面。
第二方面，本申请的实施例提供一种树形控件的渲染装置，用于实现如所述的树形控件的渲染方法，包括：
第一渲染模块，用于获取第一树形数据源，渲染生成第一树形控件；
获取数据模块，用于接收所述第一树形控件中任一一级节点的图标展开指令，根据所述图标展开指令，获取待展开节点的子节点数据；
第二渲染模块，用于对所述待展开节点的子节点数据进行格式化后填充至所述第一树形数据源，渲染得到目标树形控件；
接收指令模块，用于接收所述目标树形控件的操作指令，所述操作指令包括操作内容和待操作节点标识；
第三渲染模块，用于根据所述待操作节点标识和所述操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，及根据修改结果与预先存储的所述目标树形控件的树结构数据，渲染生成目标页面。
第三方面，本申请的实施例提供一种计算机设备，包括：存储器，用于存储计算机程序；处理系统，用于执行所述存储器存储的所述计算机程序，当所述计算机程序被执行时，所述处理器用于执行如所述的树形控件的渲染方法。
第四方面，本申请的实施例提供一种计算机可读存储介质，所述计算机可读存储介质包括计算机指令，当所述计算机指令在终端设备上运行时，使得所述终端设备执行如所述的树形控件的渲染方法。
本申请的技术方案中接收第一树形控件中任一一级节点的图标展开指令，根据图标展开指令，获取待展开节点的子节点数据并进行格式化后填充至第一树形数据源，得到目标树形控件，从而在渲染目标树形控件时采用分步加载模式，通过用户的触发动作，逐层显示树结构，不是一次性请求所有节点数据，从而有利于加快接口的请求速度，缩短树形控件的渲染显示时间。在接收到用户对目标树形控件的操作指令时，根据操作指令的待操作节点标识和操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，并基于预先存储的目标树形控件的树结构数据，更新目标树形控件，使得操作结果直接呈现在浏览器页面，提高用户操作的便利性，避免通过后端接口重新加载数据而导致页面回到根节点渲染状态。
附图说明
图1是本申请实施例中树形控件的渲染方法的流程图；
图2a是本申请实施例中提供的第一树形控件的展示示意图；
图2b是本申请实施例中提供的目标树形控件的展示示意图；
图3是本申请实施例中树形控件的渲染方法步骤S103的流程图；
图4是本申请实施例中提供的当前选中的子节点的层级展开示意图；
图5是本申请实施例中树形控件的渲染方法步骤S105的第一流程图；
图6是本申请实施例中树形控件的渲染方法步骤S105的第二流程图；
图7是本申请实施例中树形控件的渲染方法步骤S105的第三流程图；
图8是本申请实施例中树形控件的渲染方法步骤S105的第四流程图；
图9是本申请实施例中树形控件的渲染装置的原理框图；
图10是本申请实施例中一计算机设备的原理框图。
具体实施方式
下面将结合本申请实现方式中的附图，对本申请实现方式中的技术方案进行清楚、完整地描述，显然，所描述的实现方式仅是本申请一部分实现方式，而不是全部的实现方式。
在目前后台管理系统中，经常需要根据不同的层级实现树结构,以及实现树节点的修改调整。目前市面上的UI组件库，一般都有树形控件，例如：React框架目前使用最广的ElementUI、iView和AntDesignVue等UI组件库。在这些UI组件库的树形控件上进行修改操作后，若前端直接调取接口更新树节点数据，树会重新加载，并回到首次渲染时的模样，不会保留操作前的状态，所以在具体实现的时候需要前端自行进行改造和封装，前端需要维护当前树节点状态。
请参阅图1，本申请的实施例提供了一种树形控件的渲染方法，包括下述步骤：
S101、获取第一树形数据源，渲染生成第一树形控件。
可以理解地，第一树形数据源可以是目标项目控件所有一级节点的源数据，可以是json格式数据；第一树形控件表示由一级节点的源数据渲染得到的控件列表；目标项目控件可以是具体应用场景下的项目管理组件。
具体地，用户在浏览器通过鼠标事件或手指事件触发请求打开目标项目控件，通过后端接口获取所述目标项目控件的所有一级节点的源数据并渲染在浏览器页面上，生成第一树形控件，如图2a所示。
举例说明，浏览器上显示某市市场监督管理局这一目标项目控件，则展开后显示多个一级节点，比如餐饮科、特种设备科、药品科、计量与认证认可科等，从而形成第一树形控件。
S102、接收第一树形控件中任一一级节点的图标展开指令，根据图标展开指令，获取待展开节点的子节点数据。
其中，图标展开指令可以是用户通过鼠标事件或手指事件产生的触发指令，图标展开指令包括当前选中的一级节点的身份标识，比如节点的id；待展开节点是指当前选中的一级节点。
具体地，当用户点击第一树形控件上任意一个一级节点的展开按钮时，将当前选中的待展开节点即一级节点作为一个父节点，根据待展开节点的id，通过API接口向后端请求查询待展开节点的所有子节点，然后利用递归算法，将请求回的数据作为待展开节点的子节点数据。
S103、对待展开节点的子节点数据进行格式化后填充至第一树形数据源，渲染得到目标树形控件；目标树形控件是指第一树形控件中至少一个一级节点作为树节点展开后得到的树形控件。
具体地，对当前选中的待展开节点即一级节点的子节点数据进行树形结构的格式化处理，然后填充至第一树形数据源，并渲染在浏览器得到目标树形控件，如图2b所示。
需要说明的是，本实施例的目标树形控件具备操作控件，具体地，在现有UI组件库的树形控件上添加操作控件，使得在点击或者移入树节点附近时，显示操作选项，并利用标题渲染(titleRender)属性，根据节点层级属性动态渲染操作项内容，例如：新增、编辑、删除、移动，具体地，父节点可以新增子节点、编辑本节点、删除本节点、或者移动至其他的上一级节点下，从而大大提高树结构的可操作性。
S104、接收目标树形控件的操作指令，操作指令包括操作内容和待操作节点标识。
其中，操作内容包括新增子节点操作项、编辑节点操作项、删除节点操作项或移动节点操作项；待操作节点标识包括待操作节点的身份标识和/或层级标识，其中身份标识为节点的id，层级标识为表示节点的层级序号。
具体地，接收用户在浏览器通过鼠标事件或手指事件触发的操作指令。
S105、根据待操作节点标识和操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，及根据修改结果与预先存储的目标树形控件的树结构数据，渲染生成目标页面。
需要说明的是，目标树形控件的树结构数据是指前端当前已经加载的目标树形控件的节点数据。
具体地，根据待操作节点标识和操作内容，确定要查询的待操作节点数据和/或关联节点数据，并根据操作内容完成对应操作修改，同时前端服务器基于修改前目标树形控件的树结构数据，渲染生成目标页面。
本实施例中接收第一树形控件中任一一级节点的图标展开指令，根据图标展开指令，获取待展开节点的子节点数据并进行格式化后填充至第一树形数据源，得到目标树形控件，从而在渲染目标树形控件时采用分步加载模式，通过用户的触发动作，逐层显示树结构，不是一次性请求所有节点数据，从而有利于加快接口的请求速度，缩短树形控件的渲染显示时间。在接收到用户对目标树形控件的操作指令时，根据操作指令的待操作节点标识和操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，并基于预先存储的目标树形控件的树结构数据，更新目标树形控件，使得操作结果直接呈现在浏览器页面，提高用户操作的便利性，避免通过后端接口重新加载数据而导致页面回到根节点渲染状态。
在一些实施例中，请参阅图3，步骤S103中的对待展开节点的子节点数据进行格式化后填充至第一树形数据源，包括：
S301、根据待展开节点的子节点数据的数组长度，为待展开节点添加树特征属性后，得到第二树形数据源；其中树特征属性包括子节点属性、叶子属性以及层级属性；
S302、将第二树形数据源填充至第一树形数据源后并进行存储。
需要说明的是，通过后端请求回的子节点数据为平级节点数据；进一步地，为待展开节点添加子节点(children)属性，并根据待展开节点的子节点数据的children数组长度，确定待展开节点是否为叶子节点，若是，则添加叶子(isLeaf)属性；进一步地，为待展开节点的子节点数据添加层级(depPos)属性，使得待展开节点的每个子节点都具有层级标识。
举例说明：
//0-0-1-1
//treeData[0]
//treeData[0].children[0]
//treeData[0].children[0].children[1]
//treeData[0].children[0].children[1].children[1]
上述层级标识[0-0-1-1]表示第一树形控件的第一个子树(一级节点)的第二叶子节点(二级节点)的第二个子节点，如图4所示。本实施例中为每个子节点、叶子或子树添加层级属性，从而根据层级和序号，来显示节点的位置，便于在后续修改操作时能快速找到当前操作的节点，且实现数据的懒加载，不需要一次性请求完所有数据，加快接口的请求速度。
需要说明的是，待展开节点的子节点数据经过上述格式化后得到第二树形数据源，将第二树形数据源填充至第一树形数据源，渲染得到目标树形控件，同时，前端存储目标树形控件的树结构数据、当前展开的树节点以及当前已经加载的节点数据，从而便于在后续修改刷新页面时，前端可以维持修改前的页面展示状态。
在一些实施例中，请参阅图5，本实施例中若操作内容包括新增子节点操作项；待操作节点标识包括当前待新增节点的层级标识和身份标识；步骤S105可以包括如下步骤：
S501、根据当前待新增节点的身份标识，获取当前待新增节点的子节点数据以进行格式化处理，并新增子节点；
S502、根据当前待新增节点的层级标识，确定新增子节点的层级标识，以得到当前待新增节点的树结构数据；
S503、根据目标树形控件的树结构数据、当前待新增节点的树结构数据和层级标识，渲染生成第一页面。
具体地，当用户在浏览器端的目标树形控件上点击某个节点的新增控件进行新增子节点时，触发产生对应的操作指令，则服务器根据当前待新增节点的id，调取后端接口获取当前待新增节点的子节点数据，并进行树形结构的格式化以及新增子节点；进一步地，结合当前目标树形控件的树结构层级以及当前待新增节点的层级标识，通过字符串分离方法确定当前待新增节点的每个原有子节点的层级标识以及新增子节点的层级标识，然后根据新增子节点的层级标识，将新增子节点和当前待新增节点建立索引链接，并更新当前待新增节点的树结构数据；进一步地，前端根据目标树形控件的树结构数据、当前待新增节点的树结构数据和层级标识，渲染生成第一页面，且树形为展开状态和选中节点状态。
需要说明的是，在当前目标树形控件展开的情况下，新增子节点控件可以直接渲染得到的页面即为第一页面。此外，本实施例中采用的字符串分离方法，具体可以调用String类的split()函数。
在一些实施例中，请参阅图6，若操作内容包括编辑节点操作项和编辑名称；待操作节点标识包括当前待编辑节点的层级标识；步骤S105可以包括如下步骤：
S601、根据当前待编辑节点的层级标识和编辑名称，获取当前待编辑节点的节点名称并修改为编辑名称，以更新当前待编辑节点的节点数据；
S602、根据目标树形控件的树结构数据、当前待编辑节点的节点数据和层级标识，渲染生成第二页面。
具体地，当用户在浏览器端的目标树形控件上点击某个节点的编辑控件进行编辑时，触发产生对应的操作指令，则服务器根据当前待编辑节点的层级标识，直接递归查询当前待编辑节点，根据用户输入的编辑名称更新节点名称，从而更新当前待编辑节点的节点数据；进一步地，前端根据目标树形控件的树结构数据、当前待编辑节点的节点数据和层级标识，渲染生成第二页面。需要说明的是，第二页面是指用户对目标树形控件的某个节点进行编辑修改后直接渲染生成的页面，且树形为展开状态和选中节点状态。
在一些实施例中，请参阅图7，若操作内容包括删除节点操作项；待操作节点标识包括当前待删除节点的层级标识和身份标识；步骤S105可以包括如下步骤：
S701、根据当前待删除节点的层级标识，查询当前待删除节点的父节点；
S702、在当前待删除节点的父节点的子节点属性中删除当前待删除节点，并更新当前选中节点为已删除节点的目标关联节点；目标关联节点包括已删除节点的父节点或兄弟节点；
S703、根据目标树形控件的树结构数据和目标关联节点的层级标识，渲染生成第三页面。
具体地，当用户在浏览器端的目标树形控件上点击某个节点的删除控件进行删除时，触发产生对应的操作指令，则服务器根据当前待删除节点的层级标识，直接查询当前待删除节点的父节点，并在当前父节点的children属性中删除待删除节点数据；进一步地，更新当前选中节点的层级标识，具体地，若当前父节点没有其他子节点时，将当前选中节点更新为当前父节点，若当前父节点有其他子节点，则当前选中节点更新为当前待删除节点的下一个节点，或者当前待删除节点为当前父节点的最后一个子节点时，则将当前选中节点更新为当前待删除节点的上一个节点；进一步地，前端根据目标树形控件的树结构数据和目标关联节点的层级标识，渲染生成第三页面。需要说明的是，第三页面是指用户对目标树形控件的某个节点进行删除修改后直接渲染生成的页面，且树形为展开状态和选中节点状态。
在一些实施例中，请参阅图8，若操作内容包括移动节点操作项；待操作节点标识包括当前待移动节点的层级标识和移动目的节点的身份标识；步骤S105可以包括如下步骤：
S801、根据当前待移动节点的层级标识，查询当前待移动节点的父节点，在当前待移动节点的父节点的子节点属性中删除当前待移动节点；
S802、根据移动目的节点的身份标识，获取移动目的节点的子节点数据，在移动目的节点的子节点属性和层级属性中新增移动节点，并更新当前选中节点为已移动节点；需要说明的是，移动目的节点为当前待移动节点的父节点的同级节点。
S803、根据目标树形控件的树结构数据、移动目的节点的树结构数据和已移动节点的层级标识，渲染生成第四页面。
具体地，当用户在浏览器端的目标树形控件上点击某个节点的移动控件并输入移动目的节点时，触发产生对应的操作指令，则服务器根据当前待移动节点的层级标识，直接查询当前待移动节点的父节点，并在当前父节点的children属性中删除待移动节点数据；进一步地，将移动目的节点作为新父节点，根据移动目的节点的id，调取后端接口获取移动目的节点的子节点数据并进行树结构格式化，然后在移动目的节点的children属性中新增当前移动节点并添加层级属性；进一步地，更新当前选中节点为已移动节点；前端根据目标树形控件的树结构数据、移动目的节点的树结构数据和已移动节点的层级标识，渲染生成第四页面。需要说明的是，第四页面是指用户对目标树形控件的某个节点进行移动操作后直接渲染生成的页面，且最末展开的树结构为移动目的节点的树结构，并选中已移动节点。
本实施例中接收第一树形控件中任一一级节点的图标展开指令，根据图标展开指令，获取待展开节点的子节点数据并进行格式化后填充至第一树形数据源，得到目标树形控件，从而在渲染目标树形控件时采用分步加载模式，通过用户的触发动作，逐层显示树结构，不是一次性请求所有节点数据，从而有利于加快接口的请求速度，缩短树形控件的渲染显示时间。在接收到用户对目标树形控件的操作指令时，根据操作指令的待操作节点标识和操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，并基于预先存储的目标树形控件的树结构数据，更新目标树形控件，使得操作结果直接呈现在浏览器页面，提高用户操作的便利性，避免通过后端接口重新加载数据而导致页面回到根节点渲染状态。因而，前端具备自行进行改造和封装的能力，可以维护修改前树节点状态，包括展开、收起、以及当前选中节点等状态，确保操作后及时恢复至操作前的状态或者更新状态，例如：删除当前节点后，应选中下一个节点；移动节点后应该将在新父节点下增加此节点并选中。从而提高用户操作的便利性，避免通过后端接口重新加载数据而导致页面状态恢复初始样。
本实施例还提供一种树形控件的渲染装置，该树形控件的渲染装置与上述实施例中树形控件的渲染方法一一对应。如图9所示，该树形控件的渲染装置包括：
第一渲染模块901，用于获取第一树形数据源，渲染生成第一树形控件；
获取数据模块902，用于接收第一树形控件中任一一级节点的图标展开指令，根据图标展开指令，获取待展开节点的子节点数据；
第二渲染模块903，用于对待展开节点的子节点数据进行格式化后填充至第一树形数据源，渲染得到目标树形控件；
接收指令模块904，用于接收目标树形控件的操作指令，操作指令包括操作内容和待操作节点标识；
第三渲染模块905，用于根据待操作节点标识和操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，及根据修改结果与预先存储的目标树形控件的树结构数据，渲染生成目标页面。
关于树形控件的渲染方法各个步骤的具体限定可以参见上文中对于树形控件的渲染装置的限定，在此不再赘述。此外，需要说明的是，上述树形控件的渲染装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
参照图10，本实施例还提供了一种计算机设备，该计算机设备可以是移动终端、桌上型计算机、笔记本、掌上电脑及服务器等计算设备。该计算机设备包括处理器1001、存储器1002及显示器1003。图10示出了计算机设备的部分组件，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。
存储器1002在一些实施例中可以是计算机设备的内部存储单元，例如计算机设备的硬盘或内存。存储器1002在另一些实施例中也可以是计算机设备的外部存储设备，例如计算机设备上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(SecureDigital,SD)卡，闪存卡(Flash Card)等。进一步地，存储器1002还可以既包括计算机设备的内部存储单元也包括外部存储设备。存储器1002用于存储安装于计算机设备的应用软件及各类数据，例如安装计算机设备的程序代码等。存储器1002还可以用于暂时地存储已经输出或者将要输出的数据。在一实施例中，存储器1002上存储有树形控件的渲染程序1004。
处理器1001在一些实施例中可以是一中央处理器(Central Processing Unit,CPU)，微处理器或其他数据处理芯片，用于运行存储器1002中存储的程序代码或处理数据，例如执行树形控件的渲染方法等。
显示器1003在一些实施例中可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。显示器1003用于显示在计算机设备的信息以及用于显示可视化的用户界面。计算机设备的部件1001-1003通过系统总线相互通信。
在一实施例中，当处理器1001执行存储器1002中树形控件的渲染程序1004时实现以下步骤：
获取第一树形数据源，渲染生成第一树形控件；
接收第一树形控件中任一一级节点的图标展开指令，根据图标展开指令，获取待展开节点的子节点数据；
对待展开节点的子节点数据进行格式化后填充至第一树形数据源，渲染得到目标树形控件；
接收目标树形控件的操作指令，操作指令包括操作内容和待操作节点标识；
根据待操作节点标识和操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，及根据修改结果与预先存储的目标树形控件的树结构数据，渲染生成目标页面。
本实施例还提供了一种计算机读存储介质，其上存储有树形控件的渲染程序1004，计算机程序被处理器执行时实现以下步骤：
获取第一树形数据源，渲染生成第一树形控件；
接收第一树形控件中任一一级节点的图标展开指令，根据图标展开指令，获取待展开节点的子节点数据；
对待展开节点的子节点数据进行格式化后填充至第一树形数据源，渲染得到目标树形控件；
接收目标树形控件的操作指令，操作指令包括操作内容和待操作节点标识；
根据待操作节点标识和操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，及根据修改结果与预先存储的目标树形控件的树结构数据，渲染生成目标页面。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。
本申请所提供的各实施例中所使用的对存储器、存储、计算机可读取存储介质、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(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)等。
对于本领域技术人员而言，显然本申请不限于上述示范性实施例的细节，而且在不背离本申请的精神或基本特征的情况下，能够以其他的具体形式实现本申请。因此，无论从哪一点来看，均应将本申请上述的实施例看作是示范性的，而且是非限制性的，本申请的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本申请内。
Claims (10)
1.一种树形控件的渲染方法，其特征在于，包括：
获取第一树形数据源，渲染生成第一树形控件；
接收所述第一树形控件中任一一级节点的图标展开指令，根据所述图标展开指令，获取待展开节点的子节点数据；
对所述待展开节点的子节点数据进行格式化后填充至所述第一树形数据源，渲染得到目标树形控件；
接收所述目标树形控件的操作指令，所述操作指令包括操作内容和待操作节点标识；
根据所述待操作节点标识和所述操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，及根据修改结果与预先存储的所述目标树形控件的树结构数据，渲染生成目标页面。
2.根据权利要求1所述的树形控件的渲染方法，其特征在于，所述对所述待展开节点的子节点数据进行格式化后填充至所述第一树形数据源，包括：
根据所述待展开节点的子节点数据的数组长度，为所述待展开节点添加树特征属性后，得到第二树形数据源；
将所述第二树形数据源填充至所述第一树形数据源后并进行存储。
3.根据权利要求2所述的树形控件的渲染方法，其特征在于，所述树特征属性包括子节点属性、叶子属性以及层级属性。
4.根据权利要求1所述的树形控件的渲染方法，其特征在于，所述操作内容包括新增子节点操作项，所述待操作节点标识包括当前待新增节点的层级标识和身份标识；所述根据所述待操作节点标识和所述操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，及根据修改结果与预先存储的所述目标树形控件的树结构数据，渲染生成目标页面，包括：
根据所述当前待新增节点的身份标识，获取当前待新增节点的子节点数据以进行格式化处理，并新增子节点；
根据所述当前待新增节点的层级标识，确定新增子节点的层级标识，以得到当前待新增节点的树结构数据；
根据所述目标树形控件的树结构数据、当前待新增节点的树结构数据和层级标识，渲染生成第一页面。
5.根据权利要求1所述的树形控件的渲染方法，其特征在于，所述操作内容包括编辑节点操作项和编辑名称；所述待操作节点标识包括当前待编辑节点的层级标识；所述根据所述待操作节点标识和所述操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，及根据修改结果与预先存储的所述目标树形控件的树结构数据，渲染生成目标页面，包括：
根据当前待编辑节点的层级标识和编辑名称，获取所述当前待编辑节点的节点名称并修改为所述编辑名称，以更新所述当前待编辑节点的节点数据；
根据所述目标树形控件的树结构数据、当前待编辑节点的节点数据和层级标识，渲染生成第二页面。
6.根据权利要求1所述的树形控件的渲染方法，其特征在于，所述操作内容包括删除节点操作项；所述待操作节点标识包括当前待删除节点的层级标识和身份标识；所述根据所述待操作节点标识和所述操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，及根据修改结果与预先存储的所述目标树形控件的树结构数据，渲染生成目标页面，包括：
根据当前待删除节点的层级标识，查询当前待删除节点的父节点；
在所述当前待删除节点的父节点的子节点属性中删除所述当前待删除节点，并更新当前选中节点为已删除节点的目标关联节点；
根据所述目标树形控件的树结构数据和目标关联节点的层级标识，渲染生成第三页面。
7.根据权利要求1所述的树形控件的渲染方法，其特征在于，所述操作内容包括移动节点操作项；所述待操作节点标识包括所述当前待移动节点的层级标识和移动目的节点的身份标识；所述根据所述待操作节点标识和所述操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，及根据修改结果与预先存储的所述目标树形控件的树结构数据，渲染生成目标页面，包括：
根据所述当前待移动节点的层级标识，查询所述当前待移动节点的父节点，在所述当前待移动节点的父节点的子节点属性中删除所述当前待移动节点；
根据所述移动目的节点的身份标识，获取所述移动目的节点的子节点数据，在所述移动目的节点的子节点属性和层级属性中新增移动节点，并更新当前选中节点为已移动节点；
根据所述目标树形控件的树结构数据、移动目的节点的树结构数据和已移动节点的层级标识，渲染生成第四页面。
8.一种树形控件的渲染装置，其特征在于，包括：
第一渲染模块，用于获取第一树形数据源，渲染生成第一树形控件；
获取数据模块，用于接收所述第一树形控件中任一一级节点的图标展开指令，根据所述图标展开指令，获取待展开节点的子节点数据；
第二渲染模块，用于对所述待展开节点的子节点数据进行格式化后填充至所述第一树形数据源，渲染得到目标树形控件；
接收指令模块，用于接收所述目标树形控件的操作指令，所述操作指令包括操作内容和待操作节点标识；
第三渲染模块，用于根据所述待操作节点标识和所述操作内容，查询待操作节点数据和/或关联节点数据并进行对应操作修改，及根据修改结果与预先存储的所述目标树形控件的树结构数据，渲染生成目标页面。
9.一种计算机设备，其特征在于，包括：
存储器，用于存储计算机程序；
处理系统，用于执行所述存储器存储的所述计算机程序，当所述计算机程序被执行时，所述处理器用于执行如权利要求1-7任一项所述的树形控件的渲染方法。
10.一种计算机可读存储介质，其特征在于，所述存储介质包括计算机指令，当所述计算机指令在计算机设备上运行时，使得所述计算机设备执行如权利要求1-7任一项所述的树形控件的渲染方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210432269.1A CN114840293A (zh) | 2022-04-22 | 2022-04-22 | 树形控件的渲染方法、装置、计算机设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210432269.1A CN114840293A (zh) | 2022-04-22 | 2022-04-22 | 树形控件的渲染方法、装置、计算机设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114840293A true CN114840293A (zh) | 2022-08-02 |
Family
ID=82565442
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210432269.1A Pending CN114840293A (zh) | 2022-04-22 | 2022-04-22 | 树形控件的渲染方法、装置、计算机设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114840293A (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115495169A (zh) * | 2022-09-21 | 2022-12-20 | 昆仑数智科技有限责任公司 | 数据获取、页面生成方法、装置、设备及可读存储介质 |
| CN117032757A (zh) * | 2023-08-21 | 2023-11-10 | 镁佳(北京)科技有限公司 | 控件更新维护方法、系统、装置、计算机设备及存储介质 |
| CN117519891A (zh) * | 2024-01-08 | 2024-02-06 | 深圳市金政软件技术有限公司 | 数据的渲染方法、装置、终端设备和可读存储介质 |
| WO2024174919A1 (zh) * | 2023-02-23 | 2024-08-29 | 北京字跳网络技术有限公司 | 一种特效制作方法、装置、设备及存储介质 |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106446086A (zh) * | 2016-09-09 | 2017-02-22 | 中国南方电网有限责任公司电网技术研究中心 | 用于云计算环境的树结构操作方法和系统 |
| WO2018103218A1 (zh) * | 2016-12-08 | 2018-06-14 | 武汉斗鱼网络科技有限公司 | 一种ui界面的显示处理方法及装置 |
| CN108959444A (zh) * | 2018-04-18 | 2018-12-07 | 李世伟 | 基于树状结构的主页集群系统管理方法及装置 |
| CN110689600A (zh) * | 2019-09-16 | 2020-01-14 | 贝壳技术有限公司 | 树形组件的渲染方法和装置、可读存储介质、电子设备 |
| CN111984829A (zh) * | 2020-07-08 | 2020-11-24 | 福建亿能达信息技术股份有限公司 | 一种基于vue的树异步加载方法、装置、设备和介质 |
| CN113282799A (zh) * | 2021-05-21 | 2021-08-20 | 武汉联影医疗科技有限公司 | 节点的操作方法、装置、计算机设备和存储介质 |
| CN113656533A (zh) * | 2021-08-23 | 2021-11-16 | 北京百度网讯科技有限公司 | 一种树形控件处理方法、装置及电子设备 |
| CN114090157A (zh) * | 2021-11-18 | 2022-02-25 | 中国平安财产保险股份有限公司 | 树形控件的数据处理方法、装置、设备和存储介质 |
-
2022
- 2022-04-22 CN CN202210432269.1A patent/CN114840293A/zh active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106446086A (zh) * | 2016-09-09 | 2017-02-22 | 中国南方电网有限责任公司电网技术研究中心 | 用于云计算环境的树结构操作方法和系统 |
| WO2018103218A1 (zh) * | 2016-12-08 | 2018-06-14 | 武汉斗鱼网络科技有限公司 | 一种ui界面的显示处理方法及装置 |
| CN108959444A (zh) * | 2018-04-18 | 2018-12-07 | 李世伟 | 基于树状结构的主页集群系统管理方法及装置 |
| CN110689600A (zh) * | 2019-09-16 | 2020-01-14 | 贝壳技术有限公司 | 树形组件的渲染方法和装置、可读存储介质、电子设备 |
| CN111984829A (zh) * | 2020-07-08 | 2020-11-24 | 福建亿能达信息技术股份有限公司 | 一种基于vue的树异步加载方法、装置、设备和介质 |
| CN113282799A (zh) * | 2021-05-21 | 2021-08-20 | 武汉联影医疗科技有限公司 | 节点的操作方法、装置、计算机设备和存储介质 |
| CN113656533A (zh) * | 2021-08-23 | 2021-11-16 | 北京百度网讯科技有限公司 | 一种树形控件处理方法、装置及电子设备 |
| CN114090157A (zh) * | 2021-11-18 | 2022-02-25 | 中国平安财产保险股份有限公司 | 树形控件的数据处理方法、装置、设备和存储介质 |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115495169A (zh) * | 2022-09-21 | 2022-12-20 | 昆仑数智科技有限责任公司 | 数据获取、页面生成方法、装置、设备及可读存储介质 |
| WO2024174919A1 (zh) * | 2023-02-23 | 2024-08-29 | 北京字跳网络技术有限公司 | 一种特效制作方法、装置、设备及存储介质 |
| CN117032757A (zh) * | 2023-08-21 | 2023-11-10 | 镁佳(北京)科技有限公司 | 控件更新维护方法、系统、装置、计算机设备及存储介质 |
| CN117519891A (zh) * | 2024-01-08 | 2024-02-06 | 深圳市金政软件技术有限公司 | 数据的渲染方法、装置、终端设备和可读存储介质 |
| CN117519891B (zh) * | 2024-01-08 | 2024-04-30 | 深圳市金政软件技术有限公司 | 数据的渲染方法、装置、终端设备和可读存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN114840293A (zh) | 树形控件的渲染方法、装置、计算机设备及存储介质 | |
| US9026948B2 (en) | Multi-faceted relationship hubs | |
| WO2021037050A1 (zh) | 一种代码变更方法及装置 | |
| CN102043618B (zh) | 一种窗口对象显示样式的控制方法及装置 | |
| US20180075042A1 (en) | Reusable transformation mechanism to allow mappings between incompatible data types | |
| US9069829B2 (en) | Data items manager | |
| CN108874393B (zh) | 渲染方法、装置、存储介质和计算机设备 | |
| CN111209000B (zh) | 自定义控件的处理方法、装置、电子设备及存储介质 | |
| US9646004B2 (en) | Hierarchical database report generation with automated query generation for placeholders | |
| CN111008022B (zh) | 关系图生成方法、装置、计算机设备和存储介质 | |
| US20120265750A1 (en) | Ad hoc geospatial directory of users in a distributed and decentralized system based on optimizing symbol manipulation language-based executable application | |
| US20050289450A1 (en) | User interface virtualization | |
| CN111274263A (zh) | 可视化数据库变更语句生成方法、装置及存储介质 | |
| EP2924565A1 (en) | Web-application-launch application programming interface | |
| CN113282799A (zh) | 节点的操作方法、装置、计算机设备和存储介质 | |
| JP4951140B2 (ja) | データベースの管理方法 | |
| CN113011146A (zh) | 信息处理装置、存储介质及信息处理方法 | |
| CN109213775B (zh) | 搜索方法、装置、计算机设备和存储介质 | |
| US20240037325A1 (en) | Ability to add non-direct ancestor columns in child spreadsheets | |
| CN116541005A (zh) | 一种前端界面配置的抽象描述方法、装置、设备及介质 | |
| CN108595160B (zh) | Js调用原生对象的方法、存储介质 | |
| CN108647198B (zh) | 一种基于Unity的字编辑方法及终端 | |
| KR20210121574A (ko) | 데이터 셋 관리 장치 및 이를 이용한 기계학습 모델과 데이터 셋 사이의 관계 표시 방법 | |
| CN110286894A (zh) | 脚本生成方法、装置、计算机设备和存储介质 | |
| CN117251898B (zh) | 基于云存储的Revit链接方法及系统 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |