Detailed Description
It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the invention.
Referring to fig. 1, fig. 1 is a schematic device structure diagram of a hardware running environment according to an embodiment of the present invention.
The data display device according to the embodiment of the present invention may be a terminal device having display and processing functions, such as a PC (personal computer ), a notebook computer, a server, or the like.
As shown in fig. 1, the data display device may include a processor 1001, such as a CPU (Central Processing Unit ), a communication bus 1002, a user interface 1003, a network interface 1004, a memory 1005. The communication bus 1002 is used to implement connection communication between these components, and the user interface 1003 may include a Display (Display), an input unit such as a Keyboard (Keyboard), and the optional user interface 1003 may further include a standard wired interface, and a wireless interface. The network interface 1004 may optionally include a standard wired interface, a Wireless interface (e.g., wi-Fi interface), and the memory 1005 may be a high-speed random access memory (random access memory, RAM) or a stable memory (non-volatile memory), such as a disk memory, and the memory 1005 may optionally be a storage device independent of the processor 1001. It will be appreciated by those skilled in the art that the data display device structure shown in fig. 1 does not constitute a limitation of the data display device and may include more or fewer components than shown, or may combine certain components, or a different arrangement of components.
With continued reference to fig. 1, an operating system, a network communication module, and a data display program may be included in the memory 1005, which is one type of computer storage medium in fig. 1. In fig. 1, a network communication module may be used to connect to a server for data communication with the server, and a processor 1001 may be used to call a data display program stored in a memory 1005 and execute the data display method provided by the embodiment of the present invention.
Based on the above hardware structure, various embodiments of the data display method of the present invention are presented.
The invention provides a data display method.
Referring to fig. 2, fig. 2 is a flow chart of a first embodiment of the data display method of the present invention.
In this embodiment, the data display method includes:
Step S10, when a data rolling event is detected, rolling position information and a rolling type corresponding to the data rolling event are obtained;
in this embodiment, the data display method is implemented by a data display device, which may be a PC, a notebook computer, a server, or the like. Wherein an improved data display plug-in is installed in the data display device, the data display plug-in adopts an existing framework easyui (a front end framework), and the use mode of the plug-in is the conventional calling mode of the easyui plug-in.
The improved data display plug-in is characterized in that an upper blank space occupying block and a lower blank space occupying block are respectively arranged in a row table body and a column table body, a row table body area and a column table body area are composed of the upper blank space occupying block, the lower blank space occupying block and a data table, so that a paging rendering row is realized, meanwhile, a left blank block and a right blank block are respectively arranged in a column table head and a column table body, and a column head area and a column table body area are composed of the left blank space occupying block, the right blank space occupying block and the data table, so that a paging rendering column is realized. The upper and lower blank blocks and the left and right blank blocks are arranged in the manner described below with reference to the fourth embodiment.
The improved Data display plug-in is improved based on the existing Data display plug-in VirtualScroll, and the improved Data display plug-in comprises the definition of each configuration parameter predefined in the existing Data display plug-in VirtualScroll, and specifically comprises the following items of 1, used view (view name can be defined by the scheme); the method comprises the steps of 2, a cross table switch, 3, configuring a row list head field according to a display sequence, wherein the format of the original component definition format is kept, 4, configuring a list head field according to the sequence, configuring a format same row list head field according to the display sequence, 5, configuring a measurement field, wherein the format same row list head field according to the display sequence, 6, data content (hereinafter called Data) comprises row content and row total number, 7, row height (hereinafter called preset row height) is set through the value when default each row height is the same, 8, column width (hereinafter called preset column width) is set through the value when default column width is the same, 9, row number of each page of Data, and 10, column number of each page of Data.
It should be noted that, the above configuration can be set according to actual needs to support more requirements, and the number of data stripes in each page in the row direction (the number of data stripes in each page in the column direction) is greater than or equal to the number of stripes that can be accommodated by the visible height (width) of the current table row (column) region, so as to ensure that only the data in the visible region of the table or the data of one or two more pages are rendered without causing a browser to be blocked or crashed due to excessive rendering data amount at a time.
Further, before being used for data display, the data display plug-in is initialized to obtain an improved data display plug-in, which specifically comprises:
1) The new Data content (Data) is organized, and the column content and the column total number are added on the basis of the row content and the row total number;
2) Clearing the row list body and the list body;
3) Initializing view variables defined by the Data display plug-in, wherein the view variables comprise 1, first line Data which are the same as Data of Data defined initially; 2, the initial Data is the same as the Data of the initial definition; 3, row Data (hereinafter referred to as R) to be rendered is empty array, and is updated according to the rolling behavior of the user; column Data to be rendered (hereinafter referred to as C) is a blank array updated according to a rolling behavior of a user, 5 a currently rendered row page sequence (hereinafter referred to as Ra) is a blank array updated according to a rolling behavior of a user, 6a current row page start Data column subscript (hereinafter referred to as Ri) is 0 updated according to a rolling behavior of a user, 7a current row page start page (hereinafter referred to as Rp) is 1 updated according to a rolling behavior of a user, 8a currently rendered row page sequence (hereinafter referred to as Ca) is a blank array updated according to a rolling behavior of a user, 9 a current row page start Data column subscript (hereinafter referred to as Ci) is 0 updated according to a rolling behavior of a user, 10a current row page start page (hereinafter referred to as Cp) is 1 updated according to a rolling behavior of a user, 11 a required first row page start page Data (hereinafter referred to as RC 1) is updated according to a rolling behavior of a user, 12 a required first page end page Data (hereinafter referred to as RC 2) is updated according to a rolling behavior of a user, and 13 a page end page of a required first page start page Data (hereinafter referred to RC) is updated according to a rolling behavior of a user, and 14 is updated according to a rolling behavior of a user The method comprises the steps of updating end page end column page data (RC 4 hereinafter) to be rendered according to the rolling behavior of a user, updating end page end column data (C1 hereinafter) to be rendered according to the rolling behavior of the user, and updating end page column data (C2 hereinafter) to be rendered according to the rolling behavior of the user.
It should be noted that, RC1 to RC4 correspond to the body value range of the list, and are finally recorded in the data R to be rendered, as follows:
In this embodiment, in the data display process, when a cross table display interface is used in the browser interface of the terminal, the user wants to view other data that is not displayed in the table, and can control the horizontal scroll bar or the vertical scroll bar to implement horizontal scrolling or vertical scrolling of the data table, so as to view other data. At this time, the data display device detects a data scrolling event, and then acquires scrolling position information and a scrolling type corresponding to the data scrolling event. If the rolling type of the data rolling event is longitudinal rolling, the rolling position information at least comprises the current rolling position height, and if the rolling type of the data rolling event is transverse rolling, the rolling position information at least comprises the current rolling position length.
Step S20, searching target rendering data according to the scrolling position information and the scrolling type, and determining a target data table area and a target blank space occupation block according to the scrolling type;
Then, target rendering data is searched according to the scrolling position information and the scrolling type, and a target data table area and a target blank occupation block are determined according to the scrolling type.
Specifically, when target rendering Data is queried, the method comprises the steps of detecting whether Data exists in content corresponding to a rolling type in Data content (Data), determining page information of the target rendering Data according to rolling position information and the rolling type if the content corresponding to the rolling type does not exist, and obtaining the current rendered page sequence information according to the page information of the target rendering Data and the current rendered page sequence information. If the content corresponding to the rolling type has data, judging the position relation between the blank occupying block and the list body area according to the rolling position information, determining a corresponding data acquisition rule according to the position relation, and obtaining target rendering data based on the data acquisition rule. The specific implementation process may refer to the following second embodiment, which is not described herein.
The step of determining the target data table area and the target blank occupation block according to the rolling type comprises the following steps:
If the scrolling type is longitudinal scrolling, determining a target data table area as a row table body and a column table body, wherein a target blank space occupying block is an upper blank space occupying block and a lower blank space occupying block;
And if the scrolling type is transverse scrolling, determining the target data table area as a list head, a row table body and a list body, wherein the target blank space occupying blocks are left and right blank space occupying blocks and upper and lower blank space occupying blocks.
If the scrolling type is longitudinal scrolling, determining the target data table as a row table body and a list body, and determining the target blank space blocks as an upper blank space block and a lower blank space block, and if the scrolling type is transverse scrolling, determining the target data table as a list head, a row table body and a list body, wherein the target blank space blocks are a left blank space block, a right blank space block, an upper blank space block and a lower blank space block.
And step S30, carrying out data rendering on the target data table area and the target blank occupation block according to the target rendering data.
And finally, carrying out data rendering on the target data table area and the target blank space occupation block according to the target rendering data. For example, if the scroll type is vertical scroll, the row body, the list body and the upper and lower blank space blocks are rendered according to the target rendering data, and if the scroll type is horizontal scroll, the list head, the row body, the list body and the left and right blank space blocks are rendered according to the target rendering data.
The invention provides a data display method, which comprises the steps of acquiring rolling position information and rolling type corresponding to a data rolling event when the data rolling event is detected, searching target rendering data according to the rolling position information and the rolling type, determining a target data table area and a target blank space block according to the rolling type, and further performing data rendering on the target data table area and the target blank space block according to the target rendering data. In the embodiment of the invention, a cross table data display plug-in is obtained through development and transformation, upper and lower blank space occupation blocks are respectively arranged in the row table body and the list body, and simultaneously left and right blank blocks are respectively arranged in the list head and the list body, so that the rendering of the row and the column is transformed into a paging rendering mode, and the horizontal rolling paging and the vertical rolling paging can be simultaneously supported. When a data rolling event is detected, the data rendering can be carried out on the target data table area and the target blank space occupation block according to the acquired target rendering data, so that the browser normally renders large data volume data in the transverse and longitudinal rolling processes, and the phenomenon of jamming or breakdown is avoided.
Further, based on the above-described first embodiment, a second embodiment of the data display method of the present invention is proposed.
In this embodiment, the step of "searching for the target rendering data according to the scroll position information and the scroll type" includes:
step a21, detecting whether the content corresponding to the scrolling type in the data content has data or not;
In the present embodiment, after the scroll position information and the scroll type corresponding to the Data scroll event are acquired, it is detected whether or not there is Data in the content corresponding to the scroll type in the Data content (Data). For example, if the scroll type is vertical scroll, it is detected whether the row content in Data has Data, and if the scroll type is vertical scroll, it is detected whether the column content in Data has Data.
If the content corresponding to the scrolling type has no data, executing step a22, and determining page number information of the target rendering data according to the scrolling position information and the scrolling type;
Step a23, obtaining currently rendered page sequence information, and obtaining target rendering data according to the page information of the target rendering data and the currently rendered page sequence information.
In this embodiment, if the content corresponding to the scroll type has no data, page information of the target rendering data is determined according to the scroll position information and the scroll type, then the currently rendered page sequence information is obtained, and the target rendering data is obtained according to the page information of the target rendering data and the currently rendered page sequence information.
Specifically, step a22 includes:
Step a221, if the scrolling type is longitudinal scrolling, acquiring a preset row height, and calculating a current position row index according to the preset row height and the current scrolling position height in the scrolling position information;
step a222, calculating to obtain a starting row page number of target rendering data according to the current position row index and the preset row number of each page of data, wherein page number information of the target rendering data is the starting row page number;
In this embodiment, a Data rendering process (referred to as process 1) for scrolling vertically when the line content of Data is free of Data is described. If the scrolling type is longitudinal scrolling, a preset line height is obtained, a current position line index is calculated according to the preset line height and the current scrolling position height in the scrolling position information, and then a starting line page number (hereinafter referred to as P) of target rendering data is calculated according to the current position line index and the number of data pieces of each page of the preset line, wherein the page number information of the target rendering data is the starting line page number.
Then, a column page sequence Ca which is currently rendered is obtained, and target rendering data is obtained according to the initial row page P of the target rendering data and the column page sequence Ca which is currently rendered. The specific acquisition mode is as follows:
If Ca has only one item (only one page data is listed, the row data RC2 and RC4 of the last column page are made to be empty), only the row data of the P row page and the Ca [0] column page are needed to be obtained, then the view variable is updated, the target rendering data is obtained based on the updated view variable, the update of the view variable comprises that 1) Rp becomes P, 2) Ri is calculated according to the P and the row data of the configuration parameter setting, 3) Ra sequence only comprises P, 4) RC1 becomes the obtained row data of the P row page and the Ca [0] column page, 5) RC 2-RC 4 is emptied, 6) new data after RC1 is integrated according to the row data arrangement mode is stored in R (view variable).
If Ca has two items (there are two pages of data in the column direction), respectively acquiring the row data of the P row page Ca [0] column page and the P row page Ca [1] column page, then updating the view variable, obtaining target rendering data based on the updated view variable, wherein the update of the view variable comprises 1) Rp becomes P, 2) calculating Ri according to the row number of each page of data set by P and configuration parameters, 3) Ra sequence only comprises P, 4) RC1 becomes the row data of the P row page Ca [0] column page, 5) RC2 becomes the row data of the P row page Ca [1] column page, 6) clearing RC3 and RC4, and 7) integrating the new data of RC1 and RC2 according to the row data arrangement mode and storing the new data in R.
And then, the row table body and the column body are firstly rendered according to the obtained target rendering data, the occupation heights of the upper and lower blank occupation blocks are calculated, and the upper and lower blank occupation blocks are rendered according to the obtained target rendering data.
In addition, after rendering, a scrolling event of the list body can be triggered once, so that the consistency of the scrolling height and the data consistency of the row list body and the list body is ensured. Specifically, when the scroll instruction is detected, rendered data are changed, a row table body and a list body are rendered, and data of a visible area are refreshed, but a user operates the list body to scroll only the data of the list body, the data of the row table body are not scrolled and still remain at a position in front of the user scrolling the list body, so that the scroll is triggered to ensure that the scrolling position of the list body is synchronous to the row table body, the same distance of the row table body is ensured, and the data of the row table body corresponds to the data of the list body.
Step a223, if the rolling type is horizontal rolling, acquiring a preset column width, and calculating a current position column index according to the preset column width and the current rolling position length in the rolling position information;
Step a224, calculating to obtain a starting column page number of the target rendering data according to the current position column index and the preset column number of each page of data, wherein the page number information of the target rendering data is the starting column page number.
In this embodiment, a Data rendering process (referred to as process 2) of scrolling vertically when the column content of Data is not Data is described. And then, calculating the initial column page number (hereinafter referred to as P) of the target rendering data according to the current position column index and the number of data strips in each page of the preset column, wherein the page number information of the target rendering data is the initial column page number.
Then, a currently rendered row page sequence Ra is obtained, and target rendering data is obtained according to the initial column page P of the target rendering data and the currently rendered row page sequence Ra. The specific acquisition mode is as follows:
Firstly, 1) changing Cp to P, 2) changing Ci to the column index of the current position, 3) storing the Ca sequence only including P, 4) storing the P column page data into C, 5) updating C1 to the P column page data, and 6) emptying C2.
Then, the following operations are performed according to the currently rendered row page sequence Ra:
If Ra has only one item (only one page of data is in the row direction, and the last row of data R3 and R4 are empty), then only the row data of Ra 0 row pages and P column pages are needed to be obtained, then the view variable is updated, the target rendering data is obtained based on the updated view variable, the update of the view variable comprises the following contents that 1) RC1 is updated to be the row data of Ra 0 row pages and P column pages, 2) RC 2-RC 4 are emptied, and 3) new data of RC1 are integrated according to the row data arrangement mode and are stored in R.
If Ra has two items (two pages of data in the row direction), respectively acquiring the row data of the Ra 0 row page P column page and the Ra 1 row page P column page, then updating the view variable, and obtaining target rendering data based on the updated view variable, wherein the updating of the view variable comprises the following contents of 1) updating RC1 to the row data of the Ra 0 row page and the P column page, 2) updating RC3 to the row data of the Ra 1 row page and the P column page, 3) clearing RC2 and RC4, and 4) integrating new data of RC1 and RC3 according to a row data arrangement mode and storing the new data into R.
And then, according to the data R in the target rendering data, the row body and the list body are rendered, the occupation heights of the upper and lower blank occupation blocks are calculated, and the left and right blank occupation blocks are rendered.
In addition, after rendering, a scrolling event of the list body can be triggered once, so that the consistency of the scrolling height and the data consistency of the row list body and the list body is ensured.
If the content corresponding to the scrolling type has data, executing step a24, and judging the position relation between the blank occupying block and the list body area according to the scrolling position information;
And a step a25 of determining a corresponding data acquisition rule according to the position relation and obtaining target rendering data based on the data acquisition rule.
In the embodiment, if the content corresponding to the scrolling type has data, the position relationship between the blank occupation block and the list body area is judged according to the scrolling position information, then a corresponding data acquisition rule is determined according to the position relationship, and target rendering data is obtained based on the data acquisition rule.
If the scrolling type is longitudinal scrolling, judging the position relationship between the blank occupation block and the list body area according to the height of the current scrolling position in the scrolling position information when the line content in Date has data.
If the position relationship is that the upper/lower blank space occupying blocks fully occupy the column body area, the above-mentioned process 1 is repeated at this time, and the description is omitted.
If the position relationship is that the upper blank space occupying block enters the list body area, the last page line data (namely, two pages of data exist in the line direction, when the view variable is updated, the last page data are changed into the first page data, and the current display page data are changed into the last page data) is loaded, and the specific process is that a) line page numbers (hereinafter called P) to be rendered are calculated according to the current line start index Ri and the line direction each page data number set by the configuration parameters. If Ca has only one item (only one page data is listed, the last column page data RC2 and RC4 are made to be empty), only the row data of the P row page and Ca [0] column page are needed to be obtained, then the view variable is updated, the target rendering data is obtained based on the updated view variable, the view variable is updated to include 1) Rp becomes P, 2) Ri is calculated according to the row number of each page data according to P and the configuration parameter, 3) the Ra sequence includes P (the last page needing to be loaded) and P+1 (the current display page), 4) RC1 data is stored in RC3, 5) RC1 data is updated to be the obtained P row page and Ca [0] column page data, 6) RC2 and RC4 are cleared, and 6) new data of RC1 and RC3 are integrated according to the row data arrangement mode and stored in R. If Ca has two items (there are two pages of data in the column direction), then the row data of the P row page Ca [0] column page and the P row page Ca [1] column page are obtained at the same time, then the view variable is updated, the target rendering data is obtained based on the updated view variable, the view variable update comprises 1) Rp becomes P, 2) Ri is calculated according to the number of each row page set by P and the configuration parameters, 3) Ra sequence comprises P (last page needing to be loaded) and P+1 (current display page), 4) RC1 data is stored in RC3, 5) RC2 data is stored in RC4, 6) RC1 data is updated into the obtained P row page and Ca [0] column page line data, 7) RC2 data is updated into the obtained P row page and Ca [1] column page line data, and 8) new data of RC 1-RC 4 are integrated according to the row data arrangement mode and stored in R. b) And rendering the row list body and the list body according to the R data. c) And calculating the occupation heights of the upper and lower blank occupation blocks and rendering the upper and lower blank occupation blocks.
If the position relationship is that the lower blank space occupying block enters the list body area, the next page data (namely, two pages of data are arranged in the row direction, when the view variable is updated, the current display page data are changed into the first page data, and the next page data are changed into the last page data) is loaded, and the specific process is that a) the initial row page number (hereinafter called P) to be rendered is calculated according to the current row initial subscript Ri and the row direction each page data number set in the configuration parameters. If Ca has only one item (only one page data is listed, the last column page data RC2 and RC4 are made empty), only the row data of the P row page and Ca [0] column page are needed to be obtained, then the view variable is updated, the target rendering data is obtained based on the updated view variable, the view variable is updated to include 1) Rp becomes P, 2) new Ri is calculated according to Ri and the number of each row page bar set by the configuration parameters, 3) Ra sequence includes P-1 (current display page) and P (next page), 4) RC3 data is stored in RC1, 5) RC3 data is updated to be the obtained row data of the P row page and Ca [0] column page, 6) RC2 and RC4 are emptied, and 7) the new data of RC1 and RC3 are integrated according to the row data arrangement mode and stored in R. If Ca has two items (there are two pages of data in the column direction), then the row data of the P row page Ca [0] column page and the P row page Ca [1] column page are obtained at the same time, then the view variable is updated, the target rendering data is obtained based on the updated view variable, the update of the view variable comprises 1) Rp becomes P, 2) new Ri is calculated according to Ri and the number of each row page set by the configuration parameters, 3) Ra sequence comprises P-1 (last page) and P (current display page), 4) RC3 data is stored in RC1, 5) RC4 data is stored in RC2, 6) RC3 data is updated into the obtained P row page and Ca [0] column page line data, 7) RC4 data is updated into the obtained P row page and Ca [1] column page line data, and 8) the new data of RC 1-RC 4 are integrated according to the row data arrangement mode and stored in R. b) And rendering the row list body and the list body according to the R data. c) And calculating the occupation heights of the upper and lower blank occupation blocks and rendering the upper and lower blank occupation blocks.
If the scrolling type is horizontal scrolling, judging the position relation between the blank occupation block and the list body area according to the length of the current scrolling position in the scrolling position information when the column content in Date has data.
If the position relationship is that the left/right blank occupying block fully occupies the list body area, the above process 2 is repeated at this time, and the description is omitted.
If the position relation is that the left blank space block enters the list body area, loading the last page column data (namely, the column direction is provided with two pages of data, when the view variable is updated, the last page data is changed into the first page data, and the current display page data is changed into the last page data), specifically, the method comprises the following steps of a) firstly calculating the initial column page number P to be rendered according to the current column initial subscript Ci and the column number of each page data set by the configuration parameters, obtaining P column page column data, then updating the view variable, and obtaining target rendering data based on the updated view variable, wherein the updating of the view variable comprises the following steps of firstly 1) changing Cp into P, 2) calculating Ci according to the P and the column number of each page data set configured by the configuration parameters, 3) storing C1 data into the last column C2, 5) updating C1 into the P column data, and 6) updating C into the C1 and C2 data sets. Then, if Ra has only one item (row direction has only one page of data, and the last page of data R3 and R4 are empty), then only the row data of Ra [0] row page and P column page is needed to be obtained, then the view variable is updated, comprising the following contents that 1) RC1 data is stored in RC2, 2) RC1 is updated to obtain Ra [0] row page and P column page data, 3) RC3 and RC4 are emptied, 4) new data of RC1 and RC2 are integrated according to the row data arrangement mode and are stored in R. If Ra has two items (i.e. there are two pages of data in the row direction), then respectively obtaining the row data of the Ra 0 row page P column page and the Ra 1 row page P column page, then updating the view variable, including the following contents that 1) RC1 data are stored in RC2, 2) RC3 data are stored in RC4, 3) RC1 is updated to obtain the row data of the Ra 0 row page and the P column page, 4) RC3 is updated to obtain the row data of the Ra 1 row page and the P column page, and 5) new data of RC 1-RC 4 are integrated according to the row data arrangement mode and are stored in R. b) And according to the data C rendering list head, calculating the occupation widths of the left and right blank occupation blocks and rendering the left and right blank occupation blocks. c) And according to the data R, rendering the row table body and the column body, calculating the occupation heights of the upper and lower blank occupation blocks and rendering the upper and lower blank occupation blocks.
If the position relation is that the right blank space block enters the list body area, next page column data (namely, two pages of data exist in the column direction), when the view variable is updated, the current display page data is changed into first page data, and the next page data is changed into last page data), and the specific process is that a) a starting column page number P needing to be rendered is calculated from the column set by the current column starting index Ci and the configuration parameter to each page data, P column page data are acquired, then the view variable is updated, target rendering data are obtained based on the updated view variable, the updating of the view variable comprises the following operations that 1) Cp is updated to P, 2) new Ci is calculated from the column set configured by Ci and the parameter, 3) Ca sequence comprises P-1 (last page) and P (current display page), 4) C2 data are stored in C1, 5) C2 is updated to P column data, and 6) C is updated to C1 and C2 data sets. Then, according to the currently rendered row page sequence Ra, if Ra has only one item (the row direction has only one page of data, and the last row page of data R3 and R4 are made to be empty), then only the row data of Ra [0] row pages and P column pages are required to be obtained, and then the view variable is updated, including the following contents that 1) RC2 data are stored in RC1, 2) RC2 data are updated into the row data of Ra [0] row pages and P column pages, 3) RC3 and RC4 are emptied, and 4) new data of RC1 and RC2 are integrated according to the row data arrangement mode and stored in R. If Ra has two items (two pages of data in the row direction), respectively acquiring the row data of the Ra 0 row page P column page and the Ra 1 row page P column page, and then updating the view variable, wherein the method comprises the following steps of 1) storing RC2 data into RC1, 2) storing RC4 data into RC3, 3) updating the RC2 data into the row data of the Ra 0 row page and the P column page, 4) updating the RC4 data into the row data of the Ra 1 row page and the P column page, and 5) integrating the new data of RC 1-RC 4 into R according to a row data arrangement mode. b) And according to the data C rendering list head, calculating the occupation widths of the left and right blank occupation blocks and rendering the left and right blank occupation blocks. c) And according to the data R rendering list body, calculating the occupation heights of the upper and lower blank occupation blocks and rendering the upper and lower blank occupation blocks.
Further, based on the above-described first and second embodiments, a third embodiment of the data display method of the present invention is proposed.
In this embodiment, before the step S10, the data display method further includes:
step A, when a data display instruction is received, acquiring data to be displayed according to the data display instruction;
In this embodiment, when the browser page performs data display primarily, a user may trigger a data display instruction when opening a page where data display exists, and at this time, when receiving the data display instruction, the service obtains data to be displayed according to the data display instruction.
And B, carrying out initialization rendering on the data to be displayed to obtain an initialized rendered data display table, wherein the data display table comprises a row table head, a list head, a row table body and a list body.
And then, carrying out initialization rendering on the data to be displayed to obtain an initialized and rendered data display table, wherein the data display table comprises a row table head, a list head, a row table body and a list body.
Specifically, describing the rendering of the list header area as an example, the list header table may be inserted into the list header container first, and the column configuration (i.e., the list header fields mentioned in the predefined configuration parameters are configured in sequence) may be traversed, to generate the list header table row, and then the list header table may be inserted. And similarly, rendering other areas to finally obtain the initialized rendered data display table.
Further, based on the above-described first and second embodiments, a fourth embodiment of the data display method of the present invention is proposed.
In this embodiment, before the step S10, the data display method further includes:
Step C, a first target parameter and a second target parameter are obtained in advance;
In this embodiment, a first target parameter and a second target parameter are obtained in advance, where the first target parameter includes a current starting row index, a preset row height, a current rendering row number and a total number of rows, and the second target parameter includes a current starting column index, a preset column width, a current rendering column number and a total number of columns.
Step D, calculating to obtain the heights of upper and lower blank blocks according to the first target parameters, and setting upper and lower blank space occupying blocks in the row bodies and the list bodies according to the heights of the upper and lower blank blocks;
and calculating the heights of the upper blank block and the lower blank block according to the first target parameter. The upper and lower blank block heights include an upper blank block height and a lower blank block height, wherein the upper blank block height=the current start line subscript×the preset line height, the lower blank block height=the total number of lines×the preset line height-the current rendering line number×the preset line height-the upper blank block height.
Further, upper and lower blank space blocks are provided in the row body and the column body according to the heights of the upper and lower blank blocks, and the upper and lower blank blocks are blank html block tags, and the setting positions are shown in fig. 3.
And E, calculating to obtain left and right blank block widths according to the second target parameters, and setting left and right blank space occupying blocks in the list head and the list body according to the left and right blank block widths.
And calculating to obtain the widths of the left blank block and the right blank block according to the second target parameters. The left and right blank block heights include a left blank block height and a right blank block height, wherein the left blank block width=the current start column subscript×the preset column width, the right blank block width=the total number of columns×the preset column width-the current rendering column number×the preset column width-the left blank block width.
Further, left and right blank space blocks are provided in the list head and the list body according to the left and right blank block widths, and the left and right blank blocks are blank html block tags, and the setting positions are shown in fig. 3.
It should be noted that the execution sequence of the step D and the step E is not sequential. In addition, the execution sequence of step C is before step a described above.
In the embodiment, the paging rendering row can be realized by arranging the upper and lower blank space blocks in the row list body and the list body respectively, and meanwhile, the paging rendering column can be realized by arranging the left and right blank blocks in the list head and the list body. By the method, the horizontal scrolling paging and the vertical scrolling paging can be supported at the same time, so that the browser is rendered normally without being blocked or crashed in the data scrolling display process.
Furthermore, it should be noted that in a specific embodiment, more functions may be added based on the characteristics of the table, for example, 1, on the premise of guaranteeing data accuracy in classification summary display, whether the front end calculates summary data or returns from the background, and after the front end data is integrated, the plug-in rendering mode may be directly used for rendering. 2. And customizing the cell format, namely setting cell background, character font, color, cell frame and the like by using a method for setting the format for the cells of the table. 3. The plug-in supports manual dragging to change the row width of the row, and the plug-in method can be called to change the row width of the row.
The invention also provides a data display device.
Referring to fig. 4, fig. 4 is a schematic functional block diagram of a first embodiment of a data display device according to the present invention.
In this embodiment, the data display device includes:
The first obtaining module 10 is configured to obtain, when a data rolling event is detected, rolling position information and a rolling type corresponding to the data rolling event;
a determining module 20, configured to find target rendering data according to the scroll position information and the scroll type, and determine a target data table area and a target blank space block according to the scroll type;
And the data rendering module 30 is configured to perform data rendering on the target data table area and the target blank space block according to the target rendering data.
The virtual function modules of the data display device are stored in the memory 1005 of the data display device shown in fig. 1, and are used for implementing all functions of a data display program, and when each module is executed by the processor 1001, the page rendering of rows and columns can be implemented, so that the browser normally renders, does not get stuck and does not collapse in the process of scrolling data with large data volume in the horizontal and vertical directions.
Further, the determining module 20 includes:
The detection unit is used for detecting whether the content corresponding to the scrolling type in the data content has data or not;
a first determining unit configured to determine page number information of target rendering data according to the scroll position information and the scroll type if the content corresponding to the scroll type has no data;
The first acquisition unit is used for acquiring currently rendered page sequence information, and acquiring target rendering data according to the page sequence information of the target rendering data and the currently rendered page sequence information.
Further, the determining module 20 further includes:
the judging unit is used for judging the position relation between the blank occupying block and the list body area according to the rolling position information if the content corresponding to the rolling type has data;
and the second acquisition unit is used for determining a corresponding data acquisition rule according to the position relation and obtaining target rendering data based on the data acquisition rule.
Further, the first obtaining unit is specifically configured to:
if the scrolling type is longitudinal scrolling, acquiring preset row height, and calculating a current position row index according to the preset row height and the current scrolling position height in the scrolling position information;
Calculating to obtain the initial row page number of the target rendering data according to the current position row index and the preset row number of each page of data, wherein the page number information of the target rendering data is the initial row page number;
If the rolling type is transverse rolling, acquiring a preset column width, and calculating a current position column index according to the preset column width and the current rolling position length in the rolling position information;
And calculating to obtain the initial column page number of the target rendering data according to the current position column index and the preset column number of each page of data, wherein the page number information of the target rendering data is the initial column page number.
Further, the determining module 20 further includes:
the second determining unit is used for determining that the target data table area is a row table body and a column table body if the rolling type is longitudinal rolling, and the target blank space occupying blocks are upper and lower blank space occupying blocks;
And the third determining unit is used for determining that the target data table area is a list head, a row table body and a list body if the scrolling type is transverse scrolling, and the target blank space occupying blocks are left and right blank space occupying blocks and upper and lower blank space occupying blocks.
Further, the data display device further includes:
the second acquisition module is used for acquiring data to be displayed according to the data display instruction when the data display instruction is received;
the initialization rendering module is used for performing initialization rendering on the data to be displayed to obtain an initialized rendered data display table, and the data display table comprises a row table head, a list head, a row table body and a list body.
Further, the data display device further includes:
the third acquisition module is used for acquiring the first target parameter and the second target parameter in advance;
The first setting module is used for calculating the heights of the upper blank block and the lower blank block according to the first target parameter, and setting the upper blank space occupying blocks and the lower blank space occupying blocks in the row table body and the list body according to the heights of the upper blank block and the lower blank space occupying blocks;
And the second setting module is used for calculating the widths of the left blank block and the right blank block according to the second target parameters, and setting left blank space occupying blocks and right blank space occupying blocks in the list head and the list body according to the widths of the left blank block and the right blank block.
The function implementation of each module in the data display device corresponds to each step in the data display method embodiment, and the function and implementation process thereof are not described in detail herein.
The present invention also provides a data display device comprising a memory, a processor and a data display program stored on the memory and executable on the processor, the data display program implementing the steps of the data display method according to any one of the above embodiments when executed by the processor.
The specific embodiments of the data display device of the present invention are substantially the same as the embodiments of the data display method described above, and will not be described herein.
The present invention also provides a computer-readable storage medium having stored thereon a data display program which, when executed by a processor, implements the steps of the data display method according to any of the above embodiments.
The specific embodiments of the computer readable storage medium of the present invention are substantially the same as the embodiments of the data display method described above, and will not be described herein.
It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or system that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or system. Without further limitation, an element defined by the phrase "comprising one does not exclude the presence of other like elements in a process, method, article, or system that comprises the element.
The foregoing embodiment numbers of the present invention are merely for the purpose of description, and do not represent the advantages or disadvantages of the embodiments.
From the above description of the embodiments, it will be clear to those skilled in the art that the above-described embodiment method may be implemented by means of software plus a necessary general hardware platform, but of course may also be implemented by means of hardware, but in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present invention may be embodied essentially or in a part contributing to the prior art in the form of a software product stored in a storage medium (e.g. ROM/RAM, magnetic disk, optical disk) as described above, including several instructions for causing a device (which may be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to perform the method according to the embodiments of the present invention.
The foregoing description is only of the preferred embodiments of the present invention, and is not intended to limit the scope of the invention, but rather is intended to cover any equivalents of the structures or equivalent processes disclosed herein or in the alternative, which may be employed directly or indirectly in other related arts.