Front-end tree component loading method and device

Abstract

The embodiment of the application provides a front-end tree type component loading method and device, the method comprises the following steps: initializing the tree type component by adding a virtual half-selected attribute in the attribute of an initial tree type component; when a page is loaded, querying all virtual half-selected node serial numbers according to the virtual half-selected attribute, and marking the non-leaf nodes of an initial layer array as half-selected according to the virtual half-selected node serial numbers; expanding the non-leaf nodes of any initial layer to obtain the lower array nodes of the expanded nodes, marking the lower array nodes as half-selected according to the virtual half-selected node serial numbers, and updating the initial layer half-selected mark correspondingly; when a node is checked, updating the virtual half-selected attribute according to the real half-selected state after the node is checked, determining the updated virtual half-selected attribute, and using the updated virtual half-selected attribute to update the half-selected mark when the page is loaded next time, so that the efficiency and accuracy of node state display when the tree type component is loaded lazily can be improved.

Description

TECHNICAL FIELD

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

[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 that require the display of multi-level data. When the data level of a tree component is too deep or the data volume is too large, traditional loading methods may cause performance bottlenecks.

[0003] Virtual lazy loading is a tree component optimization technique mainly used in complex data loading scenarios. Its core idea is to load data on demand, i.e., only when a user expands a node, the node's child nodes are loaded, 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 a tree component enables virtual lazy loading, loadData can dynamically load data when a user expands a node, rather than loading all child nodes at once, thereby improving performance. However, this results in only the direct child nodes of a node being loaded when the node is expanded, rather than 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 its child nodes. If the selection state of a child node is not determined during loading, the half-checked state of the parent node cannot be correctly reflected. Therefore, the existing virtual lazy loading method cannot correctly reflect the half-checked state of a 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 state display during tree component lazy loading. SUMMARY

[0006] To address the problems in the prior art, the present application provides a front-end tree component loading method and device that can improve the efficiency and accuracy of node state display during tree component lazy loading.

[0007] To address at least one of the above problems, the present application provides the following technical solutions:

[0008] In a first aspect, the present application provides a front-end tree component loading method, comprising:

[0009] adding a virtual half-selection attribute in a property of an initial tree component, performing a tree component definition operation according to the virtual half-selection attribute and a preset tree component event, and determining a corresponding tree component, wherein the property is used for configuring and transmitting data, and the event is used for processing an operation of a user when the user interacts;

[0010] in response to a page loading request, performing a virtual half-selection node query operation on the tree component according to the virtual half-selection attribute, determining a corresponding virtual half-selection node sequence number, judging whether an initial array node of a first layer of the tree component is a leaf node, and if not, performing a half-selection marking operation on the initial array node of the first layer according to the virtual half-selection node sequence number, and determining a corresponding initial layer half-selection mark;

[0011] in response to an expansion node request, performing a node expansion operation on an initial layer target node, determining a subordinate array node corresponding to the initial layer target node, performing a half-selection marking operation on the subordinate array node according to the virtual half-selection node sequence number, determining a corresponding child half-selection mark, performing a half-selection mark removal operation on the initial layer target node according to the child half-selection mark, and determining an updated initial layer half-selection mark, wherein the initial layer target node is any initial array node of the first layer with an initial layer half-selection mark;

[0012] in response to a check node request, performing a check operation on a target node, updating the virtual half-selection attribute according to a real half-selection state obtained after the check operation, and determining a corresponding updated virtual half-selection attribute, wherein the updated virtual half-selection attribute is used to update the half-selection mark next time the page is loaded, and the target node is an initial layer target node or any child target node.

[0013] Further, before adding the virtual half-selection attribute in the property of the initial tree component, performing the tree component definition operation according to the virtual half-selection attribute and the preset tree component event, and determining the corresponding tree component, the method further includes:

[0014] performing an event definition operation according to a preset check node event and a preset expansion node event, and determining the corresponding tree component event;

[0015] performing an attribute definition operation according to a preset state attribute, a preset storage attribute, and a preset Boolean value attribute, and determining the corresponding tree component attribute, wherein the storage attribute is used for storing a node array sequence number, including an expanded node attribute and a checked node attribute;

[0016] determining the initial tree component according to the tree component event and the tree component attribute.

[0017] Further, the virtual half-selected attribute is added in the attribute of the initial tree component, and a tree component definition operation is performed according to the virtual half-selected attribute and a preset tree component event, so as to determine a corresponding tree component, including:

[0018] The virtual half-selected attribute is added in the storage attribute of the initial tree component, and the virtual half-selected attribute is used to store a half-selected node array serial number;

[0019] The tree component definition operation is performed according to the tree component attribute after the virtual half-selected attribute adding operation and the preset tree component event, so as to determine a corresponding tree component.

[0020] Further, before the virtual half-selected node query operation is performed on the tree component according to the virtual half-selected attribute in response to the page loading request, including:

[0021] The target node is checked in response to an initial check node request;

[0022] The virtual half-selected attribute is determined according to a real half-selected state obtained after the check operation.

[0023] Further, the node expansion operation is performed on the initial layer target node, so as to determine a lower array node corresponding to the initial layer target node, including:

[0024] The lower node query operation is performed on the initial layer target node, so as to determine corresponding lower node data;

[0025] The lower array node corresponding to the initial layer target node is determined by performing the child addition operation on the initial layer target node according to the lower node data.

[0026] Further, the half-selected mark operation is performed on the lower array node according to the virtual half-selected node serial number, so as to determine a corresponding child half-selected mark, including:

[0027] It is judged whether the lower array node is a leaf node;

[0028] If not, the half-selected mark operation is performed on the lower array node according to the virtual half-selected node serial number, so as to determine a corresponding child half-selected mark.

[0029] Further, the check operation is performed on the target node, and the virtual half-selected attribute is updated according to a real half-selected state obtained after the check operation, so as to determine a corresponding updated virtual half-selected attribute, including:

[0030] The check operation is performed on the target node, so as to determine a corresponding target node state, and the target node state includes half selection and full selection;

[0031] performing a recursive traversal operation on the target node to determine a corresponding parent node at each level, performing a state updating operation on the parent node at each level according to the state of the target node to determine a corresponding state of the parent node at each level;

[0032] performing an updating operation on the virtual half-selected attribute according to a real half-selected state in the state of the target node and a real half-selected state in the state of the parent node at each level to determine an updated virtual half-selected attribute.

[0033] In a second aspect, the present application provides a front-end tree component loading device, comprising:

[0034] a tree component initialization module, configured to add a virtual half-selected attribute in an attribute of an initial tree component, and perform a tree component defining operation according to the virtual half-selected attribute and a preset tree component event to determine a corresponding tree component, wherein the attribute is configured to configure and transmit data, and the event is configured to process the operation of a user when the user interacts;

[0035] a page loading module, configured to respond to a page loading request, perform a virtual half-selected node querying operation on the tree component according to the virtual half-selected attribute to determine a corresponding virtual half-selected node serial number, and determine whether an initial array node at a first level of the tree component is a leaf node, and if not, perform a half-selected marking operation on the initial array node at the first level according to the virtual half-selected node serial number to determine an updated initial first-level half-selected mark;

[0036] a node expanding module, configured to respond to an expanding node request, perform a node expanding operation on an initial layer target node to determine a subordinate array node corresponding to the initial layer target node, perform a half-selected marking operation on the subordinate array node according to the virtual half-selected node serial number to determine a child half-selected mark, and perform a half-selected mark removing operation on the initial layer target node according to the child half-selected mark to determine an updated initial first-level half-selected mark, wherein the initial layer target node is any initial array node at the first level with the initial first-level half-selected mark;

[0037] a node checking module, configured to respond to a checking node request, perform a checking operation on a target node, perform an updating operation on the virtual half-selected attribute according to a real half-selected state obtained after the checking operation to determine an updated virtual half-selected attribute, and use the updated virtual half-selected attribute to update the half-selected mark when loading a page next time, wherein the target node is an initial layer target node or any child target node.

[0038] 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 capable of running on the processor, wherein the processor performs the steps of the front-end tree component loading method when executing the program.

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

[0040] In a fifth aspect, the present application provides a computer program product, which comprises computer programs / instructions, and the computer programs / instructions, when executed by a processor, implement the steps of the front-end tree component loading method.

[0041] According to the above technical solution, the present application provides a front-end tree component loading method and device, which initializes a tree component by adding a virtual half-selected attribute in the attribute of an initial tree component. When a 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 an initial layer array are marked as half-selected according to the virtual half-selected node serial numbers. The non-leaf nodes of any initial layer are expanded to obtain the subordinate array nodes of the expanded nodes, the subordinate array nodes are marked as half-selected according to the virtual half-selected node serial numbers, and the half-selected mark of the initial layer is updated accordingly. When a node is checked, the virtual half-selected attribute is updated according to the real half-selected state after the node is checked, 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 state display when the tree component is lazily loaded. BRIEF DESCRIPTION OF DRAWINGS

[0042] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings needed to be used in the embodiments or prior art description. Obviously, the drawings in the following description are some embodiments of the present application, and those skilled in the art can also obtain other drawings according to these drawings without creative labor.

[0043] Figure 1 FIG. 1 is a flowchart of one of the front-end tree component loading methods in the embodiments of the present application;

[0044] Figure 2 FIG. 2 is a flowchart of another of the front-end tree component loading methods in the embodiments of the present application;

[0045] Figure 3 FIG. 3 is a flowchart of a third of the front-end tree component loading methods in the embodiments of the present application;

[0046] Figure 4 FIG. 4 is a flowchart of a fourth of the front-end tree component loading methods in the embodiments of the present application;

[0047] Figure 5 FIG. 5 is a flowchart of a fifth of the front-end tree component loading methods in the embodiments of the present application;

[0048] Figure 6 Fig. 6 is a flowchart of a seventh method for loading a front-end tree component according to an embodiment of the present application;

[0049] Figure 7 Fig. 7 is a flowchart of an eighth method for loading a front-end tree component according to an embodiment of the present application;

[0050] Figure 8 Fig. 8 is a structural diagram of a front-end tree component loading device according to an embodiment of the present application;

[0051] Figure 9 Fig. 9 is a structural diagram of an electronic device according to an embodiment of the present application.

[0052] Reference Signs:

[0053] Electronic device 9600, central processor 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 storage unit 9144, antenna 9111, speaker 9131, microphone 9132. DETAILED DESCRIPTION

[0054] In order to make the objectives, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be described clearly and completely below with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are some but not all of the embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative work fall within the scope of the present application.

[0055] The acquisition, storage, use, processing, etc. of data in the technical solutions of the present application all comply with relevant provisions of national laws and regulations.

[0056] In view of the problem that the existing virtual lazy loading mode cannot correctly reflect the semi-selected state of the parent node, the application provides a front-end tree component loading method and device, which initializes the tree component by adding a virtual semi-selected attribute in the attribute of the initial tree component, queries all virtual semi-selected node sequence numbers according to the virtual semi-selected attribute when the page is loaded, and marks the non-leaf nodes of the initial layer array as semi-selected according to the virtual semi-selected node sequence numbers; expands the non-leaf nodes of any initial layer to obtain the subordinate array nodes of the expanded nodes, marks the subordinate array nodes as semi-selected according to the virtual semi-selected node sequence numbers, and updates the initial layer semi-selected mark accordingly; when a node is checked, the virtual semi-selected attribute is updated according to the real semi-selected state after the node is checked, the updated virtual semi-selected attribute is determined, and the updated virtual semi-selected attribute is used to update the semi-selected mark when the page is loaded next time, so as to improve the efficiency and accuracy of node state display when the tree component is lazy loaded.

[0057] In order to improve the efficiency and accuracy of node state display when the tree component is lazy loaded, the application provides an embodiment of a front-end tree component loading method, as shown in Figure 1 , which specifically includes the following contents:

[0058] Step S101: adding a virtual semi-selected attribute in the attribute of the initial tree component, performing tree component definition operation according to the virtual semi-selected attribute and a preset tree component event, and determining the corresponding tree component, wherein the attribute is used for configuring and transmitting data, and the event is used for processing the operation of the user when the user interacts;

[0059] Optionally, in this embodiment, the tree component is first initialized and configured.

[0060] Specifically, a new public component about tree is created, and its attributes and events are defined:

[0061] <a-tree v-model="checkedKeys" :tree-data="treeData" :expanded-keys="expandedKeys" checkable @check="onCheck" @expand="onExpand" / >

[0062] checkedKeys checked node ID

[0063] expandedKeys expanded node ID

[0064] treeData tree data

[0065] Among them, v-model="checkedKeys": used to bind the checkedKeys data of the tree component, which represents which nodes are selected, and it is synchronized with the checkedKeys data of the parent component.

[0066] v-model is Vue's two-way binding, which binds the checkedKeys variable to the checked state in the a-tree component. The checked state of tree nodes (i.e., the IDs of checked nodes) will be automatically stored in checkedKeys, and vice versa, if checkedKeys changes, the tree's checked state will also be automatically updated.

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

[0068] expanded-keys="expandedKeys": binds the expandedKeys data of expanded nodes, specifying which nodes are in the expanded state.

[0069] checkable: indicates whether the tree's nodes display checkboxes, which users can check or uncheck.

[0070] @check="onCheck": listens for node check events, triggering the onCheck method when a node is checked or unchecked.

[0071] @expand="onExpand": listens for node expansion events, triggering the onExpand method when a node is expanded or collapsed.

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

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

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

[0075] Events are callback functions that are triggered by user interaction with a component. These events can be used to handle user actions (such as checking boxes, expanding objects, etc.), including @check="onCheck" and @expand="onExpand".

[0076] For example, the tree structure is as follows:

[0077] treeData = [

[0078] {

[0079] id: 1, label: 'Node 1',

[0080] isLeaf: false,

[0081] children: [

[0082] { id: 2,

[0083] label: 'Node 2',

[0084] isLeaf: false,

[0085] children: [

[0086] { id: 4,

[0087] label: 'Node 4'

[0088] isLeaf: true},

[0089] { id: 5,

[0090] label: 'Node 5'

[0091] isLeaf: true} ]

[0093] },

[0094] { id: 3, label: 'Node 3', isLeaf: true} ]

[0096] } ];

[0098] This data represents a tree structure containing node 1, node 2, and node 3, where node 2 has child node 4 and child node 5.

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

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

[0101] By setting the virtual half-selected attribute, a foundation is laid for subsequent implementation of data virtual half-selection and correct display of the half-selected state of the node.

[0102] Step S102: In response to a page loading request, a virtual half-selected node query operation is performed on the tree component according to the virtual half-selected attribute, a corresponding virtual half-selected node sequence number is determined, it is judged whether the initial array node of the tree component is a leaf node, if not, a half-selected marking operation is performed on the initial array node according to the virtual half-selected node sequence number, and a corresponding initial layer half-selected mark is determined.

[0103] Optionally, in the embodiment, a half-selected label is added to the tree component by virtual half-selected data. The steps are as follows:

[0104] 1. The treeData obtains the first layer node from the interface. Whether the node has child nodes is determined according to the value of isLeaf.

[0105] 2. If isLeaf is false, it indicates that the node is expandable, which is a non-leaf node.

[0106] 3. The style of the first layer non-leaf node is set according to the halfCheckedData (virtual half-selected attribute), for example, set to nodeHalf, indicating that the node is in a half-selected state.

[0107] Specifically, based on the entering page operation, when the page is loaded, an interface request is initiated to query the virtual half-selected node halfCheckedData data, and obtain all virtual half-selected node sequence numbers (node IDs). Then, the first 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 indicates that the node has child nodes, which is a non-leaf node. The node ID of the node is compared. If the node is in the halfCheckedData, a special CSS class nodeHalf is set to the node, indicating that the node is in a "half-selected" state.

[0108] After the above steps, the semi-selected state of the first-level node array of the tree component after page loading is obtained. At the same time, the semi-selected state of the child level and the semi-selected state of the current level are determined and updated through virtual semi-selected nodes and user expansion operations.

[0109] 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 marking operation on the lower-level array node according to the virtual half-selection node sequence number, determine the corresponding child half-selection mark, perform a half-selection mark removal operation on the initial layer target node according to the child half-selection mark, and determine the updated initial layer half-selection mark, wherein the initial layer target node is any initial layer array node with an initial layer half-selection mark;

[0110] Optionally, in this embodiment, this step uses virtual semi-selection data to expand one node at a time and append a level of data to `treeData` to perform the semi-selection setting, instead of asynchronously loading `loadData` to perform the semi-selection setting, thus increasing the accuracy of the node's semi-selection status. The steps are as follows:

[0111] When a node is expanded, call onExpand to expand the node, get the expanded node's expandedKeys, query the data of the child nodes, and append it to the child nodes of the expanded node. Also, set the class attribute value of the child nodes to nodeHalf based on the halfCheckedData data, and remove the virtual half-selection of the parent node.

[0112] Specifically, the onExpand method is called to expand the node:

[0113] onExpand(expandedKeys, {expanded: bool,node}) {

[0114] this.expandedKeys = expandedKeys / / Stores the IDs of expanded nodes

[0115] if (bool) {

[0116] / / Append child nodes, where data is the child node data retrieved from the API query.

[0117] this.appedNode(node.dataRef, data)

[0118] / / Query the selected sub-nodes and update their selection status

[0119] this.getcheckedKeys(node.dataRef)

[0120] }

[0121] }

[0122] Among them, expandedKeys: updates the ID of the currently expanded node.

[0123] node: The expanded node.

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

[0125] If a child node is in a partially selected state, call the getcheckedKeys method to update the node state.

[0126] In the above call to the `appedNode` method:

[0127] appedNode(val, data) { / / Append child nodes

[0128] / / val expands the node, and data is a child node

[0129] val.children = data / / Assign the new data to the child nodes of the parent node

[0130] if (data.length) {

[0131] val.children = data / / If child nodes exist

[0132] if (data.every(item =>!this.halfCheckedData.includes(item.id))){

[0133] / / If no child node is in a semi-selected state

[0134] this.halfCheckedData = this.halfCheckedData.filter(item =>item != val.id)

[0135] val.class = '' / / Clear the "partial selection" style of the parent node

[0136] }

[0137] item.isLeaf = false / / The current node is a non-leaf node

[0138] } else {

[0139] / / If the child node is empty

[0140] this.halfCheckedData = this.halfCheckedData.filter(item =>item!= val.id)

[0141] val.class = '' / / Clear the "half-selected" style of the parent node

[0142] item.isLeaf = true / / The current node is a leaf node

[0143] }

[0144] }

[0145] where val is the expanded node, which may not originally have children

[0146] data is the child node data obtained from the interface.

[0147] Append the child node data to val.children.

[0148] Then, determine if there are any nodes in the child node that are in the half-selected state, and if not, remove the half-selected state (nodeHalf style) of the parent node.

[0149] If the child node is empty (i.e., the node has no children), mark the current node as a leaf node.

[0150] In the above call to the getcheckedKeys method:

[0151] getcheckedKeys(val){ / / Query the child node checked

[0152] / / data is the child node checked data obtained from the interface according to val

[0153] / / When expanded, remove the current level checked id, controlled by the child level checked state this.checkedKeys=this.checkedKeys.filter(item=>item!=val.id) this.checkedKeys=this.checkedKeys.concat(data)

[0154] / / Add the child node checked to checkedKeys

[0155] }

[0156] where val is the current node, used to filter out the id of the current node, because the checked state of the parent node should be controlled by the state of the child node.

[0157] data is the checked state data of the lower level node.

[0158] By updating checkedKeys, the consistency of the checked state of the tree with the lower level node is ensured. The checked state of the parent node will be controlled by the checked state of the child node.

[0159] It can be understood that when the node is expanded:

[0160] onExpand handles the expansion of the node, appends the lower level node and updates the checked state.

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

[0162] getCheckedKeys updates checkedKeys to ensure that the checked state of the parent node is controlled by the child node.

[0163] By processing the checked state, node expansion, half selection and other functions in the tree structure through the above methods, it is ensured that the state of the tree can be correctly reflected when the user expands the node or updates the checked state.

[0164] Step S104: In response to the checked node request, the target node is checked, the virtual half-selected attribute is updated according to the real half-selected state obtained after the checked operation, the corresponding updated virtual half-selected attribute is determined, and the updated virtual half-selected attribute is used to update the half-selected mark next time the page is loaded, wherein the target node is an initial layer target node or an arbitrary child target node.

[0165] Optionally, in the embodiment, the purpose of this step is to pass the checked state (including half selection, full selection, etc.) to the background when checking or unchecking a node, store the real half-selected state as a virtual half-selected attribute for subsequent updating of the half-selected state, and clean up the virtual half-selected state that may exist in the current node and its parent and child nodes.

[0166] The specific steps include:

[0167] onCheck(keys, {checked: bool,checkedNodes,node,event}) {

[0168] / / Update the key value of the checked state

[0169] this.checkedKeys = keys

[0170] / / Select parent node

[0171] this.checkedParentId = []

[0172] / / Parent node not selected

[0173] this.noCheckedParentId = []

[0174] / / Selecting the parent node in partial selection

[0175] this.halfCheckedParentId = []

[0176] / / Get the list of parent node IDs and update

[0177] this.getParentID(node.$parent, bool)

[0178] / / Use the API to send this.checkedParentId, this.noCheckedParentId, and this.halfCheckedParentId to the backend for storage, and obtain the half-selected node and check data to ensure that the check status of the front end and the back end is consistent.

[0179] / / Delete the virtual semi-selected nodes between the current node, its parent node, and the root node.

[0180] this.deleteHalfCheckedData(node)

[0181] }

[0182] Explanation of the above steps:

[0183] 1. Update the checked status: this.checkedKeys will be updated to the IDs of all currently selected nodes.

[0184] 2. Get Parent Node ID: Call the `this.getParentID(node.$parent, checked)` method to recursively retrieve the IDs of all parent nodes from the current node to the root node, and update different arrays based on whether the node is checked.

[0185] checkedParentId: The ID of the parent node for all selected nodes.

[0186] noCheckedParentId: Unchecked parent node ID.

[0187] halfCheckedParentId: Half-checked parent node ID.

[0188] 3. Delete virtual half-checked node: Call the this.deleteHalfCheckedData(node) method to delete the virtual half-checked node between the current node and its parent to the root level.

[0189] In the above method, the getParentID method is called, which is as follows:

[0190] / / Get the ID array of the parent to the root node of the selected node

[0191] getParentID(node, bool) {

[0192] if (node.dataRef) {

[0193] let isHalfCheck = node.halfChecked ||this.halfCheckedData.map(item =>item.id).includes(node.dataRef.id)

[0194] / / Update the array of parent nodes according to the check status

[0195] if (bool) { / / If the current node is checked

[0196] if (isHalfCheck) {

[0197] this.halfCheckedParentId.push(node.dataRef.id)

[0198] } else {

[0199] this.checkedParentId.push(node.dataRef.id)

[0200] }

[0201] } else { / / If the current node is unchecked

[0202] if (isHalfCheck) {

[0203] this.halfCheckedParentId.push(node.dataRef.id)

[0204] } else {

[0205] this.noCheckedParentId.push(node.dataRef.id)

[0206] }

[0207] }

[0208] / / Recursively process parent nodes

[0209] this.getParentID(node.$parent, bool)

[0210] }

[0211] }

[0212] 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 state.

[0213] In the above method, the this.deleteHalfCheckedData(node) method is called, which is specifically:

[0214] / / Delete the virtual half-checked node from the root level to the end level

[0215] deleteHalfCheckedData(node) {

[0216] / / Find the current node and its descendant nodes

[0217] let cfn = (data) =>{

[0218] data.forEach(obj =>{

[0219] this.halfCheckedData = this.halfCheckedData.filter(item =>item.id!= obj.id)

[0220] if (obj.children) {

[0221] cfn(obj.children) / / recursive processing of child nodes

[0222] }

[0223] })

[0224] }

[0225] cfn([node.dataRef])

[0226] / / recursively delete virtual half-selected state from parent node to root node

[0227] let pfn = (node) =>{

[0228] if (node.dataRef) {

[0229] let virtualHalfIds = this.halfCheckedData.map(item =>item.id)

[0230] / / judge whether the child of this node has no virtual half-selected node

[0231] let childNoVirtualHalf = node.dataRef.children.every(item =>!virtualHalfIds.includes(item.id))

[0232] if (childNoVirtualHalf) {

[0233] this.halfCheckedData = this.halfCheckedData.filter(item =>item.id!= node.dataRef.id)

[0234] if (node.$parent) {

[0235] pfn(node.$parent) / / recursive processing of parent node

[0236] }

[0237] }

[0238] }

[0239] }

[0240] pfn(node.$parent) / / recursive from the parent node of the current node

[0241] }

[0242] determine whether the child nodes of the current node have no virtual half-checked state, and if not, delete the virtual half-checked state of the current parent node.

[0243] This example shows how the present embodiment realizes precise control of the half-checked state in the virtual lazy loading state by introducing the halfCheckedData data structure and combining dynamic node state management.

[0244] From the above description, it can be seen that the front-end tree component loading method provided by the embodiment of the application can initialize the tree component by adding a virtual half-checked attribute in the attribute of the initial tree component. When the page is loaded, the virtual half-checked node sequence number is queried according to the virtual half-checked attribute, and the non-leaf nodes of the initial layer array are marked as half-checked according to the virtual half-checked node sequence number. The non-leaf nodes of any initial layer are expanded to obtain the subordinate array nodes of the expanded node, the subordinate array nodes are marked as half-checked according to the virtual half-checked node sequence number, and the initial layer half-checked mark is updated accordingly. When the node is checked, the virtual half-checked attribute is updated according to the real half-checked state after the check, the updated virtual half-checked attribute is determined, and the updated virtual half-checked attribute is used to update the half-checked mark next time the page is loaded. Therefore, the efficiency and accuracy of node state display during lazy loading of the tree component can be improved.

[0245] In an embodiment of the front-end tree component loading method of the application, referring to Figure 2 , the following content can also be specifically included:

[0246] Step S201: Perform event definition operation according to the preset check node event and the preset expand node event, and determine the corresponding tree component event;

[0247] Step S202: Perform attribute definition operation according to the preset state attribute, the preset storage attribute, and the preset Boolean value attribute, and determine the corresponding tree component attribute, wherein the storage attribute is used to store the node array sequence number, including the expanded node attribute and the checked node attribute.

[0248] Step S203: Determine the corresponding initial tree component according to the tree component event and the tree component attribute.

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

[0250] Specifically, a new public component about tree is created, and its attributes and events are defined:

[0251] <a-tree v-model="checkedKeys" :tree-data="treeData" :expanded-keys="expandedKeys" checkable @check="onCheck" @expand="onExpand" / >

[0252] checkedKeys checked node ID

[0253] expandedKeys Expanded Keys

[0254] treeData Tree Data

[0255] Tree component events include:

[0256] @check="onCheck": Listen to the node check event, trigger the onCheck method when checked or unchecked.

[0257] @expand="onExpand": Listen to the node expansion event, trigger the onExpand method when the node is expanded or collapsed.

[0258] Tree component properties include: state properties, storage properties, and preset boolean properties.

[0259] State properties: v-model is a two-way binding of Vue, which makes the checkedKeys variable bind to the checked state in the a-tree component.

[0260] Storage properties: treeData is an array used to pass the tree structure data. Each element represents a node and can contain 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.

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

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

[0263] Boolean properties: 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 users to check it. If it is false, the tree node will not have a checkbox.

[0264] Through step S203, the initial tree component is obtained, including tree component properties and events.

[0265] In an embodiment of the front-end tree component loading method of the present application, see Figure 3 It can also specifically include the following content:

[0266] Step S301: Perform a virtual half-checked attribute adding operation in a storage attribute of an initial tree component, wherein the virtual half-checked attribute is used to store a half-checked node array serial number;

[0267] Step S302: Perform a tree component defining operation according to a tree component attribute after the virtual half-checked attribute adding operation and a preset tree component event, and determine a corresponding tree component.

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

[0269] Through step S302, the virtual half-checked data structure is innovatively introduced, which lays a foundation for correctly displaying the half-checked state of the nodes in combination with the dynamic node state management.

[0270] In an embodiment of the front-end tree component loading method of the present application, referring to Figure 4 The method can further include the following contents:

[0271] Step S401: Perform a check operation on a target node in response to an initial check node request;

[0272] Step S402: Determine a corresponding virtual half-checked attribute according to a real half-checked state obtained after the check operation.

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

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

[0275] After updating the checked state of each node, the halfCheckedData data is updated, and the array is used to save the virtual half-checked state, so as to ensure that the state of all virtual half-checked nodes is consistent with the actual tree state.

[0276] When a node is checked, not only the checked state of the node needs to be updated, but also the state of the parent node needs to be adjusted according to the checked state of the child node.

[0277] The specific checking steps are as follows:

[0278] Update the checked state: this.checkedKeys is updated to the id of all currently checked nodes.

[0279] Get the parent node ID: call the this.getParentID(node.$parent, checked) method to recursively get the id of all parent nodes from the current node to the root node, and update different arrays according to whether it is checked:

[0280] checkedParentId: the parent node ID of full selection.

[0281] noCheckedParentId: the parent node ID of unselected.

[0282] halfCheckedParentId: the parent node ID of half selection.

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

[0284] In an embodiment of the front-end tree component loading method of the present application, referring to Figure 5 , the following content can also be specifically included:

[0285] Step S501: Perform a lower-level node query operation on the initial layer target node to determine the corresponding lower-level node data;

[0286] Step S502: Perform a child addition operation 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.

[0287] Optionally, in the embodiment, the specific implementation steps of this step are as follows:

[0288] Call the onExpand method to expand the node:

[0289] onExpand(expandedKeys, {expanded: bool,node}) {

[0290] this.expandedKeys = expandedKeys / / Save the ID of the expanded node

[0291] if (bool) {

[0292] / / Append child nodes, where data is the child node data retrieved from the API query.

[0293] this.appedNode(node.dataRef, data)

[0294] / / Query the selected sub-nodes and update their selection status

[0295] this.getcheckedKeys(node.dataRef)

[0296] }

[0297] }

[0298] Among them, expandedKeys: updates the ID of the currently expanded node.

[0299] node: The expanded node.

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

[0301] In the above call to the `appedNode` method:

[0302] appedNode(val, data) { / / Append child nodes

[0303] / / val expands the node, and data is a child node

[0304] val.children = data / / Assign the new data to the child nodes of the parent node

[0305] Here, val is the expanded node (which may not have originally had any children).

[0306] data is the child node data obtained from the interface.

[0307] Append the data of the child nodes to val.children.

[0308] Through step S502, this embodiment successfully adds the lower-level node to the child level of the initial layer node data, laying the foundation for updating the initial layer node state according to the state of the child node.

[0309] In one embodiment of the front-end tree component loading method of this application, see [link to relevant documentation]. Figure 6 It can also specifically include the following:

[0310] Step S601: judging whether the lower-level array node is a leaf node;

[0311] Step S602: if not, performing a half-selected marking operation on the lower-level array node according to the virtual half-selected node serial number, to determine the corresponding child half-selected marking.

[0312] Optionally, in the embodiment, firstly, it is judged whether the lower-level node of the initial layer node is a leaf node, if the lower-level node is a non-leaf node, performing a half-selected marking on the non-leaf node according to the virtual half-selected attribute. Then, updating the half-selected marking of the initial layer node according to the half-selected marking of the lower-level node.

[0313] It can be understood that the judgment of the lower-level node in this step is continuously performed until all the nodes are leaf nodes, and then the judgment is stopped.

[0314] if (data.length) {

[0315] val.children = data / / If the lower-level node exists

[0316] if (data.every(item =>!this.halfCheckedData.includes(item.id))){

[0317] / / If the lower-level node does not have any half-selected state

[0318] this.halfCheckedData = this.halfCheckedData.filter(item =>item!= val.id)

[0319] val.class = '' / / Clear the "half-selected" style of the parent node

[0320] }

[0321] item.isLeaf = false / / The current node is a non-leaf node

[0322] } else {

[0323] / / If the lower-level node is empty

[0324] this.halfCheckedData = this.halfCheckedData.filter(item =>item!= val.id)

[0325] val.class = '' / / Clear the "half-selected" style of the parent node

[0326] item.isLeaf = true / / The current node is a leaf node

[0327] Check if any of the child nodes are in a half-selected state. If not, remove the half-selected state (nodeHalf style) of the parent node.

[0328] If the child node is empty (i.e., the node has no child nodes), then the current node is marked as a leaf node.

[0329] Through step S602, this embodiment successfully implemented the partial selection marking of child nodes and updated the parent node by the marking of the child nodes, thus realizing dynamic control of the nodes.

[0330] In one embodiment of the front-end tree component loading method of this application, see [link to relevant documentation]. Figure 7 It can also specifically include the following:

[0331] Step S701: Select the target nodes to determine the corresponding target node status, which includes half-selection and full selection;

[0332] Step S702: Perform a recursive traversal operation on the target node to determine the corresponding hierarchical parent node, and perform a state update operation on the hierarchical parent node according to the state of the target node to determine the corresponding hierarchical parent node state.

[0333] Step S703: Update the virtual half-selection attribute based on the actual half-selection state in the target node state and the actual half-selection state in the successive parent node states, and determine the corresponding updated virtual half-selection attribute.

[0334] Optionally, in this embodiment, this step performs a checkmark method.

[0335] The specific steps include:

[0336] onCheck(keys, {checked: bool,checkedNodes,node,event}) {

[0337] / / Update the key value for the checked state

[0338] this.checkedKeys = keys

[0339] / / Select parent node

[0340] this.checkedParentId = []

[0341] / / Parent node not selected

[0342] this.noCheckedParentId = []

[0343] / / Selecting the parent node in half

[0344] this.halfCheckedParentId = []

[0345] / / Get the list of parent node IDs and update

[0346] this.getParentID(node.$parent, bool)

[0347] / / Use the API to send this.checkedParentId, this.noCheckedParentId, and this.halfCheckedParentId to the backend for storage, and obtain the half-selected node and check data to ensure that the check status of the front end and the back end is consistent.

[0348] / / Delete the virtual semi-selected nodes between the current node, its parent node, and the root node.

[0349] this.deleteHalfCheckedData(node)

[0350] }

[0351] Explanation of the above steps:

[0352] 1. Update the checked status: this.checkedKeys will be updated to the IDs of all currently selected nodes.

[0353] 2. Get the parent node ID: Call the `this.getParentID(node.$parent, checked)` method to recursively retrieve the IDs of all parent nodes from the current node to the root node, and update different arrays based on whether the node is checked.

[0354] checkedParentId: The ID of the parent node for all selected nodes.

[0355] noCheckedParentId: The ID of the parent node that was not selected.

[0356] halfCheckedParentId: The ID of the parent node of the half-checked node.

[0357] 3. Delete virtual half-selected nodes: call the this.deleteHalfCheckedData(node) method to delete the virtual half-selected nodes between the current node and its parent to the root level.

[0358] In the above method, the getParentID method is called, specifically:

[0359] / / Get the ID array of the parent to the root node of the selected node

[0360] getParentID(node, bool) {

[0361] if (node.dataRef) {

[0362] let isHalfCheck = node.halfChecked ||this.halfCheckedData.map(item =>item.id).includes(node.dataRef.id)

[0363] / / Update the array of parent nodes according to the check status

[0364] if (bool) { / / If the current node is checked

[0365] if (isHalfCheck) {

[0366] this.halfCheckedParentId.push(node.dataRef.id)

[0367] } else {

[0368] this.checkedParentId.push(node.dataRef.id)

[0369] }

[0370] } else { / / If the current node is unchecked

[0371] if (isHalfCheck) {

[0372] this.halfCheckedParentId.push(node.dataRef.id)

[0373] } else {

[0374] this.noCheckedParentId.push(node.dataRef.id)

[0375] }

[0376] }

[0377] / / Recursively process parent nodes

[0378] this.getParentID(node.$parent, bool)

[0379] }

[0380] }

[0381] 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.

[0382] In the above method, the this.deleteHalfCheckedData(node) method is called, which is specifically:

[0383] / / Delete the virtual half-checked node from the root level to the end level

[0384] deleteHalfCheckedData(node) {

[0385] / / Find the current node and its descendants

[0386] let cfn = (data) =>{

[0387] data.forEach(obj =>{

[0388] this.halfCheckedData = this.halfCheckedData.filter(item =>item.id!= obj.id)

[0389] if (obj.children) {

[0390] cfn(obj.children) / / Recursively process child nodes

[0391] }

[0392] })

[0393] }

[0394] cfn([node.dataRef])

[0395] / / Recursively delete the virtual semi-selected state from the parent node to the root node

[0396] let pfn = (node) =>{

[0397] if (node.dataRef) {

[0398] let virtualHalfIds = this.halfCheckedData.map(item =>item.id)

[0399] / / Determine if the child nodes of this node do not have virtual semi-selection nodes.

[0400] let childNoVirtualHalf = node.dataRef.children.every(item =>!virtualHalfIds.includes(item.id))

[0401] if (childNoVirtualHalf) {

[0402] this.halfCheckedData = this.halfCheckedData.filter(item =>item.id != node.dataRef.id)

[0403] if (node.$parent) {

[0404] pfn(node.$parent) / / Recursively process the parent node

[0405] }

[0406] }

[0407] }

[0408] }

[0409] pfn(node.$parent) / / Recursively start from the parent node of the current node.

[0410] }

[0411] Determine if the child nodes of the current node do not have a virtual half-selection state. If not, delete the virtual half-selection state of the current parent node.

[0412] Through the S703 step, the embodiment successfully obtains the virtual check data consistent with the real check state according to the real check state, and updates the previous virtual check data, thereby laying a foundation for subsequent check of the node through the updated virtual half-check data.

[0413] In order to improve the efficiency and accuracy of node state display during lazy loading of the tree component, an embodiment of a front-end tree component loading device for implementing all or part of the front-end tree component loading method is provided, which comprises the following contents: Figure 8 The front-end tree component loading device specifically comprises the following contents:

[0414] A tree component initialization module 10 is configured to add a virtual half-check attribute in an attribute of an initial tree component, perform a tree component definition operation according to the virtual half-check attribute and a preset tree component event, and determine a corresponding tree component, wherein the attribute is used for configuring and transmitting data, and the event is used for processing user operations when the user interacts;

[0415] A page loading module 20 is configured to respond to a page loading request, perform a virtual half-check node query operation on the tree component according to the virtual half-check attribute, determine a corresponding virtual half-check node sequence number, judge whether an initial array node of the initial layer of the tree component is a leaf node, and if not, perform a half-check marking operation on the initial array node according to the virtual half-check node sequence number, and determine a corresponding initial layer half-check mark;

[0416] A node expansion module 30 is configured to respond to an expansion node request, perform a node expansion operation on an initial layer target node, determine a subordinate array node corresponding to the initial layer target node, perform a half-check marking operation on the subordinate array node according to the virtual half-check node sequence number, determine a corresponding child half-check mark, perform a half-check mark removal operation on the initial layer target node according to the child half-check mark, and determine an updated initial layer half-check mark, wherein the initial layer target node is any initial array node with an initial layer half-check mark;

[0417] A node check module 40 is configured to respond to a check node request, perform a check operation on a target node, perform an update operation on the virtual half-check attribute according to a real half-check state obtained after the check operation, determine a corresponding updated virtual half-check attribute, and use the updated virtual half-check attribute to update the half-check mark next time the page is loaded, wherein the target node is an initial layer target node or any child target node.

[0418] From the above description, the front-end tree component loading device provided by the embodiment of the application can initialize the tree component by adding a virtual half-selected attribute in the attribute of the initial tree component. When the page is loaded, the virtual half-selected attribute is queried to obtain all virtual half-selected node sequence numbers, and the non-leaf nodes of the initial layer array are marked as half-selected according to the virtual half-selected node sequence numbers. The non-leaf nodes of any initial layer are expanded to obtain the subordinate array nodes of the expanded nodes, the subordinate array nodes are marked as half-selected according to the virtual half-selected node sequence numbers, 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 real half-selected state after the checking, the updated virtual half-selected attribute is determined, and the updated virtual half-selected attribute is used to update the half-selected mark next time the page is loaded, thereby improving the efficiency and accuracy of the node state display when the tree component is lazy loaded.

[0419] From the hardware level, in order to improve the efficiency and accuracy of the node state display when the tree component is lazy loaded, the application provides an embodiment of an electronic device for implementing all or part of the contents of the front-end tree component loading method. The electronic device specifically includes the following contents:

[0420] A processor, a memory, a communications interface, and a bus; wherein the processor, the memory, and the communications interface communicate with each other through the bus; the communications interface is used to realize the information transmission between the front-end tree component loading method and the core business system, the user terminal, and the related database and other related devices; the logic controller can be a desktop computer, a tablet computer, and a mobile terminal, and the embodiment is not limited thereto. In the embodiment, the logic controller can be implemented by referring to the embodiments of the front-end tree component loading method and the embodiments of the front-end tree component loading method. The contents are incorporated herein, and the repeated parts are not described again.

[0421] It can be understood that the user terminal can 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. The smart wearable device can include smart glasses, a smart watch, a smart bracelet, etc.

[0422] In actual application, part of the front-end tree component loading method can be executed on the electronic device as described above, or all operations can be completed in the client device. Specifically, the selection can be made according to the processing capacity of the client device and the limitation of the user usage scenario. The application does not limit this. If all operations are completed in the client device, the client device can also include a processor.

[0423] The client device described above can have a communication module (i.e., a communication unit) that can be communicatively connected to a remote server to achieve data transmission with the server. The server can include a server of a task scheduling center side, and in other implementation scenarios, can also include a server of an intermediate platform, such as a server of a third-party server platform that is communicatively linked to the server of the task scheduling center. The server can include a single computer device, or can include a server cluster composed of multiple servers, or a server structure of a distributed device.

[0424] Figure 9 A schematic block diagram of a system configuration of an electronic device 9600 according to an embodiment of the present application is shown in FIG. 9. As shown in the figure, the electronic device 9600 can include a central processor 9100 and a memory 9140; the memory 9140 is coupled to the central processor 9100. It is worth noting that the structure shown in the figure is exemplary; other types of structures can also be used to supplement or replace the structure to achieve telecommunication functions or other functions. Figure 9 Figure 9 The structure shown in the figure is exemplary; other types of structures can also be used to supplement or replace the structure to achieve telecommunication functions or other functions.

[0425] In an embodiment, the front-end tree component loading method function can be integrated into the central processor 9100. The central processor 9100 can be configured to perform the following control:

[0426] Step S101: adding a virtual half-selection attribute in an attribute of an initial tree component, performing a tree component definition operation according to the virtual half-selection attribute and a preset tree component event, and determining a corresponding tree component, wherein the attribute is used to configure and transmit data, and the event is used to process user operations when the user interacts;

[0427] Step S102: in response to a page loading request, performing a virtual half-selection node query operation on the tree component according to the virtual half-selection attribute, determining a corresponding virtual half-selection node sequence number, and judging whether an initial array node of the tree component is a leaf node; if not, performing a half-selection marking operation on the initial array node according to the virtual half-selection node sequence number, and determining a corresponding initial layer half-selection mark;

[0428] Step S103: in response to an expansion node request, performing a node expansion operation on an initial layer target node, determining a subordinate array node corresponding to the initial layer target node, performing a half-selection marking operation on the subordinate array node according to the virtual half-selection node sequence number, determining a corresponding child half-selection mark, performing a half-selection mark removal operation on the initial layer target node according to the child half-selection mark, and determining an updated initial layer half-selection mark, wherein the initial layer target node is any one of the initial array nodes with the initial layer half-selection mark;

[0429] ​Step S104: in response to the check node request, performing a check operation on the target node, performing an update operation on the virtual half-selected attribute according to a real half-selected state obtained after the check operation, determining an updated virtual half-selected attribute, and using the updated virtual half-selected attribute to update the half-selected mark next time the page is loaded, wherein the target node is an initial layer target node or an arbitrary child level target node.

[0430] From the above description, it can be seen that the electronic device provided by the embodiment of the application initializes the tree component by adding a virtual half-selected attribute in the attribute of the initial tree component. When the page is loaded, the virtual half-selected node serial number is queried according to the virtual half-selected attribute, and the non-leaf node of the initial layer array is marked as half-selected according to the virtual half-selected node serial number. The non-leaf node of an arbitrary initial layer is expanded to obtain the child array node of the expanded node, the child array node is 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 real half-selected state after the check, the updated virtual half-selected attribute is determined, and the updated virtual half-selected attribute is used to update the half-selected mark next time the page is loaded. Therefore, the efficiency and accuracy of the node state display when the tree component is lazy loaded can be improved.

[0431] In another embodiment, the front-end tree component loading method can be configured separately from the central processor 9100, for example, the front-end tree component loading method can be configured as a chip connected with the central processor 9100, and the function of the front-end tree component loading method is realized through the control of the central processor.

[0432] As shown in Figure 9 , the electronic device 9600 can also include a communication module 9110, an input unit 9120, an audio processor 9130, a display 9160, and a power supply 9170. It should be noted that the electronic device 9600 does not necessarily include all the components shown in Figure 9 ; in addition, the electronic device 9600 can also include components not shown in Figure 9 , which can be referred to prior art.

[0433] As shown in Figure 9 , the central processor 9100, also known as a controller or operation control, can include a microprocessor or other processor device and / or logic device, which receives input and controls the operation of each component of the electronic device 9600.

[0434] The memory 9140, for example, can be one or more of a buffer, a flash memory, a hard drive, a removable media, a volatile memory, a non-volatile memory, or other suitable device. The above-mentioned information related to failure can be stored, and in addition, a program for executing the information related to failure can be stored. The central processing unit 9100 can execute the program stored in the memory 9140 to achieve information storage or processing, and the like.

[0435] 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 supply power to the electronic device 9600. The display 9160 is used to display display objects such as images and characters. The display can be, for example, an LCD display, but is not limited thereto.

[0436] The memory 9140 can be a solid state memory such as a read only memory (ROM), a random access memory (RAM), a SIM card, and the like. It can also be a memory that retains information even when power is off, can be selectively erased, and is provided with more data, and examples of such a memory are sometimes referred to as an EPROM, and the like. The memory 9140 can also be some other type of device. The memory 9140 includes a buffer memory 9141 (sometimes referred to as a buffer). The memory 9140 can include an application / function storage section 9142 for storing application programs and function programs or for storing a flow for executing operations of the electronic device 9600 by the central processing unit 9100.

[0437] The memory 9140 can also include a data storage section 9143 for storing data such as contacts, digital data, pictures, sounds, and / or any other data used by the electronic device. A driver storage section 9144 of the memory 9140 can include various drivers of the electronic device for a communication function and / or for executing other functions of the electronic device such as a messaging application, a phonebook application, and the like.

[0438] The communication module 9110 is a transmitter / receiver that transmits and receives signals via an antenna 9111. The communication module 9110 is coupled to the central processing unit 9100 to provide input signals and receive output signals, which can be the same as in the case of a conventional mobile communication terminal.

[0439] Based on different communication technologies, multiple communication modules 9110, such as a cellular network module, a Bluetooth module, and / or a wireless local area network module, etc., can be provided in the same electronic device. The communication module 9110 is also coupled to a speaker 9131 and a microphone 9132 via an audio processor 9130 to provide audio output via the speaker 9131 and to receive audio input from the microphone 9132, thereby enabling typical telecommunication functions. The audio processor 9130 can include any suitable buffers, decoders, amplifiers, etc. In addition, the audio processor 9130 is also coupled to the central processor 9100, thereby enabling the recording of audio on the local device via the microphone 9132 and enabling the playing of stored audio on the local device via the speaker 9131.

[0440] The embodiments of the present application further provide a computer readable storage medium capable of implementing all steps of the front-end tree component loading method in the above-mentioned embodiments in which the execution subject is a server or a client, and the computer readable storage medium has a computer program stored thereon, and the computer program, when executed by a processor, implements all steps of the front-end tree component loading method in the above-mentioned embodiments in which the execution subject is a server or a client, for example, the steps of:

[0441] Step S101: adding a virtual half-selection attribute in an attribute of an initial tree component, performing a tree component definition operation according to the virtual half-selection attribute and a preset tree component event, and determining a corresponding tree component, wherein the attribute is used for configuring and transmitting data, and the event is used for processing user operations when the user interacts;

[0442] Step S102: in response to a page loading request, performing a virtual half-selection node query operation on the tree component according to the virtual half-selection attribute, determining a corresponding virtual half-selection node sequence number, judging whether an initial array node of the tree component is a leaf node, and if not, performing a half-selection marking operation on the initial array node according to the virtual half-selection node sequence number, and determining a corresponding initial layer half-selection marking;

[0443] Step S103: in response to an expansion node request, performing a node expansion operation on an initial layer target node, determining a subordinate array node corresponding to the initial layer target node, performing a half-selection marking operation on the subordinate array node according to the virtual half-selection node sequence number, determining a corresponding child half-selection marking, performing a half-selection marking removal operation on the initial layer target node according to the child half-selection marking, and determining an updated initial layer half-selection marking, wherein the initial layer target node is any one of the initial array nodes with the initial layer half-selection marking;

[0444] Step S104: in response to the check node request, performing a check operation on the target node, updating the virtual half-selected attribute according to the real half-selected state obtained after the check operation, determining the updated virtual half-selected attribute, and using the updated virtual half-selected attribute to update the half-selected mark next time the page is loaded, wherein the target node is an initial layer target node or an arbitrary child level target node.

[0445] From the above description, it can be seen that the computer readable storage medium provided by the embodiments of the present application initializes the tree component by adding a virtual half-selected attribute in the attribute of the initial tree component. When the page is loaded, the virtual half-selected node sequence number is queried according to the virtual half-selected attribute, and the non-leaf node of the initial layer array is marked as half-selected according to the virtual half-selected node sequence number. The non-leaf node of any initial layer is expanded to obtain the child array node of the expanded node, the child array node is marked as half-selected according to the virtual half-selected node sequence 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 real half-selected state after the check, the updated virtual half-selected attribute is determined, and the updated virtual half-selected attribute is used to update the half-selected mark next time the page is loaded. Therefore, the efficiency and accuracy of node state display during lazy loading of the tree component can be improved.

[0446] The embodiments of the present application also provide a computer program product capable of implementing all steps of the front-end tree component loading method in the above-mentioned embodiments, wherein the computer program / instruction is executed by the processor to implement the steps of the front-end tree component loading method, for example, the computer program / instruction implements the following steps:

[0447] Step S101: adding a virtual half-selected attribute in the attribute of an initial tree component, performing tree component definition operation according to the virtual half-selected attribute and a preset tree component event, and determining the corresponding tree component, wherein the attribute is used for configuration and data transmission, and the event is used for processing user operations when the user interacts;

[0448] Step S102: in response to a page loading request, performing a virtual half-selected node query operation on the tree component according to the virtual half-selected attribute, determining the corresponding virtual half-selected node sequence number, judging whether the initial layer array node of the tree component is a leaf node, and if not, performing a half-selected mark operation on the initial layer array node according to the virtual half-selected node sequence number, and determining the corresponding initial layer half-selected mark;

[0449] Step S103: in response to the expand node request, performing a node expansion operation on the initial layer target node, determining a lower array node corresponding to the initial layer target node, performing a half-selected marking operation on the lower array node according to the virtual half-selected node sequence number, determining a corresponding child half-selected marking, performing a half-selected marking removal operation on the initial layer target node according to the child half-selected marking, and determining an updated initial layer half-selected marking, wherein the initial layer target node is any one initial array node with an initial layer half-selected marking.

[0450] Step S104: in response to the check node request, performing a check operation on the target node, performing an update operation on the virtual half-selected attribute according to a real half-selected state obtained after the check operation, and determining an updated virtual half-selected attribute, wherein the updated virtual half-selected attribute is used to update the half-selected marking next time the page is loaded.

[0451] 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 in the attribute of the initial tree component. When the page is loaded, all virtual half-selected node sequence numbers are queried according to the virtual half-selected attribute, and the non-leaf nodes of the initial array are marked with half-selected marks according to the virtual half-selected node sequence numbers. Any non-leaf node of the initial layer is expanded to obtain the lower array node of the expanded node, the lower array node is marked with a half-selected mark according to the virtual half-selected node sequence number, and the initial layer half-selected marking is updated accordingly. When a node is checked, the virtual half-selected attribute is updated according to the real half-selected state after the check operation, and the updated virtual half-selected attribute is determined. The updated virtual half-selected attribute is used to update the half-selected marking next time the page is loaded. Therefore, the efficiency and accuracy of the node state display when the tree component is lazily loaded can be improved.

[0452] Those skilled in the art should understand that the embodiments of the present application can be provided as a method, device, or computer program product. Therefore, the present application can take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present application can 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.

[0453] The computer program instructions can also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart block or blocks. Figure 1 one or more flow or blocks Figure 1 one or more flow or blocks

[0454] These computer program instructions can also be stored in a computer readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer readable memory produce an article of manufacture including instructions which implement the function specified in the flowchart block or blocks. Figure 1 one or more flow or blocks Figure 1 one or more flow or blocks

[0455] The computer program instructions can also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart block or blocks. Figure 1 one or more flow or blocks Figure 1 Figure 1 one or more flow or blocks

[0456] The principles and implementations of the present application are described in the specific embodiments, the above description of the embodiments is only to help understand the method of the present application and its core idea; meanwhile, for those skilled in the art, according to the idea of the present application, the specific embodiments and application scope will be changed, and the above description of the present application should not be understood as the limitation of the present application.

Claims

1. A front-end tree component loading method, characterized by, The method comprises: adding a virtual half-selected attribute in a property of an 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 property is used for configuring and transmitting data, and the event is used for processing user operations when the user interacts; in response to an initial check node request, performing a check operation on a target node, updating a virtual half-selected attribute according to a real half-selected state obtained after the check operation, so that the state of a virtual half-selected node in the virtual half-selected attribute is consistent with the actual tree state; in response to a page loading request, performing a virtual half-selected node query operation on the tree component according to the virtual half-selected attribute updated, determining a corresponding virtual half-selected node sequence number, and judging whether an initial array node of the tree component is a leaf node; if not, performing a half-selected marking operation on the initial array node according to the virtual half-selected node sequence number, and determining a corresponding initial layer half-selected mark; in response to an expand node request, performing a lower level node query operation on an initial layer target node, determining corresponding lower level node data, performing a child level adding operation on the initial layer target node according to the lower level node data, determining a lower level array node corresponding to the initial layer target node, judging whether the lower level array node is a leaf node, if not, performing a half-selected marking operation on the lower level array node according to the virtual half-selected node sequence number, determining a corresponding child level half-selected mark, performing a half-selected mark removing operation on the initial layer target node according to the child level half-selected mark, and determining an updated initial layer half-selected mark, wherein the initial layer target node is any initial array node with an initial layer half-selected mark; in response to a check node request, performing a check operation on a target node, updating the virtual half-selected attribute according to a real half-selected state obtained after the check operation, determining a corresponding updated virtual half-selected attribute, and using the updated virtual half-selected attribute to update the half-selected mark when the page is loaded next time, wherein the target node is an initial layer target node or any child level target node.

2. The front-end tree component loading method of claim 1, wherein, Before the adding a virtual half-selected attribute in a property of an 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 comprises: performing an event definition operation according to a preset check node event and a preset expand node event, and determining corresponding tree component events; performing an attribute definition operation according to a preset state attribute, a preset storage attribute and a preset Boolean value attribute, and determining corresponding tree component attributes, wherein the storage attribute is used for storing node array sequence numbers, including an expanded node attribute and a checked node attribute; determining a corresponding initial tree component according to the tree component events and the tree component attributes.

3. The front-end tree component loading method of claim 1, wherein, The adding a virtual half-selected attribute in a property of an 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, comprises: The virtual half-selection attribute adding operation is performed in a storage attribute of an initial tree component, wherein the virtual half-selection attribute is used for storing a half-selection node array serial number; The tree component definition operation is performed according to the tree component attribute after the virtual half-selection attribute adding operation and a preset tree component event, and the corresponding tree component is determined.

4. The front-end tree component loading method of claim 1, wherein, The target node is checked, the virtual half-selection attribute is updated according to a real half-selection state obtained after the checking operation, and the corresponding updated virtual half-selection attribute is determined, including: The target node is checked, and the corresponding target node state is determined, the target node state including half-selection and full-selection; The target node is recursively traversed, the corresponding level-by-level parent node is determined, and the level-by-level parent node state is updated according to the target node state, and the corresponding level-by-level parent node state is determined; The virtual half-selection attribute is updated according to the real half-selection state in the target node state and the real half-selection state in the level-by-level parent node state, and the corresponding updated virtual half-selection attribute is determined.

5. A front-end tree component loading apparatus, characterized by comprising: The device includes: The tree component initialization module is configured to add a virtual half-selection attribute in an attribute of an initial tree component, and perform a tree component definition operation according to the virtual half-selection attribute and a preset tree component event, and determine a corresponding tree component, wherein the attribute is used for configuring and transmitting data, and the event is used for processing user operations when the user interacts; The page loading module is configured to respond to an initial check node request, check a target node, update a virtual half-selection attribute according to a real half-selection state obtained after the checking operation, so that the state of a virtual half-selection node in the virtual half-selection attribute is consistent with the actual tree state; respond to a page loading request, perform a virtual half-selection node query operation on the tree component according to the updated virtual half-selection attribute, determine a corresponding virtual half-selection node serial number, and judge whether an initial layer array node of the tree component is a leaf node, if not, perform a half-selection marking operation on the initial layer array node according to the virtual half-selection node serial number, and determine a corresponding initial layer half-selection mark; The node expansion module is configured to respond to an expansion node request, perform a lower-level node query operation on an initial layer target node, determine corresponding lower-level node data, perform a child level adding operation on the initial layer target node according to the lower-level node data, determine a lower-level array node corresponding to the initial layer target node, judge whether the lower-level array node is a leaf node, if not, perform a half-selection marking operation on the lower-level array node according to the virtual half-selection node serial number, determine a corresponding child level half-selection mark, perform a half-selection mark removing operation on the initial layer target node according to the child level half-selection mark, and determine an updated initial layer half-selection mark, wherein the initial layer target node is any initial layer array node with an initial layer half-selection mark. The node check module is configured to perform a check operation on a target node in response to a check node request, update the virtual half-selected attribute according to a real half-selected state obtained after the check operation, determine a corresponding updated virtual half-selected attribute, and update the half-selected mark during the next page loading, wherein the target node is an initial layer target node or an arbitrary child level target node.

6. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, The processor implements the steps of the front-end tree component loading method of any one of claims 1 to 4 when executing the program.

7. A computer-readable storage medium having stored thereon a computer program, characterized in that, The computer program implements the steps of the front-end tree component loading method of any one of claims 1 to 4 when executed by the processor.

Images