Merging cell-based adsorption interaction method and device, equipment and storage medium

Abstract

Embodiments of the present application provide a kind of based on merging cell's adsorption interaction method, device, equipment and storage medium.The method comprises: completing cell merging in table component and embedding independent subassembly;Double-layer structure is built inside subassembly, transparent placeholder layer maintains original size of cell, and display layer is used for content display;Scrolling event is listened to, and accurate positioning cell that should be adsorbed is judged by double boundary;Dynamic generation includes positioning information and custom style adsorption instruction and is issued;Subassembly switches display layer to fixed positioning, and according to instruction rendering makes cell float and adsorb in the specified position of viewport.The scheme avoids layout jitter by double-layer placeholder, double boundary judgment ensures accurate adsorption, state separation supports dynamic style customization, unified logic realizes two-way adsorption, and significantly improves complex table interaction experience.

Description

Technical Field

[0001] This application relates to the field of front-end table interaction enhancement technology, and in particular to a snap-in interaction method, apparatus, device and storage medium based on merged cells. Background Technology

[0002] With the deepening of enterprise informatization, complex web-based table systems are increasingly widely used in ERP, MES, financial data analysis, and other fields. To meet the needs of multi-dimensional data display, table components generally support cell merging, achieving hierarchical data presentation through horizontal and vertical merging. Meanwhile, to improve user experience, existing table components typically offer snapping functionality, keeping specific rows, columns, or cells visible while scrolling. Currently, mainstream table components offer varying degrees of snapping capabilities, primarily through CSS stylesheet-based implementations and JavaScript-based scroll-sensing implementations.

[0003] In the field of table snapping interaction, existing technologies mainly include two implementation methods: declarative snapping based on style sheets and imperative snapping based on scroll listeners. For cell merging, existing table components provide merging methods to support the display of multiple merged cells. Regarding the layout changes caused by elements being removed from the document flow during snapping, some solutions maintain display stability by recalculating their positions.

[0004] However, the above-mentioned adsorption effect is limited by the parent container boundary and cannot achieve continuous adsorption without the container; the adsorption process causes layout jitter due to the element leaving the document flow, and the existing stable solution has a large performance overhead; it lacks the ability to customize styles in the adsorbed state; the adsorption release process is abrupt and has no smooth transition; the vertical and horizontal adsorption achieves logical separation and has low reusability. Summary of the Invention

[0005] This application provides a method, apparatus, device, and storage medium for snapping interaction based on merged cells, in order to solve the technical problem of how to achieve bidirectional scrolling snapping interaction that can be independent of the parent container, supports dynamic style customization, and has a stable layout in the scenario of merged cells.

[0006] In a first aspect, embodiments of this application provide a snap-in interaction method based on merged cells, including:

[0007] Merge the target cells in the table component and embed an independent child component at the cell rendering position of each merged cell that needs to be snapped in.

[0008] A two-layer structure is constructed within the independent sub-component. The two-layer structure includes a first container layer and a second container layer. The first container layer is displayed transparently to maintain the original size of the cell, and the second container layer is stacked on top of the first container layer to display the cell content.

[0009] Listen to the scrolling event of the table scrolling container, obtain the position information of each merged cell in real time, and determine whether there are merged cells that meet the adsorption conditions based on the comparison result of the position information and the preset adsorption baseline.

[0010] For each merged cell that meets the adsorption conditions, an adsorption command containing the location information of the merged cell and a custom style is dynamically generated, and the adsorption command is sent to the independent sub-component corresponding to the merged cell.

[0011] Based on the snap command, the independent sub-component switches the positioning mode of the second container layer in the independent sub-component to fixed positioning, and renders according to the positioning information and custom style in the snap command, so that the merged cell floats and snaps to the specified position in the viewport.

[0012] In one possible implementation, both the first container layer and the second container layer are stacked using absolute positioning relative to the parent cell, and the first container layer is visually hidden by setting its transparency to zero. The physical size occupied by the first container layer is used to maintain the height and width of the parent cell when the second container layer is removed for fixed positioning.

[0013] In one possible implementation, the monitoring of the scrolling event of the table scrolling container, the real-time acquisition of the position information of each merged cell, and the determination of whether there are currently merged cells that meet the adsorption conditions based on the comparison result of the position information and the preset adsorption baseline, include:

[0014] For each merged cell, obtain a first distance from the top of the merged cell relative to the viewport, and a second distance from the bottom of the merged cell relative to the viewport;

[0015] If the first distance is less than or equal to the distance between the top of the table container and the viewport, and the second distance is greater than or equal to the distance between the top of the table container and the viewport, then the merged cell is determined to enter the snapping state.

[0016] In one possible implementation, the snap command includes: a unique identifier of the merged cell corresponding to the snap command, the left position and width of the merged cell relative to the viewport, the top position of the snap baseline, and user-defined style attributes.

[0017] In one possible implementation, the method further includes:

[0018] The adsorption command is managed based on a responsive state object, where the responsive state object uses column identifiers as keys and the unique identifier and custom style of the merged cell corresponding to the adsorption command as values.

[0019] When the scrolling judgment result changes, the responsive state object is updated. Each independent sub-component automatically responds to the snapping state switch by listening to the changes in the responsive state object.

[0020] In one possible implementation, the method further includes:

[0021] For each merged cell, during the scrolling monitoring process, the distance between the bottom of the merged cell and the adsorption baseline is calculated. When the distance is less than or equal to zero, the merged cell is determined to be in an unadsorbed state.

[0022] Generate a release command corresponding to the merged cell and send the release command to the independent sub-component corresponding to the merged cell;

[0023] The independent sub-component sets the positioning mode of the second container layer to absolute positioning relative to the parent cell according to the release instruction, and sets the bottom alignment attribute, so that the second container layer moves upward synchronously with the parent cell until it is completely removed from the viewport.

[0024] In one possible implementation, for the snapping of horizontally merged cells, the distance of the cell's left side relative to the viewport is compared with the left baseline of the table container, and the distance of the cell's right side relative to the viewport is compared with the left baseline of the table container, as the basis for determining whether the cell meets the snapping conditions.

[0025] Secondly, embodiments of this application provide a snap-in interaction device based on merged cells, comprising:

[0026] The merge insertion module is used to merge target cells in a table component and embed independent sub-components at the cell rendering position of each merged cell that needs to be snapped in.

[0027] A building module is used to build a two-layer structure within the independent sub-component. The two-layer structure includes a first container layer and a second container layer. The first container layer is transparently displayed to maintain the original size of the cell, and the second container layer is stacked on top of the first container layer to display the cell content.

[0028] The monitoring module is used to monitor the scrolling events of the table scrolling container, obtain the position information of each merged cell in real time, and determine whether there are merged cells that meet the adsorption conditions based on the comparison results of the position information and the preset adsorption baseline.

[0029] The dynamic module is used to dynamically generate an adsorption instruction containing the positioning information and custom style of the merged cell for each merged cell that meets the adsorption conditions, and to send the adsorption instruction to the independent sub-component corresponding to the merged cell.

[0030] The rendering module is used to switch the positioning mode of the second container layer in the independent sub-component to fixed positioning based on the snapping command, and to render according to the positioning information and custom style in the snapping command, so that the merged cell floats and snaps to the specified position of the viewport.

[0031] In one possible implementation, both the first container layer and the second container layer are stacked using absolute positioning relative to the parent cell, and the first container layer is visually hidden by setting its transparency to zero. The physical size occupied by the first container layer is used to maintain the height and width of the parent cell when the second container layer is removed for fixed positioning.

[0032] In one possible implementation, the monitoring module includes:

[0033] For each merged cell, obtain a first distance from the top of the merged cell relative to the viewport, and a second distance from the bottom of the merged cell relative to the viewport;

[0034] If the first distance is less than or equal to the distance between the top of the table container and the viewport, and the second distance is greater than or equal to the distance between the top of the table container and the viewport, then the merged cell is determined to enter the snapping state.

[0035] In one possible implementation, the snap command includes: a unique identifier of the merged cell corresponding to the snap command, the left position and width of the merged cell relative to the viewport, the top position of the snap baseline, and user-defined style attributes.

[0036] In one possible implementation, the device further includes:

[0037] The management module is used to manage the adsorption command based on a responsive state object, wherein the responsive state object uses column identifier as the key and the unique identifier and custom style of the merged cell corresponding to the adsorption command as the value;

[0038] The switching module is used to update the responsive state object when the scrolling judgment result changes. Each independent sub-component automatically responds to the snapping state switching by listening to the changes in the responsive state object.

[0039] In one possible implementation, the device further includes:

[0040] The determination module is used to calculate the distance between the bottom of the merged cell and the adsorption baseline during the scrolling monitoring process for each merged cell. When the distance is less than or equal to zero, the merged cell is determined to be in a de-adsorption state.

[0041] The generation module is used to generate a release instruction corresponding to the merged cell and send the release instruction to the independent sub-component corresponding to the merged cell;

[0042] The setting module is used by the independent sub-component to set the positioning mode of the second container layer to absolute positioning relative to the parent cell according to the release instruction, and to set the bottom alignment attribute, so that the second container layer moves upward synchronously with the parent cell until it is completely removed from the viewport.

[0043] In one possible implementation, for the snapping of horizontally merged cells, the distance of the cell's left side relative to the viewport is compared with the left baseline of the table container, and the distance of the cell's right side relative to the viewport is compared with the left baseline of the table container, as the basis for determining whether the cell meets the snapping conditions.

[0044] Thirdly, embodiments of this application provide an electronic device, including: a memory and a processor;

[0045] The memory stores computer-executed instructions;

[0046] The processor executes computer execution instructions stored in the memory, causing the processor to perform the first aspect and / or various possible implementations of the first aspect as described above.

[0047] Fourthly, embodiments of this application provide a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, are used to implement the first aspect and / or various possible implementations of the first aspect.

[0048] Fifthly, embodiments of this application provide a computer program product, including a computer program that, when executed by a processor, implements the first aspect and / or various possible implementations of the first aspect.

[0049] The snap-in interaction method, apparatus, device, and storage medium based on merged cells provided in this application merge target cells in a table component and embed an independent sub-component at the cell rendering position of each merged cell that needs to be snapped in. A two-layer structure is built inside the independent sub-component. The scrolling event of the table scrolling container is listened to, and the position information of each merged cell is obtained in real time. Based on the comparison result of the position information with the preset snap-in baseline, it is determined whether there is a merged cell that meets the snap-in conditions. For each merged cell that meets the snap-in conditions, a snap-in command containing the positioning information of the merged cell and a custom style is dynamically generated and sent to the independent sub-component corresponding to the merged cell. Based on the snap-in command, the independent sub-component switches the positioning mode of the second container layer in the independent sub-component to fixed positioning and renders according to the positioning information and custom style in the snap-in command, so that the merged cell floats and snaps in the specified position of the viewport. The above method maintains the size of the parent cell through a transparent placeholder layer, achieving fixed positioning and snapping while avoiding layout jitter and eliminating the need for a complete redraw; dual boundary judgment accurately locates the cell that is hitting the baseline, ensuring that at most one cell in the same column is snapped, and the judgment logic is rigorous and reliable; the responsive state object separates which cell is snapped and how it is displayed, supports dynamic input of custom styles, and meets the business's visual differentiation needs for snapping status; the unified judgment logic supports snapping in both vertical and horizontal directions, resulting in high code reusability and low maintenance costs. Attached Figure Description

[0050] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0051] Figure 1 A flowchart illustrating the snap-in interaction method based on merged cells provided in this application. Figure 1 ;

[0052] Figure 2 A flowchart illustrating the snap-in interaction method based on merged cells provided in this application. Figure 2 ;

[0053] Figure 3 A flowchart illustrating the snap-in interaction method based on merged cells provided in this application. Figure 3 ;

[0054] Figure 4 A flowchart illustrating the snap-in interaction method based on merged cells provided in this application. Figure 4 ;

[0055] Figure 5 A schematic diagram of the structure of the adsorption interaction device based on merged cells provided in this application;

[0056] Figure 6 A schematic diagram of the structure of the electronic device provided in this application.

[0057] The accompanying drawings illustrate specific embodiments of this application, which will be described in more detail below. These drawings and descriptions are not intended to limit the scope of the concept in any way, but rather to illustrate the concept of this application to those skilled in the art through reference to particular embodiments. Detailed Implementation

[0058] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0059] In web front-end development, table components are widely used in data display scenarios, especially when it's necessary to merge duplicate or related data within a table, making cell merging a critical requirement. For example, in scenarios such as financial statements, project management, and sales data statistics, users often need to merge cells to categorize data across rows and columns (e.g., merging multiple sub-departments within the same department) to improve data readability. However, when table content exceeds the visible area and requires scrolling, the user's need for continuous visibility of key merged cells increases significantly. For instance, in financial statements, users may need to consistently see key merged cells such as "Quarterly Summary" or "Department Name" during scrolling to quickly locate data relationships. While existing table components support cell merging, their sticky functionality (keeping key cells fixed during scrolling) has significant limitations: firstly, the traditional CSS `position: sticky` property relies on the parent scroll container, and the sticky effect fails when the parent element scrolls out of the viewport; secondly, style customization is limited, failing to meet the personalized needs of business scenarios for sticky cell styles (such as color, border, and background). Therefore, there is an urgent need for a table processing method that can achieve cross-parent container snapping in complex scrolling scenarios and support custom styles, in order to improve user experience and data interaction efficiency.

[0060] Most mainstream open-source spreadsheet components currently support basic cell merging functionality, but their snapping functionality suffers from the following technical bottlenecks:

[0061] Dependence on a parent scrolling container: The existing sticky functionality is mainly implemented using the CSS property `position: sticky`. This property requires the element's parent container to support scrolling (e.g., `.el-scrollbar__wrap`), and the sticky area is limited to inside the parent container. When the user scrolls beyond the parent container's range, the sticky effect immediately fails, causing key cells to frequently disappear during scrolling.

[0062] Limited style customization: The style settings of position: sticky are limited by browser specifications, and only support basic positioning properties such as top and left. It cannot dynamically adjust the background color, font color, border and other styles of the sticky cell, making it difficult to meet the personalized needs of visual feedback in business scenarios (such as highlighting key data).

[0063] Incomplete support for horizontal adsorption: Some components only support horizontal adsorption, while vertical adsorption still needs to be implemented through additional development, which increases development complexity.

[0064] The aforementioned technical limitations prevent existing table components from providing a stable and flexible interactive experience in complex data display scenarios (such as indicator reports that merge across rows and columns), thus limiting users' ability to maintain continuous attention to key data.

[0065] Considering the aforementioned issues, the inventors investigated whether a combination of dynamic JavaScript listening and CSS positioning technology could be used to achieve the sticky functionality of merged cells in a table across parent scrolling containers, and to support custom sticky styles through a dynamic style binding mechanism. Breaking through the limitations of traditional CSS `position: sticky`, this approach listens to global scroll events and dynamically calculates element positions, using `position: fixed` or `position: absolute` to replace the original sticky logic. Furthermore, custom sticky styles are achieved through parameterized configuration (such as `fixedTargetIdObj` and `stickyStyleObj`). This technical solution is suitable for maintaining the visibility of merged cells across rows and columns in complex table scenarios, while reducing development complexity through component-based encapsulation.

[0066] The technical solution of this application and how the technical solution of this application solves the above-mentioned technical problems are described in detail below with specific embodiments. These specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described again in some embodiments. The embodiments of this application will now be described with reference to the accompanying drawings.

[0067] Figure 1 A flowchart illustrating the snap-in interaction method based on merged cells provided in this application. Figure 1 ,like Figure 1As shown, the method specifically includes:

[0068] S101: Merge the target cells in the table component and embed an independent child component at the cell rendering position of each merged cell that needs to be snapped.

[0069] In this step, existing technologies handle general row and column freezing without specifically designing for merged cell scenarios. This step decouples the snapping logic from the main table logic by encapsulating each merged cell that needs to be snapped into an independent sub-component, allowing each cell to respond independently to scroll events and laying the foundation for subsequent two-layer structure construction.

[0070] Specifically, the merge cell configuration method provided by the table component is used. In the merge cell method, the number of rows and columns to be merged is returned according to the business data logic (such as identical data in the same row, merging based on time period, etc.) to complete the cell merging.

[0071] Replace the table cell rendering location (e.g., {{scope.row.name}}) with a custom child component (e.g., named StickyCell.vue).

[0072] By using props, the scope data (including row and column information, cell content, etc.) can be completely passed to the child component, enabling the child component to obtain its own position in the table.

[0073] For example, suppose a production work order report needs to merge multiple rows of data with the same work order number for display. The `span-method` checks if adjacent rows have the same work order number, returning `rowspan: 3` to merge the three rows. Also, instead of directly writing `{{ scope.row.orderNo}}` in the table column template, it should be written as... <stickycell :scope="scope" / > The work order number data is passed to the child component for processing.

[0074] S102: Build a two-layer structure within an independent sub-component.

[0075] Existing technologies address the issue of fixed positioning being removed from the document flow by recalculating the position and re-rendering the entire element, resulting in high performance overhead and an inability to achieve a smooth transition. This approach separates placeholder and display elements through a two-layer structure design: the transparent layer remains permanently in the document flow to support the parent element's size, while the display layer can freely switch its positioning method as needed. This fundamentally solves the layout jitter problem caused by fixed positioning being removed from the document flow, without requiring a complete redraw. The two-layer structure includes a first container layer and a second container layer. The first container layer is transparent to maintain the original cell size, while the second container layer is stacked on top of the first container layer to display the cell content.

[0076] Specifically, two overlapping container elements are created inside the child component, both using absolute positioning relative to the parent cell. The first container layer is set to completely transparent, only used to occupy the original position and size of the cell; the second container layer is set to a higher stacking level to display the actual cell content. Style controls ensure the two layers completely overlap, with the transparent layer supporting the height and width of the parent cell, ensuring that the size of the parent cell remains unchanged when the second container layer is removed and fixed in position.

[0077] For example, create two in the child component template All elements are set to position: absolute (absolutely positioned relative to the parent element td).

[0078] The first container layer (placeholder layer) is set to opacity: 0 for complete transparency, and no z-index is set or a low value is set.

[0079] The second container layer (presentation layer) has a higher z-index to display the actual cell content (such as text, icons, etc.).

[0080] The style ensures that the two layers completely overlap, and the parent td maintains its original height and width due to the existence of the absolutely positioned child elements.

[0081] S103: Listen for the scrolling event of the table scrolling container, obtain the position information of each merged cell in real time, and determine whether there are merged cells that meet the snapping conditions based on the comparison result between the position information and the preset snapping baseline.

[0082] Existing adsorption judgment techniques typically rely on a single condition: whether the top of the element reaches the baseline. This can lead to situations where a cell with a large height is still adsorbed even if its bottom has crossed the baseline, resulting in illogical judgment. This step employs a dual-boundary judgment: "top ≤ baseline and bottom ≥ baseline." This precisely locates the cell that is "colliding" with the baseline, ensuring that at most one cell in the same column is adsorbed, making the judgment logic more rigorous.

[0083] Specifically, locate the actual scrollable container of the table in the parent component and bind a scroll event listener to it. Each time scrolling occurs, obtain the distance of the table container from the top of the page as the snapping baseline. Iterate through all columns that need snapping, and for each column, use a selector to obtain all transparent placeholder container elements within that column. Then, for each placeholder container, obtain its position information relative to the viewport. Determine if the top of the container has reached or crossed the baseline, while the bottom of the container has not completely crossed the baseline. If both conditions are met, the cell should be snapped.

[0084] For example, find the actual scroll container of the table in the parent component (usually the scroll element under .el-table__body-wrapper), bind a scroll event listener, and each time scrolling is triggered, get the distance topValue of the table container from the top of the page as the snapping baseline. Iterate through the columns that need to be snapped (configured through the propertyArr array), use document.querySelectorAll to get all transparent placeholder elements under each column (identified by class name such as .td-item-tag), and call getBoundingClientRect() for each placeholder element to get its position information info relative to the viewport (including top, bottom, left, right, width, height, etc.).

[0085] The condition for determining whether a cell should be snapped is: info.top <= topValue && info.bottom >= topValue. If the condition is true, the cell should be snapped.

[0086] For example, as a user scrolls down a table, the top of a merged cell gradually approaches the top of the table. When info.top is first less than or equal to topValue and its bottom is still below topValue, the cell is determined to be snapped. At this time, a unique identifier for the cell is recorded (e.g., "orderNo_3", indicating the work order number column in row 4).

[0087] S104: For each merged cell that meets the snapping conditions, dynamically generate a snapping command containing the location information of the merged cell and a custom style, and send the snapping command to the independent sub-component corresponding to the merged cell.

[0088] Existing technologies only fix elements and do not provide dynamic style customization capabilities. This step separates "who is snapped" (state) and "how it is displayed" (style), enabling business systems to assign different visual identifiers (such as highlighted backgrounds, shadows, borders, etc.) to snapped cells according to their needs, thus meeting diverse interactive feedback requirements.

[0089] Specifically, the child component receives two state objects from the parent component via properties. Within its own logic, it checks if the value of its own column in the parent component's snapping state object equals its own unique identifier. If they are equal, it means it should be snapped. At this point, the child component retrieves the corresponding positioning information and custom styles from the style object, sets the second container layer to fixed positioning, and applies the passed-in left position, width, top position, and custom style properties. If they are not equal, the second container layer maintains its normal in-document flow positioning. The snapping command includes: the unique identifier of the merged cell corresponding to the snapping command, the left position and width of the merged cell relative to the viewport, the top position of the snapping baseline, and the user-defined style properties.

[0090] For example, maintain two reactive state objects: fixedTargetIdObj and stickyStyleObj.

[0091] The fixedTargetIdObj class uses the column identifier (property) as the key and the unique identifier of the snapped cell (such as "orderNo_3") as the value.

[0092] stickyStyleObj uses column identifiers as keys and objects containing positioning information and custom styles as values.

[0093] Positioning information includes: left (the position of the left side of the cell relative to the viewport), width (the width of the cell), and top (the position of the snapping baseline).

[0094] Custom styles include visual attributes required by the business, such as color, backgroundColor, and boxShadow.

[0095] These two objects are passed to each child component via props.

[0096] If no cells in a column meet the snapping criteria, then the corresponding key-value pairs for that column are removed from both objects.

[0097] S105: The independent child component uses the snap command to switch the positioning mode of the second container layer in the independent child component to fixed positioning, and renders it according to the positioning information and custom style in the snap command, so that the merged cell floats and snaps to the specified position in the viewport.

[0098] In existing technologies, the snapping effect is usually controlled directly by the parent component's DOM elements, leading to coupled logic and difficulty in reuse. This step achieves decoupling between the snapping logic and the display logic by having the child component passively respond to the parent component's state. Each child component only needs to focus on "whether it is selected" and "how to display it when selected," resulting in a clear code structure that is easy to maintain and extend.

[0099] Specifically, the child component receives two state objects from the parent component via properties. Within its own logic, it checks if the value of its own column in the parent component's snapping state object equals its own unique identifier. If they are equal, it means it should be snapped. At this point, the child component retrieves the corresponding positioning information and custom styles from the style object, sets the second container layer to fixed positioning, and applies the passed-in left position, width, top position, and custom style properties. If they are not equal, the second container layer maintains its normal in-document flow positioning.

[0100] For example, the child component receives fixedTargetIdObj and stickyStyleObj through props. In the child component's computed property or listener, it determines whether the value of its own column in fixedTargetIdObj is equal to its own unique identifier (composed of scope.column.property and scope.$index).

[0101] If they are equal, the corresponding style object is retrieved from stickyStyleObj and applied to the second container layer. Key styles include:

[0102] position: fixed

[0103] top: [topValue]px

[0104] left: [info.left]px

[0105] width: [info.width]px

[0106] and the passed-in custom style attributes

[0107] If they are not equal, the second container layer retains the default position: absolute positioning and does not undergo special rendering.

[0108] The snapping interaction method based on merged cells provided in this application merges target cells in a table component and embeds an independent sub-component at the rendering position of each merged cell that needs to be snapped. A two-layer structure is built inside the independent sub-component. The scrolling event of the table scrolling container is listened to, and the position information of each merged cell is obtained in real time. Based on the comparison result of the position information with the preset snapping baseline, it is determined whether there is a merged cell that meets the snapping condition. For each merged cell that meets the snapping condition, a snapping instruction containing the positioning information of the merged cell and a custom style is dynamically generated and sent to the independent sub-component corresponding to the merged cell. Based on the snapping instruction, the independent sub-component switches the positioning mode of the second container layer in the independent sub-component to fixed positioning and renders according to the positioning information and custom style in the snapping instruction, so that the merged cell floats and snaps to the specified position of the viewport. The above method maintains the size of the parent cell through a transparent placeholder layer, achieving fixed positioning and snapping while avoiding layout jitter and eliminating the need for a complete redraw; dual boundary judgment accurately locates the cell that is hitting the baseline, ensuring that at most one cell in the same column is snapped, and the judgment logic is rigorous and reliable; the responsive state object separates which cell is snapped and how it is displayed, supports dynamic input of custom styles, and meets the business's visual differentiation needs for snapping status; the unified judgment logic supports snapping in both vertical and horizontal directions, resulting in high code reusability and low maintenance costs.

[0109] Figure 2 A flowchart illustrating the snap-in interaction method based on merged cells provided in this application. Figure 2 ,like Figure 2 As shown, based on the above embodiment, step S103 specifically includes:

[0110] S201: For each merged cell, obtain the first distance of the top of the merged cell relative to the viewport, and the second distance of the bottom of the merged cell relative to the viewport.

[0111] To determine whether a cell should be snapped, we first need to know its exact position on the screen. By obtaining the distances of the cell's top and bottom relative to the viewport, we can quantify the cell's current position within the visible area, providing a data basis for subsequent snapping decisions.

[0112] Specifically, in the parent component's scroll listener function, it first needs to retrieve the transparent placeholder elements of all merged cells that require snapping. These transparent placeholder elements are the first container layer in the two-layer structure built in the child component, and they are always kept in the document flow, accurately reflecting the original position of the cells.

[0113] In implementation, you can predefine an array of columns to be snapped to, such as ['date', 'product', 'orderNo']. In the scroll listener function, iterate through this array, and for each column, use a selector to retrieve all transparent placeholder elements within that column. The selector is constructed by concatenating a fixed class name (such as td-item-tag) with the column identifier, for example, .td-item-tag.td-item-tag_date. This allows for precise retrieval of all cells within a specific column, avoiding interference with other columns.

[0114] After obtaining the transparent placeholder elements, the browser's `getBoundingClientRect` method is called for each element. This method returns an object containing the element's position information relative to the viewport. The `top` property represents the distance from the top of the element to the top of the viewport, and the `bottom` property represents the distance from the bottom of the element to the top of the viewport. These two values ​​are denoted as the first distance and the second distance, respectively. A positive first distance indicates that the cell is below the viewport, while a negative value indicates that the cell has scrolled beyond the top of the viewport. The second distance, also using the top of the viewport as a reference point, represents the position of the bottom of the cell. After obtaining these two distance values, they are passed to the next step for determining the snapping state.

[0115] S202: If the first distance is less than or equal to the distance between the top of the table container and the viewport, and the second distance is greater than or equal to the distance between the top of the table container and the viewport, then the merged cells are determined to enter the snapping state.

[0116] This feature uses dual boundary conditions to precisely locate cells that are "hitting" the top baseline of the table. The first condition ensures that the top of the cell has reached or crossed the snap-in baseline, while the second condition ensures that the bottom of the cell has not yet completely crossed the baseline. When both conditions are met, it indicates that the cell is at the critical position where it should be snapped in.

[0117] Specifically, the first step is to determine the position of the snapping baseline, which is the distance between the top of the table scrolling container and the viewport. In the scroll listener function, this value can be retrieved each time the page scrolls to handle changes in the container's position caused by overall page scrolling. This is done by calling the `getBoundingClientRect` method to obtain the table scrolling container's position information, taking its `top` property as the snapping baseline, and denoting it as `topValue`.

[0118] With the baseline and the first and second distances of each cell established, we can perform a double-boundary judgment. The judgment logic includes two conditions:

[0119] The first condition is that the first distance is less than or equal to topValue, meaning whether the top of the cell has reached or surpassed the top of the table container. As the user scrolls down the table, the cells gradually move upwards, and the first distance gradually decreases. This condition becomes true the instant the top of the cell touches the top of the table container.

[0120] The second condition is that the second distance is greater than or equal to topValue, meaning whether the bottom of the cell is still below or exactly at the top of the table container. This condition is true as long as any part of the cell is below the top of the table container.

[0121] A cell is considered to be in snapped state only when both conditions are met. This logic ensures that at most one cell in the same column will be considered to be snapped, i.e., the cell that is currently touching the top edge of the table. If the first distance is greater than topValue, it means the cell has not yet reached the snapping position; if the second distance is less than topValue, it means the cell has completely scrolled past the snapping position and should be de-snap or never entered the snapping state.

[0122] After determining that a cell should be snapped, its state needs to be recorded. Specifically, two reactive state objects are maintained: the first object records which cell in which column is currently snapped, using the column identifier as the key and the unique identifier of the snapped cell as the value; the second object records the custom styles to be applied to the snapped cell, using the column identifier as the key and an object containing positioning information and custom style attributes as the value. Positioning information includes the cell's left-side position relative to the viewport, cell width, and the top position of the snapping baseline; custom styles include background color, shadow, text color, and other visual attributes required by the business logic.

[0123] A cell's unique identifier can be formed by concatenating the column identifier and the row index; for example, date_3 represents the date column in the 4th row. This identifier is set in the child component and attached to the transparent placeholder element via a custom attribute (such as target-tag) for easy access during scroll listeners.

[0124] When iterating through all cells in each column, a flag variable is needed to record whether any cells in that column meet the snapping condition. After the iteration is complete, if no cells in the column meet the condition, the corresponding state for that column needs to be cleared from both state objects to ensure that previously snapped cells can be unsnapped.

[0125] It should be noted that steps S201 and S202 described above describe the logic for determining the snapping state of merged cells in a vertical scrolling scenario. In vertical scrolling, the snapping baseline is the distance between the top of the table container and the viewport, and the determination is based on the positional relationship between the top and bottom of the cell and the baseline.

[0126] Optionally, the logic for determining the snapping state of merged cells in horizontal scrolling scenarios is similar to that for vertical snapping. It uses dual boundary conditions to precisely locate the cell that is "colliding" with the left baseline of the table, ensuring that at most one cell in the same row is snapped. The distance of the cell's left side relative to the viewport is compared with the left baseline of the table container, and the distance of the cell's right side relative to the viewport is also compared with the left baseline of the table container, as the basis for determining whether a cell meets the snapping conditions.

[0127] Specifically, the logic for determining horizontal snapping is completely symmetrical to that for vertical snapping. First, the baseline for horizontal snapping needs to be determined, which is the distance from the left side of the table scroll container to the viewport, denoted as `leftValue`. In the scroll listener function, the left position of the table scroll container can be obtained using the `getBoundingClientRect` method each time horizontal scrolling occurs.

[0128] For each merged cell that needs to be evaluated, after obtaining its transparent placeholder element, the `getBoundingClientRect` method is called to retrieve its position information. The `left` property represents the distance of the cell's left side relative to the viewport, denoted as the first horizontal distance; the `right` property represents the distance of the cell's right side relative to the viewport, denoted as the second horizontal distance.

[0129] The double boundary condition is: the first horizontal distance is less than or equal to `leftValue`, and the second horizontal distance is greater than or equal to `leftValue`. The first condition ensures that the left side of the cell has reached or crossed the left baseline of the table container, and the second condition ensures that the right side of the cell has not completely crossed the baseline, that is, there is an overlapping area between the cell and the baseline.

[0130] When both conditions are met, the cell is determined to enter a horizontal snapping state. At this point, the cell's state is recorded: the responsive state object records which cell in the row is snapped, and stores its positioning information (top position, height, left baseline position) and custom style. In the positioning information, the top position determines the cell's fixed vertical position, and the height maintains the cell's size.

[0131] The snapping interaction method based on merged cells provided in this application obtains a first distance from the top of the merged cell relative to the viewport and a second distance from the bottom of the merged cell relative to the viewport for each merged cell. If the first distance is less than or equal to the distance from the top of the table container relative to the viewport, and the second distance is greater than or equal to the distance from the top of the table container relative to the viewport, then the merged cell is determined to enter the snapping state. This method, through double-boundary judgment logic and a state management mechanism, achieves precise control over the snapping state of merged cells, providing accurate input for subsequent sub-components to switch styles based on the state.

[0132] Figure 3 A flowchart illustrating the snap-in interaction method based on merged cells provided in this application. Figure 3 ,like Figure 3 As shown, the method also includes:

[0133] S301: Adsorption commands are managed based on responsive state objects. The responsive state objects use column identifiers as keys and the unique identifier and custom style of the merged cell corresponding to the adsorption command as values.

[0134] In complex table interaction scenarios, an efficient and maintainable mechanism is needed to manage the snapping state of multiple merged cells. This step constructs a reactive state object to separate and store information on "who is snapped" and "how it is displayed," thereby decoupling the snapping logic from the display logic and laying the foundation for the automatic response of subsequent sub-components.

[0135] Specifically, two core reactive state objects are created in the parent component to record the snapping state and snapping style, respectively.

[0136] The first object, denoted as `fixedTargetIdObj`, records which cell in which column is currently snapped. This object uses the column identifier as the key and the unique identifier of the snapped cell as the value. The column identifier is typically a property field of the table column, such as 'date', 'product', or 'orderNo'. The unique identifier of the cell is formed by concatenating the column identifier and the row index; for example, 'date_3' represents the date cell in the 4th row. This key-value pair design allows for quick querying of whether a cell in a column is currently snapped, and specifically, which cell it is, using the column identifier.

[0137] The second object, denoted as stickyStyleObj, records the custom styles to be applied to the snapped cells. This object also uses the column identifier as the key and an object containing positioning information and custom style attributes as the value. Positioning information includes the cell's left-side position relative to the viewport, cell width, and the top position of the snapping baseline; this information is used to accurately place the cell in the correct position during fixed positioning. Custom styles include visual attributes required by the business, such as background color, shadow, text color, and borders, to meet the visually differentiated needs of different scenarios.

[0138] These two objects are passed to each individual child component via the component's props property, enabling the child components to obtain global snapping state information. Because it is reactive, when the values ​​inside the objects change, all child components that depend on these two objects will automatically trigger a re-render.

[0139] S302: When the scroll judgment result changes, update the responsive state object. Each independent child component automatically responds to the snapping state switch by listening to the changes in the responsive state object.

[0140] During scrolling, the snapping state of the cells changes continuously. This step uses a reactive mechanism to achieve automatic state propagation and automatic UI updates, allowing each child component to autonomously decide whether to switch to the snapping style based on whether it is selected, without the parent component directly manipulating DOM elements.

[0141] Specifically, in the scroll listener function, after determining the snapping condition for each cell, `fixedTargetIdObj` and `stickyStyleObj` are updated based on the determination result. For each column, all cells in that column are traversed, and cells that meet the snapping condition are found using double-boundary judgment. If found, the corresponding value in that column is updated to be the unique identifier of that cell, and the corresponding positioning information and custom style in the style object are updated; if no cell in that column meets the condition, the key-value pair corresponding to that column is cleared from both objects (or set to null).

[0142] Because `fixedTargetIdObj` and `stickyStyleObj` are reactive objects, frameworks (such as Vue or React) automatically trigger components that depend on these objects to re-render when their values ​​change. After passing these two objects to each child component via props, all child components will receive the latest state data.

[0143] After receiving the updated props, each independent child component needs to perform two judgments: first, to determine whether it should enter the snapping state, and second, if it should, to apply which styles.

[0144] The child component first generates its own unique identifier based on its scope data, typically composed of a column identifier and a row index, such as `${scope.column.property}_${scope.$index}`. Then, it retrieves the value corresponding to its column from `fixedTargetIdObj` and compares it to this unique identifier. If they are equal, it means it is the currently selected snapped cell; otherwise, it means it is not the snapped cell.

[0145] If the judgment result is true, the child component further retrieves the style object corresponding to its column from stickyStyleObj and applies the style object to the second container layer (presentation layer). When applying styles, the key is to set the positioning method to position: fixed and use the positioning information such as left, top, and width provided in the style object, as well as custom style properties such as backgroundColor and color.

[0146] If the judgment result is false, the child component will restore the second container layer to the default absolute positioning style, so that it returns to the normal document flow position.

[0147] Because the entire mechanism is based on reactive data flow, the scroll listener function continuously updates `fixedTargetIdObj` and `stickyStyleObj` as the user continues scrolling the table. Each update triggers all child components to re-execute the above judgment logic, thereby achieving automatic switching of the sticky state. Cells that were originally sticky may lose their sticky state at a new scroll position and automatically revert to normal style; new cells may meet the sticky conditions and automatically switch to fixed positioning.

[0148] The snap-in interaction method based on merged cells provided in this application manages snap-in commands using a responsive state object. The responsive state object uses column identifiers as keys and the unique identifier of the merged cell corresponding to the snap-in command and a custom style as values. The responsive state object is updated when the scrolling judgment result changes. Each independent sub-component automatically responds to snap-in state switching by listening to changes in the responsive state object. This method constructs a complete "judgment-notification-response" closed loop: the scrolling event triggers a judgment, the judgment result updates the responsive state object, the state change automatically propagates to all sub-components, and the sub-components autonomously switch styles based on the matching of their own identifier with the state object. This design based on responsive state management makes complex snap-in interactions clear and maintainable, while also providing natural support for dynamic style customization.

[0149] Figure 4 A flowchart illustrating the snap-in interaction method based on merged cells provided in this application. Figure 4 ,like Figure 4 As shown, based on the foregoing embodiments, the method further includes:

[0150] S401: For each merged cell, during the scrolling monitoring process, calculate the distance between the bottom of the merged cell and the snapping baseline. When the distance is less than or equal to zero, determine that the merged cell has been de-snapped.

[0151] As the user scrolls up the table, snapped cells need to gradually move away from the viewport. This step determines the timing for releasing the snap by precisely calculating the positional relationship between the bottom of the cell and the baseline, providing a trigger condition for a smooth transition afterwards.

[0152] Specifically, in the scroll listener function, the position changes of the currently snapped cell need to be continuously monitored. The snapping baseline is the distance from the top of the table container to the viewport, denoted as topValue. For each snapped cell, the position information of its transparent placeholder element is obtained to get the distance from the bottom of the cell to the viewport, denoted as bottom.

[0153] Calculate the distance between the bottom of the cell and the baseline: distance = bottom - topValue. This distance represents the position of the bottom of the cell relative to the baseline. When distance is positive, it means the bottom of the cell is still below the baseline, and there is an overlap between the cell and the baseline; when distance is negative, it means the bottom of the cell has completely crossed the baseline; when distance is zero, it means the bottom of the cell coincides exactly with the baseline.

[0154] The condition for releasing the snapping feature is distance <= 0, meaning the bottom of the cell has reached or completely crossed the snapping baseline. This implies that the cell no longer overlaps with the baseline, and continuing to snap would cause the cell to float above the table content, which is inconsistent with the user's expected interaction behavior.

[0155] In the actual implementation, it is necessary to add monitoring of the snapped cells to the scroll listener function. This can be done by iterating through all columns in the current fixedTargetIdObj that are in a snapped state, obtaining the cell elements corresponding to these columns, calculating their distance values, and making a judgment.

[0156] This distance-based judgment method is symmetrical to the double-boundary judgment during adsorption: during adsorption, attention is paid to the contact between the top of the cell and the baseline; during release, attention is paid to the separation between the bottom of the cell and the baseline. The logic is complete and natural.

[0157] S402: Generate the release command corresponding to the merged cell and send the release command to the independent sub-component corresponding to the merged cell.

[0158] Once it's determined that a cell should be unattached, this state change needs to be notified to the corresponding child components, enabling them to switch back from the attached state to the normal state. This step achieves the propagation of the state change by generating a release command and updating the reactive state object.

[0159] Specifically, the release command is not a separate data structure, but is implemented by updating the reactive state object. When it is determined that a cell should be unsticky, the corresponding record in that column needs to be removed from fixedTargetIdObj, and the corresponding style configuration needs to be removed from stickyStyleObj.

[0160] Because `fixedTargetIdObj` and `stickyStyleObj` are reactive objects, when a `delete` operation is performed to remove the property, the framework automatically detects the change in the object's content and triggers a re-render of components that depend on these objects. This is equivalent to implicitly generating a "removal command" and sending it to all child components.

[0161] The advantage of this design is that it eliminates the need to define additional instruction types or event mechanisms, achieving state synchronization entirely through reactive data streams. All child components listen to the same state object, receiving both "enter snapping" and "de-snapping" instructions without needing to distinguish instruction types; they simply determine their behavior based on whether their own identifier matches the value in the state object.

[0162] When implementing this, it's important to note that the delete operation may not be automatically detected in some reactive systems. You'll need to use the APIs provided by the framework for reactive deletion, such as using Vue.delete or the spread operator to create new objects in Vue.

[0163] S403: The independent child component sets the positioning mode of the second container layer to absolute positioning relative to the parent cell according to the release instruction, and sets the bottom alignment property, so that the second container layer moves up synchronously with the parent cell until it is completely removed from the viewport.

[0164] When a cell is unsnap-bound, directly removing its fixed position causes it to instantly jump back to its original position, creating a visually abrupt change. This step uses a special positioning switching method to achieve a smooth transition where the cell moves upwards along with its parent container, improving the user experience.

[0165] Specifically, when a child component detects that the value of its own column in `fixedTargetIdObj` is no longer its unique identifier, it determines that it has been unattached. At this point, the child component needs to switch the positioning mode of the second container layer (presentation layer) from `position: fixed` to the new positioning mode to achieve a smooth transition.

[0166] The new positioning method is set to absolute positioning relative to the parent cell, with a specific bottom: 0 property set to align the bottom of the second container layer with the bottom of the parent cell. Previously set fixed positioning properties such as top and left need to be cleared, but some custom styles (such as background color) can be retained to maintain visual continuity.

[0167] When the second container layer is set to absolute positioning relative to its parent cell and bottom aligned, its position is entirely determined by the parent cell. As the parent cell (td) scrolls upwards with the table content, the second container layer, due to its bottom: 0 setting, will always remain at the bottom of the parent cell and move upwards along with it. As scrolling continues, the parent cell gradually moves out of the viewport, and the second container layer moves out of the viewport as well, achieving a natural disappearance effect.

[0168] This design simulates the feeling of a cell being "stuck" to the bottom of its parent container and then carried away, which aligns with the user's perception of the physical world: objects gradually recede from view rather than suddenly disappearing.

[0169] The smooth release mechanism needs to work closely with the release decision mechanism. The double boundary condition in the release decision ensures that a cell is only released when it is "riding" on the baseline; the distance calculation in the release decision ensures that the cell is released only when its bottom crosses the baseline; and the bottom alignment positioning switch enables a smooth transition after release. Together, these three elements constitute the complete release lifecycle: entering release → maintaining release → releasing release → smooth exit.

[0170] In practice, CSS transition effects can be combined to add transition animations to properties such as background color and transparency, making the unattachment process smoother. For example, the transparency of the background color can be gradually reduced when the snapping is removed to achieve a fade-out effect.

[0171] The snap-in interaction method based on merged cells provided in this application calculates the distance between the bottom of the merged cell and the snap-in baseline during scrolling monitoring for each merged cell. When the distance is less than or equal to zero, the merged cell is determined to be unsnap-in, a release command is generated for the merged cell, and the release command is sent to the independent child component corresponding to the merged cell. The independent child component sets the positioning mode of the second container layer to absolute positioning relative to the parent cell according to the release command and sets the bottom alignment attribute, so that the second container layer moves upward synchronously with the parent cell until it is completely out of the viewport. The above-mentioned smooth snap-in release mechanism solves the problem of abrupt snap-in release in the prior art and achieves a natural visual transition through clever positioning switching. When the user scrolls up the table, the snapped cell does not suddenly jump away or disappear, but moves smoothly upward while sticking to the bottom of the original cell until it is completely out of the view. The entire interaction process is smooth and natural, which meets the user's psychological expectations. At the same time, this mechanism is entirely based on CSS positioning, without the need for complex animation calculations, with low performance overhead and simple implementation.

[0172] Figure 5 A schematic diagram of the structure of the adsorption interaction device based on merged cells provided in this application is shown below. Figure 5 As shown, the snap-in interaction device 500 based on merged cells provided in this embodiment includes:

[0173] The merge insertion module 501 is used to merge target cells in a table component and embed independent sub-components at the cell rendering position of each merged cell that needs to be snapped in.

[0174] Module 502 is used to build a two-layer structure inside an independent sub-component. The two-layer structure includes a first container layer and a second container layer. The first container layer is transparent to maintain the original size of the cell, and the second container layer is stacked on top of the first container layer to display the cell content.

[0175] The listening module 503 is used to listen to the scrolling events of the table scrolling container, obtain the position information of each merged cell in real time, and determine whether there are merged cells that meet the adsorption conditions based on the comparison results between the position information and the preset adsorption baseline.

[0176] Dynamic module 504 is used to dynamically generate an adsorption command containing the positioning information of the merged cell and a custom style for each merged cell that meets the adsorption conditions, and to send the adsorption command to the independent sub-component corresponding to the merged cell.

[0177] The rendering module 505 is used to switch the positioning mode of the second container layer in the independent subcomponent to fixed positioning based on the snap command, and to render according to the positioning information and custom style in the snap command, so that the merged cell floats and snaps to the specified position in the viewport.

[0178] In one possible implementation, both the first container layer and the second container layer are stacked using absolute positioning relative to the parent cell, and the first container layer is visually hidden by setting its transparency to zero. The physical size occupied by the first container layer is used to maintain the height and width of the parent cell when the second container layer is removed and fixed in position.

[0179] In one possible implementation, the monitoring module 503 includes:

[0180] For each merged cell, obtain the first distance of the top of the merged cell relative to the viewport, and the second distance of the bottom of the merged cell relative to the viewport;

[0181] If the first distance is less than or equal to the distance between the top of the table container and the viewport, and the second distance is greater than or equal to the distance between the top of the table container and the viewport, then the merged cells are determined to enter the snapping state.

[0182] In one possible implementation, the snap command includes: a unique identifier for the merged cell corresponding to the snap command, the position and width of the merged cell relative to the left side of the viewport, the top position of the snap baseline, and user-defined style attributes.

[0183] In one possible implementation, the snap-in interaction device 500 based on merged cells further includes:

[0184] The management module 506 is used to manage adsorption commands based on responsive state objects. The responsive state objects use column identifiers as keys and unique identifiers and custom styles of the merged cells corresponding to the adsorption commands as values.

[0185] The switching module 507 is used to update the responsive state object when the scroll judgment result changes. Each independent sub-component automatically responds to the snapping state switching by listening to the changes in the responsive state object.

[0186] In one possible implementation, the snap-in interaction device 500 based on merged cells further includes:

[0187] The determination module 508 is used to calculate the distance between the bottom of the merged cell and the snapping baseline during the scrolling monitoring process for each merged cell. When the distance is less than or equal to zero, the merged cell is determined to be in a snapped state.

[0188] The generation module 509 is used to generate the release command corresponding to the merged cell and send the release command to the independent sub-component corresponding to the merged cell.

[0189] The setting module 510 is used by the independent child component to set the positioning mode of the second container layer to absolute positioning relative to the parent cell according to the release instruction, and to set the bottom alignment property so that the second container layer moves up synchronously with the parent cell until it is completely removed from the viewport.

[0190] In one possible implementation, for the snapping of horizontally merged cells, the distance of the cell's left side relative to the viewport is compared with the left baseline of the table container, and the distance of the cell's right side relative to the viewport is compared with the left baseline of the table container, as the basis for determining whether the cell meets the snapping conditions.

[0191] The adsorption interaction device based on merged cells provided in this embodiment can execute the adsorption interaction method based on merged cells provided in the above method embodiment. Its implementation principle and technical effect are similar, and will not be described in detail here.

[0192] Figure 6 A schematic diagram of the structure of the electronic device provided in this application. Figure 6 As shown, the electronic device 60 provided in this embodiment includes at least one processor 601 and a memory 602. Optionally, the electronic device 60 further includes a communication component 603. The processor 601, memory 602, and communication component 603 are connected via a bus 604.

[0193] In a specific implementation, at least one processor 601 executes computer execution instructions stored in memory 602, causing at least one processor 601 to perform the above-described method.

[0194] The specific implementation process of processor 601 can be found in the above method embodiments, and its implementation principle and technical effect are similar. It will not be repeated here.

[0195] In the above embodiments, it should be understood that the processor can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), etc. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the method disclosed in this invention can be directly implemented by a hardware processor, or implemented by a combination of hardware and software modules within the processor.

[0196] The memory may include random access memory (RAM) and may also include non-volatile memory (NVM), such as at least one disk storage device.

[0197] The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. Buses can be categorized as address buses, data buses, control buses, etc. For ease of illustration, the buses shown in the accompanying drawings are not limited to a single bus or a single type of bus.

[0198] This application also provides a computer program product, including a computer program that, when executed by a processor, implements the above-described method.

[0199] This application also provides a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, implement the above-described method.

[0200] The aforementioned readable storage medium can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk. The readable storage medium can be any available medium accessible to a general-purpose or special-purpose computer.

[0201] An exemplary readable storage medium is coupled to a processor, enabling the processor to read information from and write information to the readable storage medium. Of course, the readable storage medium can also be a component of the processor. The processor and the readable storage medium can reside in an Application Specific Integrated Circuit (ASIC). Alternatively, the processor and the readable storage medium can exist as discrete components in the device.

[0202] The division of units is merely a logical functional division; in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be indirect coupling or communication connection through some interfaces, devices, or units, and may be electrical, mechanical, or other forms.

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

[0204] In addition, the functional units in the various embodiments of 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.

[0205] If a function is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this invention, or the part that contributes to the prior art, or a part 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 of 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.

[0206] Those skilled in the art will understand that all or part of the steps of the above-described method embodiments can be implemented by hardware related to program instructions. The aforementioned program can be stored in a computer-readable storage medium. When executed, the program performs the steps of the above-described method embodiments; and the aforementioned storage medium includes various media capable of storing program code, such as ROM, RAM, magnetic disks, or optical disks.

[0207] Finally, it should be noted that other embodiments of the invention will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This invention is intended to cover any variations, uses, or adaptations of the invention that follow the general principles of the invention and include common knowledge or customary techniques in the art not disclosed herein, and is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of the invention is limited only by the appended claims.

Claims

1. A snap-in interaction method based on merged cells, characterized in that, include: Merge the target cells in the table component and embed an independent child component at the cell rendering position of each merged cell that needs to be snapped in. A two-layer structure is constructed within the independent sub-component. The two-layer structure includes a first container layer and a second container layer. The first container layer is displayed transparently to maintain the original size of the cell, and the second container layer is stacked on top of the first container layer to display the cell content. Listen to the scrolling event of the table scrolling container, obtain the position information of each merged cell in real time, and determine whether there are merged cells that meet the adsorption conditions based on the comparison result of the position information and the preset adsorption baseline. For each merged cell that meets the adsorption conditions, an adsorption command containing the location information of the merged cell and a custom style is dynamically generated, and the adsorption command is sent to the independent sub-component corresponding to the merged cell. Based on the snap command, the independent sub-component switches the positioning mode of the second container layer in the independent sub-component to fixed positioning, and renders according to the positioning information and custom style in the snap command, so that the merged cell floats and snaps to the specified position in the viewport.

2. The method according to claim 1, characterized in that, Both the first container layer and the second container layer are stacked using absolute positioning relative to the parent cell. The first container layer is visually hidden by setting its transparency to zero. The physical size occupied by the first container layer is used to maintain the height and width of the parent cell when the second container layer is removed and fixed in position.

3. The method according to claim 1, characterized in that, The monitoring table scrolling container's scrolling event is used to obtain the position information of each merged cell in real time, and to determine whether there are currently merged cells that meet the snapping conditions based on the comparison result of the position information and the preset snapping baseline, including: For each merged cell, obtain a first distance from the top of the merged cell relative to the viewport, and a second distance from the bottom of the merged cell relative to the viewport; If the first distance is less than or equal to the distance between the top of the table container and the viewport, and the second distance is greater than or equal to the distance between the top of the table container and the viewport, then the merged cell is determined to enter the snapping state.

4. The method according to claim 1, characterized in that, The snap-in command includes: the unique identifier of the merged cell corresponding to the snap-in command, the left position and width of the merged cell relative to the viewport, the top position of the snap-in baseline, and user-defined style attributes.

5. The method according to claim 1, characterized in that, The method further includes: The adsorption command is managed based on a responsive state object, where the responsive state object uses column identifiers as keys and the unique identifier and custom style of the merged cell corresponding to the adsorption command as values. When the scrolling judgment result changes, the responsive state object is updated. Each independent sub-component automatically responds to the snapping state switch by listening to the changes in the responsive state object.

6. The method according to claim 1, characterized in that, The method further includes: For each merged cell, during the scrolling monitoring process, the distance between the bottom of the merged cell and the adsorption baseline is calculated. When the distance is less than or equal to zero, the merged cell is determined to be in an unadsorbed state. Generate a release command corresponding to the merged cell and send the release command to the independent sub-component corresponding to the merged cell; The independent sub-component sets the positioning mode of the second container layer to absolute positioning relative to the parent cell according to the release instruction, and sets the bottom alignment attribute, so that the second container layer moves upward synchronously with the parent cell until it is completely removed from the viewport.

7. The method according to claim 3, characterized in that, For horizontally merged cells to snap, the distance of the cell's left side relative to the viewport is compared with the left baseline of the table container, and the distance of the cell's right side relative to the viewport is compared with the left baseline of the table container, as the basis for determining whether the cell meets the snapping condition.

8. A snap-on interactive device based on merged cells, characterized in that, include: The merge insertion module is used to merge target cells in a table component and embed independent sub-components at the cell rendering position of each merged cell that needs to be snapped in. A building module is used to build a two-layer structure within the independent sub-component. The two-layer structure includes a first container layer and a second container layer. The first container layer is transparently displayed to maintain the original size of the cell, and the second container layer is stacked on top of the first container layer to display the cell content. The monitoring module is used to monitor the scrolling events of the table scrolling container, obtain the position information of each merged cell in real time, and determine whether there are merged cells that meet the adsorption conditions based on the comparison results of the position information and the preset adsorption baseline. The dynamic module is used to dynamically generate an adsorption instruction containing the positioning information and custom style of the merged cell for each merged cell that meets the adsorption conditions, and to send the adsorption instruction to the independent sub-component corresponding to the merged cell. The rendering module is used to switch the positioning mode of the second container layer in the independent sub-component to fixed positioning based on the snapping command, and to render according to the positioning information and custom style in the snapping command, so that the merged cell floats and snaps to the specified position of the viewport.

9. An electronic device, characterized in that, include: Memory, processor; The memory stores computer-executed instructions; The processor executes computer execution instructions stored in the memory, causing the processor to perform the method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when executed by a processor, are used to implement the method as described in any one of claims 1 to 7.

Images