A page display method and device based on tree components

Abstract

The purpose of the present application is to provide a method and device for page display based on a tree component, wherein the present application obtains a controlled component by setting a specified attribute of the tree component as a variable, wherein the controlled component includes a switch control and a check box control; obtains a data source from a front-end page based on a request method, adjusts the data source, and obtains a tree data object; renders the switch control and the check box control according to the tree data object, and obtains a new tree data object, wherein the parent node in the new tree data object includes a switch control and the leaf node includes a check box control; recalculates the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control according to the key value corresponding to the selected node, and displays on the front-end page according to the recalculated key value. Thus, the parent node and the child node are flexibly linked, which is convenient for users to operate.

Description

Technical Field

[0001] The present application relates to the computer field, and in particular to a page display method and device based on a tree component. Background Art

[0002] In the field of web front-end development, tree components can be used to display hierarchical data, such as organizational structure, country region, etc. Common interaction methods include parent-child data association selection, node selection prohibition, and expansion and folding operations.

[0003] Currently, the interactive effect of parent-child node association control is that when the parent node is selected, all child nodes are selected and disabled; after the child node is selected, it is not associated with the selection of the parent node. This makes it difficult for users to make flexible selections and cannot freely set the selected node. After selecting the child node, it is necessary to re-associate with the parent node, which increases the complexity of the operation. Summary of the invention

[0004] One purpose of the present application is to provide a page display method and device based on a tree component, so as to solve the problems in the prior art that after a parent node is selected, all child nodes are selected and disabled, and after a child node is selected, the selection is not associated with the parent node.

[0005] According to one aspect of the present application, a page display method based on a tree component is provided, the method comprising:

[0006] Setting the specified attribute of the tree component as a variable to obtain a controlled component, wherein the controlled component includes a switch control and a check box control;

[0007] Acquire a data source from a front-end page based on a request method, adjust the data source, and obtain a tree-shaped data object;

[0008] Rendering the switch control and the check box control according to the tree data object to obtain a new tree data object, wherein the parent node in the new tree data object includes the switch control and the leaf node includes the check box control;

[0009] The key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control are recalculated according to the key value corresponding to the selected node, and the recalculated key values ​​are displayed on the front-end page.

[0010] Optionally, before recalculating the key values ​​of all nodes associated with the selected switch control and the key values ​​of all nodes associated with the selected check box control according to the key value corresponding to the selected node, the method further includes:

[0011] Adding a first listening function to each switch control to trigger a callback function when the switch control is selected or deselected;

[0012] Add a second listening function for each check box control to trigger a callback function when the check box control is selected;

[0013] When either the first listening function or the second listening function is triggered, the callback function is started to recalculate the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control according to the key value corresponding to the selected node.

[0014] Optionally, the specified attribute of the tree component includes a props attribute, and the specified attribute of the tree component is set as a variable to obtain a controlled component, including:

[0015] Set the selectedKeys in the props property of the tree component to a variable to get a controlled component.

[0016] Optionally, the acquiring of a data source from a front-end page based on a request method and adjusting the data source to obtain a tree-shaped data object include:

[0017] Based on the request method, using the controlled component to obtain a data source in an array format for front-end page display from a server providing the data source, wherein the specified request method includes an Http request method;

[0018] The data source is traversed and the attribute of each object data in the data source is adjusted using the relevant function to obtain a tree data object.

[0019] Optionally, traversing the data source and using a related function to adjust the attribute of each object data in the data source includes:

[0020] Use the parent component title function to render the title attribute of each object data and get the ReactNode node containing the title and switch control;

[0021] Render the checkable attribute of each object data according to the leaf node in the data source;

[0022] Generate a disable attribute for each object data item based on whether the disabled checkbox key array in the data source contains a single node key;

[0023] The level of a single node is identified by traversing the data source and adding a level attribute to each item of object data.

[0024] Optionally, rendering the switch control and the check box control according to the tree data object to obtain a new tree data object includes:

[0025] Rendering the parent node object in the controlled component as a title and a switch control according to the tree data object;

[0026] Rendering leaf nodes in the controlled component as check box controls and titles according to the tree data object;

[0027] Get a new tree data object.

[0028] Optionally, the recalculating the key values ​​of all nodes associated with the selected switch control and the key values ​​of all nodes associated with the selected check box control according to the key value corresponding to the selected node includes:

[0029] Acquire the selected node on the front-end page, and re-screen the associated corresponding target node from the new tree data object according to the selected node;

[0030] Determine whether the target node is a leaf node, if so, the key value of the target node is the key value of the check box control;

[0031] If not, the key value of the target node is the key value of the switch control, and all child nodes under the target node are recursively traversed to calculate the key values ​​of the switch control and the key values ​​of the check box control in all child nodes.

[0032] According to another aspect of the present application, a device for page display based on a tree component is also provided, the device comprising:

[0033] A component setting module, used for setting the specified attribute of the tree component as a variable to obtain a controlled component, wherein the controlled component includes a switch control and a check box control;

[0034] A data adjustment module, used to obtain a data source from a front-end page based on a request method, and adjust the data source to obtain a tree-shaped data object;

[0035] A data rendering module, used for rendering the switch control and the check box control according to the tree data object to obtain a new tree data object, wherein the parent node in the new tree data object includes the switch control and the leaf node includes the check box control;

[0036] The data processing module is used to recalculate the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control according to the key value corresponding to the selected node, and display them on the front-end page according to the recalculated key values.

[0037] Optionally, the device comprises:

[0038] The data processing module is further used to add a first listening function to each switch control to trigger a callback function when the switch control is selected or unselected, and to add a second listening function to each check box control to trigger a callback function when the check box control is selected, before recalculating the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control according to the key value corresponding to the selected node; when either the first listening function or the second listening function is triggered, the callback function is started to recalculate the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control according to the key value corresponding to the selected node.

[0039] According to yet another aspect of the present application, a computer-readable medium is provided, on which computer-readable instructions are stored. The computer-readable instructions can be executed by a processor to implement any of the methods described above.

[0040] According to another aspect of the present application, a device for page display based on a tree component is also provided, the device comprising:

[0041] one or more processors; and

[0042] A memory storing computer readable instructions, which, when executed, cause the processor to perform the operations of any of the methods described above.

[0043] Compared with the prior art, the present application obtains a controlled component by setting the specified attribute of the tree component as a variable, wherein the controlled component includes a switch control and a check box control; obtains a data source from a front-end page based on a request method, adjusts the data source, and obtains a tree data object; renders the switch control and the check box control according to the tree data object, and obtains a new tree data object, wherein the parent node in the new tree data object includes a switch control and the leaf node includes a check box control; recalculates the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control according to the key value corresponding to the selected node, and displays them on the front-end page according to the recalculated key values. Thus, the switch component and the tree component are combined, and the selected key value is calculated in real time in a controlled manner, so that when the switch control of the parent node is selected, all child nodes are associated and selected, and when a child node is selected, the parent node will not be selected, which is convenient for users to operate. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] Other features, objects and advantages of the present application will become more apparent by reading the detailed description of non-limiting embodiments made with reference to the following drawings:

[0045] Figure 1 A schematic diagram of a page display method based on a tree component according to one aspect of the present application is shown;

[0046] Figure 2 A schematic diagram of a page display method based on a tree component in an optional embodiment of the present application is shown;

[0047] Figure 3 A schematic diagram of page display in an actual application scenario in an optional embodiment of the present application is shown;

[0048] Figure 4 A device framework structure diagram for page presentation based on tree components is shown according to another aspect of the present application.

[0049] The same or similar reference numerals in the drawings represent the same or similar components. DETAILED DESCRIPTION

[0050] The present application is described in further detail below in conjunction with the accompanying drawings.

[0051] In a typical configuration of the present application, the terminal, the device of the service network and the trusted party all include one or more processors (CPU), input / output interfaces, network interfaces and memories.

[0052] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0053] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include non-transitory media such as modulated data signals and carrier waves.

[0054] Figure 1 A schematic flow chart of a page display method based on a tree component provided according to one aspect of the present application is shown, the method comprising: S100 to S400, wherein, in S100, the specified attribute of the tree component is set as a variable to obtain a controlled component, wherein the controlled component includes a switch control and a check box control; in S200, a data source is obtained from a front-end page based on a request method, and the data source is adjusted to obtain a tree data object; in S300, the switch control and the check box control are rendered according to the tree data object to obtain a new tree data object, wherein the parent node in the new tree data object includes a switch control and the leaf node includes a check box control; in S400, the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control are recalculated according to the key value corresponding to the selected node, and the display on the front-end page is performed according to the recalculated key value. Thus, the switch component and the tree component are combined, and the selected key value is calculated in real time in a controlled manner, so that when the switch control of the parent node is selected, all child nodes are associated and selected, and when a child node is selected, the parent node is not selected, which is convenient for users to operate.

[0055] Specifically, in S100, the specified property of the tree component is set as a variable to obtain a controlled component, wherein the controlled component includes a switch control and a checkbox control. Here, setting the specified property of the tree component as a variable, for example, setting the specified item in the props attribute of the tree component as a variable can make the tree component a controlled component, wherein the controlled component includes a switch control (switch component) and a checkbox control (checkbox component).

[0056] In S200, a data source is obtained from a front-end page based on a request method, and the data source is adjusted to obtain a tree-shaped data object. Here, the request method includes but is not limited to an Http request method, and a data source for display is obtained from a front-end page for display that can be seen by a customer based on the request method. After the controlled component obtains the data source, the data source can be adjusted for properties to obtain a tree-shaped data object.

[0057] In S300, the switch control and the check box control are rendered according to the tree data object to obtain a new tree data object, wherein the parent node in the new tree data object includes the switch control and the leaf node includes the check box control. Here, the switch control and the check box control are rendered according to the tree data object, for example, a switch control is added to the parent node and a check box control is added to the leaf node to obtain a new tree data object.

[0058] In S400, the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control are recalculated according to the key value corresponding to the selected node, and the display on the front-end page is performed according to the recalculated key value. Here, the user's selection instruction and the selected node can be obtained from the front-end page, and the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control can be recalculated according to the key value corresponding to the new node selected by the user in real time, and the displayed node selection state is determined according to the recalculated key value. Thus, the switch component and the tree component are combined, and the selected key value is calculated in real time in a controlled manner, so that when the switch control of the parent node is selected, all child nodes are associated and selected, and when the child node is selected, the parent node will not be selected, which is convenient for the user to operate.

[0059] In an optional embodiment of the present application, before recalculating the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected checkbox control according to the key value corresponding to the selected node, a first listening function is added to each switch control to trigger a callback function when the switch control is selected or unselected; a second listening function is added to each checkbox control to trigger a callback function when the checkbox control is selected; when any one of the first listening function or the second listening function is triggered, the callback function is started to recalculate the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected checkbox control according to the key value corresponding to the selected node. Here, a first listening function is added to each switch control (switch component), and the callback function is triggered when the switch component is selected or unselected by the user. The callback function triggers the key value (switchKey) of all nodes under the associated selected switch control and the key value (checkboxKey) of all nodes under the associated selected checkbox control according to the selected key value (key). A second listening function is added to each checkbox control (checkbox component). When the checkbox component is selected, the callback function is triggered. When the callback function is triggered, the key values ​​(switchKey) of all nodes under the associated selected switch control and the key values ​​(checkboxKey) of all nodes under the associated selected checkbox control are recalculated according to the selected key value (key). When the switch control of the parent node is selected, all child nodes are associated and selected. When a child node is selected, the parent node is not selected, which is convenient for users to operate.

[0060] In an optional embodiment of the present application, in S100, the specified attributes of the tree component include the props attribute, and the selectedKeys in the props attribute of the tree component is set as a variable to obtain a controlled component. Here, the specified attributes of the tree component (Tree component) include the props attribute, and the props attribute includes selectedKeys, and selectedKeys is set as a variable. For example:

[0061]

[0062] Continuing with the above embodiment, the tree component becomes a controlled component, which is separated from the associated selection relationship between the parent and child nodes. It can freely set which nodes are selected, which provides a basis for associating the switch component and the checkbox component.

[0063] In an optional embodiment of the present application, in S200, the controlled component is used to obtain an array-formatted data source for front-end page display from a server providing a data source based on a request method, wherein the specified request method includes an Http request method; the data source is traversed and the attributes of each object data in the data source are adjusted using related functions to obtain a tree-shaped data object. Here, an Http request method can be used to obtain a data source used by the front end for display to the user from a server providing a data source, such as an ajax method in js; the data source is array-formatted data, and the obtained data source is processed to adapt to the functional transformation. The data source is array-formatted data, and the array format is traversed by an iterator (map traversal), and the attributes of each object data traversed are adjusted and transformed to obtain a tree-shaped data object.

[0064] In an optional embodiment of the present application, in S200, the title attribute of each object data is rendered using the parent component title function to obtain a ReactNode node containing a title and a switch control; the checkable attribute of each object data is rendered according to the leaf node in the data source; the disable attribute is generated for each object data according to whether the disabled checkbox key array in the data source contains the key of a single node; and the level attribute is added to each object data by traversing the data source to identify the level of a single node. Here, the parent component title function (parentTitle function) can dynamically render the title (title) attribute of the parent component in each object data, and obtain a ReactNode node containing a title and a switch component, wherein the ReactNode node is a virtual Dom node in the React technology. The checkable attribute is used to control whether a checkbox appears, so it is only rendered in the leaf node. The isLeaf of the data source can be used to determine whether a single node is a leaf node, and the checkable attribute is rendered when it is a leaf node. The attribute disable is used to determine which nodes cannot be operated, and the attribute disable can be generated when the disableCheckboxKeys array in the tree data object contains the key of the current node. At the same time, by traversing the data source, a level attribute is added to each object data to identify the level of a single node, wherein the level attribute is the attribute z-Index, which is used to mark the level of the current node during the traversal process. The rendering code part of the attribute is as follows:

[0065]

[0066] The above four properties can be managed using the Tree component of ant to adjust the properties.

[0067] In an optional embodiment of the present application, in S300, the parent node object in the controlled component is rendered as a title and a switch control according to the tree data object; the leaf node in the controlled component is rendered as a checkbox control and a title according to the tree data object; and a new tree data object is obtained. Here, the React framework can be used to render the parent node object in the controlled component as a title and a switch component according to the tree data object after the property adjustment, and render the object data of the leaf node as a checkbox component and a title to obtain a new tree data object.

[0068] In an optional embodiment of the present application, in S400, the node selected on the front-end page is obtained, and the associated corresponding target node is re-screened from the new tree data object according to the selected node; it is determined whether the target node is a leaf node, and if so, the key value of the target node is the key value of the check box control; if not, the key value of the target node is the key value of the switch control, and all child nodes under the target node are recursively traversed to calculate the key values ​​of the switch control and the key values ​​of the check box control in all child nodes. Here, the node selected by the user on the front-end page is obtained, and the key of the selected switch and the key of the checkbox are calculated according to the key of the selected node. The selected key contains part of the switchKey and part of the checkboxKey in the new tree data object. The calcuDefaultKey function can be used to calculate all the switchKey and checkboxKey of the new tree data object: traverse the selected key, find out whether the object of the corresponding key in the data source is a leaf node, if it is a leaf node, it is checkboxKey; if it is not a leaf node, it is switch, and all child nodes under the switch node need to be selected, including child nodes of switch and child nodes of checkbox, to determine whether the child node is a leaf node. If not, the child node is switch, and the child nodes of the child nodes of switch need to be calculated, and so on recursively traversed, and finally the complete switchKey and checkboxKey are obtained. In this way, the switch and checkbox combination interaction in the Tree component can be realized, and the switch of the parent node can be selected, and all the associated child nodes can be selected; while the parent node will not be selected if the child node is selected.

[0069] Figure 2A schematic flow chart of a page display method based on a tree component in an optional embodiment of the present application is shown. First, the specified item in the props attribute of the tree component is modified to a variable so that the tree component becomes a controlled component. Then, based on the background service, the data source of the tree component to be displayed on the front-end page is obtained, and the data source is processed and adjusted in a data tree shape to generate a new tree data object. Next, the switch control (switch component) and the check box control (checkbox component) in the controlled component are rendered according to the tree data object with adjusted attributes. Then, the key value of the corresponding associated selected switch control (switch component) and check box control (checkbox component) in the controlled component is calculated according to the data node key (key) selected by the user, and a listening event is added to the switch component and the checkbox component to listen to whether there is a selection change of the switch component being selected or unselected and the checkbox component being selected. If so, the key value of the corresponding associated selected switch control (switch component) and check box control (checkbox component) in the controlled component is recalculated according to the new selected data key. The calculation code part is as follows:

[0070]

[0071] In this way, the combined interaction of switch and checkbox in the Tree component can be realized. If the switch of the parent node is selected, all the associated child nodes will be selected; and if a child node is selected, the parent node will not be selected, which is convenient for users to perform flexible operations.

[0072] Figure 3 A schematic diagram of page display in an actual application scenario in an optional embodiment of the present application is shown. In the page display, a region and even a store hierarchy are included. There are small regions under the large region, and stores under the small regions. In management, if a large region is selected, all small regions under the large region and all stores under the small regions need to be selected. However, since the stores under the region will be expanded, all current stores cannot directly represent the region. Therefore, all stores under a selected small region will not select the small region. This can better associate the organizational relationship between regions and stores, and facilitate flexible operations by users.

[0073] An embodiment of the present application also provides a computer-readable medium on which computer-readable instructions are stored. The computer-readable instructions can be executed by a processor to implement the aforementioned page display method based on a tree component.

[0074] Corresponding to the method described above, the present application also provides a terminal, which includes a terminal capable of executing the above Figure 1 or Figure 2 or Figure 3The modules or units of the method steps described in each embodiment may be implemented by hardware, software, or a combination of hardware and software, which is not limited in this application. For example, in one embodiment of this application, a device for page display based on a tree component is also provided, wherein the device includes:

[0075] one or more processors; and

[0076] A memory storing computer-readable instructions, wherein when the computer-readable instructions are executed, the processor executes the operations of the aforementioned page display method based on tree components.

[0077] For example, the computer readable instructions, when executed, cause the one or more processors to:

[0078] The specified property of the tree component is set as a variable to obtain a controlled component, wherein the controlled component includes a switch control and a check box control; a data source is obtained from a front-end page based on a request method, and the data source is adjusted to obtain a tree data object; the switch control and the check box control are rendered according to the tree data object to obtain a new tree data object, wherein the parent node in the new tree data object includes a switch control and the leaf node includes a check box control; the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control are recalculated according to the key values ​​corresponding to the selected nodes, and the recalculated key values ​​are displayed on the front-end page.

[0079] Figure 4 A device framework structure diagram for page display based on a tree component according to another aspect of the present application is shown, wherein the device includes: a component setting module 100, used to set the specified attribute of the tree component as a variable to obtain a controlled component, wherein the controlled component includes a switch control and a check box control; a data adjustment module 200, used to obtain a data source from a front-end page based on a request method, adjust the data source, and obtain a tree data object; a data rendering module 300, used to render the switch control and the check box control according to the tree data object to obtain a new tree data object, wherein the parent node in the new tree data object includes a switch control and the leaf node includes a check box control; a data processing module 400, used to recalculate the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control according to the key value corresponding to the selected node, and display on the front-end page according to the recalculated key values.

[0080] It should be noted that the contents executed by the component setting module 100, the data adjustment module 200, the data rendering module 300 and the data processing module 400 are respectively the same or correspondingly the same as the contents in the above steps S100, S200, S300 and S400, and are not repeated here for the sake of simplicity.

[0081] In an optional embodiment of the present application, the data processing module 400 is also used to add a first listening function to each switch control to trigger a callback function when the switch control is selected or unselected, and add a second listening function to each check box control to trigger a callback function when the check box control is selected, and when any one of the first listening function or the second listening function is triggered, start the callback function to recalculate the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control according to the key value corresponding to the selected node. Here, the data processing module 400 can add a first listening function to each switch control (switch component), and trigger the callback function when the switch component is selected or unselected by the user. After the callback function is triggered, the data processing module 400 will recalculate the key values ​​(switchKey) of all nodes under the associated selected switch control and the key values ​​(checkboxKey) of all nodes under the associated selected check box control according to the selected key value (key). The data processing module 400 can also add a second listening function for each checkbox control (checkbox component), and trigger the callback function when the checkbox component is selected. After the callback function is triggered, the data processing module 400 will recalculate the key values ​​(switchKey) of all nodes under the associated selected switch control and the key values ​​(checkboxKey) of all nodes under the associated selected checkbox control according to the selected key value (key), so that when the switch control of the parent node is selected, all child nodes are associated and selected, and when the child node is selected, the parent node will not be selected, which is convenient for users to operate.

[0082] Obviously, those skilled in the art can make various changes and modifications to the present application without departing from the spirit and scope of the present application. Thus, if these modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is also intended to include these modifications and variations.

[0083] It should be noted that the present application can be implemented in software and / or a combination of software and hardware, for example, can be implemented using an application specific integrated circuit (ASIC), a general purpose computer or any other similar hardware device. In one embodiment, the software program of the present application can be executed by a processor to implement the steps or functions described above. Similarly, the software program of the present application (including related data structures) can be stored in a computer-readable recording medium, for example, a RAM memory, a magnetic or optical drive or a floppy disk and the like.

[0084] In addition, a part of the present application may be applied as a computer program product, such as a computer program instruction, which, when executed by a computer, can call or provide the method and / or technical solution according to the present application through the operation of the computer. The program instruction for calling the method of the present application may be stored in a fixed or removable recording medium, and / or transmitted through a data stream in a broadcast or other signal-bearing medium, and / or stored in a working memory of a computer device that runs according to the program instruction. Here, according to an embodiment of the present application, a device is included, the device including a memory for storing computer program instructions and a processor for executing program instructions, wherein, when the computer program instruction is executed by the processor, the device is triggered to run the method and / or technical solution based on the aforementioned multiple embodiments according to the present application.

[0085] It is obvious to those skilled in the art that the present application is not limited to the details of the above exemplary embodiments, and that the present application can be implemented in other specific forms without departing from the spirit or essential features of the present application. Therefore, from any point of view, the embodiments should be regarded as exemplary and non-restrictive, and the scope of the present application is defined by the appended claims rather than the above description, and it is intended that all changes falling within the meaning and scope of the equivalent elements of the claims are included in the present application. Any figure mark in the claims should not be regarded as limiting the claims involved. In addition, it is obvious that the word "comprising" does not exclude other units or steps, and the singular does not exclude the plural.

Claims

1. A page display method based on tree components, wherein: The method comprises: Setting the specified attribute of the tree component as a variable to obtain a controlled component, wherein the controlled component includes a switch control and a check box control; Acquire a data source from a front-end page based on a request method, adjust the data source, and obtain a tree-shaped data object; Rendering the switch control and the check box control according to the tree data object to obtain a new tree data object, wherein the parent node in the new tree data object includes the switch control and the leaf node includes the check box control; Recalculate the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control according to the key value corresponding to the selected node, and display them on the front-end page according to the recalculated key values; The method of obtaining a data source from a front-end page based on a request and adjusting the data source to obtain a tree-shaped data object includes: Based on the request method, using the controlled component to obtain a data source in an array format for front-end page display from a server providing the data source, wherein the specified request method includes an Http request method; Traversing the data source and using relevant functions to adjust the attributes of each object data in the data source to obtain a tree data object; The traversal of the data source and the use of related functions to adjust the attributes of each object data in the data source include: Use the parent component title function to render the title attribute of each object data and get the ReactNode node containing the title and switch control; Render the checkable attribute of each object data according to the leaf node in the data source; Generate a disable attribute for each object data item based on whether the disabled checkbox key array in the data source contains a single node key; The level of a single node is identified by traversing the data source and adding a level attribute to each item of object data.

2. The method according to claim 1, wherein: Before recalculating the key values ​​of all nodes associated with the selected switch control and the key values ​​of all nodes associated with the selected check box control according to the key value corresponding to the selected node, the method further includes: Adding a first listening function to each switch control to trigger a callback function when the switch control is selected or deselected; Add a second listening function for each check box control to trigger a callback function when the check box control is selected; When either the first listening function or the second listening function is triggered, the callback function is started to recalculate the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control according to the key value corresponding to the selected node.

3. The method according to claim 1, wherein: The specified properties of the tree component include props properties. The specified properties of the tree component are set as variables to obtain a controlled component, including: Set the selectedKeys in the props property of the tree component to a variable to get a controlled component.

4. The method according to claim 1, wherein: The step of rendering the switch control and the check box control according to the tree data object to obtain a new tree data object includes: Rendering the parent node object in the controlled component as a title and a switch control according to the tree data object; Rendering leaf nodes in the controlled component as check box controls and titles according to the tree data object; Get a new tree data object.

5. The method according to claim 1, wherein: The recalculating the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control according to the key value corresponding to the selected node includes: Acquire the selected node on the front-end page, and re-screen the associated corresponding target node from the new tree data object according to the selected node; Determine whether the target node is a leaf node, if so, the key value of the target node is the key value of the check box control; If not, the key value of the target node is the key value of the switch control, and all child nodes under the target node are recursively traversed to calculate the key values ​​of the switch control and the key values ​​of the check box control in all child nodes.

6. A device for displaying a page based on a tree component, wherein: The device comprises: A component setting module, used for setting the specified attribute of the tree component as a variable to obtain a controlled component, wherein the controlled component includes a switch control and a check box control; A data adjustment module, used to obtain a data source from a front-end page based on a request method, and adjust the data source to obtain a tree-shaped data object; A data rendering module, used for rendering the switch control and the check box control according to the tree data object to obtain a new tree data object, wherein the parent node in the new tree data object includes the switch control and the leaf node includes the check box control; A data processing module, used to recalculate the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control according to the key value corresponding to the selected node, and display them on the front-end page according to the recalculated key values; Wherein, the data adjustment module is used for: Based on the request method, using the controlled component to obtain a data source in an array format for front-end page display from a server providing the data source, wherein the specified request method includes an Http request method; Traversing the data source and using relevant functions to adjust the attributes of each object data in the data source to obtain a tree data object; Wherein, the data adjustment module is used for: Use the parent component title function to render the title attribute of each object data and get the ReactNode node containing the title and switch control; Render the checkable attribute of each object data according to the leaf node in the data source; Generate a disable attribute for each object data item based on whether the disabled checkbox key array in the data source contains a single node key; The level of a single node is identified by traversing the data source and adding a level attribute to each item of object data.

7. The device according to claim 6, wherein: The device comprises: The data processing module is further used to add a first listening function to each switch control to trigger a callback function when the switch control is selected or unselected, and to add a second listening function to each check box control to trigger a callback function when the check box control is selected, before recalculating the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control according to the key value corresponding to the selected node; when either the first listening function or the second listening function is triggered, the callback function is started to recalculate the key values ​​of all nodes under the associated selected switch control and the key values ​​of all nodes under the associated selected check box control according to the key value corresponding to the selected node.

8. A computer-readable medium having computer-readable instructions stored thereon, wherein the computer-readable instructions can be executed by a processor to implement the method according to any one of claims 1 to 5.

9. A device for page display based on tree components, wherein: The device comprises: one or more processors; and A memory storing computer readable instructions which, when executed, cause the processor to perform the operations of the method as claimed in any one of claims 1 to 5.

Images