Organizational structure rendering method and device, electronic equipment and storage medium

Abstract

The invention discloses an organizational structure rendering method, which comprises the following steps of: converting organizational structure data into a chained data structure and caching to obtain cached data; a visible area calculation step: determining a start index and an end index of the current visible area according to the current scrolled distance, the height of a single node, the height of the visible area and the current total item number in the visible area; determining a to-be-rendered node between the starting index and the ending index from the cached data; adding the to-be-rendered node to a DOM tree of the page; and in response to a configuration operation on the selected node in the page, returning to the step of calculating the visible area. According to the method, the number of rendering nodes is greatly reduced, memory occupation and CPU (Central Processing Unit) consumption are reduced, smooth interaction operation and quick response between the user and the organization structure are ensured, lagging and delay are avoided, and the use convenience of the user is improved. The invention further discloses a device for implementing the method, electronic equipment and a storage medium.

Description

Technical Field

[0001] The present invention relates to the technical field of computer front-end development, and particularly to an organizational structure rendering method, device, electronic device, and storage medium. Background Art

[0002] In today's enterprise management and information systems, the visual display of the organizational structure is crucial. As the enterprise scale continues to expand and the organizational structure becomes increasingly complex, the amount of data to be displayed has increased sharply.

[0003] In the traditional front-end rendering method of the organizational structure, all data is usually loaded and rendered onto the page at one time. When the amount of data is small, this method can work properly, but in the face of large-scale data, serious performance problems will occur, such as slow page loading, freezing, or even crashing. This is because rendering a large number of nodes at one time consumes a large amount of memory and CPU resources, resulting in slow browser response. Although the current method of paging loading is adopted to relieve the performance pressure, paging loading requires frequent user operations, and there will still be obvious delays when switching pages, unable to provide a smooth user experience. At the same time, for dynamically changing data, it is difficult to achieve real-time and efficient update rendering in the traditional method.

[0004] Therefore, in the prior art, when dealing with a large amount of organizational structure data, one-time rendering will cause the page loading time to be too long, and users need to wait for a long time to see the complete organizational structure. Moreover, the simultaneous rendering of a large number of nodes will occupy a large amount of browser memory, easily leading to a decline in browser performance, and even memory overflow. In addition, the interactive response of the page is slow, for example, operations such as scrolling, expanding / collapsing nodes will have obvious freezes, affecting the user experience. Summary of the Invention

[0005] In order to solve the above problems existing in the prior art, the present invention provides an organizational structure rendering method, device, electronic device, and storage medium. The technical problems to be solved by the present invention are achieved through the following technical solutions: The first aspect of the embodiment of the present invention provides an organizational structure rendering method, including the following steps: Convert the organizational structure data into a chained data structure and cache it to obtain cached data; Calculate the visible area step: Determine the start index and end index of the current visible area according to the current scrolled distance, the height of a single node, the height of the visible area, and the current total number of items within the visible area; Determine the nodes to be rendered between the start index and the end index from the cached data; Add the nodes to be rendered to the DOM tree of the page; In response to a configuration operation on a selected node in the page, return the step of calculating the visible area.

[0006] In one embodiment of the present invention, the converting the organizational structure data into a chained data structure and caching it to obtain cached data includes: Traverse the organizational structure data of the tree structure level by level and convert it into a chained data structure for caching to obtain cached data; wherein, the value of the parentId attribute of the child node is the ID of the parent node.

[0007] In one embodiment of the present invention, the determining the start index and the end index of the current visible area according to the current scrolled distance, the height of a single node, the height of the visible area, and the current total number of items in the visible area includes: Determine the start index according to the current scrolled distance and the height of a single node; Determine the end index according to the current scrolled distance, the height of a single node, the height of the visible area, and the current total number of items in the visible area.

[0008] In one embodiment of the present invention, the responding to a configuration operation on a selected node in the page and returning the step of calculating the visible area includes: Responding to an expand operation, a collapse operation, a drag operation, an add operation, or a delete operation on a selected node in the page, and returning the step of calculating the visible area.

[0009] A second aspect of the embodiments of the present invention provides an organizational structure rendering device, including: A preprocessing module, configured to convert the organizational structure data into a chained data structure and cache it to obtain cached data; A calculation module, configured to perform the step of calculating the visible area: determine the start index and the end index of the current visible area according to the current scrolled distance, the height of a single node, the height of the visible area, and the current total number of items in the visible area; A determination module, configured to determine the nodes to be rendered between the start index and the end index from the cached data; A rendering module, configured to add the nodes to be rendered to the DOM tree of the page; A monitoring module, configured to respond to a configuration operation on a selected node in the page and return the step of calculating the visible area.

[0010] In one embodiment of the present invention, the converting the organizational structure data into a chained data structure and caching it to obtain cached data includes: Traverse the organizational structure data of the tree structure level by level and convert it into a chained data structure for caching to obtain cached data; wherein, the value of the parentId attribute of the child node is the ID of the parent node.

[0011] In one embodiment of the present invention, determining the start index and end index of the current visible area according to the currently scrolled distance, the height of a single node, the height of the visible area, and the current total number of items in the visible area includes: Determining the start index according to the currently scrolled distance and the height of a single node; Determining the end index according to the currently scrolled distance, the height of a single node, the height of the visible area, and the current total number of items in the visible area.

[0012] In one embodiment of the present invention, the step of returning the calculated visible area in response to a configuration operation on a selected node in the page includes: Responding to an expand operation, a collapse operation, a drag operation, an add operation, or a delete operation on a selected node in the page, and returning the step of calculating the visible area.

[0013] A third aspect of the embodiments of the present invention provides an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, it implements an organizational structure rendering method provided in the first aspect of the embodiments of the present invention.

[0014] A fourth aspect of the embodiments of the present invention provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, it implements an organizational structure rendering method provided in the first aspect of the embodiments of the present invention.

[0015] Advantages of the present invention: By calculating the start index and end index of the visible area, the present invention obtains the nodes to be rendered from the cached data for rendering, without rendering all the nodes at once, greatly reducing the number of rendered nodes, reducing memory occupancy and CPU consumption, significantly improving the page loading speed and scrolling fluency, ensuring smooth and rapid interaction operations between the user and the organizational structure, avoiding lags and delays, and improving the user's convenience of use.

[0016] Other features and advantages of the present invention will be described in the subsequent description, and some will become obvious from the description, or will be understood by implementing the present invention. The objectives and other advantages of the present invention can be achieved and obtained through the structures specifically pointed out in the written description, claims, and drawings.

[0017] The technical solutions of the present invention will be further described in detail below with reference to the drawings and embodiments. Description of the Drawings

[0018] The accompanying drawings are used to provide a further understanding of the present invention and constitute a part of the specification. Together with the embodiments of the present invention, they are used to explain the present invention and do not constitute a limitation to the present invention. In the accompanying drawings: Figure 1 It is a schematic flowchart of an organizational structure rendering method provided by an embodiment of the present invention; Figure 2 It is a schematic block diagram of an organizational structure rendering device provided by an embodiment of the present invention. Detailed implementation manners

[0019] The following further describes the present invention in detail with reference to specific embodiments, but the implementation manners of the present invention are not limited thereto.

[0020] As Figure 1 shown, a first aspect of an embodiment of the present invention provides an organizational structure rendering method, including the following steps: Step 11: Convert the organizational structure data into a chained data structure and cache it to obtain cached data.

[0021] Step 12: Calculate the visible area step: Determine the start index and end index of the current visible area according to the current scrolled distance, the height of a single node, the height of the visible area, and the current total number of items within the visible area.

[0022] Step 13: Determine the nodes to be rendered between the start index and the end index from the cached data.

[0023] Step 14: Add the nodes to be rendered to the DOM tree of the page.

[0024] Wherein, DOM (Document Object Model).

[0025] Step 15: In response to a configuration operation on the selected node in the page, return to the step of calculating the visible area.

[0026] In this embodiment, by calculating the start index and end index of the visible area, the nodes that need to be rendered are obtained from the cached data for rendering, without rendering all the nodes at once, greatly reducing the number of rendered nodes, reducing memory occupancy and CPU consumption, significantly improving the page loading speed and scrolling smoothness, ensuring smooth and rapid response to the interaction operations between the user and the organizational structure, avoiding lags and delays, and improving the user convenience.

[0027] Based on the first aspect of the embodiment of the present invention, a second aspect of the embodiment of the present invention further elaborates on an organizational structure rendering method. The second aspect of the embodiment of the present invention provides an organizational structure rendering method, including the following steps: Step 21: Convert the organizational structure data into a linked data structure and cache it to obtain cached data.

[0028] The organizational structure data is generally stored in a tree structure. After parsing the hierarchical relationship of the organizational structure data in the tree structure, it is converted into a linked array. Specifically, traverse the organizational structure data in the tree structure level by level and convert it into a linked data structure for caching to obtain cached data; among them, the value of the parentId attribute of the child node is the ID of the parent node.

[0029] For example, the example of receiving the normal tree-shaped organizational structure data structure is: const tree = { id:"1", name:"Department 1", children: { id:"1-1", name:"Department 1-1" }, { id:"1-2", name:"Department 1-2" } }, { id:"2", name:"Department 2", children: { id:"2-1", name:"Department 2-1" }, { id:"2-2", name:"Department 2-2" } }, This structure is a nested relationship, which is not conducive to the calculation of visible area nodes later. Therefore, a conversion to a linked array is done here. The conversion method is: 1. Traverse the tree structure. In order, traverse level by level, and insert the child nodes behind the parent nodes, and recurse level by level. 2. During the traversal, assemble the value of the parentId attribute of the child node as the id of the parent node to facilitate subsequent query of the parent-child relationship.

[0030] The example of the converted linked data structure is: const list =​​​ { id: "1", name: "Department 1", parentId: null, }, { id: "1-1", name: "Department 1-1", parentId: "1", }, { id: "1-2", name: "Department 1-2", parentId: "1", }, { id: "2", name: "Department 2", parentId: null, }, { id: "2-1", name: "Department 2-1", parentId: "2", }, { id: "2-2", name: "Department 2-2", parentId: "2", }, Each piece of data in the chained array is single department structure data. Besides containing the parentId (superior department ID), it can also contain attributes such as the details of this department, the IDs of subordinate departments, the expanded / collapsed state, and the drag state. The parsed data is cached for subsequent quick access.

[0031] Step 22: Determine the starting index and ending index of the current visible area based on the current scrolled distance, the height of a single node, the height of the visible area, and the current total number of items within the visible area.

[0032] ​In this step, the starting index is also the starting index value of the starting node within the visible area, and the ending index is the ending index value of the ending node within the visible area. The currently scrolled distance scrollTop, the height of a single node itemHeight, the height of the visible area viewHeight, and the current total number of items totalItems within the visible area are obtained through the common methods of the Dom. Among them, each node occupies one line position, and the height of a single node is also the height of the line where the node is located. The currently scrolled distance is the actual distance scrolled by the scroll bar.

[0033] The specific steps of step 22 include steps 221 - 222: Step 221, determine the starting index based on the currently scrolled distance and the height of a single node. Specifically, by dividing the currently scrolled distance by the height of a single node and rounding down, the starting index is obtained. The formula for the starting index is Math.floor(scrollTop / itemHeight). This formula calculates the index of the first visible node in the visible area at the currently scrolled distance.

[0034] Step 222, determine the ending index based on the currently scrolled distance, the height of a single node, the height of the visible area, and the current total number of items within the visible area.

[0035] Specifically, the formula for the ending index is: Math.min(Math.floor((scrollTop + viewHeight) / itemHeight), totalItems - 1). This formula calculates the index of the last visible node in the visible area. First, calculate the index after adding the scrolled distance and the visible height, and then compare it with the current total number of items - 1, and take the minimum of the two to ensure that it does not exceed the total number of items in the organizational structure list.

[0036] Step 23, determine the nodes to be rendered between the starting index and the ending index from the cached data.

[0037] In this step, each node has its own index value. Search for the node array between the calculated starting index and ending index in the cached data as the nodes to be rendered, that is, the nodes that need to be displayed.

[0038] Step 24, add the nodes to be rendered to the DOM tree of the page.

[0039] In this step, finally calculate the node array that can be displayed within the visible area, and then add it to the page DOM tree for display. Therefore, when rendering and displaying the organizational structure data, only the nodes within the visible area need to be rendered, and the nodes outside the visible area do not need to be rendered currently.

[0040] Step 25: In response to a configuration operation on a selected node in the page or a page scrolling event, return to the step of calculating the visible area.

[0041] In this step, listen for the page scrolling event. When the scrolling position changes, re-obtain relevant parameters through the common methods of the Dom, return to execute Steps 23 - 24, recalculate the start and end indices within the visible area, update the currently rendered nodes, and display them on the page.

[0042] Alternatively, if an operation is performed on a node in the page, such as expanding or collapsing a node and other configuration operations, it will also change the range of nodes that need to be displayed in the current visible area. It is necessary to recalculate the start and end indices and update the rendering, so as to only render the nodes currently within the visible area.

[0043] Specifically, the rendering steps for the expansion operation of a node are as follows: Step A1: In response to the expansion operation on a selected node in the page, obtain the target node corresponding to the parentId with the same ID as the selected node.

[0044] In this step, when clicking the expansion button of a certain node (level) on the page, this node is the selected node. Traverse the subsequent data of the selected node to find the node corresponding to the parentId with the same ID as the selected node as the target node.

[0045] Step A2: Set the property value of the display parameter of the target node to true, that is, set the isShow property to true.

[0046] Step A3: Return to Step 23. Hidden nodes should be filtered out during the calculation.

[0047] For example, the current data is: const list = { id:"1", name:"Department 1", parentId:null, isShow:true, index: 1 }, { id:"1-1", name:"Department 1-1", parentId:"1", isShow:false, index: 1 }, { id: "1-2", name: "Department 1-2", parentId: "1", isShow: false, index: 2 }, { id: "2", name: "Department 2", parentId: null, isShow: true, index: 2 }, { id: "2-1", name: "Department 2-1", parentId: "2", isShow: false, index: 1 }, { id: "2-2", name: "Department 2-2", parentId: "2", isShow: false, index: 2 }, Based on the data rendered from this list, Department 1 and Department 2 are shown, and the child nodes of Department 1 and Department 2 are all hidden. Therefore, the page is displayed as + Department 1 + Department 2 When Department 1 is expanded, through traversal, the parentId of Department 1-1 and Department 1-2 will be the same as the ID of Department 1, and the isShow of Department 1-1 and Department 1-2 will be set to true. Then, the nodes participating in the viewport calculation will not include Department 2-1 and Department 2-2. At this time, the page is displayed as: - Department 1 Department 1-1 Department 1-2 + Department 2 Specifically, the rendering steps for the collapse operation of the nodes are as follows: Similar to the expansion of the nodes, it is also to filter out the department nodes to be hidden according to the superior and inferior IDs, and then add them to the page DOM tree after recalculation: ​Step B1: In response to the collapse operation on the selected node in the page, obtain the target node corresponding to the parentId with the same ID as the selected node.

[0048] Step B2: Set the attribute value of the display parameter of the target node to false.

[0049] Step B3: Return to Step 23.

[0050] Specifically, the rendering steps for the drag-and-drop sorting operation of nodes are as follows: Directly drag the node with the mouse and place it in another position for sorting or changing the hierarchy. The drag technology is implemented using HTML's DragDrop technology. Through event binding, the dragged node and the placement position are determined, and the visualization area calculation and DOM rendering are performed again. The drag attribute of each node is set to true: draggable = "true", and the node can be dragged. Then, the placement position of the node is obtained according to the dropEvent, and it is judged whether to insert it in front of, behind, or as a sub-node of the placement node according to the position where the mouse hovers (above, middle, below). The steps include: Step C1: In response to the drag operation on the selected node in the page, obtain the target placement position according to the position where the mouse hovers through the dropEvent.

[0051] Step C2: Judge whether the target position is above, below, or in the middle of the placement node.

[0052] Step C3: If the target position is above the placement node, take out the selected node from the array, insert it in front of the placement node, and then re-sort all nodes at the same level to determine the index value of each node.

[0053] Step C4: If the target position is below the placement node, take out the selected node from the array, insert it behind the placement node, and then re-sort all nodes at the same level to determine the index value of each node.

[0054] Step C5: If the target position is in the middle of the placement node, first find all the sub-nodes of the placement node according to the parentId, then take out the selected node and place it at the end of the previously found sub-nodes, and change the parentId of the selected node to the id of the placement node. Finally, re-calculate the indexes of all sub-nodes of the placement node and all nodes at the level where the selected node was previously located. This step is for the selected node to be a sub-node of the placement node.

[0055] Step C6: Return to Step 23.

[0056] Specifically, the rendering steps for the node addition operation are similar to those of the drag-and-drop sorting operation, including: Step D1: In response to the node addition operation, obtain the target position of the addition through the dropEvent according to the position where the mouse hovers.

[0057] Step D2: Determine whether the target position is above, below, or in the middle of the adjacent node.

[0058] Step D3: If the target position is above the adjacent node, insert the added node in front of the adjacent node, and then reorder all nodes at the same level to determine the index value of each node.

[0059] Step D4: If the target position is below the adjacent node, insert the added node behind the adjacent node, and then reorder all nodes at the same level to determine the index value of each node.

[0060] Step D5: If the target position is in the middle of a certain node, first find all the child nodes of the certain node according to the parentId, then place the added node at the end of the previously found child nodes, and change the parentId of the added node to the id of the placed node. Finally, recalculate the indexes of all the child nodes of the certain node.

[0061] Step D6: Return to Step 23.

[0062] Specifically, the rendering steps for the node deletion operation are as follows: Similar to the steps of the drag-and-drop sorting operation, including: Step E1: In response to the node deletion operation, find all the child nodes of the deleted node according to the parentId.

[0063] Step E2: Take out and remove the deleted node and all its child nodes. Step E4: Reorder all nodes at the same level as the deleted node to determine the index value of each node.

[0064] Step E5: Return to Step 23.

[0065] As Figure 2 shown, the third aspect of the embodiment of the present invention provides an organizational structure rendering device, including: A preprocessing module 31, configured to convert the organizational structure data into a chained data structure and cache it to obtain cached data; A calculation module 32, configured to calculate the visible area steps: determine the start index and end index of the current visible area according to the current scrolled distance, the height of a single node, the height of the visible area, and the current total number of items within the visible area; A determination module 33, configured to determine the nodes to be rendered between the start index and the end index from the cached data; A rendering module 34, configured to add the nodes to be rendered to the DOM tree of the page; The monitoring module 35 is used to return the step of calculating the visible area in response to a configuration operation on a selected node in a page.

[0066] In an embodiment of the present invention, converting the organizational structure data into a chained data structure and caching it to obtain cached data, including: Traversing the organizational structure data in a tree structure level by level and converting it into a chained data structure for caching to obtain cached data; wherein, the value of the parentId attribute of the child node is the ID of the parent node.

[0067] In an embodiment of the present invention, determining the start index and end index of the current visible area according to the current scrolled distance, the height of a single node, the height of the visible area, and the current total number of items in the visible area, including: Determining the start index according to the current scrolled distance and the height of a single node; Determining the end index according to the current scrolled distance, the height of a single node, the height of the visible area, and the current total number of items in the visible area.

[0068] In an embodiment of the present invention, returning the step of calculating the visible area in response to a configuration operation on a selected node in a page, including: Responding to an expand operation, a collapse operation, a drag operation, an add operation, or a delete operation on a selected node in a page, and returning the step of calculating the visible area.

[0069] A fourth aspect of the embodiments of the present invention provides an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, it implements an organizational structure rendering method provided by the embodiments of the present invention as described above.

[0070] A fifth aspect of the embodiments of the present invention further provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, it implements the steps of an organizational structure rendering method provided by the embodiments of the present invention as described above.

[0071] Among them, the memory may include a random access memory (RAM), and may also include a non-volatile memory (NVM), such as at least one disk memory. Optionally, the memory may also be at least one storage device located far from the aforementioned processor.

[0072] The above-mentioned processor may be a general-purpose processor, including a Central Processing Unit (CPU), a Network Processor (NP), etc.; it may also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field-Programmable Gate Array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, and discrete hardware systems.

[0073] The method provided by the embodiments of the present invention can be applied to an electronic device. Specifically, the electronic device may be: a desktop computer, a portable computer, a smart mobile terminal, a server, etc. There is no limitation here. Any electronic device that can implement the present invention belongs to the protection scope of the present invention.

[0074] For the device / electronic device embodiments, since they are basically similar to the method embodiments, the description is relatively simple. For the relevant parts, please refer to the partial description of the method embodiments.

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

[0076] These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory generate a manufactured article including an instruction device, and the instruction device implements the functions specified in Figure 1 one or more flows and / or blocks Figure 1 one or more blocks.

[0077] These computer program instructions can also be loaded onto a computer or other programmable data processing apparatus, so that a series of operation steps are performed on the computer or other programmable apparatus to produce a computer-implemented process, thereby the instructions executed on the computer or other programmable apparatus provide steps for implementing the functions specified in one process or multiple processes and / or one block or multiple blocks in the flow Figure 1 one process or multiple processes and / or Figure 1 steps of the functions specified in one block or multiple blocks.

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

Claims

1. A method for rendering an organizational structure, characterized in that, It includes the following steps: Convert the organizational structure data into a linked data structure and cache it to obtain cached data; Calculate visible area step: Determine the start index and end index of the current visible area based on the current scrolled distance, single node height, visible area height, and current total number of items within the visible area; Determine the nodes to be rendered between the start index and the end index from the cached data; Add the nodes to be rendered to the DOM tree of the page; In response to a configuration operation on a selected node in the page, return the calculate visible area step.

2. The method according to claim 1, characterized in that, The converting the organizational structure data into a linked data structure and caching it to obtain cached data includes: Traverse the organizational structure data in a tree structure level by level and convert it into a linked data structure for caching to obtain cached data; wherein, the parentId attribute value of a child node is the ID of the parent node.

3. The method according to claim 1, characterized in that, The determining the start index and end index of the current visible area based on the current scrolled distance, single node height, visible area height, and current total number of items within the visible area includes: Determine the start index based on the current scrolled distance and single node height; Determine the end index based on the current scrolled distance, single node height, visible area height, and current total number of items within the visible area.

4. The method according to claim 1, characterized in that, The responding to a configuration operation on a selected node in the page and returning the calculate visible area step includes: In response to an expand operation, collapse operation, drag operation, add operation, or delete operation on a selected node in the page, return the calculate visible area step.

5. An apparatus for rendering an organizational structure, characterized in that, It includes: A preprocessing module for converting the organizational structure data into a linked data structure and caching it to obtain cached data; A calculation module for calculating the visible area step: determining the start index and end index of the current visible area based on the current scrolled distance, single node height, visible area height, and current total number of items within the visible area; A determination module for determining the nodes to be rendered between the start index and the end index from the cached data; A rendering module for adding the nodes to be rendered to the DOM tree of the page; A monitoring module for responding to a configuration operation on a selected node in the page and returning the calculate visible area step.

6. The apparatus according to claim 5, characterized in that, The converting the organizational structure data into a linked data structure and caching it to obtain cached data includes: Traverse the organizational structure data in a tree structure level by level and convert it into a linked data structure for caching to obtain cached data; wherein, the parentId attribute value of a child node is the ID of the parent node.

7. The apparatus according to claim 6, characterized in that, The determining the start index and end index of the current visible area based on the current scrolled distance, single node height, visible area height, and current total number of items within the visible area includes: Determine the start index based on the current scrolled distance and single node height; Determine the end index based on the current scrolled distance, single node height, visible area height, and current total number of items within the visible area.

8. The apparatus according to claim 5, characterized in that, The responding to a configuration operation on a selected node in the page and returning the calculate visible area step includes: Return the step of calculating the visible area in response to an expand operation, a collapse operation, a drag operation, an addition operation, or a deletion operation on the selected node in the page.

9. An electronic device, comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the organizational structure rendering method according to any one of claims 1 to 4.

10. A computer-readable storage medium, on which a computer program is stored, characterized in that, When the computer program is executed by a processor, it implements the organizational structure rendering method according to any one of claims 1 to 4.

Images