Virtual list-oriented component state management method and device, electronic equipment and medium

Abstract

The invention provides a virtual list-oriented component state management method and apparatus, an electronic device and a medium, and the method comprises the steps of obtaining a data item set in a current visual area of a virtual list in response to a rollback operation of a user on the virtual list; based on the data item set, querying the selected state of each data item in the data item set in a pre-constructed global selected state mapping table; and based on the selected state of each data item in the data item set, displaying the display state of the check box component corresponding to each data item. By stripping the state from the DOM easy to destroy and persisting the state in the independent global mapping table, the check box component can accurately redisplay the historical state no matter how the virtual list rolls and how the component is reconstructed, and the accuracy of the front-end application in processing large-scale selectable data is improved.

Description

Technical Field

[0001] This invention relates to the field of Web front-end technology, and more specifically, to a method, apparatus, electronic device, and medium for managing the state of components in a virtual list. Background Technology

[0002] With the rapid development of front-end technologies, especially the widespread adoption of single-page applications (SPAs), the amount of data that web applications need to process is increasing daily. To improve performance when rendering large-scale data, virtual list technology has become a key solution for front-end performance optimization. This technology dynamically calculates the visible area and renders only a small number of DOM elements currently visible to the user, thereby significantly reducing memory usage and rendering overhead, and ensuring smooth page interaction.

[0003] When a virtual list scrolls, it dynamically destroys DOM nodes that have left the visible area and their associated UI component instances. For interactive components such as Checkboxes and Radio buttons that maintain their own selected state, this state is permanently lost when the component instance is destroyed. When the user scrolls backward and the corresponding data item is re-rendered, the component will be presented in its initial state, rendering the user's previous actions invalid. This directly undermines the correctness and data consistency of core business functions such as forms and batch operations. Summary of the Invention

[0004] In view of this, the purpose of the present invention is to provide a component state management method, apparatus, electronic device and medium for virtual lists, so as to improve the accuracy of front-end applications when processing large-scale optional data.

[0005] Firstly, a component state management method for virtual lists is provided, including: In response to the user's rollback operation on the virtual list, obtain the set of data items within the currently visible area of ​​the virtual list; Based on the set of data items, the selection status of each data item in the set is queried in the pre-built global selection status mapping table; the global selection status mapping table is used to persistently store the selection status of all optional data items; the selection status includes two states: selected and unselected. Based on the selected state of each data item in the data item set, the display state of the checkbox component corresponding to each data item is displayed.

[0006] Optionally, in response to a user's rollback operation on the virtual list, obtaining the set of data items within the currently visible area of ​​the virtual list includes: In response to the user's scrollback operation on the virtual list, obtain the current scroll position and the preset number of renders per screen; Based on the current scroll position and the preset number of renders per screen, determine the index range of data items located within the current visible area of ​​the virtual list; Based on the data item index range, the corresponding data items are extracted from the original data source to form a set of data items within the current visible area.

[0007] Optionally, the method further includes: Based on the selection status of each data item in the data item set, the identifier of the selected data item is determined by the selection status; Generate a view state cache array based on the identifier of the selected data item; Use the view state cache array to determine the display state of the target UI component corresponding to each data item in the view state cache array.

[0008] Optionally, the target UI component includes a component that allows selection of the entire visible area; using a view state cache array, determining the display state of the target UI component corresponding to each data item in the view state cache array includes: Based on the identifiers of each data item in the current view state cache array, query the corresponding selected state in the global selected state mapping table; If all data items in the view state cache array are selected, then the select all component in the visible area will be rendered as selected. If some data items in the view state cache array are selected and some are not selected, then the select all component in the visible area will be rendered as half-selected. If all data items in the view state cache array are unselected, then the select all component in the visible area will be rendered as unselected.

[0009] Optionally, the method further includes: In response to a user's click on any checkbox component within the currently visible area, obtain the identifier of the corresponding data item for that checkbox component and its updated selection status; Based on the identifier and selection status, update the selection status of the corresponding data item in the global selection status mapping table; Update the view state cache array based on the updated global selected state mapping table and the set of data items in the current visible area.

[0010] Optionally, in response to a user's click on any checkbox component within the currently visible area, obtaining the identifier of the corresponding data item and the updated selected state of that checkbox component further includes: In response to a user's click on any checkbox component, determine whether the data item corresponding to that checkbox component contains a set of sub-items; If a sub-item set is included, then all data items in that sub-item set are retrieved. Based on the identifiers of all data items in the sub-item set, batch update the selection status of the corresponding items in the global selection status mapping table.

[0011] Optionally, the method further includes: In response to a page unload event or a user save command, the global selected state mapping table is serialized into a string and stored in the browser's local storage; When the page reloads, the string is read from the browser's local storage and deserialized to restore the global selected state mapping table; After the restoration is complete, when the virtual list is rolled back, the display status of each checkbox component is automatically displayed based on the restored global selected state mapping table.

[0012] Secondly, a component state management device for virtual lists is provided, comprising: The acquisition unit is used to acquire the set of data items in the currently visible area of ​​the virtual list in response to the user's rollback operation on the virtual list; The query unit is used to query the selection status of each data item in the data item set based on the data item set in a pre-built global selection status mapping table; the global selection status mapping table is used to persistently store the selection status of all optional data items; the selection status includes two states: selected and unselected. The echo unit is used to echo the display status of the checkbox component corresponding to each data item based on the selected status of each data item in the data item set.

[0013] Thirdly, an electronic device is provided, including a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus; Memory, used to store computer programs; A processor, when executing a program stored in memory, implements any of the methods of the first aspect.

[0014] Fourthly, a computer-readable storage medium is provided, wherein a computer program is stored therein, and when the computer program is executed by a processor, it implements any of the methods of the first aspect.

[0015] This invention provides a component state management method, apparatus, electronic device, and medium for virtual lists. In response to a user's scrollback operation on the virtual list, it obtains a set of data items within the currently visible area of ​​the virtual list; based on the data item set, it queries a pre-built global selection state mapping table to determine the selection state of each data item; and based on the selection state of each data item, it displays the display state of the checkbox component corresponding to each data item. This invention, by separating the state from the easily destroyed DOM and persisting it in an independent global mapping table, ensures that the checkbox component can accurately display its historical state regardless of how the virtual list scrolls or how the component is rebuilt.

[0016] To make the above-mentioned objects, features and advantages of the present invention more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

[0017] To more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of the present invention and should not be regarded as a limitation on the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0018] Figure 1 A flowchart of a component state management method for virtual lists provided by an embodiment of the present invention is shown; Figure 2 A flowchart of another component state management method for virtual lists provided by an embodiment of the present invention is shown; Figure 3 This diagram illustrates the structure of a component state management device for virtual lists provided in an embodiment of the present invention. Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of the present invention is shown. Detailed Implementation

[0019] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. The components of the embodiments of the present invention described and shown in the accompanying drawings can generally be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present invention provided in the accompanying drawings is not intended to limit the scope of the claimed invention, but merely to illustrate selected embodiments of the invention. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without inventive effort are within the scope of protection of the present invention.

[0020] Considering that virtual lists dynamically destroy DOM nodes and their associated UI component instances that have left the visible area when scrolling, interactive components such as Checkboxes and Radios, which maintain their own selected state, will have that state permanently lost when the component instance is destroyed. When the user scrolls backward and the corresponding data item is re-rendered, the component will be presented in its initial state, rendering the user's previous actions invalid. This directly undermines the correctness and data consistency of core business functions such as forms and batch operations.

[0021] Based on this, embodiments of the present invention provide a component state management method and apparatus for virtual lists, which are described below through embodiments.

[0022] This invention provides a component state management method for virtual lists, such as... Figure 1 As shown, it includes the following steps: Step S101: In response to the user's rollback operation on the virtual list, obtain the set of data items in the currently visible area of ​​the virtual list.

[0023] In this step, the rollback operation refers to the user's upward scrolling back operation on the virtual list.

[0024] In one example, a virtual list can capture such operations by listening to native scroll events.

[0025] Step S102: Based on the data item set, query the selection status of each data item in the data item set in the pre-built global selection status mapping table.

[0026] At this step, the global selection state mapping table allCheckedMap serves as the sole data source to persistently store the selection state of all optional data items. Here, the selection state is a boolean identifier containing two mutually exclusive states: "selected" (true) and "not selected" (false), to accurately reflect the interaction result of each item.

[0027] In this embodiment of the invention, the construction process of the global selection state mapping table is as follows: during the application initialization phase, an empty hash table (such as a Map or a regular object in JavaScript) is created, where the key is the unique business identifier of the data item (such as employee ID emp_001), and the value is the corresponding boolean selection state.

[0028] It should be noted that this mapping table is independent of the lifecycle of any UI component, so even if the corresponding checkbox DOM node is destroyed, its state information is still safely stored in memory.

[0029] For example, if the global mapping table is {emp_001:true,emp_002:false,emp_003:true}, when step S101 obtains the data item set [emp_001,emp_003], this step will query and obtain their selected states as true and true, respectively. This mechanism ensures the accuracy and efficiency of state query.

[0030] In addition, because the state is stored independently in the form of a hash table and is only queried on demand when the component is mounted and updated directly when the user interacts, the whole process does not participate in the core scroll-render loop of the virtual list, nor does it introduce full data operations. Therefore, there is no observable negative impact on system performance, achieving zero-overhead state management in an engineering sense.

[0031] Step S103: Based on the selection status of each data item in the data item set, display the display status of the checkbox component corresponding to each data item.

[0032] In this embodiment of the invention, when the virtual list creates (or reuses) a checkbox component instance for each item of data within the visible area, this echo operation is performed immediately.

[0033] Specifically, each checkbox component receives the unique identifier of its corresponding data item in its mounted lifecycle hook, and uses this identifier as the key to read the latest selected state from the global selected state map, and then sets its own checked property.

[0034] For example, for a data item identified as emp_001, its checkbox component will read true, thus appearing as checked on the page. Through this "mount-and-query" strategy, regardless of how the user scrolls the list, as long as the data item re-enters the visible area, its checkbox will always accurately restore to the state after the user's last action. This completely solves the problem of state loss caused by DOM destruction, achieving the technical effect of ensuring continuous user interaction and data accuracy.

[0035] This invention removes the state from the easily destroyed DOM and persists it in an independent global mapping table. No matter how the virtual list scrolls or how the component is rebuilt, the checkbox can accurately display the historical state, ensuring the integrity of the function and data and eliminating enterprise-level application risks such as missing submitted data due to state loss.

[0036] Based on the above embodiments, in response to the user's rollback operation on the virtual list, obtaining the set of data items within the currently visible area of ​​the virtual list includes: Step S101A: In response to the user's rollback operation on the virtual list, obtain the current scroll position and the preset number of renders per screen.

[0037] Continuing from the previous example, when the scroll event is triggered, the system will immediately read the scrollTop property value of the scroll container and accurately obtain the size and scroll offset of the scroll container through APIs such as getBoundingClientRect().

[0038] Step S101B: Determine the index range of data items located within the current visible area of ​​the virtual list based on the current scroll position and the preset number of renders per screen.

[0039] Using this information and the preset height of each item, mathematical calculations are performed to derive the precise data indices corresponding to the top and bottom of the visible area. For example, if the scroll container height is 800px and each item height is 40px, then the visible area can accommodate approximately 20 items; if the scroll offset is 2000px, then the starting index is approximately 2000 / 40=50, and the ending index is 50+20=70.

[0040] In this way, the system can accurately and efficiently locate the range of data that needs to be rendered, laying the foundation for subsequent state synchronization.

[0041] Step S101C: Based on the data item index range, extract the corresponding data items from the original data source to form a set of data items within the current visible area.

[0042] In this embodiment of the invention, the original data source is typically a complete, immutable array (such as allEmployees). The required data is efficiently extracted by slicing the array (such as allEmployees.slice(50,70)).

[0043] This step ensures that only a very small amount of data is passed to the rendering layer, greatly reducing the browser's rendering burden and allowing the list to maintain a smooth scrolling experience even when faced with massive amounts of data.

[0044] Based on the above embodiments, such as Figure 2 As shown, the method also includes: Step S104: Based on the selection status of each data item in the data item set, determine the identifier of the selected data item.

[0045] Step S105: Generate a view state cache array based on the identifier of the selected data item.

[0046] It should be noted that the view state cache array checkedList is not the source of the state, but a derived adapter that only applies to the current view context.

[0047] Specifically, after each change in the visible area, the system iterates through the current set of data items, filters out those items whose status is true in the global selection status mapping table, and collects their identifiers into a new array. This array is called checkedList.

[0048] Step S106: Use the view state cache array to determine the display state of the target UI component corresponding to each data item in the view state cache array.

[0049] In this step, the target UI components, such as select all or delete components, are used for user interaction with data items. This array is specifically used to drive aggregated UI components that need to know the "selection status in the current view".

[0050] For example, a "Delete Selected Items" button can be enabled or disabled based on checkedList.length > 0; a "X Items Selected" label can directly display the value of checkedList.length.

[0051] In this way, complex group-level UI logic is simplified, and the need to traverse the entire dataset, which may contain tens of thousands of records, is avoided during each update, significantly improving the interface's responsiveness and interaction efficiency.

[0052] To ensure consistency of state during scrolling, when the user scrolls the list, causing data items in the original visible area A to be destroyed and data items in the new visible area B to be rendered, the selected data items in area A have their selection state safely saved in allCheckedMap and will not be lost due to DOM destruction.

[0053] When rendering region B, the selection state of each checkbox is read from allCheckedMap, thus correctly displaying its historical selection state. The checkedList array is automatically updated via computed properties, always reflecting the selected items within the currently visible area.

[0054] In this way, when scrolling makes area A visible again, the state of its corresponding Checkbox is read from allCheckedMap and displayed correctly. The checkedList will also contain these items due to the recalculation of computed properties, thus achieving synchronous updates of the internal state of the CheckboxGroup component.

[0055] This embodiment introduces a view state cache array as a lightweight adapter to accurately map the global state to the format required by UI components (such as an ID array), achieving seamless and non-intrusive integration with mainstream UI component libraries (such as ant-design-vueCheckboxGroup). Developers do not need to modify the component library source code; they can simply organize the state according to this pattern to achieve compatibility, significantly reducing integration costs.

[0056] Based on the above embodiments, the target UI component includes a component that allows selection of the entire visible area; determining the display state of the target UI component corresponding to each data item in the view state cache array using the view state cache array includes: Step S106A: Based on the identifiers of each data item in the current view state cache array, query the corresponding selected state in the global selected state mapping table.

[0057] Step S106B: If all data items in the view state cache array are selected, then render the select all component in the visible area as selected.

[0058] For example, suppose there are 5 options in the currently visible area, labeled [A,B,C,D,E]. If the checkedList is [A,B,C,D,E], then step S106B takes effect, and the select all button is displayed as fully checked; Step S106C: If some data items in the view state cache array are selected and some are not selected, then render the select all component in the visible area as half-selected.

[0059] Continuing from the previous example, if checkedList is [A,C], then step S106C takes effect, and the select all button is displayed as a half selection.

[0060] Step S106D: If all data items in the view state cache array are unselected, then render the select all component in the visible area as unselected.

[0061] Continuing from the previous example, if checkedList is an empty array, then step S106D will take effect, and the select all button will be displayed as unselected.

[0062] In this embodiment of the invention, although step S106A mentions querying the global mapping table again, in the actual optimized implementation, since checkedList itself is filtered from the global mapping table, the determination of the selected state can be directly completed by comparing checkedList.length with "the total number of selectable items in the current visible area", without the need for a second query. This design enables the state of the selected control to reflect the current view's selection status in real time and accurately, providing users with clear and intuitive operation feedback, greatly enhancing the usability of batch operations and the user experience.

[0063] Based on the above embodiments, the method further includes: Step S107: In response to the user's click operation on any checkbox component in the current visible area, obtain the identifier of the corresponding data item of the checkbox component and the updated selection state.

[0064] This embodiment represents the key write path in the entire state management closed loop. When a user clicks a checkbox, its bound event handler captures the action and immediately submits the new selected state along with the data item identifier.

[0065] S108: Based on the identifier and selection status, update the selection status of the corresponding data item in the global selection status mapping table.

[0066] Perform an atomic update on the globally selected state map to ensure real-time synchronization of the state source.

[0067] S109: Update the view state cache array based on the updated global selected state mapping table and the set of data items in the current visible area.

[0068] To ensure immediate feedback from the group-level UI, the system will immediately re-execute the logic in the above embodiment, that is, generate a brand new checkedList based on the current visual dataset and the newly updated global mapping table.

[0069] For example, if a user unchecks emp_001, the global mapping table is updated to {emp_001:false,...}, and then checkedList will automatically remove emp_001.

[0070] This series of interconnected operations ensures completeness, consistency, and efficiency from individual component operations to global state and group-level UI feedback, making the interface state that users see at any time real and reliable.

[0071] Based on the above embodiments, in response to a user's click operation on any checkbox component within the currently visible area, obtaining the identifier of the corresponding data item and the updated selection state of the checkbox component further includes: Step S110: In response to the user's click operation on any checkbox component, determine whether the data item corresponding to the checkbox component contains a set of sub-items.

[0072] It can be explained that this embodiment supports tree-like data structures in the front-end page.

[0073] In one example, when a parent node (such as "Sales Department") is clicked, the system first checks whether the children field exists in its data model.

[0074] Step S111: If a sub-item set is included, then obtain all data items in that sub-item set.

[0075] If it exists, recursively traverse the field and collect all its leaf nodes (i.e., selectable data items).

[0076] Step S112: Based on the identifiers of all data items in the sub-item set, batch update the selection status of the corresponding items in the global selection status mapping table.

[0077] Next, the system treats the identifiers of these leaf nodes as a batch and sets them to the same target state as the parent node in the global selection state mapping table. For example, clicking "Sales Department" and selecting it will trigger the batch selection of all its employees (such as emp_001, emp_002, etc.).

[0078] This mechanism enables interaction between parent and child nodes, greatly simplifying the user's workflow when processing hierarchical data and improving interaction efficiency in scenarios such as organizational structure and file directories.

[0079] Based on the above embodiments, the method further includes: Step S113: In response to a page unload event or a user save command, serialize the global selected state mapping table into a string and store it in the browser's local storage.

[0080] In this embodiment of the invention, the system listens for page lifecycle events such as beforeunload, or responds to explicit user commands such as "save" or "save draft", converts the global mapping table in memory (such as {emp_001:true,emp_002:false}) into a string using JSON.stringify(), and persists it to the user's browser by calling localStorage.setItem().

[0081] Step S114: When the page is reloaded, read the string from the browser's local storage and deserialize it to restore the global selected state mapping table.

[0082] When a user visits the same page again, the system will execute localStorage.getItem() and JSON.parse() during the initialization phase to reload the previously saved state into memory.

[0083] Step S115: After the restoration is completed, when the virtual list is rolled back, the display status of each checkbox component is automatically displayed based on the restored global selected state mapping table.

[0084] After that, no matter how the user scrolls through the virtual list, all checkboxes will be displayed according to this restored state.

[0085] This feature is crucial for complex tasks that require long operating times or may be interrupted unexpectedly (such as approving large amounts of data). It effectively prevents the loss of users' work and significantly improves the robustness of the application and user satisfaction.

[0086] Based on the same inventive concept, embodiments of the present invention provide a component state management device for virtual lists, such as... Figure 3 As shown, it includes: The acquisition unit 301 is used to acquire the set of data items in the currently visible area of ​​the virtual list in response to the user's rollback operation on the virtual list.

[0087] The query unit 302 is used to query the selection status of each data item in the data item set in a pre-built global selection status mapping table based on the data item set.

[0088] The global selection status mapping table is used to persistently store the selection status of all optional data items; the selection status includes two states: selected and unselected. The echo unit 303 is used to echo the display status of the checkbox component corresponding to each data item based on the selection status of each data item in the data item set.

[0089] Based on the same technical concept, embodiments of the present invention also provide an electronic device, such as... Figure 4 As shown, it includes a processor 401, a communication interface 402, a memory 403, and a communication bus 404, wherein the processor 401, the communication interface 402, and the memory 403 communicate with each other through the communication bus 404.

[0090] Memory 403 is used to store computer programs; The processor 401, when executing a program stored in the memory 403, implements the steps of a component state management method oriented towards a virtual list.

[0091] The communication bus mentioned in the above electronic devices can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. This communication bus can be divided into address bus, data bus, control bus, etc. For ease of illustration, only one thick line is used to represent it in the diagram, but this does not mean that there is only one bus or one type of bus.

[0092] The communication interface is used for communication between the aforementioned electronic devices and other devices.

[0093] The memory may include random access memory (RAM) or non-volatile memory (NVM), such as at least one disk storage device. Optionally, the memory may also be at least one storage device located remotely from the aforementioned processor.

[0094] The processors mentioned above can be general-purpose processors, including central processing units (CPUs), network processors (NPs), etc.; they can also be digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0095] In another embodiment of the present invention, a computer-readable storage medium is also provided, which stores a computer program that, when executed by a processor, implements the steps of any of the above-described component state management methods for virtual lists. Specific implementation details can be found in the method embodiments and will not be repeated here.

[0096] The device for component state management for virtual lists provided in this embodiment of the invention can be specific hardware on a device or software or firmware installed on the device. The implementation principle and technical effects of the device provided in this embodiment of the invention are the same as those in the foregoing method embodiments. For the sake of brevity, any parts not mentioned in the device embodiments can be referred to the corresponding content in the foregoing method embodiments. Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can all be referred to the corresponding processes in the above method embodiments, and will not be repeated here.

[0097] In the embodiments provided by this invention, it should be understood that the disclosed apparatus and method can be implemented in other ways. The apparatus embodiments described above are merely illustrative. For example, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. Furthermore, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Additionally, the displayed or discussed mutual couplings, direct couplings, or communication connections may be through some communication interfaces; indirect couplings or communication connections between devices or units may be electrical, mechanical, or other forms.

[0098] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0099] In addition, the functional units in the embodiments provided by the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0100] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this invention, essentially, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0101] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures. In addition, the terms "first", "second", "third", etc. are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.

[0102] Finally, it should be noted that the above-described embodiments are merely specific implementations of the present invention, used to illustrate the technical solutions of the present invention, and not to limit it. The scope of protection of the present invention is not limited thereto. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments within the technical scope disclosed in the present invention, or make equivalent substitutions for some of the technical features; and these modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention. All should be covered within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. A component state management method for virtual lists, characterized in that, include: In response to a user's rollback operation on the virtual list, obtain the set of data items within the currently visible area of ​​the virtual list; Based on the set of data items, the selection status of each data item in the set of data items is queried in a pre-built global selection status mapping table; the global selection status mapping table is used to persistently store the selection status of all optional data items; the selection status includes two states: selected and unselected. Based on the selected state of each data item in the data item set, the display state of the checkbox component corresponding to each data item is displayed.

2. The method according to claim 1, characterized in that, The step of obtaining the set of data items within the currently visible area of ​​the virtual list in response to a user's rollback operation includes: In response to the user's scrollback operation on the virtual list, obtain the current scroll position and the preset number of renders per screen; Based on the current scroll position and the preset number of renders per screen, determine the index range of data items located within the current visible area of ​​the virtual list; Based on the data item index range, the corresponding data items are extracted from the original data source to form a set of data items within the current visible area.

3. The method according to claim 1, characterized in that, The method further includes: Based on the selection status of each data item in the data item set, the identifier of the selected data item is determined; A view state cache array is generated based on the identifier of the selected data item. Using the view state cache array, determine the display state of the target UI component corresponding to each data item in the view state cache array.

4. The method according to claim 3, characterized in that, The target UI component includes a component that allows selection of the entire visible area; determining the display state of the target UI component corresponding to each data item in the view state cache array using the view state cache array includes: Based on the identifiers of each data item in the current view state cache array, the corresponding selection state is queried in the global selection state mapping table; If all data items in the view state cache array are selected, then the select all component of the visible area is rendered as selected. If some data items in the view state cache array are selected and some are not selected, then the select all component in the visible area will be rendered as a half-selected state. If all data items in the view state cache array are unselected, then the select all component in the visible area will be rendered as unselected.

5. The method according to claim 3, characterized in that, The method further includes: In response to a user's click on any checkbox component within the currently visible area, the identifier of the corresponding data item and its updated selection status are obtained. Based on the identifier and selection status, update the selection status of the corresponding data item in the global selection status mapping table; The view state cache array is updated based on the updated global selection state mapping table and the set of data items within the currently visible area.

6. The method according to claim 5, characterized in that, The step of responding to a user's click on any checkbox component within the currently visible area and obtaining the identifier of the corresponding data item and the updated selection state of that checkbox component further includes: In response to a user's click on any checkbox component, determine whether the data item corresponding to that checkbox component contains a set of sub-items; If a sub-item set is included, then all data items in that sub-item set are retrieved. Based on the identifiers of all data items in the sub-item set, the selection status of the corresponding items in the global selection status mapping table is updated in batches.

7. The method according to claim 1, characterized in that, The method further includes: In response to a page unload event or a user save command, the global selected state mapping table is serialized into a string and stored in the browser's local storage; When the page is reloaded, the string is read from the browser's local storage and deserialized to restore the global selected state mapping table; After the restoration is complete, when the virtual list is rolled back, the display status of each checkbox component is automatically displayed based on the restored global selected state mapping table.

8. A component state management device for virtual lists, characterized in that, include: The acquisition unit is used to acquire the set of data items in the currently visible area of ​​the virtual list in response to the user's rollback operation on the virtual list; The query unit is used to query the selection status of each data item in the data item set in a pre-built global selection status mapping table based on the data item set; the global selection status mapping table is used to persistently store the selection status of all optional data items; the selection status includes two states: selected and unselected. The echo unit is used to echo the display status of the checkbox component corresponding to each data item based on the selection status of each data item in the data item set.

9. An electronic device, characterized in that, It includes a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus; The memory is used to store computer programs; When the processor executes the program stored in the memory, it implements the method described in any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the method described in any one of claims 1-7.

Images