Data report dynamic display method and device

Abstract

The invention provides a data report dynamic display method and device, and belongs to the field of management informationization, and the method specifically comprises the steps: initializing a specified display column: selecting a plurality of columns according to a display demand, carrying out the cell content merging of the same content in the same column, obtaining an element object of each cell in each column, and storing the element object in the specified display column; the element object of the scroll bar of the current page, the element object of the current page and the specified display column comprise a plurality of columns; when it is detected that the scroll bar is dragged or slides, dynamic display calculation logic is triggered, the absolute height of the scroll bar in the current page is obtained, and the offset of characters needing to be moved in all the cells in each column is determined; controlling the characters in the cells to move based on the offset, and enabling the characters to dynamically float on the current page; logical binding is carried out according to the positions of the characters in the cells through the roller position of the current page, so that the characters in the cells dynamically float on the current page at the top according to computational logic.

Description

TECHNICAL FIELD

[0001] The present application belongs to the field of information management, and particularly relates to a data report dynamic display method and device. BACKGROUND

[0002] In the development process of system software, multi-dimensional data is combined from multiple database tables to form a data report according to the needs of users. As the most intuitive data, the data report provides multi-dimensional display data such as problem classification, surface problem, specific problem and specific problem performance. Therefore, how to efficiently and reasonably layout data and reflect the logical relationship between data is one of the important research directions at present.

[0003] At present, most data reports adopt the form of merging the same cell text in the center to simplify the readability problem caused by multi-dimensional data. In the case of too many data dimensions and too many data entries in a single dimension, the data in the cell cannot be displayed on the current page due to the center display, which often requires scrolling the page to display data, so that the presenter and the audience need to spend more energy and dynamic vision to lock the content being reported. In the case of multiple data dimensions and large data volume, the display effect is poor. SUMMARY

[0004] To solve the problem of poor display effect of data report in the case of multiple data dimensions, complex hierarchical structure and large data volume, the present application provides a data report dynamic display method and device, which can logically bind the position of the text in the cell according to the position of the scroll wheel on the current page, so that the text in the cell is dynamically placed on top and floated on the current page according to the calculation logic, so that the presenter and the audience only need to focus on the data on top during the presentation process.

[0005] The technical solution is as follows: In a first aspect, a data report dynamic display method and device are provided, which determines the new position of all the text in the cells in the whole page based on the position of the scroll wheel on the current page, so that all the text in the cells is dynamically placed on top and floated on the current page according to the new position.

[0006] Optionally, the method specifically includes: Step 1, initializing a specified display column: according to the display requirements, selecting a plurality of columns and merging the same content in the same column to obtain the element object of each cell in each column, as well as the element object of the current page scrollbar and the element object of the current page, and the specified display column includes a plurality of columns; Step 2, when it is detected that the scrollbar is dragged or slid, triggering a dynamic display calculation logic, obtaining the absolute height of the scrollbar in the current page, and determining the offset amount that all the text in the cells in each column needs to move. Step 3: Control the movement of the text within the cell based on the offset to make it dynamically float at the top of the current page.

[0007] Optionally, the content of each of several columns in Step 1 is sorted content.

[0008] Optionally, in Step 1, when initializing the specified display columns, call the dynamic display calculation logic once, and initialize and render the report based on the offsets by which the text in all cells in each column needs to move, so that when the user enters the report page, the initial interface rendering of the page has been completed, enabling the user to see the dynamic display effect of the data report when opening the data report.

[0009] Optionally, add a scroll event listener to the scroll bar to determine whether the scroll bar is dragged or scrolled through the scroll event listener. Add a scroll event listener to the scroll bar, call the dynamic display calculation logic when the scroll bar scrolls, and perform real-time rendering of the report based on the offset, enabling the page to perform real-time interface rendering when the user drags the scroll bar.

[0010] Optionally, bind an element change listener to the top-level DOM structure. When it is detected through the element change listener that an element has changed, determine that the current page has changed, and execute Steps 1 to 3.

[0011] When the element change listener detects an element change, call the dynamic display calculation logic, and render the report based on the offset, enabling the page to have completed interface rendering when the user changes the page, and re-bind the scroll bar event listener to prevent the scroll bar event listener from becoming invalid after changing the page.

[0012] Optionally, design the dynamic display calculation logic: Calculate the absolute height h of the text within the cell using the first calculation formula, The first calculation formula is: h = a * b² / c, where a is the character length, b is the font pixel size, and c is the width of the cell; Calculate the relative height g of the text within the cell according to the second calculation formula, The second calculation formula is: g = h * r², where h is the absolute height of the text and r is the page scaling ratio parameter; Calculate the blank height w of the text within the cell according to the third calculation formula, The third calculation formula is: w = e - g, where e is the height of the cell where the text is located and g is the relative height of the text within the cell; Determine the offset m by which the text within the cell needs to move: when x - y < w and x - y > 0, m = x - y; otherwise m = 0; x is the absolute height of the scroll bar, y is the absolute height of the top of the text cell, and w is the blank height of the text within the cell.

[0013] Add calculation and judgment conditions to ensure that the text offset is not too long, which would cause the page to stretch infinitely and form an infinite loop due to cell stretching.

[0014] Optionally, in step 3, when moving the text, all elements on the page are traversed, the padding-top property value of the elements is set, the offset that the text needs to move is assigned to the padding-top property value, and real-time dynamic rendering is performed to ensure that all text on the current page has been moved, resulting in a dynamic report display effect.

[0015] Secondly, a data report dynamic display device that performs the method described in the first aspect is provided, including a control module for determining the new position of the text in all cells of the entire page based on the scroll wheel position of the current page, so that the text in all cells is dynamically placed on top and floated on the current page according to the new position.

[0016] Optionally, the control module specifically includes: Initialization unit, used to initialize the specified display column: According to the display requirements, select several columns and merge the cell contents of the same content in the same column, obtain the element object of each cell in each column, as well as the element object of the current page scroll bar and the element object of the current page, and specify the number of columns to be displayed; The triggering unit is used to trigger the dynamic display calculation logic when the scroll bar is detected to be dragged or slid, to obtain the absolute height of the scroll bar in the current page, and to determine the offset that the text in all cells in each column needs to be moved. The control unit is used to move the text within a cell based on an offset, so that it is dynamically placed on top and floated on the current page.

[0017] The beneficial effects of this invention are at least as follows: By using dynamic data reporting methods, the problems of multiple data dimensions, complex hierarchical structures, and large data volumes often encountered in reporting are solved. The dynamic reporting function automatically calculates and dynamically changes the display of specified cells based on the current page content, significantly improving clarity and ease of use compared to general reports. For both presenters and audiences, using dynamic reporting methods reduces the number of page scrolls and eye movements, allowing presenters to spend less time explaining the content, and ultimately enabling audiences to understand the presenter's content with minimal adaptation and learning costs. Attached Figure Description

[0018] Figure 1 This invention dynamically displays the computational logic diagram; Figure 2 This is a logic diagram for rendering the interface of this invention. Detailed Implementation

[0019] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, 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.

[0020] The features and illustrative embodiments of various aspects of the present invention will now be described in detail. Numerous specific details are set forth in the following detailed description to provide a thorough understanding of the invention. However, it will be apparent to those skilled in the art that the invention may be practiced without requiring some of these specific details. The following description of embodiments is merely intended to provide a better understanding of the invention by illustrating examples of the invention. The invention is by no means limited to any specific setups and methods set forth below, but covers any improvements, substitutions, and modifications to structures, methods, and devices without departing from the spirit of the invention. Well-known structures and techniques are not shown in the drawings and the following description to avoid unnecessarily obscuring the invention.

[0021] It should be noted that, unless otherwise specified, the embodiments of the present invention and the features thereof can be combined with each other, and the various embodiments can be referenced and cited from each other.

[0022] The present invention will now be described in detail with reference to the accompanying drawings and specific embodiments.

[0023] This invention uses the scroll bar position, cell height, and text length to make logical judgments to determine how many cells are currently on the page, and how many cells have text that is not displayed on the page due to excessive height. Through logical judgment and calculation, the text in the cells that are not displayed on the page is moved according to the calculated offset, and the report is re-rendered to achieve dynamic display of the report.

[0024] See Figure 1 and Figure 2 The method of the present invention can be specifically described as follows: Step 1. Initialize the specified display columns: Based on the display requirements, select several columns and merge the cell contents of the same content in the same column. Obtain the element object of each cell in each column, as well as the element object of the current page scrollbar and the element object of the current page. The specified display columns contain several columns.

[0025] Step 2. Calculate the absolute height h of the text within the cell using the first calculation formula.

[0026] The first calculation formula is: h = a * b² / c, where a is the word length, b is the font pixel size, and c is the width of the cell.

[0027] Step 3. Calculate the relative height g of the text within the cell according to the second calculation formula.

[0028] The second calculation formula is: g = h * r², where h is the absolute height of the text and r is the page scaling ratio parameter.

[0029] Step 4. Calculate the blank height w of the text within the cell according to the third calculation formula.

[0030] The third calculation formula is: w = e - g, where e is the height of the cell where the text is located and g is the relative height of the text within the cell.

[0031] Step 5. Determine the offset m that the text within the cell needs to move: x is the absolute height of the scroll bar, y is the absolute height of the top of the text cell, w is the blank height of the text within the cell. When x - y < w and x - y > 0, m = x - y; otherwise m = 0.

[0032] Step 6. Render the report according to the offsets that the text within all cells in each column needs to move. Traverse all elements on the page, set the value of the padding-top attribute of the elements, and assign the offset that the text needs to move to the padding-top attribute value, so that when the user enters the report page, the initial interface rendering of the page has been completed, so that the user can see the dynamic display effect of the data report when opening the data report.

[0033] Step 7. Add a scroll event listener to the scroll bar. Determine whether the scroll bar is dragged or scrolled through the scroll event listener. When the scroll bar scrolls, execute Steps 2 to 5, and traverse all elements on the page, set the value of the padding-top attribute of the elements, and assign the offset that the text needs to move to the padding-top attribute value, so that the page can be rendered in real time when the user drags the scroll bar.

[0034] Step 8. Bind an element change listener to the top-level DOM structure. When it is detected through the element change listener that the element has changed, determine that the current page has changed, and execute Steps 1 to Step 7.

[0035] Enable the page to have completed interface rendering when changing pages, and re-bind the scroll bar event listener to prevent the scroll bar event listener from becoming invalid after changing pages.

[0036] For example, taking a data report from an inspection and supervision management system as an example, the implementation process of this method can be as follows: Step 1. Merge the cell contents of the same content in the problem categories, general problems, and specific problems columns of the inspection and supervision management system data report, and obtain the element object of each cell in each column, as well as the element object of the current page scroll bar and the element object of the current page.

[0037] Step 2. Calculate the absolute height h of the text within the cell using the first calculation formula.

[0038] Step 3. Calculate the relative height g of the text within the cell according to the second calculation formula.

[0039] Step 4. Calculate the white space height w of the text in the cell according to the third calculation formula.

[0040] Step 5. Determine the offset m that the text within the cell needs to be moved.

[0041] Step 6. Render the report based on the offset of the text to be moved in all cells of the problem category, general problem, and specific problem column. Iterate through all elements on the page, set the padding-top property value of each element, and assign the offset of the text to the padding-top property value. This ensures that the page has completed the initial interface rendering when the user opens the inspection and supervision management system data report page, so that the user can see the dynamic display effect of the data report when opening the data report.

[0042] Step 7. Add a scroll event listener to the scrollbar of the inspection and management system data report page. Use the scroll event listener to determine whether the scrollbar is being dragged or slid. When the scrollbar is scrolling, execute steps 2 to 5 and iterate through all elements on the page. Set the padding-top property value of the elements and assign the offset that the text needs to move to the padding-top property value so that the page can be rendered in real time when the user drags the scrollbar.

[0043] Step 8. Bind element change listeners to the top-level DOM structure. When an element change is detected by the element change listener, determine that the current page has page-over and execute steps 1 to 7. This ensures that the page has completed rendering when the user page-over occurs and rebinds the scrollbar event listener to prevent the scrollbar event listener from becoming invalid after page-over.

[0044] This invention solves the problems of multiple data dimensions, complex hierarchical structures, and large data volumes often encountered in reporting. The dynamic display function automatically calculates the specified cells and dynamically changes the display according to the content of the current page. Compared with general reports, it has significantly improved in clarity and ease of use. This method effectively adapts to the reporting requirements of reports with large data volumes and multiple dimensions.

[0045] This invention dynamically changes the report display structure, using a dynamic display method for report presentation to both the presenter and the audience. This reduces the number of page scrolls and the number of times the eyes need to shift their focus, allowing the presenter to explain things more clearly in less time, and enabling the audience to understand the content of the presenter's report with minimal adaptation and learning costs. This makes the reports suitable for the reporting requirements of inspection and supervision tasks with large amounts of data and multiple dimensions.

[0046] An embodiment of the present invention provides a dynamic data report display device, including: a control module, used to determine the new position of the text in all cells of the entire page based on the scroll wheel position of the current page, so that the text in all cells is dynamically placed at the top and floating on the current page according to the new position.

[0047] The control module specifically includes: Initialization unit, used to initialize the specified display column: According to the display requirements, select several columns and merge the cell contents of the same content in the same column, obtain the element object of each cell in each column, as well as the element object of the current page scroll bar and the element object of the current page, and specify the number of columns to be displayed; The triggering unit is used to trigger the dynamic display calculation logic when the scroll bar is detected to be dragged or slid, to obtain the absolute height of the scroll bar in the current page, and to determine the offset that the text in all cells in each column needs to be moved. The control unit is used to move the text within a cell based on an offset, so that it is dynamically placed on top and floated on the current page.

[0048] The specific execution process of the unit described in this invention can be referred to the specific process of the relevant steps of the above method, and will not be repeated here.

[0049] The above description merely illustrates embodiments of the present invention and is quite specific and detailed; however, it should not be construed as limiting the scope of the patent. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of the present invention, and these all fall within the scope of protection of the present invention. Furthermore, any parts of the present invention not described in detail are conventional techniques.

Claims

1. A method and apparatus for dynamically displaying data reports, characterized in that, Based on the scroll wheel position of the current page, determine the new positions of the text in all cells of the entire page, so that the text in all cells dynamically floats at the top of the current page according to the new positions.

2. The method according to claim 1, characterized in that, The method specifically includes: Step 1, initialize the specified display columns: According to the display requirements, select several columns, merge the cell contents with the same content in the same column, obtain the element objects of each cell in each column, the element object of the scroll bar on the current page, and the element object of the current page. The specified display columns include several columns; Step 2, when it is detected that the scroll bar is dragged or scrolled, trigger the dynamic display calculation logic, obtain the absolute height of the scroll bar on the current page, and determine the offset amount that the text in all cells of each column needs to move; Step 3, control the movement of the text in the cells based on the offset amount, so that it dynamically floats at the top of the current page.

3. The method according to claim 2, characterized in that, The content of each column in Step 1 is sorted content.

4. The method according to claim 2, characterized in that, In Step 1, when initializing the specified display columns, call the dynamic display calculation logic once, and initialize and render the report according to the offset amount that the text in all cells of each column needs to move, so that the initial interface of the page has been rendered when the user enters the report page.

5. The method according to claim 2, characterized in that, Add a scroll event listener to the scroll bar, and determine whether the scroll bar is dragged or scrolled through the scroll event listener.

6. The method according to claim 2, characterized in that, Bind an element change listener to the top-level DOM structure. When it is detected through the element change listener that the element has changed, determine that the current page has changed, and execute Steps 1 to 3.

7. The method according to claim 2, characterized in that, Design the dynamic display calculation logic: Use the first calculation formula to calculate the absolute height h of the text in the cell, The first calculation formula is: h = a * b² / c, where a is the character length, b is the font pixel size, and c is the width of the cell; Calculate the relative height g of the text in the cell according to the second calculation formula, The second calculation formula is: g = h * r², where h is the absolute height of the text and r is the page zoom ratio parameter; Calculate the blank height w of the text in the cell according to the third calculation formula, The third calculation formula is: w = e - g, where e is the height of the cell where the text is located and g is the relative height of the text in the cell; Determine the offset amount m that the text in the cell needs to move: when x - y < w and x - y > 0, m = x - y; otherwise m = 0; x is the absolute height of the scroll bar, y is the absolute height of the top of the text cell, and w is the blank height of the text in the cell.

8. The method according to claim 2, characterized in that, In Step 3, when moving the text, traverse all elements in the page, set the value of the padding-top attribute of the element, and assign the offset amount that the text needs to move to the value of the padding-top attribute for real-time dynamic rendering.

9. A data report dynamic display device for performing the method according to any one of claims 1 to 8, characterized in that, It includes: A control module for determining the new positions of the text in all cells of the entire page based on the scroll wheel position of the current page, so that the text in all cells dynamically floats at the top of the current page according to the new positions.

10. The apparatus according to claim 9, characterized in that, The control module specifically includes: Initialization unit, used to initialize the specified display column: According to the display requirements, select several columns and merge the cell contents of the same content in the same column, obtain the element object of each cell in each column, as well as the element object of the current page scroll bar and the element object of the current page, and specify the number of columns to be displayed; The triggering unit is used to trigger the dynamic display calculation logic when the scroll bar is detected to be dragged or slid, to obtain the absolute height of the scroll bar in the current page, and to determine the offset that the text in all cells in each column needs to be moved. The control unit is used to move the text within a cell based on an offset, so that it is dynamically placed on top and floated on the current page.

Images