A mobile terminal adaptive intelligent table display and interaction optimization system and method

Abstract

The application relates to the technical field of Internet application development, and discloses a mobile terminal adaptive intelligent table display and interaction optimization system and method, wherein the system is composed of an adaptive layout module, an intelligent data processing module and an efficient interaction module; the method acquires device physical parameters, combines a folding column, text omission and a screen rotation adaptive mechanism, makes the table always clear and complete and free from content dislocation or truncation under different screen sizes, resolutions and horizontal and vertical screen states; through fuzzy search and range screening, intelligent sorting according to data types and a paging cache and bottom automatic loading mechanism, the table data retrieval is efficient, the sorting is intuitive and smooth loading of ten thousand level data is achieved without lag; through gesture sliding, inertial scrolling and cell clicking menus, combined with an invisible expansion area and a long press detail pop-up window, the user can still realize smooth finger sliding, accurate clicking area, low mis-touch rate and convenient long press viewing of details in the mobile terminal small screen operation scene.

Description

Technical Field

[0001] This invention relates to the field of Internet application development technology, specifically to a mobile-end adaptive intelligent table display and interaction optimization system and method. Background Technology

[0002] In mobile application development, tables are a core component for displaying structured data. They are widely used in various scenarios such as finance, office, e-commerce, and logistics that require the presentation of large amounts of structured data. Their display effect and interactive experience directly affect the user's efficiency and experience.

[0003] Currently, existing mobile spreadsheet technologies largely follow the design and implementation methods of desktop spreadsheets, failing to fully adapt to the characteristics of mobile devices and exhibiting numerous technical bottlenecks that severely impact user experience and data display efficiency. Traditional technologies suffer from four major problems: 1) Poor screen adaptation: On mobile screens of different sizes (e.g., 5-7 inches) and resolutions (e.g., 720p-2K), spreadsheets often exhibit content truncation and misaligned rows and columns, unable to dynamically adjust the layout according to device screen parameters. This is akin to forcing a fixed-size table into a room of varying sizes—things never fit, resulting in incomplete data viewing; 2) Limited functionality: Lacking intelligent filtering (e.g., quickly finding data by time or keywords), automatic sorting (sorting by size with a single click), and large data loading capabilities (causing a "PowerPoint presentation" effect when data is excessive). 1) **Information Required:** When processing batches of data, users need to manually filter and sort, which is cumbersome and inefficient. 2) **Operational Inconvenience:** Mobile screens have limited size, and clicking cells on small screens is like "threading a needle," easily leading to accidental touches. Scrolling through data is choppy and lacks smoothness, resulting in a user experience as inefficient as typing on an old-fashioned keyboard. 3) **Performance Shortcomings:** When dealing with tens of thousands of data entries, tables load slowly and are prone to crashing. The lack of effective data caching and batch loading mechanisms is like a supermarket checkout with only one window open; it "paralyzes" when there are long queues, failing to meet the needs of large data volume scenarios.

[0004] The aforementioned technical bottlenecks make it difficult for existing mobile table components to adapt to diverse mobile devices and user needs, thus restricting the efficient display and convenient operation of structured data on mobile devices. Therefore, there is an urgent need for a mobile table display and interaction optimization system and method that can adapt to screen size, intelligently process data, and optimize touch interaction. Summary of the Invention

[0005] (a) Technical problems to be solved To address the shortcomings of existing technologies, this invention provides a mobile-end adaptive intelligent table display and interaction optimization system and method, which has the advantages of screen adaptive adaptation, intelligent data processing, smooth touch interaction, and efficient loading of big data. It solves the problems of poor screen adaptation, limited functionality, inconvenient operation, and insufficient performance of existing mobile table displays, which cannot meet the diverse needs of mobile devices and users for efficient processing of structured data.

[0006] (II) Technical Solution To achieve the above objectives, the present invention provides the following technical solution: a mobile adaptive intelligent table display and interaction optimization system, the system comprising an adaptive layout module, an intelligent data processing module, and an efficient interaction module; The adaptive layout module is used to detect the physical parameters of the mobile screen and the horizontal and vertical screen status in real time, and dynamically adjust the layout structure according to the screen specifications and table data. The intelligent data processing module is responsible for filtering, sorting, and paginating the table data, and feeding the processing results back to the layout module to update the view; The high-efficiency interaction module is used to capture the user's touch gestures, drive layout scrolling and data operations, forming a complete user operation loop.

[0007] Preferably, the adaptive layout module includes a screen detection unit and a dynamic layout adjustment unit; the intelligent data processing module includes an intelligent filtering unit, a fast sorting unit, and a dynamic loading unit; and the efficient interaction module includes a touch interaction optimization unit and an adaptive touch area unit.

[0008] Preferably, the screen detection unit is responsible for acquiring the current device's screen physical parameters and establishing a screen parameter database, which is implemented as follows: (1) Use the HTML5 window.screen API in conjunction with the resize event listener to obtain the physical size, resolution and landscape / portrait status of the screen in real time; (2) For mobile devices of different brands and models, calibration is performed by adjusting the device pixel ratio to fit the actual physical screen size; (3) Establish a screen parameter database to store screen information of common mobile devices. When an unknown device is detected, estimate its screen characteristics by using a regression estimation algorithm based on resolution and DPR.

[0009] Preferably, the dynamic layout adjustment unit adjusts the column width, row height, and column collapsibility of the table in real time according to screen parameters, and its specific implementation is as follows: (1) Handling too many columns: When the number of columns exceeds the set threshold and the screen width is less than 600px, the excess columns will be automatically collapsed into the hidden area. The hidden area is triggered by a collapse button. The collapse button adopts a floating design and is located on the right edge of the table. After clicking, the hidden columns are displayed in a drawer or pop-up window. (2) Handling long text: The text is omitted by using the CSS text-overflow: ellipsis property. At the same time, a title property is added to the cell with long text. When the user hovers his finger over the cell, the full text content is displayed. For important long text data, it is also supported to click the cell to display the full content in a pop-up window. (3) Screen rotation handling: By listening to the orientationchange event, the table layout is immediately recalculated when the screen rotates; 90% or all of the total number of columns are displayed in landscape mode; in portrait mode, key columns are displayed first and other columns are folded; at the same time, the row height and column width of the table are adjusted.

[0010] Preferably, the intelligent filtering unit supports multi-condition combined filtering and highlights the results, and its specific implementation is as follows: (1) Supports text search, numerical range filtering and date filtering: text search uses fuzzy matching algorithm to quickly match data containing keywords; numerical range filtering can set minimum / maximum values; date filtering supports selecting specific dates or date ranges; (2) The filtering conditions are configured visually. Users set the conditions through drop-down boxes or input box controls, and the filtering event is triggered after clicking the filter button; (3) Highlight the filtering results, mark the matching keywords or data rows that meet the conditions with different colors, and display the filtering conditions and the number of results at the top of the table.

[0011] Preferably, the quick sorting unit is used to support multi-column click sorting and add animation effects, and its specific implementation is as follows: (1) Add a click event to each column name: the first click sorts in ascending order, the second click sorts in descending order, and the third click cancels the sorting; (2) The sorting algorithm is selected according to the data type: the quick sort algorithm is used for numeric types, string types are sorted according to the first letter of the pinyin, and date types are sorted according to the time sequence; (3) Add animation effects during the sorting process to show the data movement process. Use the CSS transition property to achieve smooth movement of data rows so that users can see the sorting effect intuitively.

[0012] Preferably, the dynamic loading unit is responsible for handling paginated loading and caching of large amounts of data, and its specific implementation is as follows: (1) The data is divided into pages of fixed size using a pagination loading method, and only the data of the current page is loaded at a time; the pagination parameters include page number and number of items displayed per page, and users can switch page numbers or set the number of items per page through the pagination bar; (2) When the user scrolls to the bottom of the table, the next page of data is automatically loaded; the scroll event is listened to to determine whether the scroll distance has reached the bottom, and the interface for loading the next page of data is called when it has. (3) Implement a data caching mechanism to cache the loaded data locally; when the user accesses the same page of data again, it is retrieved directly from the cache.

[0013] Preferably, the touch interaction optimization unit is used to achieve smooth scrolling and cell-based interactive menus, and its specific implementation is as follows: (1) Listen for finger swipe events: record the starting position in touchstart; calculate the swipe direction and distance in touchmove, and control the table scrolling; (2) Achieve sliding inertia effect: After the finger leaves the screen, the table continues to scroll for a certain distance and then stops; by calculating the sliding speed and setting the deceleration coefficient, the smooth animation of gradually decreasing scrolling speed is achieved using requestAnimationFrame; (3) Add a click event to the cell: when clicked, a menu of copy and edit operations will pop up; the menu adopts a floating design and is located above or below the cell; at the same time, add a click feedback effect.

[0014] Preferably, the adaptive touch area unit is responsible for expanding the clickable area and supporting long-press detail display, and its specific implementation is as follows: (1) For small cells, expand their clickable area using CSS padding or margin properties to set an invisible expansion area; the size of the expansion area is adjusted according to the actual size of the cell and the screen size; (2) Add a long press event to important data cells: When the user long presses, a details window pops up to display the detailed data of the cell and related data; the position of the details window is dynamically adjusted according to the position of the cell.

[0015] A method for optimizing the display and interaction of mobile-adaptive smart tables includes the following steps: Step 1: System Initialization and Screen Parameter Acquisition: During the component initialization phase, screen parameters are acquired through the native window.screen API and the resize event, and the acquired parameters are stored in the component's state variables; Step 2, Initial Layout Calculation and Rendering: Based on the obtained screen parameters and the number of columns and data length of the table, the calculateLayout method is called to calculate the optimal display method; at the same time, a screen parameter database index is established; Step 3: Real-time monitoring of screen changes: Start the watchScreenChange function to monitor changes in screen parameters in real time; when screen parameters change, the adjustLayout method is automatically triggered to readjust the table layout. Step 4: Dynamic Layout Adjustment Execution: During the layout adjustment process, the structure and style of the table are dynamically modified through DOM manipulation; the data attributes of the table container are updated synchronously to indicate the current layout state. Step 5, Touch Event Initialization and Binding: After the table is rendered, call the initTouchEvents method to initialize touch event listeners to handle the control logic of finger swiping → swiping during the swipe → swiping ending; Step 6: Handling gestures and inertial scrolling: In the touchmove event handler, calculate the direction and distance of the finger swipe, call the scrollTable method to control the scrolling of the table, and set the scrolling animation according to the swipe speed and inertial effect, while simultaneously implementing the boundary detection logic; Step 7, Touch Area Adaptive Optimization: When rendering the table, set the style for each cell in the renderCell method, and add a style to expand the clickable area for small cells; at the same time, add a longtap event listener for important data cells, and call the showDetail method to pop up a details window when a long press event is detected. Step 8: Cell Details Display and Closing Control: The `showDetail` method creates a DOM element for the details window based on the cell's data and position, sets its style and content, and adds it to the page; when the user clicks the close button of the details window or clicks outside the window, the details window closes; it also records the user's operation log for viewing details, which is used for subsequent interaction optimization analysis. Step 9, Initial Data Loading and Cache Initialization: During component initialization, the loadPageData method is called to load the first page of data; the loadPageData method requests the corresponding page data from the backend interface based on the page number and the number of items displayed per page; during the first load, the local data cache object is initialized, and the page number index mapping relationship is established; Step 10: Dynamic Loading and Cache Management of Pagination Data: When a user clicks on a page number in the pagination bar or scrolls to the bottom of the table, the loadPageData method is called to load the data for the corresponding page; the local cache is checked first, and if the cache is hit, it is read directly; otherwise, a network request is initiated; the newly loaded data is added to the data source of the table, and the state of the pagination bar is updated at the same time. Step 11, Filter Condition Configuration and Submission: After the user enters the filter conditions in the filter control and clicks the filter button, the handlerTableQuerys method is automatically triggered; the current filter configuration is saved to local storage and can be automatically restored on the next visit. Step 12: Data Filtering and Result Highlighting: After receiving the query parameters, the backend interface performs data filtering and returns the filtering results. After filtering is complete, the filtering results are updated in the data source of the table, and the highlightResult method is called to highlight the filtering results. The highlighting style is dynamically adjusted according to the filtering intensity; the higher the matching degree, the darker the color. Step 13, Sorting Trigger and Algorithm Selection: When the user clicks on a column name, the sortData method is triggered, creating a data snapshot before sorting, and supporting one-click restoration of the original order when sorting is canceled; Step Fourteen: Sorting Animation and Data Update: During the sorting process, add animation effects to show the data movement; use the CSS transition property to achieve smooth movement of data rows, allowing users to intuitively see the sorting effect; Step 15, Interactive Feedback and Operation Menu Response: Add click events to the cells. When a user clicks a cell, a copy and edit operation menu pops up. The operation menu adopts a floating design, located above or below the cell. At the same time, add click feedback effects to let the user know that the click has taken effect. After the operation is completed, the menu will automatically close and the relevant cell status will be refreshed. Step 16: System State Persistence and Resource Release: When the system exits or the page is uninstalled, save the current table state, including column width adjustments, filter conditions, and sorting rules, to local storage; at the same time, remove all event listeners, release DOM references, clear data cache, and end the entire method flow.

[0016] Compared with existing technologies, the present invention provides a mobile-end adaptive intelligent table display and interaction optimization system and method, which has the following beneficial effects: 1. This invention obtains device physical parameters in real time through a screen detection unit, and combines the folding column, text omission, and screen rotation adaptive mechanism of the dynamic layout adjustment unit to ensure that the table is always clear and complete without content misalignment or truncation in different screen sizes, resolutions, and landscape / portrait modes. This solves the problem of difficulty in multi-device adaptation caused by the variety of mobile device models and large differences in screen parameters.

[0017] 2. This invention solves the problems of traditional tables having limited functionality and poor performance in big data scenarios by using fuzzy search and range filtering in the intelligent filtering unit, intelligent sorting by data type in the quick sorting unit, and pagination caching and automatic loading mechanism at the bottom in the dynamic loading unit. This makes table data retrieval efficient, sorting intuitive, and enables smooth loading of tens of thousands of data without lag.

[0018] 3. This invention optimizes the gesture swiping, inertial scrolling, and cell click menu of the touch interaction unit, and combines the invisible enlarged area of ​​the adaptive touch area unit with the long-press details pop-up window. This allows users to still achieve smooth finger swiping, precise click area, low accidental touch rate, and convenient long-press to view details in mobile small screen operation scenarios. This perfectly solves the problem of awkward operation and inefficient experience caused by the limited screen space and limited touch operation precision of mobile devices. Attached Figure Description

[0019] Figure 1 This is a system framework diagram of the present invention; Figure 2 This is a flowchart of the method of the present invention. Detailed Implementation

[0020] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0021] Please see Figure 1 - Figure 2 A mobile adaptive intelligent table display and interaction optimization system, which consists of an adaptive layout module, an intelligent data processing module and an efficient interaction module. The three modules work together to achieve full-process optimization of mobile tables from screen adaptation and data processing to interactive experience. The adaptive layout module is used to detect the physical parameters of the mobile screen and the orientation of the screen in real time, and dynamically adjust the layout structure according to the screen specifications and table data. It provides a stable display container for upper-level data processing to solve the problem of table display disorder in scenarios such as small screens, multiple columns, long text, and screen rotation. The intelligent data processing module is responsible for filtering, sorting, and paginating the table data, and feeding the processing results back to the layout module to update the view, thereby improving the efficiency of data retrieval, viewing, and loading. The high-efficiency interaction module is used to capture users' touch gestures, drive layout scrolling and data operations, forming a complete user operation loop, thereby adapting to mobile finger operation habits and improving the accuracy and smoothness of user operation.

[0022] The adaptive layout module includes a screen detection unit and a dynamic layout adjustment unit; the intelligent data processing module includes an intelligent filtering unit, a fast sorting unit, and a dynamic loading unit; and the efficient interaction module includes a touch interaction optimization unit and an adaptive touch area unit.

[0023] The screen detection unit is used to accurately acquire the physical parameters of the current device's screen and establish a screen parameter database to ensure compatibility, providing a data foundation for layout adjustments. The specific implementation method is as follows: (1) Use the HTML5 window.screen API in conjunction with the resize event listener to obtain the physical size of the screen (such as 5 inches, 6 inches, etc.), resolution (720p, 2K, etc.) and landscape / portrait status in real time; (2) For mobile devices of different brands and models, calibration is performed by device pixel ratio (DPR) to ensure that the obtained screen parameters are accurate. For example, for a device with a DPR of 2, the obtained pixel size is converted to match the actual physical screen size. (3) Establish a screen parameter database to store screen information of common mobile devices. When an unknown device is detected, estimate its screen characteristics by using a regression estimation algorithm based on resolution and DPR to improve the compatibility of the adaptation.

[0024] Through the aforementioned real-time monitoring, device parameter calibration, and device database construction, accurate collection and compatibility adaptation of screen parameters for all categories of mobile terminals can be achieved, thereby providing standardized raw data support for subsequent dynamic adjustment of table layout.

[0025] The dynamic layout adjustment unit receives parameters output by the screen detection unit and adjusts the column width, row height, and column collapsibility of the table in real time according to the screen parameters. The specific implementation is as follows: (1) Handling too many columns: When the number of columns exceeds the set threshold (e.g., 8 columns) and the screen width is less than 600px, the excess columns will be automatically collapsed into the hidden area. The hidden area is triggered by a collapse button. The collapse button adopts a floating design and is located on the right edge of the table. After clicking, the hidden columns are displayed in a drawer or pop-up window. (2) Handling long text: The text is omitted by using the CSS text-overflow: ellipsis property. At the same time, a title property is added to the cell with long text. When the user hovers his finger over the cell, the full text content is displayed. For important long text data, it is also supported to click the cell to display the full content in a pop-up window. (3) Screen rotation handling: Listen for the orientationchange event. When the screen rotates, immediately recalculate the table layout. In landscape mode, display 90% or all of the total number of columns (when the total number of columns is ≤12, for example, in portrait mode, prioritize displaying 6 key columns, and automatically expand to display 9 columns in landscape mode; if the total number of columns is only 8, then display all 8 columns in landscape mode); in portrait mode, prioritize displaying key columns, and fold other columns; at the same time, adjust the row height and column width of the table to ensure clear data display.

[0026] By employing multi-column folding and storage, adaptive cropping of long text, and layout reconstruction linked to screen rotation, the problems of table overflow, content obscuring, and display chaos in limited mobile screen scenarios are comprehensively solved, thereby ensuring the regularity and readability of table display in different landscape and portrait screen states.

[0027] The intelligent filtering unit supports filtering based on multiple conditions and highlights the results. Its specific implementation is as follows: (1) Supports multiple methods such as text search, numerical range filtering and date filtering: text search uses fuzzy matching algorithm to quickly match data containing keywords; numerical range filtering can set minimum / maximum values; date filtering supports selecting a specific date or date range (a certain day, a certain week, a certain month, etc.); (2) The filtering conditions are configured visually. Users set the conditions through controls such as drop-down boxes and input boxes, and the filtering event is triggered after clicking the filter button; (3) Highlight the filtering results, mark the matching keywords or data rows that meet the conditions with different colors, and display the filtering conditions and the number of results at the top of the table so that users can understand the current filtering status.

[0028] By integrating the above-mentioned multi-type filtering modes, configuring visual conditions, and highlighting results differently, the threshold for users to retrieve data is lowered, target data can be quickly located, and the filtering range and matching results can be intuitively fed back, thereby improving the efficiency of data retrieval.

[0029] The quick sort unit is used to support multi-column click sorting and add animation effects. Its specific implementation is as follows: (1) Add a click event to each column name: the first click sorts in ascending order, the second click sorts in descending order, and the third click cancels the sorting; (2) The sorting algorithm is selected according to the data type: the quick sort algorithm is used for numeric types, string types are sorted according to the first letter of the pinyin, and date types are sorted according to the time sequence; (3) Add animation effects during the sorting process to show the data movement process. Use the CSS transition property to achieve smooth movement of data rows so that users can see the sorting effect intuitively.

[0030] By employing the aforementioned cyclical multi-state sorting, categorized intelligent sorting algorithms, and visual transition animations, we can adapt to the diverse data sorting needs of tables, optimize the data organization operation logic, and significantly improve the visual smoothness and user experience of the data sorting process.

[0031] The dynamic loading unit is used to handle paginated loading and caching of large amounts of data. Its specific implementation is as follows: (1) The data is divided into pages of fixed size using a pagination loading method, and only the data of the current page is loaded at a time; the pagination parameters include page number and number of items displayed per page, and users can switch page numbers or set the number of items per page through the pagination bar; (2) When the user scrolls to the bottom of the table, the next page of data is automatically loaded; the scroll event is listened to to determine whether the scroll distance has reached the bottom, and the interface for loading the next page of data is called when it has. (3) Implement a data caching mechanism to cache loaded data locally; when a user accesses the same page of data again, it is retrieved directly from the cache, reducing server requests and improving loading speed.

[0032] By employing the aforementioned pagination and segmented loading, automatic resume loading upon bottoming out, and local cache reuse mechanisms, the page rendering pressure and network request frequency in scenarios with large amounts of data can be effectively reduced, ultimately achieving lightweight and efficient loading and display of massive amounts of table data.

[0033] The touch interaction optimization unit is used to achieve smooth swiping, scrolling, and cell-based interactive menus. Its specific implementation is as follows: (1) Listen for finger swipe events (touchstart, touchmove, touchend): record the starting position in touchstart; calculate the swipe direction and distance in touchmove and control the table scrolling (e.g., swipe left and the table scrolls right, the scroll distance is proportional to the swipe distance). (2) Achieve sliding inertia effect: After the finger leaves the screen, the table continues to scroll for a certain distance and then stops; by calculating the sliding speed and setting the deceleration coefficient, the smooth animation of gradually decreasing scrolling speed is achieved using requestAnimationFrame; (3) Add click events to cells: When clicked, pop up menus for operations such as copy and edit; the menus adopt a floating design and are located above or below the cells; at the same time, add click feedback effects (such as cell color change, slight vibration).

[0034] By employing the aforementioned end-to-end touch gesture monitoring, inertial scrolling algorithm, and cell floating menu configuration, we can align with the finger operation logic of mobile devices. This ensures that the table scrolls smoothly and the data flows quickly and efficiently during actual operation, ultimately eliminating the issues of stiff and laggy touch operation.

[0035] The adaptive touch area unit, used to expand the clickable area and support long-press detail display, is implemented as follows: (1) For small cells, expand their clickable area using the CSS padding or margin properties and set an "invisible expansion area"; the size of the expansion area is adjusted according to the actual size of the cell and the screen size (generally 5-10px) to ensure that the finger can click accurately; (2) Add a long press event to important data cells: When the user long presses, a details window pops up to display the detailed data of the cell and related data; the position of the details window is dynamically adjusted according to the position of the cell to avoid exceeding the screen range.

[0036] By expanding the invisible touch area, binding long-press events, and intelligently adapting pop-up windows, we address the pain points of difficulty in clicking small cells and high accidental touch rates on mobile devices, while also improving the ability to display detailed data and enriching the interactive dimensions of tables.

[0037] A method for optimizing the display and interaction of mobile-adaptive smart tables includes the following steps: Step 1: System Initialization and Screen Parameter Acquisition: During the component initialization phase, screen parameters, including screen width, height, resolution, DPR (device pixel ratio), and landscape / portrait status, are obtained through the native window.screen API and the resize event. The acquired parameters are then stored in the component's state variables. Step 2, Initial Layout Calculation and Rendering: Based on the obtained screen parameters and the number of columns and data length of the table, the calculateLayout method is called to calculate the optimal display method. This method determines the width of each column and whether columns need to be collapsed based on the ratio between the screen width and the number of columns. At the same time, a screen parameter database index is established to provide a reference for subsequent identification of unknown devices. Step 3: Real-time monitoring of screen changes: Start the watchScreenChange function to monitor changes in screen parameters in real time; when screen parameters change, trigger the adjustLayout method to readjust the table layout; this listener covers the resize and orientationchange events to ensure that it can respond to scenarios such as screen rotation and resolution switching; Step 4: Dynamic Layout Adjustment Execution: During the layout adjustment process, the structure and style of the table are dynamically modified through DOM (Document Object Model) operations, including adding or removing collapsible columns, adjusting column width and row height, showing or hiding collapsible buttons, etc.; the data attributes of the table container are updated synchronously to mark the current layout state, which is convenient for subsequent interaction logic identification; Step 5, Touch Event Initialization and Binding: After the table is rendered, call the initTouchEvents method to initialize touch event listeners; this method adds touchstart, touchmove, and touchend event listeners to the table to handle the logic of the finger starting to slide, during the slide, and after the slide, respectively; Step Six: Handling Gesture Swiping and Inertial Scrolling: In the touchmove event handler, calculate the direction and distance of the finger swipe, and call the scrollTable method to control the scrolling of the table. The scrollTable method achieves scrolling by modifying the scrollLeft (horizontal scroll position) or scrollTop (vertical scroll position) property of the table, and sets the scrolling animation according to the swipe speed and inertia effect; simultaneously implement boundary detection logic to prevent scrolling from exceeding the table content area. Step 7, Touch Area Adaptive Optimization: When rendering the table, set the style for each cell in the renderCell method, and add a style to expand the clickable area for small cells; at the same time, add a longtap event listener for important data cells, and call the showDetail method to pop up the details window when a long press event is detected. Step 8: Cell Details Display and Closing Control: The showDetail method creates a DOM (Document Object Model) element for the details window based on the cell's data and position, sets its style and content, and adds it to the page; when the user clicks the close button of the details window or clicks outside the window, the details window is closed; the user's operation log for viewing details is recorded synchronously for subsequent interaction optimization analysis; Step 9, Initial Data Loading and Cache Initialization: When the component is initialized, the loadPageData (load page data) method is called to load the data of the first page; the loadPageData(pageNum) (load page data) method requests the data of the corresponding page from the backend interface according to the page number and the number of items displayed per page; the local data cache object is initialized during the first load, and the page number index mapping relationship is established; Step 10, Dynamic Loading and Cache Management of Pagination Data: When a user clicks on a page number in the pagination bar or scrolls to the bottom of the table, the loadPageData (load page data) method is called to load the data for the corresponding page; the local cache is checked first, and if the cache is hit, it is read directly; otherwise, a network request is initiated; the newly loaded data is added to the data source of the table, and the state of the pagination bar is updated at the same time. Step 11, Filter Condition Configuration and Submission: After the user enters the filter conditions in the filter control and clicks the filter button, the handlerTableQuerys method is triggered. This method converts the filter conditions into query parameters and sends them to the backend interface or performs data filtering on the frontend. The current filter configuration is saved to local storage and can be automatically restored on the next access. Step 12: Data Filtering and Result Highlighting: After receiving the query parameters, the backend interface performs data filtering and returns the filtered results. If filtering is performed on the frontend, the handlerTableQuerys method calls the filterData function to filter the local data. After filtering, the filtered results are updated in the table's data source, and the highlightResult method is called to highlight the filtered results. The highlight style is dynamically adjusted according to the filtering intensity; the higher the matching degree, the darker the color. Step 13, Sorting Trigger and Algorithm Selection: When the user clicks on a column name, the sortData method is triggered; this method selects an appropriate sorting algorithm to sort the data based on the column name and the current sorting status; a data snapshot is created before sorting, and the original order can be restored with one click when sorting is canceled; Step Fourteen: Sorting Animation Display and Data Update: During the sorting process, add animation effects to show the movement of data; use the CSS (Cascading Style Sheets) transition property to achieve smooth movement of data rows, allowing users to intuitively see the sorting effect; the animation duration is dynamically adjusted according to the amount of data to ensure that the animation does not lag when dealing with large amounts of data. Step 15, Interactive Feedback and Operation Menu Response: Add click events to cells. When a user clicks a cell, a menu of operations such as copy and edit pops up. The operation menu adopts a floating design, located above or below the cell. At the same time, add click feedback effects, such as cell color change, slight vibration, etc., to let the user know that the click has taken effect. After the operation is completed, the menu will automatically close and the relevant cell status will be refreshed. Step 16: System State Persistence and Resource Release: When the system exits or the page is unloaded, save the current table state, including column width adjustments, filter conditions, sorting rules, etc., to local storage; at the same time, remove all event listeners, release DOM (Document Object Model) references, clean up data cache, prevent memory leaks, and end the entire method flow.

[0038] In summary, by connecting the entire logic of screen detection, layout adaptation, intelligent data processing, and mobile touch interaction through the method of this invention, the execution sequence and linkage relationship of each functional unit are clarified, thereby specifically solving core pain points such as multi-column overflow of tables on mobile devices, abnormal text display, poor operation adaptation, and slow loading of large data. Ultimately, it effectively improves the display effect of tables on mobile terminals, data processing efficiency, and human-computer interaction comfort, and enhances the overall versatility, stability, and practical value of the system.

[0039] Although embodiments of the invention have been shown and described, it will be understood by those skilled in the art that various changes, modifications, substitutions and alterations can be made to these embodiments without departing from the principles and spirit of the invention, the scope of which is defined by the appended claims and their equivalents.

Claims

1. A mobile-end adaptive intelligent table display and interaction optimization system, characterized in that, The system consists of an adaptive layout module, an intelligent data processing module, and an efficient interaction module. The adaptive layout module is used to detect the physical parameters of the mobile screen and the horizontal and vertical screen status in real time, and dynamically adjust the layout structure according to the screen specifications and table data. The intelligent data processing module is responsible for filtering, sorting, and paginating the table data, and feeding the processing results back to the layout module to update the view; The high-efficiency interaction module is used to capture the user's touch gestures, drive layout scrolling and data operations, forming a complete user operation loop.

2. The mobile adaptive intelligent table display and interaction optimization system according to claim 1, characterized in that, The adaptive layout module includes a screen detection unit and a dynamic layout adjustment unit; the intelligent data processing module includes an intelligent filtering unit, a fast sorting unit, and a dynamic loading unit; the efficient interaction module includes a touch interaction optimization unit and an adaptive touch area unit.

3. The mobile adaptive intelligent table display and interaction optimization system according to claim 2, characterized in that, The screen detection unit is responsible for acquiring the current device's screen physical parameters and establishing a screen parameter database, which is implemented as follows: (1) Use the HTML5 window.screen API in conjunction with the resize event listener to obtain the physical size, resolution and landscape / portrait status of the screen in real time; (2) For mobile devices of different brands and models, calibration is performed by adjusting the device pixel ratio to fit the actual physical screen size; (3) Establish a screen parameter database to store screen information of common mobile devices. When an unknown device is detected, estimate its screen characteristics by using a regression estimation algorithm based on resolution and DPR.

4. The mobile adaptive intelligent table display and interaction optimization system according to claim 2, characterized in that, The dynamic layout adjustment unit adjusts the column width, row height, and column collapsibility of the table in real time according to screen parameters, and its specific implementation is as follows: (1) Handling too many columns: When the number of columns exceeds the set threshold and the screen width is less than 600px, the excess columns will be automatically collapsed into the hidden area. The hidden area is triggered by a collapse button. The collapse button adopts a floating design and is located on the right edge of the table. After clicking, the hidden columns are displayed in a drawer or pop-up window. (2) Handling long text: The text is omitted by using the CSS text-overflow: ellipsis property. At the same time, a title property is added to the cell with long text. When the user hovers his finger over the cell, the full text content is displayed. For important long text data, it is also supported to click the cell to display the full content in a pop-up window. (3) Screen rotation handling: By listening to the orientationchange event, the table layout is immediately recalculated when the screen rotates; 90% or all of the total number of columns are displayed in landscape mode; in portrait mode, key columns are displayed first and other columns are folded; at the same time, the row height and column width of the table are adjusted.

5. The mobile adaptive intelligent table display and interaction optimization system according to claim 1, characterized in that, The intelligent filtering unit supports multi-condition combined filtering and highlights the results, and its specific implementation is as follows: (1) Supports text search, numerical range filtering and date filtering: text search uses fuzzy matching algorithm to quickly match data containing keywords; numerical range filtering can set minimum / maximum values; date filtering supports selecting specific dates or date ranges; (2) The filtering conditions are configured visually. Users set the conditions through drop-down boxes or input box controls, and the filtering event is triggered after clicking the filter button; (3) Highlight the filtering results, mark the matching keywords or data rows that meet the conditions with different colors, and display the filtering conditions and the number of results at the top of the table.

6. The mobile adaptive intelligent table display and interaction optimization system according to claim 1, characterized in that, The quick sorting unit is used to support multi-column click sorting and add animation effects, and its specific implementation is as follows: (1) Add a click event to each column name: the first click sorts in ascending order, the second click sorts in descending order, and the third click cancels the sorting; (2) The sorting algorithm is selected according to the data type: the quick sort algorithm is used for numeric types, string types are sorted according to the first letter of the pinyin, and date types are sorted according to the time sequence; (3) Add animation effects during the sorting process to show the data movement process. Use the CSS transition property to achieve smooth movement of data rows so that users can see the sorting effect intuitively.

7. The mobile adaptive intelligent table display and interaction optimization system according to claim 1, characterized in that, The dynamic loading unit is responsible for handling paginated loading and caching of large amounts of data, and its specific implementation is as follows: (1) The data is divided into pages of fixed size using a pagination loading method, and only the data of the current page is loaded at a time; the pagination parameters include page number and number of items displayed per page, and users can switch page numbers or set the number of items per page through the pagination bar; (2) When the user scrolls to the bottom of the table, the next page of data is automatically loaded; the scroll event is listened to to determine whether the scroll distance has reached the bottom, and the interface for loading the next page of data is called when it has. (3) Implement a data caching mechanism to cache the loaded data locally; when the user accesses the same page of data again, it is retrieved directly from the cache.

8. The mobile adaptive intelligent table display and interaction optimization system according to claim 1, characterized in that, The touch interaction optimization unit is used to achieve smooth swiping, scrolling, and cell-based interactive menus, and its specific implementation is as follows: (1) Listen for finger swipe events: record the starting position in touchstart; calculate the swipe direction and distance in touchmove, and control the table scrolling; (2) Achieve sliding inertia effect: After the finger leaves the screen, the table continues to scroll for a certain distance and then stops; by calculating the sliding speed and setting the deceleration coefficient, the smooth animation of gradually decreasing scrolling speed is achieved using requestAnimationFrame; (3) Add a click event to the cell: when clicked, a menu of copy and edit operations will pop up; the menu adopts a floating design and is located above or below the cell; at the same time, add a click feedback effect.

9. A mobile adaptive intelligent table display and interaction optimization system according to claim 1, characterized in that, The adaptive touch area unit is responsible for expanding the clickable area and supporting long-press detail display, and its specific implementation is as follows: (1) For small cells, expand their clickable area using CSS padding or margin properties to set an invisible expansion area; the size of the expansion area is adjusted according to the actual size of the cell and the screen size; (2) Add a long press event to important data cells: When the user long presses the cell, a details window pops up to display the detailed data and related data of the cell; The position of the details window is dynamically adjusted based on the cell position.

10. A method for optimizing the display and interaction of adaptive intelligent tables on mobile devices, characterized in that, Includes the following steps: System initialization and screen parameter acquisition: During the component initialization phase, screen parameters are obtained through the native window.screen API and the resize event, and the obtained parameters are stored in the component's state variables; Initial layout calculation and rendering: Based on the obtained screen parameters and the number of columns and data length of the table, the calculateLayout method is called to calculate the optimal display method; at the same time, a screen parameter database index is established; Real-time monitoring of screen changes: The watchScreenChange function is started to monitor changes in screen parameters in real time; when screen parameters change, the adjustLayout method is automatically triggered to readjust the table layout. Dynamic layout adjustment execution: During the layout adjustment process, the structure and style of the table are dynamically modified through DOM manipulation; the data attributes of the table container are updated synchronously to indicate the current layout state; Touch event initialization and binding: After the table is rendered, the initTouchEvents method is called to initialize touch event listeners to handle the control logic of finger swiping → swiping during the swipe → swiping ending; Gesture swiping and inertial scrolling handling: In the touchmove event handler, the direction and distance of the finger swipe are calculated, the scrollTable method is called to control the scrolling of the table, and the scrolling animation is set according to the swiping speed and inertial effect, while simultaneously implementing the boundary detection logic; Touch area adaptive optimization: When rendering the table, set the style for each cell in the renderCell method, and add a style to expand the clickable area for small cells; at the same time, add a longtap event listener for important data cells, and call the showDetail method to pop up a details window when a long press event is detected. Cell details display and closing control: The showDetail method creates a DOM element for the details window based on the cell's data and position, sets its style and content, and adds it to the page; when the user clicks the close button of the details window or clicks outside the window, the details window closes; it also records the user's operation log for viewing details, which is used for subsequent interaction optimization analysis; Initial data loading and cache initialization: When the component is initialized, the loadPageData method is called to load the first page of data; the loadPageData method requests the data for the corresponding page from the backend interface based on the page number and the number of items displayed per page; the local data cache object is initialized during the first load, and the page number index mapping relationship is established; Dynamic loading and cache management of pagination data: When a user clicks on a page number in the pagination bar or scrolls to the bottom of the table, the loadPageData method is called to load the data for the corresponding page; the local cache is checked first, and if the cache is hit, it is read directly; otherwise, a network request is initiated. Add the newly loaded data to the table's data source and update the state of the pagination columns. Filter condition configuration and submission: After the user enters the filter conditions in the filter control and clicks the filter button, the handlerTableQuerys method is automatically triggered; The current filter configuration is saved to local storage and can be automatically restored on the next access. Data filtering and result highlighting: After receiving the query parameters, the backend interface performs data filtering and returns the filtering results. After filtering is complete, the filtering results are updated to the data source of the table, and the highlightResult method is called to highlight the filtering results. The highlighting style is dynamically adjusted according to the filtering intensity, and the higher the matching degree, the darker the color. Sorting Trigger and Algorithm Selection: When a user clicks on a column name, the sortData method is triggered, creating a data snapshot before sorting and supporting one-click restoration of the original order when sorting is canceled; Sorting Animation and Data Update: During the sorting process, add animation effects to show the movement of data; use the CSS transition property to achieve smooth movement of data rows, allowing users to intuitively see the sorting effect; Interactive feedback and operation menu response: Add click events to cells. When a user clicks a cell, a copy and edit operation menu pops up. The operation menu adopts a floating design, located above or below the cell. At the same time, add click feedback effects to let the user know that the click has taken effect. After the operation is completed, the menu will automatically close and the relevant cell status will be refreshed. System state persistence and resource release: When the system exits or the page is uninstalled, the current table state, including column width adjustments, filter conditions and sorting rules, is saved to local storage; at the same time, all event listeners are removed, DOM references are released, data cache is cleared, and the entire method flow ends.

Images