Table transverse browsing method and device, electronic equipment and medium

Abstract

The invention relates to a table transverse browsing method and device, electronic equipment and a medium. The method comprises the following steps of: embedding a table component comprising a header display area and a column data display area in a viewport of a browser through a parent container; the column data display area performs scrolling display through the scrolling container in the transverse direction, and the header display area is fixedly displayed in the visible area of the parent container when the viewport of the browser is longitudinally scrolled. And when the total content width of the rolling container is greater than the first visual width, creating a transverse sliding control which keeps a control display position fixedly displayed around the header display area in the parent container and is bound with a value change event. When it is detected that the value change event is triggered, the rolling container is controlled to roll transversely according to the to-be-controlled numerical value corresponding to the value change event. Based on the setting, the user can simultaneously see the header information and the transverse sliding control, and the efficiency of data transverse browsing and analysis in the ultra-wide table scene is improved.

Description

Technical Field

[0001] This application relates to the field of front-end interaction, and in particular to a method, apparatus, electronic device, and medium for horizontal table browsing. Background Technology

[0002] In data visualization and analysis scenarios, ultra-wide tables containing a large number of columns of data are often displayed in the browser viewport to present rich information. In related technologies, the browser viewport itself typically handles vertical scrolling, allowing users to change the table's vertical position by scrolling the viewport. Horizontal browsing of ultra-wide tables often relies on the browser's default scrolling mechanism, placing the table within a horizontally scrollable container. When the table width exceeds the visible width of the scrollable container, a horizontal scrollbar is displayed at the bottom of the container by default. This scrollbar serves as the entry point for horizontal scrolling, allowing users to drag it to move the table data left and right, thus switching between different columns. However, because the horizontal scrollbar is fixed at the bottom of the scrollable container, when the table has many rows and the user is browsing in the middle or at the top, the bottom of the scrollable container often falls outside the browser viewport's visible area, making it difficult to keep the horizontal scrollbar within the user's line of sight.

[0003] In this process, on the one hand, the user's operation path is lengthened, the process of analyzing column data is frequently interrupted, the cost of actions increases, and the browsing and analysis efficiency decreases; on the other hand, frequent switching makes the interaction process disjointed, increases the user's cognitive burden, and is accompanied by a higher risk of misoperation and rework, further reducing the overall analysis efficiency. Therefore, related technologies have the drawback of low efficiency in horizontal data browsing and analysis in ultra-wide table scenarios. Summary of the Invention

[0004] This application provides a method, apparatus, electronic device, and medium for horizontal table browsing to address some or all of the shortcomings in the related art.

[0005] According to a first aspect of the embodiments of this application, a method for horizontally browsing a table is provided, including: A table component is embedded within a parent container in the browser viewport and displayed within the parent container; wherein the table component includes a header display area and a column data display area, the column data display area is scrolled horizontally via a scroll container, and when the browser viewport is scrolled vertically, the header display area remains fixed at the top visible position within the visible area of ​​the parent container and is displayed. If the total width of the content of the scrolling container is greater than the first visible width of the scrolling container, a horizontal sliding control is created within the parent container; wherein, the horizontal sliding control is kept in a fixed display position around the control display area of ​​the table header, and a value change event is bound to the horizontal sliding control; When the value change event is detected to be triggered, the value to be controlled corresponding to the value change event is obtained; Based on the value to be controlled, the horizontal scrolling of the scrolling container is controlled, so that the column data display area moves in the horizontal direction.

[0006] Optionally, the horizontal sliding control remains fixedly displayed above the header display area, and the control display position is set horizontally; or, The horizontal sliding control remains fixed below the header display area, and its display position is set horizontally.

[0007] Optionally, controlling the lateral scrolling of the scrolling container according to the value to be controlled includes: The lateral rolling displacement value of the rolling container is updated to the value to be controlled.

[0008] Optionally, the upper limit of the value to be controlled is the difference between the total width of the content and the first visible width.

[0009] Optionally, a scroll event is attached to the scrolling container, and the table horizontal browsing method further includes: When the scrolling event is detected to be triggered, the horizontal scrolling displacement value corresponding to the scrolling event is obtained; The value to be controlled is updated to the horizontal scroll displacement value corresponding to the scroll event, so as to change the position of the horizontal sliding control in the horizontal direction.

[0010] Optionally, the table horizontal browsing method further includes: When the total width of the content is greater than the first visible width, a horizontal scroll bar is provided at the bottom of the scrolling container as the control entry point for the horizontal scrolling of the scrolling container; Specifically, the scrolling event is triggered when the horizontal scroll bar is scrolled.

[0011] Optionally, when the scrolling event is detected to be triggered, obtaining the horizontal scroll displacement value corresponding to the scrolling event includes: Once the scrolling event is detected to be triggered, the second anti-shake timing is started; After the second anti-shake timing is activated, if the scrolling event is not triggered again within the preset second anti-shake duration, the horizontal scrolling displacement value is obtained.

[0012] Optionally, the table horizontal browsing method further includes: When a change in the second visible width of the browser viewport is detected, the total content width and the first visible width of the scroll container are retrieved again, and the step of creating a horizontal sliding control within the parent container when the total content width of the scroll container is greater than the first visible width of the scroll container is returned.

[0013] Optionally, the table horizontal browsing method further includes: If the total width of the re-acquired content is greater than the first re-acquired visible width, the value to be controlled will be updated to the reset horizontal sliding value.

[0014] Optionally, when the value change event is detected to be triggered, obtaining the controllable value corresponding to the value change event includes: When the value change event is detected to be triggered, the first anti-shake timing is started; After the first stabilization timer is started, if no change in the value is detected again within the preset first stabilization duration, the value to be controlled is obtained.

[0015] Optionally, when a change in the second visible width of the browser viewport is detected, re-acquiring the total content width and the first visible width of the scrolling container includes: When a change in the second visible width is detected, the third image stabilization timing is activated; After the third anti-shake timing is activated, if no change in the second visible width is detected again within the preset third anti-shake duration, the total content width and the first visible width of the scrolling container are reacquired. And / or, The method for horizontal table browsing also includes: If the total width of the content is greater than the first visible width, but the total width of the re-acquired content is not greater than the re-acquired first visible width, then the horizontal sliding control is removed.

[0016] According to a second aspect of the embodiments of this application, a table landscape browsing device is provided, comprising: A table component display module is used to embed a table component within a parent container in the browser viewport and display the table component within the parent container; wherein, the table component includes a header display area and a column data display area, the column data display area is scrolled horizontally through a scrolling container, and when the browser viewport is scrolled vertically, the header display area remains fixed at the top visible position within the visible area of ​​the parent container and is displayed. A horizontal sliding control creation module is used to create a horizontal sliding control within a parent container when the total width of the content of the scrolling container is greater than the first visible width of the scrolling container; wherein, the horizontal sliding control is kept in a fixed display position around the header display area, and a value change event is bound to the horizontal sliding control; The module for acquiring the value to be controlled is used to acquire the value to be controlled corresponding to the value change event when the value change event is detected to be triggered. The horizontal scrolling module is used to control the horizontal scrolling of the scrolling container according to the value to be controlled, so that the column data display area moves in the horizontal direction.

[0017] According to a third aspect of the embodiments of this application, an electronic device is provided, including one or more processors, for implementing the aforementioned table horizontal browsing method.

[0018] According to a fourth aspect of the embodiments of this application, a computer-readable storage medium is provided having a program stored thereon, which, when executed by a processor, implements the aforementioned table horizontal browsing method.

[0019] According to a fifth aspect of the embodiments of this application, a computer program product is provided, including a computer program / instructions that, when executed by a processor, implement the aforementioned table horizontal browsing method.

[0020] The technical solutions provided by the embodiments of this application may include the following beneficial effects: The table horizontal browsing method of this application embeds a table component within the browser viewport using a parent container and displays the table component within the parent container. The table component includes a header display area and a column data display area. The column data display area is scrolled horizontally using a scrolling container. When the browser viewport is scrolled vertically, the header display area remains fixed at the top visible position within the visible area of ​​the parent container. This allows users to continuously compare the header information when viewing any row of data in the column data display area, reducing the need for additional scrolling and positioning operations to confirm column titles.

[0021] When the total width of the scrolling container's content exceeds the first visible width, a horizontal scrolling control is created within the parent container. The horizontal scrolling control remains fixed in the control display position around the header display area. A value change event is bound to the horizontal scrolling control. When the value change event is detected, the value to be controlled is obtained, and the horizontal scrolling of the scrolling container is controlled according to the value to be controlled, so that the column data display area moves in the horizontal direction.

[0022] Based on the above settings, when users scroll vertically in the browser viewport, they can simultaneously see the table header information and the horizontal scrolling control, and complete the horizontal scrolling control while referring to the table header information. This avoids switching back and forth between different display positions, reduces the operational costs caused by eye jumps and positioning interruptions, and thus improves the efficiency of horizontal data browsing and analysis in ultra-wide table scenarios.

[0023] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and are not intended to limit this application. Attached Figure Description

[0024] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0025] Figure 1 This is a flowchart illustrating a method for horizontal table browsing according to an embodiment of this application; Figure 2 This is a flowchart illustrating another method for horizontal table browsing according to an embodiment of this application; Figure 3 This is a schematic diagram of a table horizontal browsing device according to an embodiment of this application; Figure 4 This is a schematic diagram of the structure of an electronic device according to an embodiment of this application. Detailed Implementation

[0026] The technical solutions in the embodiments of this application will be clearly and completely described herein with reference to the accompanying drawings. In the following description, when referring to the drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements.

[0027] The terms "first" and "second" used in the embodiments of this application are used for descriptive purposes only and should not be construed as indicating or implying relative importance.

[0028] In related technologies, vertical scrolling is typically handled by the browser viewport itself, with users changing the table's vertical position by scrolling the viewport. Horizontal browsing of extra-wide tables often relies on the browser's default scrolling mechanism, placing the table within a horizontally scrollable container. When the table width exceeds the first visible width of the scrollable container, a horizontal scrollbar is displayed at the bottom of the container by default. This scrollbar serves as the entry point for horizontal scrolling control, allowing users to drag it to move the table data left or right, thus switching between different columns. However, this method has the following drawbacks in practical use.

[0029] This arrangement, which uses the browser's default horizontal scrollbar as the control entry point for horizontal scrolling of the scrolling container, separates the control entry point for horizontal browsing of ultra-wide tables from the location of the table header and the user's current data viewing position. Since the table header is used to identify the meaning of each column, users need to simultaneously check the column headers to confirm the column fields corresponding to the data they are viewing when comparing and analyzing column data. Therefore, when viewing data in the middle or top of the table, users often need to switch back and forth between the current data viewing position, the table header position, and the horizontal scrollbar position.

[0030] In this process, on the one hand, the user's operation path is lengthened, the process of analyzing column data is frequently interrupted, the cost of actions increases, and the browsing and analysis efficiency decreases; on the other hand, frequent switching makes the interaction process disjointed, increases the user's cognitive burden, and is accompanied by a higher risk of misoperation and rework, further reducing the overall analysis efficiency. Therefore, related technologies have the drawback of low efficiency in horizontal data browsing and analysis in ultra-wide table scenarios.

[0031] Based on the above settings, in this embodiment of the invention, when a user scrolls the browser viewport vertically, they can simultaneously see the header information and the horizontal scrolling control, and complete the horizontal scrolling control while referring to the header information. This avoids switching back and forth between different display positions, reduces the operational costs caused by eye jumps and positioning interruptions, and thus improves the efficiency of horizontal data browsing and analysis in ultra-wide table scenarios.

[0032] In the aforementioned technologies, when a user needs to view column data in the middle or top of a column display area, and the column to be viewed is located on the far right of the table, the user typically needs to scroll vertically across the browser viewport until the bottom of the scroll container enters the visible area before they can operate the horizontal scroll bar. After completing the horizontal scrolling, they then need to scroll vertically back to the original position to continue viewing the data. This process repeatedly interrupts the user's data analysis, significantly increasing the single operation path compared to the ideal interaction method, potentially by 3 to 5 times. Taking the analysis of financial statements containing dozens of columns of data as an example, if an analyst wants to view the data of a specific row in the far right column, they often need to frequently scroll vertically to find the horizontal scroll bar and operate on it, significantly reducing work efficiency and increasing the cost of the operation.

[0033] In related technologies, the header display area and the horizontal scroll bar are separated in position. Users cannot directly control horizontal scrolling while viewing the current data position in the column display area. Users often need to repeatedly switch between viewing data, locating the horizontal scroll bar, operating the scroll bar, and returning to continue viewing. This disjointed interaction increases cognitive load and makes errors and rework more likely. Taking e-commerce sales data tables as an example, when operations personnel are comparing multi-dimensional column data for different products, frequent switching between positions can easily distract them and affect the overall data analysis.

[0034] To address the issues of lengthy operation paths and disconnected interaction logic, this application provides a method for horizontal table browsing. The method includes: embedding a table component within a parent container in the browser viewport and displaying the table component within the parent container; wherein the table component includes a header display area and a column data display area, the column data display area being scrolled horizontally via a scrolling container, and, when the browser viewport is scrolled vertically, the header display area remaining fixed at the top visible position within the visible area of ​​the parent container; if the total width of the scrolling container's content is greater than a first visible width of the scrolling container, creating a horizontal sliding control within the parent container; wherein the horizontal sliding control remains fixed in a control display position around the header display area, and a value change event is bound to the horizontal sliding control; when a value change event is detected, obtaining the value to be controlled corresponding to the value change event; and controlling the horizontal scrolling of the scrolling container according to the value to be controlled, causing the column data display area to move horizontally.

[0035] When a table component is embedded within a parent container, the table header display area remains fixed at the top of the parent container's visible area when the browser viewport scrolls vertically. Users no longer need to scroll the bottom of the scroll container into the visible area to view data in the middle or top of the column display area for horizontal navigation. When the total width of the content exceeds the first visible width, a horizontal scrolling control is created within the parent container and fixed in its position around the table header display area. After the horizontal scrolling control triggers a value change event, it retrieves the value to be controlled and uses that value to control the horizontal scrolling of the scroll container, thus moving the column display area horizontally. This reduces vertical back-and-forth movement and position switching, shortens the operation path, makes the interaction smoother, and reduces errors and rework.

[0036] In the aforementioned related technologies, when the second visible width of the browser viewport changes, the first visible width of the scrolling container changes accordingly, resulting in a change in the horizontal scrolling distance. These technologies often cannot automatically update the horizontal scrolling state, forcing users to manually adjust the horizontal scroll bar position. For example, when a user switches from a desktop to a tablet to browse data, the change in screen size causes a change in the second visible width of the browser viewport, potentially requiring readjustment of the table display and horizontal scrolling state, thus affecting the consistency and smoothness of the user experience.

[0037] To address the aforementioned lack of adaptive capability, this application provides a method for horizontal table browsing. The method includes: when a change in the second visible width of the browser viewport is detected, re-acquiring the total content width and the first visible width of the scroll container, and returning to the step of creating a horizontal sliding control within the parent container when the total content width of the scroll container is greater than the first visible width of the scroll container.

[0038] In this embodiment, the table horizontal browsing method, upon detecting a change in the second visible width, re-acquires the total content width and the first visible width of the scrolling container, and returns to the step of creating a horizontal sliding control within the parent container when the total content width is greater than the first visible width. This ensures that the controllable range of the horizontal sliding control is updated to correspond to the current first visible width. Simultaneously, when the horizontal sliding control triggers a value change event, it acquires the value to be controlled and updates the horizontal scroll displacement value of the scrolling container to the value to be controlled. This maintains the horizontal browsing continuity of the column data display area even after screen size changes or terminal switching, reducing manual adjustments and interruptions.

[0039] In the aforementioned technologies, the scroll and resize events are frequently triggered during table operations. Without effective debouncing for these events, stuttering can easily occur during continuous scrolling or browser viewport resizing, especially when the amount of column data is large and the table has many nodes. Taking a large-scale logistics and transportation data table as an example, with horizontal scrolling and changes in browser viewport size, page stuttering may worsen, even leading to brief periods of unresponsiveness, affecting real-time data viewing and analysis.

[0040] To address the aforementioned performance optimization deficiencies, this application provides a method for horizontal table browsing. The method includes: activating a first debounce timer after a value change event is detected; acquiring a value to be controlled if no value change event is detected again within a preset first debounce duration after the first debounce timer is activated; updating the horizontal scroll displacement value of the scrolling container to the value to be controlled, thereby moving the column data display area horizontally. Activating a second debounce timer after a scroll event is detected; acquiring a horizontal scroll displacement value if no scroll event is detected again within a preset second debounce duration after the second debounce timer is activated; updating the value to be controlled to the horizontal scroll displacement value corresponding to the scroll event, thereby changing the position of the horizontal sliding control in the horizontal direction. Activating a third debounce timer after a change in the second visible width is detected; re-acquiring the total content width and the first visible width of the scrolling container if no change in the second visible width is detected again within a preset third debounce duration after the third debounce timer is activated, and returning to the step of creating a horizontal sliding control within the parent container if the total content width of the scrolling container is greater than the first visible width of the scrolling container.

[0041] The table horizontal browsing method in this embodiment introduces anti-jitter processing for different high-frequency events: Upon detecting a value change event, a first anti-jitter timer is initiated. The value to be controlled is acquired only if it is not triggered again within the first anti-jitter duration, and the horizontal scroll displacement value of the scrolling container is updated to the value to be controlled, thereby avoiding dense updates to the scrolling container during continuous dragging of the horizontal sliding control. Upon triggering a scrolling event, a second anti-jitter timer is initiated. The horizontal scroll displacement value is acquired only if it is not triggered again within the second anti-jitter duration, and the value to be controlled is updated to this horizontal scroll displacement value, thereby changing the horizontal position of the horizontal sliding control and reducing repetitive scroll synchronization processing. Upon triggering a second visible width change, a third anti-jitter timer is initiated. The total content width and the first visible width are reacquired only after stabilization within the third anti-jitter duration, and the process returns to the horizontal sliding control creation step, thereby reducing jitter updates during the size adjustment process and improving smoothness and responsiveness under large data volumes.

[0042] In related technologies, most improvements addressing the aforementioned issues focus on localized optimizations. For example, fixing the header display area can facilitate user viewing of header information to some extent, but it doesn't solve the inconvenience caused by the horizontal scrollbar being fixed at the bottom as the horizontal scrolling control entry point. Adjusting the style of the horizontal scrollbar is primarily a visual modification and offers limited help in improving the interaction efficiency of horizontal browsing. Adding a scroll button provides an additional horizontal operation entry point, but it still doesn't change the fact that users need to frequently switch between data positions, header display areas, and horizontal scrollbar positions when browsing in the middle or top of the table. These solutions fail to simultaneously address the coordination between the horizontal control entry point and the header display area, dynamic adaptation when the browser's second visible width changes, and performance issues when high-frequency events are triggered. Therefore, an improved interaction mechanism is still needed to provide a horizontal browsing control entry point in the control display position near the header display area and achieve synchronization with the horizontal scrolling of the scrolling container, thereby improving the horizontal browsing efficiency and user experience of ultra-wide tables.

[0043] To address the aforementioned deficiencies in related technologies, this application provides a method, apparatus, electronic device, and medium for horizontal table browsing. The method and apparatus for horizontal table browsing of this application will be described in detail below with reference to the accompanying drawings. Unless otherwise specified, the following embodiments and features can be combined with each other.

[0044] It should be noted that the horizontal table browsing method in this application is compatible with mainstream browsers such as Chrome, Firefox, Edge, and Safari, and adapts to common front-end table components such as Element UI, Ant Design Table, and Vue Table. Furthermore, it requires no modification to the original table code, resulting in low integration costs and easy rapid deployment. To more clearly illustrate the technical solution of this application, the following embodiments are implemented using the front-end Vue framework and Element UI component library by default. However, those skilled in the art can use other front-end frameworks such as React and Angular according to actual needs, and this application does not limit this. This application mainly focuses on ultra-wide table scenarios, applicable to situations where the number of columns in the table is greater than or equal to 5, and the total width of the table exceeds the visible area of ​​the browser viewport by at least 500px.

[0045] Figure 1 This application illustrates a method for horizontal table browsing according to an exemplary embodiment, such as... Figure 1 As shown, the method includes steps S101 to S104.

[0046] S101. Embed the table component in the parent container in the browser viewport and display the table component inside the parent container.

[0047] The table component includes a header display area and column data display areas. The column data display areas are scrolled horizontally using a scrollable container. Furthermore, when the browser viewport is scrolled vertically, the header display area remains fixed at the top visible position within the parent container's visible area and is displayed there. Thus, the header display area is displayed within the browser viewport, maintaining a fixed top visible position within the parent container's visible area, and does not move with the vertical scrolling of the table component's content.

[0048] Specifically, this fixed display can be implemented using sticky positioning, scroll event listening, or other conventional equivalent methods in the art, and this application does not limit this. Sticky positioning involves setting sticky positioning for the header wrapper node or header cell node in the table component that carries the header content, so that the header display area snaps to the top visible position of the parent container after the parent container enters the browser viewport and remains continuously displayed. Simultaneously, a layer value can be set for the header display area, placing it at a higher display layer relative to the column data display area to prevent the header display area from being obscured by the column data display area and to keep the header content visible.

[0049] The scroll event listener is implemented by listening for vertical scroll events in the browser viewport. During vertical scrolling, the position information of the parent container in the browser viewport is obtained, and the vertical position corresponding to the top visible position is determined accordingly. When the parent container is within the visible range of the browser viewport, the header display area is put into a fixed display state, so that the display position of the header display area in the vertical direction does not change with the vertical scrolling of the browser viewport, and the vertical position of the header display area is updated to the vertical position corresponding to the top visible position. When the parent container leaves the visible range of the browser viewport, the fixed display state is canceled, and the header display area is restored to the state of normal display with the table component.

[0050] S102. If the total width of the content of the scroll container is greater than the first visible width of the scroll container, create a horizontal scroll control within the parent container.

[0051] The horizontal scroll control remains fixed in its position around the header display area, and a value change event is bound to it. Users can directly manipulate the horizontal scroll control within the header display area to control horizontal scrolling, without frequently navigating to the horizontal scroll bar at the bottom of the parent container. This approach reduces the single operation path by more than 80%, especially in scenarios involving browsing multiple columns of data, where operation time is reduced by 60% to 70%, significantly improving user efficiency and data analysis efficiency.

[0052] Specifically, parameter initialization begins after the browser triggers the DOMContentLoaded event and the table component finishes rendering. During initialization, the target table DOM (Document Object Model) element corresponding to the table component is obtained using a document selector. The document selector can use document.querySelector() or other specified selectors. If multiple table components exist, multiple target table DOM elements can be obtained in batches based on their class names. For each target table DOM element, the scroll container corresponding to the column data display area is obtained, and the scrollWidth property value of the scroll container is read as the total content width, and the clientWidth property value of the scroll container is read as the first visible width. The scrollWidth property represents the total width of the scroll container's content area, including the full width of hidden columns, and the clientWidth property represents the width of the scroll container's visible area within the browser viewport. Hidden columns refer to column data that are not displayed within the visible area of ​​the column data display area in the current browser viewport. When the total width of the scroll container's content exceeds the first visible width, some column data will be outside the visible range of the column data display area and will be invisible. The user can only display this part of the column data after scrolling the scroll container horizontally. The corresponding column is the hidden column.

[0053] During parameter initialization, the root DOM node of the Element UI Table component can be accurately obtained using the Vue framework's referencing mechanism. Based on this, the table's scroll container is further located, specifically the component's built-in `<.el-scrollbar__wrap>` node, which is responsible for implementing the table's horizontal scrolling functionality. By obtaining the scroll container's DOM element and reading its `scrollWidth` and `clientWidth` property values, the difference between the scroll container's total content width and its visible width can be accurately calculated, ensuring smooth horizontal scrolling.

[0054] The difference between the total content width and the first visible width can be determined using the following formula:

[0055] in, Indicates the difference. This represents the value of the scrollWmidth property of the scrollable container. This represents the value of the clientWidth property of the scrolling container.

[0056] If the difference distance > 0, it indicates that there are hidden columns in the column data display area, and the scroll container needs to be displayed horizontally. In this case, a horizontal scrolling control is created within the parent container.

[0057] When distance=0, it indicates that there are no hidden columns in the column data display area, and the column data display area does not need to be displayed horizontally, so there is no need to create a horizontal scrolling control. In this case, it is possible to detect whether there is a horizontal scrolling control already created in the parent container. If it exists, the horizontal scrolling control is removed to reduce redundant display at the control's display position.

[0058] By using the above method, the creation and removal of horizontal sliding controls are made consistent with the horizontal scrolling requirements of the scrolling container.

[0059] A horizontal slider control may include a horizontal slider track and a slider block that can move along the horizontal slider track. This horizontal slider control can be implemented using HTML5.<inputtype="range"> Implemented using tags, or using Element UI. <el-slider / > The component is implemented to provide the interactive ability for sliders to be dragged along a horizontal sliding track.

[0060] After creating a horizontal scrolling control, you can set its basic properties, which include: minimum value (min), maximum value (max), value (value), and width (width).

[0061] The width can be set to be the same as the clientWidth of the scroll container, so that the display width of the horizontal sliding control is consistent with the first visible width of the scroll container. This keeps the horizontal sliding control and the column data display area aligned in the horizontal visible area, making it easier for users to perform horizontal browsing control and position awareness within the same visible width.

[0062] S103. When a value change event is detected, obtain the value to be controlled corresponding to the value change event.

[0063] The value change event is used to characterize events where the value of a horizontal scrolling control changes. Specifically, an input event listener can be added to the slider element corresponding to the horizontal scrolling control, so that the input event is triggered when the value of the slider element changes, and this input event is used as the value change event. Compared to the change event, which is usually triggered after dragging is released, the input event is triggered in real time during dragging, and can continuously obtain the current value of the horizontal scrolling control's value property during dragging. Therefore, it is more suitable for implementing real-time linkage between the horizontal scrolling control and the scrolling container.

[0064] The value `value` of the horizontal slider control represents the current value of the control. It can be initialized to 0. When the user drags the slider, a value change event is triggered, the value `value` is read, and this value is used as the controllable value. The minimum and maximum values ​​`min` and `max` of the horizontal slider control limit the range of the value `value`, which varies within the range [min, max]. When the user drags the slider, its current position on the horizontal slider track corresponds to a value `value`. As the slider moves along the track, the value `value` changes with its current position and is limited to between the minimum `min` and the maximum `max`. The minimum value `min` can be set to 0.

[0065] S104. Based on the value to be controlled, control the horizontal scrolling of the scrolling container so that the column data display area moves horizontally.

[0066] Based on steps S101 to S104, in order to ensure that the header display area and the column data display area always correspond, when the column data display area moves in the horizontal direction, the header display area updates its display position in the horizontal direction synchronously, so that the column header displayed in the header display area corresponds to the column data currently displayed in the column data display area.

[0067] Specifically, when the header display area and the column data display area are both scrollable contents of a scrolling container and are uniformly supported by the scrolling container for horizontal scrolling, when the scrolling container scrolls horizontally, the header display area and the column data display area move together with the same horizontal scrolling displacement. The two naturally remain synchronized in the horizontal direction, and their correspondence will not be offset. Therefore, no additional synchronization control is required.

[0068] When the header display area is fixed at the top visible position within the parent container's visible area and does not move with the horizontal scrolling of the scrolling container, to ensure that the header display area and the column data display area maintain horizontal correspondence, the horizontal display position of the header display area can be synchronously updated based on the current horizontal scroll displacement value of the scrolling container. The horizontal scroll displacement value of the scrolling container can be represented by the scrollLeft property value of the scrolling container, which represents the horizontal displacement distance the scrolling container has already moved relative to its visible area. The horizontal scroll displacement value of the scrolling container can be obtained by reading the scrollLeft property value.

[0069] One implementation involves setting the scrollLeft property value of the header wrapper node corresponding to the header display area to the scrollLeft property value of the scroll container, so that the header display area and the column data display area remain synchronized and always correspond in the horizontal direction.

[0070] Another implementation method is to set a horizontal translation display transformation parameter transform for the nodes used to carry the table header content in the table header display area, and set the horizontal translation amount corresponding to the transform to the offset corresponding to the scrollLeft property value of the scroll container, so that the table header display area and the column data display area remain synchronized and always correspond in the horizontal direction. This application does not impose any restrictions.

[0071] When the horizontal scrolling of the scroll container is controlled according to the value to be controlled so that the column data display area moves in the horizontal direction, the horizontal scroll displacement value of the scroll container changes. The header display area synchronously updates the scrollLeft of the header wrapping layer node according to the changed horizontal scroll displacement value, or synchronously updates the horizontal translation amount corresponding to the transform of the node used to carry the header content, so that the header display area and the column data display area continue to correspond.

[0072] The table horizontal browsing method in this embodiment embeds a table component within the browser viewport using a parent container and displays the table component within the parent container. The table component includes a header display area and a column data display area. The column data display area is scrolled horizontally using a scrolling container. When the browser viewport is scrolled vertically, the header display area remains fixed at the top visible position within the visible area of ​​the parent container. This allows users to continuously compare the header information when viewing any row of data in the column data display area, reducing the need for additional scrolling and positioning operations to confirm the meaning of columns.

[0073] Furthermore, when the total width of the scroll container's content is greater than the scroll container's first visible width, a horizontal sliding control is created within the parent container. The horizontal sliding control remains fixed in the control display position around the header display area. A value change event is bound to the horizontal sliding control. When the value change event is detected, the value to be controlled is obtained, and the horizontal scrolling of the scroll container is controlled according to the value to be controlled, so that the column data display area moves in the horizontal direction.

[0074] The table horizontal browsing method in this embodiment embeds a table component within the browser viewport using a parent container and displays the table component within the parent container. The table component includes a header display area and a column data display area. The column data display area is scrolled horizontally using a scrolling container. When the browser viewport is scrolled vertically, the header display area remains fixed at the top visible position within the visible area of ​​the parent container. This allows users to continuously compare the header information when viewing any row of data in the column data display area, reducing the need for additional scrolling and positioning operations to confirm column titles.

[0075] When the total width of the scrolling container's content exceeds the first visible width, a horizontal scrolling control is created within the parent container. The horizontal scrolling control remains fixed in the control display position around the header display area. A value change event is bound to the horizontal scrolling control. When the value change event is detected, the value to be controlled is obtained, and the horizontal scrolling of the scrolling container is controlled according to the value to be controlled, so that the column data display area moves in the horizontal direction.

[0076] Based on the above settings, when users scroll vertically in the browser viewport, they can simultaneously see the table header information and the horizontal scrolling control, and complete the horizontal scrolling control while referring to the table header information. This avoids switching back and forth between different display positions, reduces the operational costs caused by eye jumps and positioning interruptions, and thus improves the efficiency of horizontal data browsing and analysis in ultra-wide table scenarios.

[0077] In one alternative embodiment, the horizontal sliding control remains fixedly displayed above the header display area, with its display position set horizontally. Alternatively, the horizontal sliding control remains fixedly displayed below the header display area, with its display position set horizontally.

[0078] Specifically, "above" can be above adjacent rows or above rows several rows apart. Similarly, "below" can be below adjacent rows or below rows several rows apart. To ensure the horizontal slider control remains fixed above or below the table header display area, CSS (Cascading Style Sheets) positioning can be used to position the horizontal slider control within the parent container. Specifically, the horizontal slider control is set to absolute positioning, i.e., the style property `position` is set to `absolute`, and the `top` and `left` positioning style properties determine the horizontal slider control's position within the parent container. `top` determines the vertical offset distance of the horizontal slider control relative to the top edge of the parent container, and `left` determines the horizontal offset distance of the horizontal slider control relative to the left edge of the parent container. The parent container can be set to `position` set to `relative`, making the `top` and `left` of the horizontal slider control effective relative to the parent container. The horizontal slider control can be set to `left=0` to align with the left side of the column data display area, and its `z-index` can be set to ensure the horizontal slider control appears above the column data display area without obscuring the table header display area.

[0079] When the control is positioned below the table header display area, the `clientHeight` property value of the corresponding DOM element of the table header display area can be read as the height value `theadHeight`. Then, set the horizontal scrolling control's `top=theadHeight` to ensure the horizontal scrolling control is displayed flush against the bottom edge of the table header display area. Additionally, setting `transform` to `translateY` ​​(-50%) ensures the horizontal scrolling control fits snugly against the bottom of the table header display area, guaranteeing precise positioning. To ensure the horizontal scrolling control is above the column data display area without obscuring the table header text, `z-index=9` can be set.

[0080] When the horizontal scroll control is positioned above the table header display area, you can set its top=0 to make it appear close to the top edge of the parent container. Furthermore, you can adjust the vertical position of the table header display area at the top visible position to avoid obscuring the horizontal scroll control's height. Insert the horizontal scroll control into the parent container as a sibling element of the table component to avoid affecting the table component's own layout.

[0081] Based on the combined height value (theadHeight), table border width (borderWidth), and padding, the positioning style properties (top and left) of the horizontal sliding control can be precisely calculated, achieving sub-pixel-level accurate alignment. Simultaneously, a state machine model is used to manage the state of the horizontal sliding control, including state transitions such as initialization, activation, updating, and destruction, and the state of the horizontal sliding control is dynamically switched based on the difference between the total content width and the first visible width (distance).

[0082] In an optional embodiment, step S104, controlling the lateral rolling of the rolling container according to the value to be controlled, includes updating the lateral rolling displacement value of the rolling container to the value to be controlled.

[0083] As mentioned earlier, the horizontal scroll displacement of a scroll container can be represented by the scrollLeft property value of the scroll container. The value to be controlled is the value of the horizontal scroll control. The horizontal scrolling of the scroll container can be controlled by updating the scrollLeft property value to the value of the scroll container.

[0084] Furthermore, synchronization precision can be controlled through difference validation to ensure that the synchronization error between the horizontal scrolling of the scrolling container and the horizontal sliding control is less than or equal to 1px. Specifically, the synchronization operation of synchronizing the value of the horizontal sliding control to the scrollleft property of the scrolling container is only performed when the difference between the value of the horizontal sliding control and the value of the scrollleft property of the scrolling container is greater than 1px, thus avoiding unnecessary DOM operations due to minor deviations. This validation mechanism effectively reduces invalid synchronization operations, improves performance, and ensures synchronization precision.

[0085] In one optional embodiment, the upper limit of the value to be controlled is the difference between the total width of the content and the first visible width. Specifically, the max attribute value of the horizontal sliding control can be set to distance, which is the difference between the scrollWidth attribute value and the clientWidth attribute value of the scroll container.

[0086] In one alternative embodiment, a scrolling event is attached to the scrolling container, such as... Figure 2 As shown, the table horizontal browsing method also includes step S105: when a scrolling event is detected to be triggered, obtain the horizontal scrolling displacement value corresponding to the scrolling event; update the value to be controlled to the horizontal scrolling displacement value corresponding to the scrolling event, so as to change the position of the horizontal sliding control in the horizontal direction.

[0087] Specifically, you can listen for the scroll event on the element corresponding to the scroll container. When the scroll event is triggered, read the scrollLeft property value of the scroll container as the horizontal scroll displacement value, and assign the scrollLeft property value to the value of the horizontal sliding control. This updates the value to be controlled to the horizontal scroll displacement value, thereby changing the position of the horizontal sliding control in the horizontal direction and synchronizing the horizontal scroll displacement of the scroll container with the value of the horizontal sliding control.

[0088] When a value change event is detected, the `value` property of the horizontal slider control is read as the value to be controlled, and this `value` property value is written to the `scrollLeft` property of the scroll container, causing the scroll container to scroll horizontally. When the scroll container scrolls horizontally, the value of its `scrollLeft` property changes, triggering a scroll event. The changed `scrollLeft` property value is read and written to the `value` property of the horizontal slider control to update the value to be controlled and change the horizontal position of the horizontal slider control. This creates a two-way event linkage between the horizontal slider control and the scroll container, ensuring that the `value` property value of the horizontal slider control remains consistent with the horizontal scrolling state of the scroll container. This two-way linkage mechanism greatly improves the convenience of user operation and the intuitiveness of interaction.

[0089] When two or more table components exist simultaneously in the same browser viewport, each table component corresponds to its own scroll container and can create its own corresponding horizontal scroll control. In this case, the user might scroll horizontally or drag the slider of the horizontal scroll control for different table components separately. If the different table components are not distinguished, it's easy to accidentally synchronize the scrollLeft property value of one scroll container to the value property of another horizontal scroll control, or write the value property value of one horizontal scroll control to the incorrect scroll container's scrollLeft property.

[0090] To facilitate unified management of multiple table components, an event delegation mechanism can be adopted. Specifically, the scroll event is triggered by the scroll container of each table component, and the input event is triggered by the horizontal scroll control of each table component. The listeners for both scroll and input events are uniformly set in the parent container. When an event is triggered, the parent container obtains the identification information through the event target `event.target` and distinguishes different table components. For example, a custom `data-table-id` property is set for the target table DOM element, scroll container, or horizontal scroll control. Then, based on the `data-table-id`, the corresponding scroll container and horizontal scroll control under the same identifier are located, and the `scrollLeft` property of the scroll container and the `value` property of the horizontal scroll control are updated synchronously. This achieves effective event management of multiple table components and maintains a two-way linkage mechanism between the horizontal scroll control and the scroll container, improving the convenience of user operation and the intuitiveness of interaction.

[0091] In one alternative embodiment, such as Figure 2 As shown, the table horizontal browsing method also includes step S106: when the total width of the content is greater than the first visible width, a horizontal scroll bar is set at the bottom of the scroll container as the control entry point for the horizontal scrolling of the scroll container.

[0092] Specifically, the scrolling event is triggered when the horizontal scroll bar is scrolled.

[0093] In the case of obtaining the value to be controlled for the value change event when the value change event is detected to be triggered, the method further includes: controlling the horizontal scrolling of the parent container according to the value to be controlled, so that while the table moves in the horizontal direction, the horizontal scroll bar and the horizontal sliding control move in the same direction.

[0094] When the user scrolls the horizontal scroll bar, the scroll container scrolls horizontally, and the scrollLeft property value of the scroll container changes accordingly, triggering the scroll event. When the scroll event is triggered, the scrollLeft property value of the scroll container is read and written to the value property of the horizontal scroll control, thereby synchronizing the horizontal scroll displacement of the scroll container with the horizontal scroll control.

[0095] When a user drags the slider of a horizontal scroll control, the `input` event can be selected as the value change event. When the `input` event is triggered, the `value` property of the horizontal scroll control is read, and this value is written to the `scrollLeft` property of the scroll container via the `requestAnimationFrame()` interface, causing the scroll container to scroll horizontally. After the scroll container scrolls horizontally, the value of the `scrollLeft` property changes and triggers the aforementioned `scroll` event, and the horizontal scrollbar updates synchronously with the horizontal scrolling of the scroll container.

[0096] This establishes a real-time data synchronization channel between the horizontal sliding control and the horizontal scroll bar, truly achieving a two-way linkage effect where scrolling the horizontal scroll bar synchronizes changes in the horizontal sliding control, and dragging the slider of the horizontal sliding control synchronizes changes in the horizontal scroll bar. This two-way linkage mechanism greatly enhances the convenience of user operation and the intuitiveness of interaction. The horizontal sliding control is closely integrated with the table header display area, and the horizontal scrolling of the scroll container is linked to the horizontal sliding control in real time. Users can directly control the horizontal scrolling while viewing data, without frequently switching positions or manipulating the scroll bar, making the interaction process smoother, more intuitive, and in line with user operating habits.

[0097] In an optional embodiment, step S105, when a scrolling event is detected to be triggered, obtaining the lateral scrolling displacement value corresponding to the scrolling event, includes: after a scrolling event is detected to be triggered, starting a second anti-shake timing; after the second anti-shake timing is started, if no scrolling event is detected to be triggered again within a preset second anti-shake duration, obtaining the lateral scrolling displacement value.

[0098] Specifically, to ensure a smooth and stable process for obtaining the horizontal scroll displacement value corresponding to a scroll event and to optimize performance, a debouncing function can be used when handling scroll events. Specifically, when a scroll event is detected, the debouncing function starts a second debouncing timer, and if no scroll event is triggered again within the second debouncing duration, it performs the operation of obtaining the horizontal scroll displacement value. The debouncing function avoids repeatedly obtaining the horizontal scroll displacement value and repeatedly triggering synchronization processing within a short period by delaying the execution of frequently triggered event logic, thereby reducing performance loss and ensuring smooth synchronization between the horizontal sliding control and the scrolling container.

[0099] The first and second stabilization durations can be set to the same or different; this application does not impose any restrictions. The second stabilization threshold can be set to 200ms, which is the second stabilization duration and can be flexibly adjusted according to actual needs. Within the second stabilization duration, if no new scroll event is triggered, the stabilization function performs the operation of obtaining the horizontal scroll displacement value; if the scroll event is triggered again, the timer is reset, and execution is delayed until the last trigger.

[0100] In one optional embodiment, to ensure that the state of the horizontal sliding control and the horizontal scroll bar can adapt to changes in the browser viewport size in real time, such as... Figure 2 As shown, the table horizontal browsing method also includes step S107: when the second visible width of the browser viewport is detected to have changed, the total content width and the first visible width of the scroll container are re-acquired, and the method returns to step S102 where, if the total content width of the scroll container is greater than the first visible width of the scroll container, a horizontal sliding control is created within the parent container.

[0101] Specifically, to detect whether the second visible width of the browser viewport has changed, the `resize` event can be listened for on the browser window. When the `resize` event is triggered, it indicates that the browser window size has changed, which may lead to a change in the second visible width of the browser viewport. Based on this, the total width of the scrolling container's content and the first visible width are retrieved again, and the difference between the total content width and the first visible width, `distance`, is recalculated. When `distance` is greater than 0, if a horizontal scrolling control already exists in the parent container, the `max` property value of the horizontal scrolling control is updated to the new difference `distance`; if a horizontal scrolling control does not exist in the parent container, the process returns to the step of creating a horizontal scrolling control within the parent container.

[0102] Specifically, by listening to the table's scroll and resize events, changes in the DOM structure can be monitored, such as width changes or dragging the horizontal scrollbar. For tables with dynamic columns, the watch API in frameworks like Vue can be used to monitor changes in table data or configuration items, such as changes to column definition arrays, like adding or deleting columns, triggering timely parameter recalculation to ensure data real-time performance and accuracy. These measures ensure that the table's display and interaction logic can respond quickly and remain synchronized when data or the interface changes, avoiding unsmooth interactions caused by DOM structure or data changes.

[0103] In one alternative embodiment, such as Figure 2 As shown, the table horizontal browsing method further includes step S108: if the total width of the content is greater than the first visible width, but the total width of the re-acquired content is not greater than the re-acquired first visible width, remove the horizontal sliding control. Specifically, when the difference distance = 0, if a horizontal sliding control already exists in the parent container, then remove the horizontal sliding control.

[0104] In one alternative embodiment, such as Figure 2As shown, the table horizontal browsing method further includes step S109: if the total width of the re-acquired content is greater than the re-acquired first visible width, update the value to be controlled to the reset horizontal sliding value. Specifically, reset the value property of the horizontal sliding control to the reset horizontal sliding value, and simultaneously reset the scrollLeft property of the scroll container to the reset horizontal sliding value, so that the column data display area and the horizontal sliding control return to the horizontal position corresponding to the reset horizontal sliding value. For example, when the reset horizontal sliding value is 0, reset the scrollLeft property of the scroll container to 0, and reset the value property of the horizontal sliding control to 0, thereby returning the horizontal scrolling position to the initial state and avoiding scrolling misalignment due to browser viewport scaling.

[0105] In an optional embodiment, step S103, when a value change event is detected to be triggered, obtaining the value to be controlled corresponding to the value change event, includes: after a value change event is detected to be triggered, starting a first anti-shake timing; after the first anti-shake timing is started, if no value change event is detected to be triggered again within a preset first anti-shake duration, obtaining the value to be controlled.

[0106] Specifically, to ensure smooth and lag-free synchronization between the horizontal scrolling control and the scrolling container, and to optimize performance, a debouncing function can be used when handling input events. When a value change event is detected, the debouncing function starts a first debouncing timer. If no further value change event is triggered within the first debouncing duration, the operation to retrieve the value to be controlled is performed. By delaying the execution of frequently triggered event logic, the debouncing function avoids performing multiple synchronization operations in a short period, thereby reducing performance overhead and ensuring the smoothness of the horizontal scrolling process of the scrolling container and the smooth synchronization between the horizontal scrolling control and the scrolling container.

[0107] The stabilization threshold can be set to 200ms, which is the first stabilization duration and can be flexibly adjusted according to actual needs. Within the first stabilization duration, if no new value change event is triggered, the stabilization function performs synchronization operations; if the value change event is triggered again, the timer is reset, and execution is delayed until the last trigger.

[0108] In an optional embodiment, step S107, when a change in the second visible width of the browser viewport is detected, re-acquiring the total content width and the first visible width of the scroll container, includes: after a change in the second visible width is detected, starting a third anti-shake timing; after the third anti-shake timing is started, if no change in the second visible width is detected again within a preset third anti-shake duration, re-acquiring the total content width and the first visible width of the scroll container.

[0109] Specifically, to avoid frequent triggering of re-acquiring the total content width and first visible width of the scroll container when the second visible width of the browser viewport changes continuously, and to optimize performance, a debouncing function can be used when handling the resize event. Specifically, after detecting a resize event, the debouncing function starts a third debouncing timer, and if no resize event is detected again within the third debouncing time, it re-acquisitions the total content width and first visible width of the scroll container. By delaying the execution of frequently triggered event logic, the debouncing function avoids frequent triggering of re-acquiring the total content width and first visible width of the scroll container when the window is continuously adjusted, thus maintaining the stability and smoothness of the interaction in scenarios such as window scaling and device landscape / portrait switching.

[0110] The third stabilization duration can be set to the same as or different from the first and second stabilization durations; this application does not impose any restrictions. Similar to the logic for handling scroll events, a third stabilization threshold of 500ms can be set for the resize event. This duration is the third stabilization duration and can be flexibly adjusted according to actual needs. When the window is continuously scaled, the operation of re-acquiring the total width of the scroll container and the first visible width is only performed after the third stabilization duration has elapsed since scaling stopped, provided no new resize event is triggered. If the resize event is triggered again within the third stabilization duration, the third stabilization timer is reset and execution continues with a delay.

[0111] By employing debouncing functions, event delegation mechanisms, and the `requestAnimationFrame()` interface, this application reduces the number of high-frequency event triggers and DOM manipulations, thereby significantly reducing page lag. Even in ultra-wide tables containing over 1000 rows of data, a smooth interactive experience is maintained, with faster page response and optimized user operation efficiency and experience. This method achieves functionality solely through front-end DOM manipulation and event handling, without altering the logic of the table data layer. The Vue framework and Element UI component library used in this application are merely carriers of technical implementation and are not the core limitations of this invention. Depending on actual needs, those skilled in the art can use other alternative technical solutions, such as using React's `useRef` instead of Vue's `ref` to obtain the DOM, or using Ant Design Table's scroll container instead of ElementUI's `.el-scrollbar__wrap`. Furthermore, a slider can be created using native JavaScript. <input type="range"> Alternative <el-slider / > Components.

[0112] Based on the same inventive concept as the above-described table horizontal browsing method, this application also provides a table horizontal browsing device, such as... Figure 3As shown, the table horizontal browsing device 2 includes: a table component display module 21, a horizontal sliding control creation module 22, a value acquisition module 23, and a horizontal scrolling module 24.

[0113] The table component display module 21 is used to embed a table component within a parent container in the browser viewport and display the table component within the parent container. The table component includes a header display area and a column data display area. The column data display area is scrolled horizontally using a scrollable container. Furthermore, when the browser viewport is scrolled vertically, the header display area remains fixed at the top visible position within the parent container's visible area and is displayed.

[0114] The horizontal sliding control creation module 22 is used to create a horizontal sliding control within a parent container when the total width of the content of the scrolling container is greater than the first visible width of the scrolling container. The horizontal sliding control maintains a fixed display position around the header display area, and a value change event is bound to the horizontal sliding control.

[0115] The module 23 for acquiring the value to be controlled is used to acquire the value to be controlled corresponding to the value change event when a value change event is detected.

[0116] The horizontal scrolling module 24 is used to control the horizontal scrolling of the scrolling container according to the value to be controlled, so that the column data display area moves in the horizontal direction.

[0117] Each module of the above-mentioned horizontal table browsing device corresponds to the steps of the above-mentioned horizontal table browsing method. For details on the implementation process of the functions and roles of each module in the above-mentioned horizontal table browsing device, please refer to the implementation process of the corresponding steps in the above-mentioned horizontal table browsing method. The same technical effect can be achieved, and it will not be repeated here.

[0118] Figure 4 The diagram shown is a structural schematic of the electronic device 30 provided in an embodiment of this application.

[0119] like Figure 4 As shown, the electronic device 30 includes one or more processors 31 for implementing the table horizontal browsing method described above.

[0120] In some embodiments, the electronic device 30 may include a storage medium 39. For example, a computer-readable storage medium may store a program that can be invoked by a processor 31, and may include a non-volatile storage medium. In some embodiments, the electronic device 30 may include memory 38 and an interface 37. In some embodiments, the electronic device 30 may also include other hardware depending on the specific application.

[0121] The computer-readable storage medium of this application embodiment stores a program that, when executed by processor 31, implements the table horizontal browsing method described above.

[0122] This application provides a computer program product, including a computer program / instructions that, when executed by a processor, implement the table horizontal browsing method as described above.

[0123] This application also provides a computer program stored in a computer-readable storage medium, for example... Figure 4 The storage medium 39, and when the processor executes the computer program, causes the processor 31 to execute the table horizontal browsing method described above.

[0124] This application may take the form of a computer program product implemented on one or more computer-readable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing program code. Computer-readable storage media include permanent and non-permanent, removable and non-removable media, and information storage can be implemented using any method or technology. Information may be computer-readable instructions, data structures, program modules, or other data. Examples of computer-readable storage media include, but are not limited to: phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, disk storage or other magnetic storage devices, or any other non-transfer medium that can be used to store information accessible by a computing device.

[0125] The aforementioned electronic device can execute the table landscape browsing method provided in the embodiments herein. The aforementioned electronic device may include the aforementioned table landscape browsing apparatus, such as one or more of a processor, controller, and PC (Personal Computer) terminal device. The server terminal device and the PC terminal device may include, but are not limited to, a server, a desktop computer, a tablet computer, or a laptop computer.

[0126] It should be noted that the technical solutions or features described in the above embodiments can be combined or supplemented with each other without conflict. The scope of protection of this application is not limited to the precise structures described in the above embodiments and shown in the accompanying drawings; all modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of protection of this application.

Claims

1. A method for horizontally browsing a table, characterized in that, include: A table component is embedded within a parent container in the browser viewport and displayed within the parent container; wherein the table component includes a header display area and a column data display area, the column data display area is scrolled horizontally via a scroll container, and when the browser viewport is scrolled vertically, the header display area remains fixed at the top visible position within the visible area of ​​the parent container and is displayed. If the total width of the content of the scrolling container is greater than the first visible width of the scrolling container, a horizontal sliding control is created within the parent container; wherein, the horizontal sliding control is kept in a fixed position around the control display area of ​​the table header, and a value change event is bound to the horizontal sliding control; When the value change event is detected to be triggered, the value to be controlled corresponding to the value change event is obtained; Based on the value to be controlled, the horizontal scrolling of the scrolling container is controlled, so that the column data display area moves in the horizontal direction.

2. The table horizontal browsing method as described in claim 1, characterized in that, The horizontal sliding control remains fixedly displayed above the header display area, and the control display position is set horizontally; or, The horizontal sliding control remains fixed below the header display area, and its display position is set horizontally.

3. The method for horizontal table browsing as described in claim 1 or 2, characterized in that, The step of controlling the lateral scrolling of the scrolling container according to the value to be controlled includes: The lateral rolling displacement value of the rolling container is updated to the value to be controlled.

4. The table horizontal browsing method as described in claim 3, characterized in that, The upper limit of the value to be controlled is the difference between the total width of the content and the first visible width.

5. The table horizontal browsing method as described in claim 3, characterized in that, The scrolling container is bound to a scrolling event, and the method for horizontal table browsing further includes: When the scrolling event is detected to be triggered, the horizontal scrolling displacement value corresponding to the scrolling event is obtained; The value to be controlled is updated to the horizontal scroll displacement value corresponding to the scroll event, so as to change the position of the horizontal sliding control in the horizontal direction.

6. The table horizontal browsing method as described in claim 5, characterized in that, The method for horizontal table browsing also includes: When the total width of the content is greater than the first visible width, a horizontal scroll bar is provided at the bottom of the scrolling container as the control entry point for the horizontal scrolling of the scrolling container; Specifically, the scrolling event is triggered when the horizontal scroll bar is scrolled.

7. The table horizontal browsing method as described in claim 5, characterized in that, When the scrolling event is detected to be triggered, obtaining the horizontal scroll displacement value corresponding to the scrolling event includes: Once the scrolling event is detected to be triggered, the second anti-shake timing is started; After the second anti-shake timing is activated, if the scrolling event is not triggered again within the preset second anti-shake duration, the horizontal scrolling displacement value is obtained.

8. The method for horizontal table browsing as described in claim 3, characterized in that, The method for horizontal table browsing also includes: When a change in the second visible width of the browser viewport is detected, the total content width and the first visible width of the scroll container are retrieved again, and the step of creating a horizontal sliding control within the parent container when the total content width of the scroll container is greater than the first visible width of the scroll container is returned.

9. The method for horizontal table browsing as described in claim 8, characterized in that, The method for horizontal table browsing also includes: If the total width of the re-acquired content is greater than the first re-acquired visible width, the value to be controlled will be updated to the reset horizontal sliding value.

10. The method for horizontal table browsing as described in claim 1 or 2, characterized in that, When the value change event is detected to be triggered, the step of obtaining the controllable value corresponding to the value change event includes: When the value change event is detected to be triggered, the first anti-shake timing is started; After the first stabilization timer is started, if no change in the value is detected again within the preset first stabilization duration, the value to be controlled is obtained.

11. The table horizontal browsing method as described in claim 8, characterized in that, The step of re-acquiring the total content width and the first visible width of the scrolling container when a change in the second visible width of the browser viewport is detected includes: after a change in the second visible width is detected, starting a third anti-shake timing; after the third anti-shake timing is started, if no change in the second visible width is detected again within a preset third anti-shake duration, re-acquiring the total content width and the first visible width of the scrolling container; And / or, The table horizontal browsing method further includes: removing the horizontal sliding control when the total width of the content is greater than the first visible width, but the total width of the re-acquired content is not greater than the re-acquired first visible width.

12. A table horizontal browsing device, characterized in that, include: A table component display module is used to embed a table component within a parent container in the browser viewport and display the table component within the parent container; wherein, the table component includes a header display area and a column data display area, the column data display area is scrolled horizontally through a scrolling container, and when the browser viewport is scrolled vertically, the header display area remains fixed at the top visible position within the visible area of ​​the parent container and is displayed. A horizontal sliding control creation module is used to create a horizontal sliding control within a parent container when the total width of the content of the scrolling container is greater than the first visible width of the scrolling container; wherein, the horizontal sliding control is kept in a fixed display position around the header display area, and a value change event is bound to the horizontal sliding control; The module for acquiring the value to be controlled is used to acquire the value to be controlled corresponding to the value change event when the value change event is detected to be triggered. The horizontal scrolling module is used to control the horizontal scrolling of the scrolling container according to the value to be controlled, so that the column data display area moves in the horizontal direction.

13. An electronic device, characterized in that, It includes one or more processors for implementing the table horizontal browsing method as described in any one of claims 1 to 11.

14. A computer-readable storage medium, characterized in that, It stores a program that, when executed by a processor, implements the table horizontal browsing method as described in any one of claims 1 to 11.

15. A computer program product comprising a computer program / instructions, characterized in that, When the computer program / instruction is executed by the processor, it implements the table horizontal browsing method as described in any one of claims 1 to 11.

Images