Front-end tree component loading method and device

Abstract

The embodiment of the invention provides a front-end tree component loading method and device, and the method comprises the steps: initializing a tree component by adding a virtual half-selection attribute in the attribute of an initial tree component, querying all virtual half-selection node serial numbers according to the virtual half-selection attribute when a page is loaded, and storing the virtual half-selection node serial numbers in the initial tree component; performing semi-selection marking on non-leaf nodes of the initial layer array according to the virtual semi-selection node serial number; expanding a non-leaf node of any initial layer to obtain a subordinate array node of the expanded node, performing semi-selection marking on the subordinate array node according to the virtual semi-selection node serial number, and correspondingly updating the semi-selection mark of the initial layer; when the node is checked, the virtual half-selection attribute is updated according to the checked real half-selection state, the updated virtual half-selection attribute is determined, and the updated virtual half-selection attribute is used for updating the half-selection mark when the page is loaded next time, and the node state display efficiency and accuracy when the tree component is lazy loaded can be improved.

Description

Technical Field

[0001] The present application relates to the field of data processing, and in particular to a front-end tree component loading method and device. Background Art

[0002] Tree components are usually used to display hierarchical data, such as file systems, organizational structures, etc. In front-end development, tree components are common UI controls, especially in scenarios where multi-level data needs to be displayed. When the data hierarchy of the tree component is too deep or the amount of data is too large, the traditional loading method may cause performance bottlenecks.

[0003] Virtual lazy loading is a tree component optimization technology, which is mainly used in data loading scenarios with more complex performance. The core idea is to load data on demand and load the child nodes of a node only when the user expands a node, thereby reducing unnecessary data loading and improving front-end rendering performance.

[0004] Virtual lazy loading is often used in conjunction with loadData (asynchronous request). When the tree component turns on virtual lazy loading, loadData can dynamically load data when the user expands the node, instead of loading all child nodes at once, improving performance. However, this also means that when a node is expanded, only the direct child nodes of the node will be loaded, instead of loading all child nodes at once. In a tree structure, the half-checked state of a parent node is often determined by the state of the child node. If the selection state of the child node has not been determined during the loading process, the half-checked state of the parent node cannot be correctly reflected. Therefore, the existing virtual lazy loading method cannot correctly reflect the half-selected state of the parent node.

[0005] Based on the above problems, there is an urgent need for a front-end tree component loading method that can improve the efficiency and accuracy of node status display when the tree component is lazy loaded. Summary of the invention

[0006] In response to the problems in the prior art, the present application provides a front-end tree component loading method and device, which can improve the efficiency and accuracy of node status display when the tree component is lazy loaded.

[0007] In order to solve at least one of the above problems, the present application provides the following technical solutions: In a first aspect, the present application provides a front-end tree component loading method, comprising: Adding a virtual half-selected attribute to the attributes of the initial tree component, performing a tree component definition operation according to the virtual half-selected attribute and a preset tree component event, and determining a corresponding tree component, wherein the attribute is used to configure and transfer data, and the event is used to process user operations during user interaction; In response to a page loading request, a virtual semi-selected node query operation is performed on the tree component according to the virtual semi-selected attribute to determine a corresponding virtual semi-selected node serial number, and it is determined whether the initial layer array node of the tree component is a leaf node; if not, a semi-selected marking operation is performed on the initial layer array node according to the virtual semi-selected node serial number to determine a corresponding initial layer semi-selected mark; In response to a node expansion request, performing a node expansion operation on an initial layer target node, determining a lower-level array node corresponding to the initial layer target node, performing a half-selection mark operation on the lower-level array node according to the virtual half-selected node sequence number, determining a corresponding child half-selected mark, performing a half-selection mark removal operation on the initial layer target node according to the child half-selected mark, and determining an updated initial layer half-selected mark, wherein the initial layer target node is any initial layer array node with an initial layer half-selected mark; In response to a node check request, a check operation is performed on a target node, and the virtual semi-selected attribute is updated according to a real semi-selected state obtained after the check operation to determine a corresponding updated virtual semi-selected attribute, and the updated virtual semi-selected attribute is used to update the semi-selected mark when the page is loaded next time, wherein the target node is an initial layer target node or any child target node.

[0008] Furthermore, before adding a virtual half-selected attribute to the attributes of the initial tree component, performing a tree component definition operation according to the virtual half-selected attribute and a preset tree component event, and determining the corresponding tree component, the method includes: Perform event definition operations according to the preset check node event and the preset expand node event to determine the corresponding tree component event; Performing attribute definition operations according to preset state attributes, preset storage attributes, and preset Boolean value attributes to determine corresponding tree component attributes, wherein the storage attributes are used to store node array sequence numbers, including expanded node attributes and checked node attributes; A corresponding initial tree component is determined according to the tree component event and the tree component attribute.

[0009] Further, the adding of a virtual half-selected attribute to the attributes of the initial tree component, performing a tree component definition operation according to the virtual half-selected attribute and a preset tree component event, and determining a corresponding tree component includes: Performing a virtual semi-selected attribute adding operation in the storage attribute of the initial tree component, wherein the virtual semi-selected attribute is used to store the semi-selected node array sequence number; A tree component definition operation is performed according to the tree component attributes after the virtual semi-selected attribute adding operation and a preset tree component event to determine a corresponding tree component.

[0010] Further, before performing a virtual semi-selected node query operation on the tree component according to the virtual semi-selected attribute in response to the page loading request, the method includes: In response to the initial node selection request, a target node selection operation is performed; The corresponding virtual half-selected attribute is determined according to the real half-selected state obtained after the checking operation.

[0011] Further, performing a node expansion operation on the initial layer target node to determine a lower-level array node corresponding to the initial layer target node includes: Perform a lower-level node query operation on the initial layer target node to determine the corresponding lower-level node data; A child adding operation is performed on the initial layer target node according to the lower-level node data to determine the lower-level array node corresponding to the initial layer target node.

[0012] Further, performing a half-selection mark operation on the lower-level array node according to the virtual half-selected node sequence number to determine a corresponding child half-selection mark includes: Determine whether the lower-level array node is a leaf node; If not, a half-selection mark operation is performed on the lower-level array node according to the virtual half-selected node sequence number to determine the corresponding child half-selected mark.

[0013] Further, the checking operation is performed on the target node, and the virtual semi-selected attribute is updated according to the real semi-selected state obtained after the checking operation to determine the corresponding updated virtual semi-selected attribute, including: Perform a check operation on the target node to determine the corresponding target node state, where the target node state includes half-selection and full-selection; Recursively traverse the target node to determine the corresponding level-by-level parent node, and perform a state update operation on the level-by-level parent node according to the state of the target node to determine the corresponding level-by-level parent node state; The virtual semi-selected attribute is updated according to the real semi-selected state in the target node state and the real semi-selected state in the step-by-step parent node state to determine the corresponding updated virtual semi-selected attribute.

[0014] In a second aspect, the present application provides a front-end tree component loading device, comprising: A tree component initialization module, used to add a virtual semi-selected attribute to the attributes of the initial tree component, perform a tree component definition operation according to the virtual semi-selected attribute and a preset tree component event, and determine a corresponding tree component, wherein the attribute is used to configure and transfer data, and the event is used to process user operations during user interaction; a page loading module, for responding to a page loading request, performing a virtual semi-selected node query operation on the tree component according to the virtual semi-selected attribute, determining a corresponding virtual semi-selected node serial number, judging whether an initial layer array node of the tree component is a leaf node, and if not, performing a semi-selected marking operation on the initial layer array node according to the virtual semi-selected node serial number, and determining a corresponding initial layer semi-selected mark; a node expansion module, for responding to a node expansion request, performing a node expansion operation on an initial layer target node, determining a lower-level array node corresponding to the initial layer target node, performing a half-selection mark operation on the lower-level array node according to the virtual half-selected node sequence number, determining a corresponding child half-selected mark, performing a half-selection mark removal operation on the initial layer target node according to the child half-selected mark, and determining an updated initial layer half-selected mark, wherein the initial layer target node is any initial layer array node with an initial layer half-selected mark; A node checking module is used to respond to a node checking request, check a target node, update the virtual semi-selected attribute according to a real semi-selected state obtained after the checking operation, and determine a corresponding updated virtual semi-selected attribute, wherein the updated virtual semi-selected attribute is used to update the semi-selected mark when the page is loaded next time, wherein the target node is an initial layer target node or any child target node.

[0015] In a third aspect, the present application provides an electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the front-end tree component loading method when executing the program.

[0016] In a fourth aspect, the present application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the front-end tree component loading method.

[0017] In a fifth aspect, the present application provides a computer program product, including a computer program / instruction, which, when executed by a processor, implements the steps of the front-end tree component loading method.

[0018] It can be seen from the above technical scheme that the present application provides a front-end tree component loading method and device, which initializes the tree component by adding a virtual half-selected attribute to the attributes of the initial tree component. When the page is loaded, all virtual half-selected node serial numbers are queried according to the virtual half-selected attribute, and the non-leaf nodes of the initial layer array are marked as half-selected according to the virtual half-selected node serial number; the non-leaf nodes of any initial layer are expanded to obtain the subordinate array nodes of the expanded node, and the subordinate array nodes are marked as half-selected according to the virtual half-selected node serial number, and the initial layer semi-selected mark is updated accordingly; when the node is checked, the virtual half-selected attribute is updated according to the actual semi-selected state after the check, and the updated virtual half-selected attribute is determined. The updated virtual half-selected attribute is used to update the semi-selected mark when the page is loaded next time, thereby improving the efficiency and accuracy of node status display when the tree component is lazy loaded. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0020] Figure 1 This is one of the flow charts of the front-end tree component loading method in the embodiment of the present application; Figure 2 This is the second flow chart of the front-end tree component loading method in the embodiment of the present application; Figure 3 This is the third flow chart of the front-end tree component loading method in the embodiment of the present application; Figure 4 This is a fourth flow chart of the front-end tree component loading method in an embodiment of the present application; Figure 5 This is the fifth flow chart of the front-end tree component loading method in the embodiment of the present application; Figure 6 This is the sixth flow chart of the front-end tree component loading method in the embodiment of the present application; Figure 7 This is the seventh flow chart of the front-end tree component loading method in the embodiment of the present application; Figure 8 It is a structural diagram of the front-end tree-type component loading device in an embodiment of the present application; Fig. 9 It is a schematic diagram of the structure of an electronic device in an embodiment of the present application.

[0021] Reference numerals: Electronic device 9600, central processing unit 9100, memory 9140, communication module 9110, input unit 9120, audio processor 9130, display 9160, power supply 9170, buffer memory 9141, application / function storage unit 9142, data storage unit 9143, driver program storage unit 9144, antenna 9111, speaker 9131, microphone 9132. DETAILED DESCRIPTION

[0022] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0023] The acquisition, storage, use, and processing of data in the technical solution of this application comply with the relevant provisions of national laws and regulations.

[0024] Considering the problem that the existing virtual lazy loading method cannot correctly reflect the half-selected state of the parent node. The present application provides a front-end tree component loading method and device, which initializes the tree component by adding a virtual half-selected attribute to the attributes of the initial tree component. When the page is loaded, all virtual half-selected node serial numbers are queried according to the virtual half-selected attribute, and the non-leaf nodes of the initial layer array are half-selected according to the virtual half-selected node serial number; expand any non-leaf node of the initial layer to obtain the lower-level array node of the expanded node, and half-select the lower-level array node according to the virtual half-selected node serial number, and update the initial layer semi-selected mark accordingly; when checking the node, the virtual half-selected attribute is updated according to the real semi-selected state after checking, and the updated virtual half-selected attribute is determined. The updated virtual half-selected attribute is used to update the semi-selected mark when the page is loaded next time, thereby improving the efficiency and accuracy of node status display when the tree component is lazy loaded.

[0025] In order to improve the efficiency and accuracy of node status display when the tree component is lazy loaded, the present application provides an embodiment of a front-end tree component loading method, see Figure 1 The front-end tree component loading method specifically includes the following contents: Step S101: adding a virtual half-selected attribute to the attributes of the initial tree component, performing a tree component definition operation according to the virtual half-selected attribute and a preset tree component event, and determining a corresponding tree component, wherein the attribute is used to configure and transfer data, and the event is used to process user operations during user interaction; Optionally, in this embodiment, this step first initializes the configuration of the tree component.

[0026] Specifically, create a new public component about tree and define its properties and events: <a-tree v-model="checkedKeys" :tree-data="treeData" :expanded-keys="expandedKeys" checkable @check="onCheck" @expand="onExpand" / > checkedKeys Checked node ID expandedKeys Expanded node ID treeData tree data Among them, v-model="checkedKeys": is used to bind the checkedKeys data of the tree component, indicating which nodes are selected, and it will be synchronized with the checkedKeys data of the parent component.

[0027] v-model is a two-way binding of Vue, which binds the checkedKeys variable to the checked state in the a-tree component. The checked state of the tree node (that is, the ID of the checked node) will be automatically stored in checkedKeys, and if checkedKeys changes, the checked state of the tree will be automatically updated.

[0028] tree-data="treeData": binds tree data. treeData is the data source passed to the tree component, which defines the tree's hierarchy, nodes, and other information. The data for each node includes id (node ​​ID), label (node ​​name), isLeaf (whether it is a leaf node), and children (child nodes).

[0029] expanded-keys="expandedKeys": binds the expandedKeys data of the expanded node to specify which nodes are in the expanded state.

[0030] checkable: Indicates whether the tree node displays a checkbox, which the user can check or uncheck.

[0031] @check="onCheck": listens to node check events and triggers the onCheck method when the node is checked or unchecked.

[0032] @expand="onExpand": listens to node expansion events and triggers the onExpand method when the node is expanded or collapsed.

[0033] checkedKeys: is an array that stores the IDs of all checked nodes. For example, if nodes 1 and 3 are checked, checkedKeys is [1, 3].

[0034] expandedKeys: is an array that stores the IDs of all expanded nodes. For example, if node 1 and node 2 are expanded, then expandedKeys is [1, 2].

[0035] The above are the key properties and events of the tree structure, where properties are options used by components to configure their behavior, appearance, or pass data, including v-model="checkedKeys", tree-data="treeData", expanded-keys="expandedKeys", and checkable.

[0036] Events are callback functions triggered by components when users interact with them. These events can be used to handle user operations (such as checking, expanding, etc.), including @check="onCheck" and @expand="onExpand".

[0037] For example, the tree structure is as follows: treeData = [ { id: 1, label: 'Node 1', isLeaf: false, children: [ { id: 2, label: 'Node 2', isLeaf: false, children: [ { id: 4, label: 'Node 4', isLeaf: true}, { id: 5, label: 'Node 5', isLeaf: true} ] }, { id: 3, label: 'Node 3', isLeaf: true} ] } ]; This data represents a tree structure containing node 1, node 2, and node 3, where node 2 has child nodes 4 and 5.

[0038] Optionally, in this embodiment, based on the above attributes and events, a virtual half-selected attribute is added to correctly set the half-checked state of the node through virtual half-selection when the tree component is in a lazy loading state.

[0039] Specifically, add a halfCheckedData attribute to store the half-selected data ID returned by the background interface, such as [1,2].

[0040] By setting the virtual half-selection attribute, we can lay the foundation for the subsequent implementation of virtual half-selection of data and the correct display of the half-selected state of the node.

[0041] Step S102: in response to the page loading request, performing a virtual semi-selected node query operation on the tree component according to the virtual semi-selected attribute, determining a corresponding virtual semi-selected node serial number, judging whether the initial layer array node of the tree component is a leaf node, and if not, performing a semi-selected marking operation on the initial layer array node according to the virtual semi-selected node serial number, and determining a corresponding initial layer semi-selected mark; Optionally, in this embodiment, this step adds a half-selected label to the tree component through virtual half-selected data. The steps are: 1.treeData will get the first-level nodes from the interface and determine whether the node has child nodes based on the value of isLeaf.

[0042] 2. If isLeaf is false, it means that the node can be expanded and is a non-leaf node.

[0043] 3. Set the style of the first-layer non-leaf nodes according to halfCheckedData (virtual half-selected attribute). For example, setting it to nodeHalf means that the node is in a half-selected state.

[0044] Specifically, based on the page entry operation, when the page is loaded, an interface request will be initiated to query the virtual half-selected node halfCheckedData data to obtain the serial numbers (node ​​IDs) of all virtual half-selected nodes. Then, the first-layer array node information of the treeData data is obtained, and the isLeaf attribute in the information is read. When the isLeaf attribute is set to false, it means that the node has child nodes and is a non-leaf node. Compare the node ID of the node. If the node is in halfCheckedData, a special CSS class nodeHalf will be set for the node, indicating that the node is in the "half-selected" state.

[0045] After the above steps, the semi-selected state of the first-level node array of the tree component after the page is loaded is obtained. At the same time, the semi-selected state of the child level and the semi-selected state update of the current level are realized through the virtual semi-selected node and the user's expansion operation.

[0046] Step S103: in response to the node expansion request, perform a node expansion operation on the initial layer target node, determine the lower-level array node corresponding to the initial layer target node, perform a half-selection mark operation on the lower-level array node according to the virtual half-selected node sequence number, determine the corresponding child half-selected mark, perform a half-selection mark removal operation on the initial layer target node according to the child half-selected mark, and determine an updated initial layer half-selected mark, wherein the initial layer target node is any initial layer array node with an initial layer half-selected mark; Optionally, in this embodiment, this step uses virtual semi-selected data to expand a node each time, and treeData appends a level of data to perform semi-selected settings, rather than asynchronously loading semi-selected settings through loadData, thereby increasing the accuracy of the semi-selected state of the node. The steps are: When a node is expanded, onExpand is called to expand the node, get the expandedKeys of the expanded node, query the subordinate node data, and append it to the children of the expanded node. The class attribute value of the subordinate node is set to nodeHalf according to the halfCheckedData data, and the virtual half selection of the parent node is removed.

[0047] Specifically, call the onExpand method to expand the node: onExpand(expandedKeys, {expanded: bool,node}) { this.expandedKeys = expandedKeys / / Save the ID of the expanded node if (bool) { / / Append lower-level nodes, data is the lower-level node data obtained by interface query this.appedNode(node.dataRef, data) / / Query the lower level checked nodes and update the checked status this.getcheckedKeys(node.dataRef) } } Among them, expandedKeys: updates the ID of the currently expanded node.

[0048] node: The node to be expanded.

[0049] If the node is expanded (bool is true), call the appedNode method to load the child nodes.

[0050] If the subordinate node is in a semi-selected state, call the getcheckedKeys method to update the node status.

[0051] In the above call to the appedNode method: appedNode(val, data) { / / Append lower level nodes / / val expands the node, data is the lower level node val.children = data / / Assign new data to the children of the parent node if (data.length) { val.children = data / / If the subordinate node exists if (data.every(item =>!this.halfCheckedData.includes(item.id))){ / / If there is no lower level node in the semi-selected state this.halfCheckedData = this.halfCheckedData.filter(item =>item != val.id) val.class = '' / / Clear the "half-selected" style of the parent node } item.isLeaf = false / / The current node is a non-leaf node } else { / / If the lower level node is empty this.halfCheckedData = this.halfCheckedData.filter(item =>item!= val.id) val.class = '' / / Clear the "half-selected" style of the parent node item.isLeaf = true / / The current node is a leaf node } } Among them, val is the expanded node (it may originally have no children) Data is the child node data obtained from the interface.

[0052] Append the subordinate node data to val.children.

[0053] Next, determine whether there are any half-selected nodes in the subordinate nodes. If not, remove the half-selected state of the parent node (nodeHalf style).

[0054] If the lower-level node is empty (that is, the node has no child nodes), the current node is marked as a leaf node.

[0055] In the above call to the getcheckedKeys method: getcheckedKeys(val){ / / Query the lower level checked nodes / / data is the lower-level node check data obtained by the val query interface / / Remove the check ID of this level when expanding, and control the parent level by the child's check status this.checkedKeys=this.checkedKeys.filter(item=>item!=val.id) this.checkedKeys=this.checkedKeys.concat(data) / / Add the lower level checked nodes to checkedKeys } Among them, val is the current node, which is used to filter out the id of the current node, because the check state of the parent node should be controlled by the state of the child node.

[0056] data is the check status data of the subordinate node.

[0057] By updating checkedKeys, the checked state of the tree is ensured to be consistent with the lower nodes. The checked state of the parent node will be controlled by the checked state of the child node.

[0058] Understandably, when expanding a node: onExpand handles node expansion, appends child nodes and updates the check status.

[0059] appendNode is responsible for appending the subordinate node data to the tree structure and updating the state of the parent node according to whether there is a half-selected state.

[0060] getCheckedKeys ensures that the checked state of the parent node is controlled by the child node by updating checkedKeys.

[0061] The above method is used to handle the check status, node expansion, and half-selection functions in the tree structure, ensuring that the state of the tree can be correctly reflected when the user expands the node or updates the check status.

[0062] Step S104: In response to the node check request, a check operation is performed on the target node, and the virtual semi-selected attribute is updated according to the real semi-selected state obtained after the check operation to determine the corresponding updated virtual semi-selected attribute, and the updated virtual semi-selected attribute is used to update the semi-selected mark when the page is loaded next time, wherein the target node is an initial layer target node or any child target node.

[0063] Optionally, in the present embodiment, the purpose of this step is to pass the check status (including half-selection, full selection, etc.) to the background for saving when a node is checked or unchecked, and to store the real half-selection status as a virtual half-selection attribute for subsequent updating of the half-selection status, while clearing any virtual half-selection status that may exist in the current node and its parent node and child nodes.

[0064] The specific steps include: onCheck(keys, {checked: bool,checkedNodes,node,event}) { / / Update the key value of the checked state this.checkedKeys = keys / / Check the parent node this.checkedParentId = [] / / Uncheck the parent node this.noCheckedParentId = [] / / half-select parent node this.halfCheckedParentId = [] / / Get the parent node ID list and update this.getParentID(node.$parent, bool) / / Pass this.checkedParentId, this.noCheckedParentId, and this.halfCheckedParentId to the backend for storage through the interface, and obtain the half-selected nodes and checked data to ensure that the checked status of the frontend and backend are consistent.

[0065] / / Delete the virtual semi-selected nodes between the current node and its parent node to the root node this.deleteHalfCheckedData(node) } Explanation of the above steps: 1. Update the check status: this.checkedKeys will be updated to the IDs of all currently selected nodes.

[0066] 2. Get the parent node ID: Call this.getParentID(node.$parent, checked) method to recursively get the IDs of all parent nodes from the current node to the root node, and update different arrays based on whether they are checked: checkedParentId: The ID of the parent node of all selected nodes.

[0067] noCheckedParentId: The ID of the unchecked parent node.

[0068] halfCheckedParentId: half-checked parent node ID.

[0069] 3. Delete virtual half-selected nodes: Call this.deleteHalfCheckedData(node) method to delete the virtual half-selected nodes from the current node and its parent to the root.

[0070] In the above method, the getParentID method is called as follows: / / Get the ID array from the parent of the selected node to the root node getParentID(node, bool) { if (node.dataRef) { let isHalfCheck = node.halfChecked ||this.halfCheckedData.map(item =>item.id).includes(node.dataRef.id) / / Update the parent node array according to the check status if (bool) { / / If the current node is checked if (isHalfCheck) { this.halfCheckedParentId.push(node.dataRef.id) } else { this.checkedParentId.push(node.dataRef.id)} } else { / / If you uncheck the current node if (isHalfCheck) { this.halfCheckedParentId.push(node.dataRef.id) } else { this.noCheckedParentId.push(node.dataRef.id) } } / / Recursively process the parent node this.getParentID(node.$parent, bool) } } It can be understood that the getParentID method recursively obtains the IDs of all parent nodes from the current node to the root node, and adds them to the checkedParentId, noCheckedParentId, and halfCheckedParentId arrays according to the check status.

[0071] In the above method, the this.deleteHalfCheckedData(node) method is called, specifically: / / Delete the virtual half-checked nodes from the root level to the end level deleteHalfCheckedData(node) { / / Find itself and its descendant nodes let cfn = (data) => { data.forEach(obj => { this.halfCheckedData = this.halfCheckedData.filter(item =>item.id != obj.id) if (obj.children) { cfn(obj.children) / / Recursively process child nodes } }) } cfn([node.dataRef]) / / Recursively delete the virtual half-selected state from the parent node to the root node let pfn = (node) => { if (node.dataRef) { let virtualHalfIds = this.halfCheckedData.map(item =>item.id) / / Judge whether the node's children have no virtual half-selected nodes let childNoVirtualHalf = node.dataRef.children.every(item =>!virtualHalfIds.includes(item.id)) if (childNoVirtualHalf) { this.halfCheckedData = this.halfCheckedData.filter(item =>item.id != node.dataRef.id) if (node.$parent) { pfn(node.$parent) / / Recursively process the parent node } } } } pfn(node.$parent) / / Recursively start from the parent node of the current node } Determine whether the child nodes of the current node have no virtual half-selected state. If not, delete the virtual half-selected state of the current parent node.

[0072] This example shows how this embodiment achieves precise control of the half-checked state in the virtual lazy loading state by introducing the halfCheckedData data structure and combining it with dynamic node state management.

[0073] From the above description, it can be seen that the front-end tree component loading method provided by the embodiment of the present application can initialize the tree component by adding a virtual half-selected attribute to the attributes of the initial tree component. When the page is loaded, all virtual half-selected node serial numbers are queried according to the virtual half-selected attribute, and the non-leaf nodes of the initial layer array are marked as half-selected according to the virtual half-selected node serial number; expand the non-leaf node of any initial layer to obtain the subordinate array node of the expanded node, mark the subordinate array node as half-selected according to the virtual half-selected node serial number, and update the initial layer half-selected mark accordingly; when checking the node, the virtual half-selected attribute is updated according to the actual half-selected state after checking, and the updated virtual half-selected attribute is determined. The updated virtual half-selected attribute is used to update the half-selected mark when the page is loaded next time, thereby improving the efficiency and accuracy of node status display when the tree component is lazy loaded.

[0074] In one embodiment of the front-end tree component loading method of the present application, see Figure 2 , and can also include the following: Step S201: performing event definition operations according to a preset check node event and a preset expand node event to determine a corresponding tree component event; Step S202: performing attribute definition operation according to preset state attributes, preset storage attributes and preset Boolean value attributes to determine corresponding tree component attributes, wherein the storage attributes are used to store node array sequence numbers, including expanded node attributes and checked node attributes; Step S203: determining a corresponding initial tree component according to the tree component event and the tree component attribute.

[0075] Optionally, in this embodiment, the purpose of this step is to construct an initial tree component.

[0076] Specifically, create a new public component about tree and define its properties and events: <a-tree v-model="checkedKeys" :tree-data="treeData" :expanded-keys="expandedKeys" checkable @check="onCheck" @expand="onExpand" / > checkedKeys Checked node ID expandedKeys Expanded node ID treeData tree data Tree component events include: @check="onCheck": listens to node check events and triggers the onCheck method when the node is checked or unchecked.

[0077] @expand="onExpand": listens to node expansion events and triggers the onExpand method when the node is expanded or collapsed.

[0078] The tree component properties include: state properties, storage properties, and preset Boolean value properties.

[0079] State property: v-model is a two-way binding of Vue, which binds the checkedKeys variable to the checked state in the a-tree component.

[0080] Storage property: treeData is an array used to pass the tree structure data. Each element represents a node and can contain information such as id (node ​​ID), label (node ​​label), isLeaf (whether it is a leaf node), etc. Through this property, the tree component knows which nodes to display and the hierarchical relationship of these nodes.

[0081] expandedKeys is an array that stores the IDs of all expanded nodes.

[0082] checkedKeys is an array that stores the IDs of all checked nodes.

[0083] Boolean attribute: checkable is a Boolean value that specifies whether the tree node supports checkboxes. If set to true, a checkbox will be displayed next to each node, allowing the user to check the box. If false, the tree node will not have a checkbox.

[0084] Through step S203, this embodiment obtains an initial tree component, including tree component properties and events.

[0085] In one embodiment of the front-end tree component loading method of the present application, see Figure 3 , and can also include the following: Step S301: performing a virtual semi-selected attribute adding operation in the storage attribute of the initial tree component, wherein the virtual semi-selected attribute is used to store the semi-selected node array sequence number; Step S302: performing a tree component definition operation according to the tree component attributes after the virtual semi-selected attribute adding operation and a preset tree component event to determine a corresponding tree component.

[0086] Optionally, in this embodiment, a halfCheckedData data structure is introduced in the tree component attributes, and the tree component is redefined. It can be understood that halfCheckedData is mainly used to record all nodes that are currently in a half-selected state. These nodes are parent nodes, and their child nodes are not fully checked (i.e., partially checked). The parent node in the half-selected state will change according to the check state of the child node.

[0087] Through step S302, this embodiment innovatively introduces a virtual half-selected data structure, which lays a foundation for the subsequent combination with dynamic node status management to realize the correct display of the node half-selected status.

[0088] In one embodiment of the front-end tree component loading method of the present application, see Figure 4 , and can also include the following: Step S401: In response to an initial node selection request, a target node is selected; Step S402: determining a corresponding virtual half-selected attribute according to the real half-selected state obtained after the checking operation.

[0089] Optionally, in this embodiment, when the user accesses the page for the first time, there is no data in the halfCheckedData data, and therefore, the page will not update the half-selected state according to the halfCheckedData data.

[0090] When the user accesses the page to check the items, when the initial check request is received, the tree structure is traversed and the check operation is performed according to the node identifier in the request. For each parent node, the check status of all its child nodes is calculated. If some child nodes are checked and some are not checked, the parent node will be marked as half-checked.

[0091] After updating the check status of each node, update the halfCheckedData data and use this array to save the virtual half-selected status to ensure that the status of all virtual half-selected nodes is consistent with the actual tree status.

[0092] Each time a node is checked, not only does it need to update the check status of the node, but it also needs to adjust the status of the parent node based on the check status of its child nodes.

[0093] The specific steps for checking are: Update the check status: this.checkedKeys will be updated to the IDs of all currently selected nodes.

[0094] Get the parent node ID: Call this.getParentID(node.$parent, checked) method to recursively get the IDs of all parent nodes from the current node to the root node, and update different arrays based on whether they are checked: checkedParentId: The ID of the parent node of all selected nodes.

[0095] noCheckedParentId: The ID of the unchecked parent node.

[0096] halfCheckedParentId: half-checked parent node ID.

[0097] Through step S402, this embodiment successfully obtains the virtual node state consistent with the real-time node selection state through the real-time node state obtained by the initial user selection state.

[0098] In one embodiment of the front-end tree component loading method of the present application, see Figure 5 , and can also include the following: Step S501: perform a lower-level node query operation on the initial layer target node to determine the corresponding lower-level node data; Step S502: performing a child adding operation on the initial layer target node according to the lower-level node data, and determining the lower-level array node corresponding to the initial layer target node.

[0099] Optionally, in this embodiment, the specific implementation steps of this step are: Call the onExpand method to expand the node: onExpand(expandedKeys, {expanded: bool,node}) { this.expandedKeys = expandedKeys / / Save the ID of the expanded node if (bool) { / / Append lower-level nodes, data is the lower-level node data obtained by interface query this.appedNode(node.dataRef, data) / / Query the lower level checked nodes and update the checked status this.getcheckedKeys(node.dataRef) } } Among them, expandedKeys: updates the ID of the currently expanded node.

[0100] node: The node to be expanded.

[0101] If the node is expanded (bool is true), call the appedNode method to load the child nodes.

[0102] In the above call to the appedNode method: appedNode(val, data) { / / Append lower level nodes / / val expands the node, data is the lower level node val.children = data / / Assign new data to the children of the parent node Among them, val is the expanded node (it may originally have no children) Data is the child node data obtained from the interface.

[0103] Append the subordinate node data to val.children.

[0104] Through step S502, this embodiment successfully adds the lower-level node into the child level of the initial layer node data, laying a foundation for subsequently updating the initial layer node status according to the child node status.

[0105] In one embodiment of the front-end tree component loading method of the present application, see Figure 6 , and can also include the following: Step S601: Determine whether the lower-level array node is a leaf node; Step S602: If not, perform a half-selection marking operation on the lower-level array node according to the virtual half-selected node sequence number to determine the corresponding child half-selection mark.

[0106] Optionally, in this embodiment, first determine whether the subordinate node of the initial layer node is a leaf node, if the subordinate node is a non-leaf node, then mark the non-leaf node as semi-selected according to the virtual semi-selected attribute, and then update the semi-selected mark of the initial layer node according to the semi-selected mark of the subordinate node.

[0107] It can be understood that the determination of the lower-level nodes in this step is continuous until all nodes are leaf nodes.

[0108] if (data.length) { val.children = data / / If the subordinate node exists if (data.every(item =>!this.halfCheckedData.includes(item.id))){ / / If there is no lower level node in the semi-selected state this.halfCheckedData = this.halfCheckedData.filter(item =>item != val.id) val.class = '' / / Clear the "half-selected" style of the parent node } item.isLeaf = false / / The current node is a non-leaf node } else { / / If the lower level node is empty this.halfCheckedData = this.halfCheckedData.filter(item =>item!= val.id) val.class = '' / / Clear the "half-selected" style of the parent node item.isLeaf = true / / The current node is a leaf node Determines whether there are any half-selected nodes in the subordinate nodes. If not, removes the half-selected state of the parent node (nodeHalf style).

[0109] If the lower-level node is empty (that is, the node has no child nodes), the current node is marked as a leaf node.

[0110] Through step S602, this embodiment successfully implements the half-selection mark of the child node, and updates the parent node through the mark of the child node, thereby realizing dynamic control of the node.

[0111] In one embodiment of the front-end tree component loading method of the present application, see Figure 7 , and can also include the following: Step S701: Check the target node to determine the corresponding target node status, where the target node status includes half-selection and full-selection; Step S702: recursively traverse the target node to determine the corresponding level-by-level parent node, and perform a state update operation on the level-by-level parent node according to the state of the target node to determine the corresponding level-by-level parent node state; Step S703: performing an update operation on the virtual semi-selected attribute according to the real semi-selected state in the target node state and the real semi-selected state in the step-by-step parent node state, and determining a corresponding updated virtual semi-selected attribute.

[0112] Optionally, in this embodiment, this step executes a check method.

[0113] The specific steps include: onCheck(keys, {checked: bool,checkedNodes,node,event}) { / / Update the key value of the checked state this.checkedKeys = keys / / Check the parent node this.checkedParentId = [] / / Uncheck the parent node this.noCheckedParentId = [] / / half-select parent node this.halfCheckedParentId = [] / / Get the parent node ID list and update this.getParentID(node.$parent, bool) / / Pass this.checkedParentId, this.noCheckedParentId, and this.halfCheckedParentId to the backend for storage through the interface, and obtain the half-selected nodes and checked data to ensure that the checked status of the frontend and backend are consistent.

[0114] / / Delete the virtual semi-selected nodes between the current node and its parent node to the root node this.deleteHalfCheckedData(node) } Explanation of the above steps: 1. Update the check status: this.checkedKeys will be updated to the IDs of all currently selected nodes.

[0115] 2. Get the parent node ID: Call this.getParentID(node.$parent, checked) method to recursively get the IDs of all parent nodes from the current node to the root node, and update different arrays based on whether they are checked: checkedParentId: The ID of the parent node of all selected nodes.

[0116] noCheckedParentId: The ID of the unchecked parent node.

[0117] halfCheckedParentId: half-checked parent node ID.

[0118] 3. Delete virtual half-selected nodes: Call this.deleteHalfCheckedData(node) method to delete the virtual half-selected nodes from the current node and its parent to the root.

[0119] In the above method, the getParentID method is called as follows: / / Get the ID array from the parent of the selected node to the root node getParentID(node, bool) { if (node.dataRef) { let isHalfCheck = node.halfChecked ||this.halfCheckedData.map(item =>item.id).includes(node.dataRef.id) / / Update the parent node array according to the check status if (bool) { / / If the current node is checked if (isHalfCheck) { this.halfCheckedParentId.push(node.dataRef.id) } else { this.checkedParentId.push(node.dataRef.id) } } else { / / If you uncheck the current node if (isHalfCheck) { this.halfCheckedParentId.push(node.dataRef.id) } else { this.noCheckedParentId.push(node.dataRef.id) } } / / Recursively process the parent node this.getParentID(node.$parent, bool) } } It can be understood that the getParentID method recursively obtains the IDs of all parent nodes from the current node to the root node, and adds them to the checkedParentId, noCheckedParentId, and halfCheckedParentId arrays according to the check status.

[0120] In the above method, the this.deleteHalfCheckedData(node) method is called, specifically: / / Delete the virtual half-checked nodes from the root level to the end level deleteHalfCheckedData(node) { / / Find itself and its descendant nodes let cfn = (data) => { data.forEach(obj => { this.halfCheckedData = this.halfCheckedData.filter(item =>item.id != obj.id) if (obj.children) { cfn(obj.children) / / Recursively process child nodes } }) } cfn([node.dataRef]) / / Recursively delete the virtual half-selected state from the parent node to the root node let pfn = (node) => { if (node.dataRef) { let virtualHalfIds = this.halfCheckedData.map(item =>item.id) / / Judge whether the node's children have no virtual half-selected nodes let childNoVirtualHalf = node.dataRef.children.every(item =>!virtualHalfIds.includes(item.id)) if (childNoVirtualHalf) { this.halfCheckedData = this.halfCheckedData.filter(item =>item.id != node.dataRef.id) if (node.$parent) { pfn(node.$parent) / / Recursively process the parent node } } } } pfn(node.$parent) / / Recursively start from the parent node of the current node } Determine whether the child nodes of the current node have no virtual half-selected state. If not, delete the virtual half-selected state of the current parent node.

[0121] Through step S703, this embodiment successfully obtains virtual check data consistent with the actual check state according to the actual check state, and updates the previous virtual check data, laying a foundation for subsequently checking the node through the updated virtual semi-check data.

[0122] In order to improve the efficiency and accuracy of node status display when the tree component is lazy loaded, the present application provides an embodiment of a front-end tree component loading device for implementing all or part of the content of the front-end tree component loading method, see Figure 8 The front-end tree component loading device specifically includes the following contents: The tree component initialization module 10 is used to add a virtual semi-selected attribute to the attributes of the initial tree component, perform a tree component definition operation according to the virtual semi-selected attribute and a preset tree component event, and determine a corresponding tree component, wherein the attribute is used to configure and transfer data, and the event is used to process user operations during user interaction; The page loading module 20 is used to respond to the page loading request, perform a virtual semi-selected node query operation on the tree component according to the virtual semi-selected attribute, determine the corresponding virtual semi-selected node sequence number, and judge whether the initial layer array node of the tree component is a leaf node. If not, perform a semi-selected marking operation on the initial layer array node according to the virtual semi-selected node sequence number to determine the corresponding initial layer semi-selected mark; The node expansion module 30 is used to respond to the node expansion request, perform a node expansion operation on the initial layer target node, determine the lower-level array node corresponding to the initial layer target node, perform a half-selection mark operation on the lower-level array node according to the virtual half-selected node sequence number, determine the corresponding child half-selected mark, perform a half-selection mark removal operation on the initial layer target node according to the child half-selected mark, and determine an updated initial layer half-selected mark, wherein the initial layer target node is any initial layer array node with an initial layer half-selected mark; The node checking module 40 is used to respond to the node checking request, check the target node, update the virtual semi-selected attribute according to the real semi-selected state obtained after the checking operation, and determine the corresponding updated virtual semi-selected attribute. The updated virtual semi-selected attribute is used to update the semi-selected mark when the page is loaded next time, wherein the target node is the initial layer target node or any child target node.

[0123] From the above description, it can be seen that the front-end tree component loading device provided by the embodiment of the present application can initialize the tree component by adding a virtual half-selected attribute to the attributes of the initial tree component. When the page is loaded, all virtual half-selected node serial numbers are queried according to the virtual half-selected attribute, and the non-leaf nodes of the initial layer array are marked as half-selected according to the virtual half-selected node serial number; expand the non-leaf node of any initial layer to obtain the subordinate array node of the expanded node, mark the subordinate array node as half-selected according to the virtual half-selected node serial number, and update the initial layer half-selected mark accordingly; when checking the node, the virtual half-selected attribute is updated according to the actual half-selected state after checking, and the updated virtual half-selected attribute is determined. The updated virtual half-selected attribute is used to update the half-selected mark when the page is loaded next time, thereby improving the efficiency and accuracy of node status display when the tree component is lazy loaded.

[0124] From the hardware level, in order to improve the efficiency and accuracy of node status display when the tree component is lazy loaded, the present application provides an embodiment of an electronic device for implementing all or part of the content of the front-end tree component loading method, and the electronic device specifically includes the following content: Processor, memory, communication interface and bus; wherein the processor, memory and communication interface communicate with each other through the bus; the communication interface is used to realize information transmission between the front-end tree component loading method and the core business system, user terminal and related database and other related devices; the logic controller can be a desktop computer, a tablet computer and a mobile terminal, etc., but the present embodiment is not limited thereto. In the present embodiment, the logic controller can be implemented with reference to the embodiment of the front-end tree component loading method and the embodiment of the front-end tree component loading method in the embodiment, and the contents thereof are incorporated herein, and the repeated parts are not repeated.

[0125] It is understandable that the user terminal may include a smart phone, a tablet electronic device, a network set-top box, a portable computer, a desktop computer, a personal digital assistant (PDA), a vehicle-mounted device, a smart wearable device, etc. Among them, the smart wearable device may include smart glasses, a smart watch, a smart bracelet, etc.

[0126] In practical applications, part of the front-end tree component loading method can be executed on the electronic device side as described above, or all operations can be completed in the client device. The specific selection can be based on the processing capability of the client device and the limitations of the user's usage scenario. This application does not limit this. If all operations are completed in the client device, the client device may also include a processor.

[0127] The client device may have a communication module (i.e., a communication unit) that can communicate with a remote server to achieve data transmission with the server. The server may include a server on the task scheduling center side, and other implementation scenarios may also include a server on an intermediate platform, such as a server on a third-party server platform that has a communication link with the task scheduling center server. The server may include a single computer device, or a server cluster consisting of multiple servers, or a server structure of a distributed device.

[0128] Fig. 9 FIG. 9 is a schematic block diagram of the system structure of the electronic device 9600 according to an embodiment of the present application. Fig. 9 As shown, the electronic device 9600 may include a central processor 9100 and a memory 9140; the memory 9140 is coupled to the central processor 9100. It is worth noting that Fig. 9 is exemplary; other types of structures may also be used to supplement or replace this structure to implement telecommunication functions or other functions.

[0129] In one embodiment, the front-end tree component loading method function may be integrated into the central processing unit 9100. The central processing unit 9100 may be configured to perform the following control: Step S101: adding a virtual half-selected attribute to the attributes of the initial tree component, performing a tree component definition operation according to the virtual half-selected attribute and a preset tree component event, and determining a corresponding tree component, wherein the attribute is used to configure and transfer data, and the event is used to process user operations during user interaction; Step S102: in response to the page loading request, performing a virtual semi-selected node query operation on the tree component according to the virtual semi-selected attribute, determining a corresponding virtual semi-selected node serial number, judging whether the initial layer array node of the tree component is a leaf node, and if not, performing a semi-selected marking operation on the initial layer array node according to the virtual semi-selected node serial number, and determining a corresponding initial layer semi-selected mark; Step S103: in response to the node expansion request, perform a node expansion operation on the initial layer target node, determine the lower-level array node corresponding to the initial layer target node, perform a half-selection mark operation on the lower-level array node according to the virtual half-selected node sequence number, determine the corresponding child half-selected mark, perform a half-selection mark removal operation on the initial layer target node according to the child half-selected mark, and determine an updated initial layer half-selected mark, wherein the initial layer target node is any initial layer array node with an initial layer half-selected mark; Step S104: In response to the node check request, a check operation is performed on the target node, and the virtual semi-selected attribute is updated according to the real semi-selected state obtained after the check operation to determine the corresponding updated virtual semi-selected attribute, and the updated virtual semi-selected attribute is used to update the semi-selected mark when the page is loaded next time, wherein the target node is an initial layer target node or any child target node.

[0130] From the above description, it can be seen that the electronic device provided by the embodiment of the present application initializes the tree component by adding a virtual half-selected attribute to the attributes of the initial tree component. When the page is loaded, all virtual half-selected node serial numbers are queried according to the virtual half-selected attribute, and the non-leaf nodes of the initial layer array are marked as half-selected according to the virtual half-selected node serial number; the non-leaf node of any initial layer is expanded to obtain the subordinate array node of the expanded node, the subordinate array node is half-selected according to the virtual half-selected node serial number, and the initial layer half-selected mark is updated accordingly; when the node is checked, the virtual half-selected attribute is updated according to the actual half-selected state after the check, and the updated virtual half-selected attribute is determined. The updated virtual half-selected attribute is used to update the half-selected mark when the page is loaded next time, thereby improving the efficiency and accuracy of the node status display when the tree component is lazy loaded.

[0131] In another embodiment, the front-end tree component loading method can be configured separately from the central processing unit 9100. For example, the front-end tree component loading method can be configured as a chip connected to the central processing unit 9100, and the front-end tree component loading method function is implemented through the control of the central processing unit.

[0132] like Fig. 9 As shown, the electronic device 9600 may also include: a communication module 9110, an input unit 9120, an audio processor 9130, a display 9160, and a power supply 9170. It is worth noting that the electronic device 9600 does not necessarily have to include Fig. 9 In addition, the electronic device 9600 may also include Fig. 9 For components not shown, reference may be made to the prior art.

[0133] like Fig. 9 As shown, the central processing unit 9100 is sometimes also referred to as a controller or an operation control, and may include a microprocessor or other processor device and / or logic device. The central processing unit 9100 receives input and controls the operation of various components of the electronic device 9600.

[0134] The memory 9140 may be, for example, one or more of a cache, a flash memory, a hard drive, a removable medium, a volatile memory, a non-volatile memory or other suitable devices. The above-mentioned information related to the failure may be stored, and a program for executing the relevant information may also be stored. The CPU 9100 may execute the program stored in the memory 9140 to implement information storage or processing, etc.

[0135] The input unit 9120 provides input to the central processing unit 9100. The input unit 9120 is, for example, a key or a touch input device. The power supply 9170 is used to provide power to the electronic device 9600. The display 9160 is used to display display objects such as images and texts. The display may be, for example, an LCD display, but is not limited thereto.

[0136] The memory 9140 may be a solid-state memory, such as a read-only memory (ROM), a random access memory (RAM), a SIM card, etc. It may also be a memory that saves information even when the power is off, can be selectively erased, and is provided with more data, examples of which are sometimes referred to as EPROMs, etc. The memory 9140 may also be some other type of device. The memory 9140 includes a buffer memory 9141 (sometimes referred to as a buffer). The memory 9140 may include an application / function storage unit 9142, which is used to store application programs and function programs or processes for executing the operation of the electronic device 9600 through the central processor 9100.

[0137] The memory 9140 may also include a data storage unit 9143 for storing data, such as contacts, digital data, pictures, sounds, and / or any other data used by the electronic device. The driver storage unit 9144 of the memory 9140 may include various drivers for communication functions of the electronic device and / or for executing other functions of the electronic device (such as messaging applications, address book applications, etc.).

[0138] The communication module 9110 is a transmitter / receiver that sends and receives signals via the antenna 9111. The communication module 9110 is coupled to the central processor 9100 to provide input signals and receive output signals, which may be the same as the case of a conventional mobile communication terminal.

[0139] Based on different communication technologies, multiple communication modules 9110 may be provided in the same electronic device, such as a cellular network module, a Bluetooth module and / or a wireless local area network module, etc. The communication module 9110 is also coupled to a speaker 9131 and a microphone 9132 via an audio processor 9130 to provide an audio output via the speaker 9131 and receive an audio input from the microphone 9132, thereby realizing a common telecommunication function. The audio processor 9130 may include any suitable buffer, decoder, amplifier, etc. In addition, the audio processor 9130 is also coupled to the central processor 9100, so that recording can be performed on the machine through the microphone 9132, and the sound stored on the machine can be played through the speaker 9131.

[0140] The embodiment of the present application also provides a computer-readable storage medium capable of implementing all the steps in the front-end tree component loading method in the above embodiment, where the execution subject is a server or a client. The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, all the steps in the front-end tree component loading method in the above embodiment are implemented. For example, when the processor executes the computer program, the following steps are implemented: Step S101: adding a virtual half-selected attribute to the attributes of the initial tree component, performing a tree component definition operation according to the virtual half-selected attribute and a preset tree component event, and determining a corresponding tree component, wherein the attribute is used to configure and transfer data, and the event is used to process user operations during user interaction; Step S102: in response to the page loading request, performing a virtual semi-selected node query operation on the tree component according to the virtual semi-selected attribute, determining a corresponding virtual semi-selected node serial number, judging whether the initial layer array node of the tree component is a leaf node, and if not, performing a semi-selected marking operation on the initial layer array node according to the virtual semi-selected node serial number, and determining a corresponding initial layer semi-selected mark; Step S103: in response to the node expansion request, perform a node expansion operation on the initial layer target node, determine the lower-level array node corresponding to the initial layer target node, perform a half-selection mark operation on the lower-level array node according to the virtual half-selected node sequence number, determine the corresponding child half-selected mark, perform a half-selection mark removal operation on the initial layer target node according to the child half-selected mark, and determine an updated initial layer half-selected mark, wherein the initial layer target node is any initial layer array node with an initial layer half-selected mark; Step S104: In response to the node check request, a check operation is performed on the target node, and the virtual semi-selected attribute is updated according to the real semi-selected state obtained after the check operation to determine the corresponding updated virtual semi-selected attribute, and the updated virtual semi-selected attribute is used to update the semi-selected mark when the page is loaded next time, wherein the target node is an initial layer target node or any child target node.

[0141] From the above description, it can be seen that the computer-readable storage medium provided in the embodiment of the present application initializes the tree component by adding a virtual half-selected attribute to the attributes of the initial tree component. When the page is loaded, all virtual half-selected node serial numbers are queried according to the virtual half-selected attribute, and the non-leaf nodes of the initial layer array are marked as half-selected according to the virtual half-selected node serial number; the non-leaf nodes of any initial layer are expanded to obtain the subordinate array nodes of the expanded node, and the subordinate array nodes are marked as half-selected according to the virtual half-selected node serial number, and the initial layer half-selected mark is updated accordingly; when the node is checked, the virtual half-selected attribute is updated according to the actual half-selected state after the check, and the updated virtual half-selected attribute is determined. The updated virtual half-selected attribute is used to update the half-selected mark when the page is loaded next time, thereby improving the efficiency and accuracy of node status display when the tree component is lazy loaded.

[0142] The embodiments of the present application also provide a computer program product capable of implementing all the steps of the front-end tree component loading method in the above-mentioned embodiment, where the execution subject is a server or a client. When the computer program / instruction is executed by a processor, the steps of the front-end tree component loading method are implemented. For example, the computer program / instruction implements the following steps: Step S101: adding a virtual half-selected attribute to the attributes of the initial tree component, performing a tree component definition operation according to the virtual half-selected attribute and a preset tree component event, and determining a corresponding tree component, wherein the attribute is used to configure and transfer data, and the event is used to process user operations during user interaction; Step S102: in response to the page loading request, performing a virtual semi-selected node query operation on the tree component according to the virtual semi-selected attribute, determining a corresponding virtual semi-selected node serial number, judging whether the initial layer array node of the tree component is a leaf node, and if not, performing a semi-selected marking operation on the initial layer array node according to the virtual semi-selected node serial number, and determining a corresponding initial layer semi-selected mark; Step S103: in response to the node expansion request, perform a node expansion operation on the initial layer target node, determine the lower-level array node corresponding to the initial layer target node, perform a half-selection mark operation on the lower-level array node according to the virtual half-selected node sequence number, determine the corresponding child half-selected mark, perform a half-selection mark removal operation on the initial layer target node according to the child half-selected mark, and determine an updated initial layer half-selected mark, wherein the initial layer target node is any initial layer array node with an initial layer half-selected mark; Step S104: In response to the node check request, a check operation is performed on the target node, and the virtual semi-selected attribute is updated according to the real semi-selected state obtained after the check operation to determine the corresponding updated virtual semi-selected attribute, and the updated virtual semi-selected attribute is used to update the semi-selected mark when the page is loaded next time, wherein the target node is an initial layer target node or any child target node.

[0143] From the above description, it can be seen that the computer program product provided by the embodiment of the present application initializes the tree component by adding a virtual half-selected attribute to the attributes of the initial tree component. When the page is loaded, all virtual half-selected node serial numbers are queried according to the virtual half-selected attribute, and the non-leaf nodes of the initial layer array are marked as half-selected according to the virtual half-selected node serial number; the non-leaf node of any initial layer is expanded to obtain the subordinate array node of the expanded node, the subordinate array node is half-selected according to the virtual half-selected node serial number, and the initial layer half-selected mark is updated accordingly; when the node is checked, the virtual half-selected attribute is updated according to the actual half-selected state after the check, and the updated virtual half-selected attribute is determined. The updated virtual half-selected attribute is used to update the half-selected mark when the page is loaded next time, thereby improving the efficiency and accuracy of the node status display when the tree component is lazy loaded.

[0144] It should be understood by those skilled in the art that embodiments of the present invention may be provided as methods, devices, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0145] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (apparatus), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0146] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0147] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0148] The present invention uses specific embodiments to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core idea. At the same time, for those skilled in the art, according to the idea of ​​the present invention, there will be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as a limitation on the present invention.

Claims

1. A front-end tree component loading method, characterized in that: The method comprises: Adding a virtual half-selected attribute to the attributes of the initial tree component, performing a tree component definition operation according to the virtual half-selected attribute and a preset tree component event, and determining a corresponding tree component, wherein the attribute is used to configure and transfer data, and the event is used to process user operations during user interaction; In response to a page loading request, a virtual semi-selected node query operation is performed on the tree component according to the virtual semi-selected attribute to determine a corresponding virtual semi-selected node serial number, and it is determined whether the initial layer array node of the tree component is a leaf node; if not, a semi-selected marking operation is performed on the initial layer array node according to the virtual semi-selected node serial number to determine a corresponding initial layer semi-selected mark; In response to a node expansion request, performing a node expansion operation on an initial layer target node, determining a lower-level array node corresponding to the initial layer target node, performing a half-selection mark operation on the lower-level array node according to the virtual half-selected node sequence number, determining a corresponding child half-selected mark, performing a half-selection mark removal operation on the initial layer target node according to the child half-selected mark, and determining an updated initial layer half-selected mark, wherein the initial layer target node is any initial layer array node with an initial layer half-selected mark; In response to a node check request, a check operation is performed on a target node, and the virtual semi-selected attribute is updated according to a real semi-selected state obtained after the check operation to determine a corresponding updated virtual semi-selected attribute, and the updated virtual semi-selected attribute is used to update the semi-selected mark when the page is loaded next time, wherein the target node is an initial layer target node or any child target node.

2. The front-end tree component loading method according to claim 1, characterized in that: Before adding a virtual half-selected attribute to the attributes of the initial tree component, performing a tree component definition operation according to the virtual half-selected attribute and a preset tree component event, and determining a corresponding tree component, the method includes: Perform event definition operations according to the preset check node event and the preset expand node event to determine the corresponding tree component event; Performing attribute definition operations according to preset state attributes, preset storage attributes, and preset Boolean value attributes to determine corresponding tree component attributes, wherein the storage attributes are used to store node array sequence numbers, including expanded node attributes and checked node attributes; A corresponding initial tree component is determined according to the tree component event and the tree component attribute.

3. The front-end tree component loading method according to claim 1, characterized in that: The adding of a virtual half-selected attribute to the attributes of the initial tree component, performing a tree component definition operation according to the virtual half-selected attribute and a preset tree component event, and determining a corresponding tree component includes: Performing a virtual semi-selected attribute adding operation in the storage attribute of the initial tree component, wherein the virtual semi-selected attribute is used to store the semi-selected node array sequence number; A tree component definition operation is performed according to the tree component attributes after the virtual semi-selected attribute adding operation and a preset tree component event to determine a corresponding tree component.

4. The front-end tree component loading method according to claim 1, characterized in that: Before performing a virtual semi-selected node query operation on the tree component according to the virtual semi-selected attribute in response to the page loading request, the method includes: In response to the initial node selection request, a target node selection operation is performed; The corresponding virtual half-selected attribute is determined according to the real half-selected state obtained after the checking operation.

5. The front-end tree component loading method according to claim 1, characterized in that: The step of performing a node expansion operation on the initial layer target node to determine a lower-level array node corresponding to the initial layer target node includes: Perform a lower-level node query operation on the initial layer target node to determine the corresponding lower-level node data; A child adding operation is performed on the initial layer target node according to the lower-level node data to determine the lower-level array node corresponding to the initial layer target node.

6. The front-end tree component loading method according to claim 1, characterized in that: The performing a half-selection mark operation on the lower-level array node according to the virtual half-selected node sequence number to determine the corresponding child half-selection mark includes: Determine whether the lower-level array node is a leaf node; If not, a half-selection mark operation is performed on the lower-level array node according to the virtual half-selected node sequence number to determine the corresponding child half-selected mark.

7. The front-end tree component loading method according to claim 1, characterized in that: The checking operation is performed on the target node, and the virtual semi-selected attribute is updated according to the real semi-selected state obtained after the checking operation, to determine the corresponding updated virtual semi-selected attribute, including: Perform a check operation on the target node to determine the corresponding target node state, where the target node state includes half-selection and full-selection; Recursively traverse the target node to determine the corresponding level-by-level parent node, and perform a state update operation on the level-by-level parent node according to the state of the target node to determine the corresponding level-by-level parent node state; The virtual semi-selected attribute is updated according to the real semi-selected state in the target node state and the real semi-selected state in the step-by-step parent node state to determine the corresponding updated virtual semi-selected attribute.

8. A front-end tree-type component loading device, characterized in that: The device comprises: A tree component initialization module, used to add a virtual semi-selected attribute to the attributes of the initial tree component, perform a tree component definition operation according to the virtual semi-selected attribute and a preset tree component event, and determine a corresponding tree component, wherein the attribute is used to configure and transfer data, and the event is used to process user operations during user interaction; a page loading module, for responding to a page loading request, performing a virtual semi-selected node query operation on the tree component according to the virtual semi-selected attribute, determining a corresponding virtual semi-selected node serial number, judging whether an initial layer array node of the tree component is a leaf node, and if not, performing a semi-selected marking operation on the initial layer array node according to the virtual semi-selected node serial number, and determining a corresponding initial layer semi-selected mark; a node expansion module, for responding to a node expansion request, performing a node expansion operation on an initial layer target node, determining a lower-level array node corresponding to the initial layer target node, performing a half-selection mark operation on the lower-level array node according to the virtual half-selected node sequence number, determining a corresponding child half-selected mark, performing a half-selection mark removal operation on the initial layer target node according to the child half-selected mark, and determining an updated initial layer half-selected mark, wherein the initial layer target node is any initial layer array node with an initial layer half-selected mark; A node checking module is used to respond to a node checking request, check a target node, update the virtual semi-selected attribute according to a real semi-selected state obtained after the checking operation, and determine a corresponding updated virtual semi-selected attribute, wherein the updated virtual semi-selected attribute is used to update the semi-selected mark when the page is loaded next time, wherein the target node is an initial layer target node or any child target node.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the steps of the front-end tree component loading method described in any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the front-end tree component loading method described in any one of claims 1 to 7 are implemented.

Images