Disclosure of Invention
The application provides a form display method which can ensure the fluency of pages and realize that large data level data display is not stuck.
In a first aspect, the present application provides a form display method, the method including:
Acquiring size information of a target table displayed by a web page, and occupying positions of page display cells and freezing cells in the target table;
if a form adjustment instruction is monitored, determining the offset distance of the freezing cell according to the rolling distance corresponding to the form adjustment instruction;
Determining a target occupation position of the freezing cell in the target table according to a rolling direction corresponding to the table adjustment instruction, the occupation position of the freezing cell and the offset distance of the freezing cell;
Determining the position of the adjusted page display cell in the target table according to the rolling direction corresponding to the table adjustment instruction, the size information of the target table, the position of the page display cell and the rolling distance;
And performing data rendering according to the target occupation position of the freezing cell in the target table and the occupation position of the adjusted page display cell in the target table, and displaying the adjusted target table on the web page.
Optionally, if the table adjustment instruction is detected, determining the offset distance of the frozen cell according to the rolling distance corresponding to the table adjustment instruction includes:
And if the table adjustment instruction is monitored, taking the rolling distance corresponding to the table adjustment instruction as the offset distance of the freezing cell in the target table.
Optionally, if the rolling direction is forward longitudinal rolling, the freezing cell is a header freezing cell; the determining the target occupation position of the frozen cell in the target table according to the rolling direction corresponding to the table adjustment instruction, the occupation position of the frozen cell and the offset distance of the frozen cell comprises:
And if the rolling direction is the forward longitudinal rolling direction, taking the difference value between the row occupation position of the gauge head freezing unit cell and the offset distance of the gauge head freezing unit cell as the target row occupation position of the gauge head freezing unit cell in the target table.
Optionally, if the rolling direction is negative longitudinal rolling, the freezing cell is a tail freezing cell; the determining the target occupation position of the frozen cell in the target table according to the rolling direction corresponding to the table adjustment instruction, the occupation position of the frozen cell and the offset distance of the frozen cell comprises:
and if the rolling direction is the negative longitudinal rolling, taking the sum of the row occupation position of the table tail freezing cell and the offset distance of the table tail freezing cell as the target row occupation position of the table tail freezing cell in the target table.
Optionally, if the rolling direction is forward lateral rolling, the frozen cells are first frozen cells; the determining the target occupation position of the frozen cell in the target table according to the rolling direction corresponding to the table adjustment instruction, the occupation position of the frozen cell and the offset distance of the frozen cell comprises:
And if the rolling direction is the forward transverse rolling direction, taking the difference value between the column occupation position of the first-column freezing cell and the offset distance of the first-column freezing cell as the target column occupation position of the first-column freezing cell in the target table.
Optionally, if the rolling direction is negative horizontal rolling, the frozen cell is a last frozen cell; the determining the target occupation position of the frozen cell in the target table according to the rolling direction corresponding to the table adjustment instruction, the occupation position of the frozen cell and the offset distance of the frozen cell comprises:
and if the rolling direction is the negative transverse rolling direction, taking the sum of the column occupation position of the last frozen cell and the offset distance of the last frozen cell as the target column occupation position of the last frozen cell in the target table.
Optionally, the determining the adjusted occupation position of the page display cell in the target table according to the rolling direction corresponding to the table adjustment instruction, the size information of the target table, the occupation position of the page display cell, and the rolling distance includes:
Determining an adjustable distance interval in the rolling direction corresponding to the table adjustment instruction according to the size information of the target table and the occupation position of the page display unit;
If the rolling distance meets the adjustable distance interval, determining the adjusted occupation position of the page display cell in the target table according to the occupation position of the page display cell and the rolling distance;
And if the rolling distance does not meet the adjustable distance interval, determining the adjusted occupation position of the page display unit in the target table according to the occupation position of the page display unit and the adjustable distance interval.
Optionally, the step of performing data rendering according to the target occupation position of the frozen cell in the target table and the occupation position of the adjusted page display cell in the target table, displaying the adjusted target table on the web page, includes:
Determining a newly added page display cell to be displayed according to the target occupation position of the freezing cell in the target table and the occupation position of the page display cell after adjustment in the target table;
Generating virtual DOM nodes corresponding to the newly added to-be-displayed unit cells aiming at the newly added to-be-displayed unit cells;
And according to the virtual DOM node corresponding to the newly added to-be-displayed unit cell, performing data rendering on the display area of the target form displayed by the web page, and displaying the adjusted target form on the web page.
Optionally, the form adjustment instruction is generated in response to a form size transformation event or a form scroll bar scroll event.
In a second aspect, the present application provides a form display apparatus, the apparatus comprising:
The information acquisition unit is used for acquiring the size information of a target table displayed by the web page, and the occupation position of a page display cell and the occupation position of a freezing cell in the target table;
The distance determining unit is used for determining the offset distance of the freezing cell according to the rolling distance corresponding to the form adjustment instruction if the form adjustment instruction is monitored;
the first determining unit is used for determining the target occupation position of the freezing cell in the target table according to the rolling direction corresponding to the table adjustment instruction, the occupation position of the freezing cell and the offset distance of the freezing cell;
the second determining unit is used for determining the occupation position of the adjusted page display cell in the target table according to the rolling direction corresponding to the table adjustment instruction, the size information of the target table, the occupation position of the page display cell and the rolling distance;
and the data rendering unit is used for performing data rendering according to the target occupation position of the freezing cell in the target table and the occupation position of the adjusted page display cell in the target table, and displaying the adjusted target table on the web page.
Optionally, the distance determining unit is configured to:
And if the table adjustment instruction is monitored, taking the rolling distance corresponding to the table adjustment instruction as the offset distance of the freezing cell in the target table.
Optionally, if the rolling direction is forward longitudinal rolling, the freezing cell is a header freezing cell; the first determining unit is configured to:
And if the rolling direction is the forward longitudinal rolling direction, taking the difference value between the row occupation position of the gauge head freezing unit cell and the offset distance of the gauge head freezing unit cell as the target row occupation position of the gauge head freezing unit cell in the target table.
Optionally, if the rolling direction is negative longitudinal rolling, the freezing cell is a tail freezing cell; the first determining unit is configured to:
and if the rolling direction is the negative longitudinal rolling, taking the sum of the row occupation position of the table tail freezing cell and the offset distance of the table tail freezing cell as the target row occupation position of the table tail freezing cell in the target table.
Optionally, if the rolling direction is forward lateral rolling, the frozen cells are first frozen cells; the first determining unit is configured to:
And if the rolling direction is the forward transverse rolling direction, taking the difference value between the column occupation position of the first-column freezing cell and the offset distance of the first-column freezing cell as the target column occupation position of the first-column freezing cell in the target table.
Optionally, if the rolling direction is negative horizontal rolling, the frozen cell is a last frozen cell; the first determining unit is configured to:
and if the rolling direction is the negative transverse rolling direction, taking the sum of the column occupation position of the last frozen cell and the offset distance of the last frozen cell as the target column occupation position of the last frozen cell in the target table.
Optionally, the second determining unit is configured to:
Determining an adjustable distance interval in the rolling direction corresponding to the table adjustment instruction according to the size information of the target table and the occupation position of the page display unit;
If the rolling distance meets the adjustable distance interval, determining the adjusted occupation position of the page display cell in the target table according to the occupation position of the page display cell and the rolling distance;
And if the rolling distance does not meet the adjustable distance interval, determining the adjusted occupation position of the page display unit in the target table according to the occupation position of the page display unit and the adjustable distance interval.
Optionally, the data rendering unit is configured to:
Determining a newly added page display cell to be displayed according to the target occupation position of the freezing cell in the target table and the occupation position of the page display cell after adjustment in the target table;
Generating virtual DOM nodes corresponding to the newly added to-be-displayed unit cells aiming at the newly added to-be-displayed unit cells;
And according to the virtual DOM node corresponding to the newly added to-be-displayed unit cell, performing data rendering on the display area of the target form displayed by the web page, and displaying the adjusted target form on the web page.
Optionally, the form adjustment instruction is generated in response to a form size transformation event or a form scroll bar scroll event.
In a third aspect, the present application provides a readable medium comprising execution instructions which, when executed by a processor of an electronic device, perform the method according to any of the first aspects.
In a fourth aspect, the present application provides an electronic device comprising a processor and a memory storing execution instructions, the processor performing the method according to any one of the first aspects when executing the execution instructions stored in the memory.
According to the technical scheme, the application provides a table display method, in the embodiment, the size information of a target table displayed by a web page, the occupation position of a page display cell and the occupation position of a freezing cell in the target table can be acquired firstly; if a form adjustment instruction is monitored, determining the offset distance of the freezing cell according to the rolling distance corresponding to the form adjustment instruction; determining a target occupation position of the freezing cell in the target table according to a rolling direction corresponding to the table adjustment instruction, the occupation position of the freezing cell and the offset distance of the freezing cell; determining the position of the adjusted page display cell in the target table according to the rolling direction corresponding to the table adjustment instruction, the size information of the target table, the position of the page display cell and the rolling distance; and performing data rendering according to the target occupation position of the freezing cell in the target table and the occupation position of the adjusted page display cell in the target table, and displaying the adjusted target table on the web page. Therefore, the method provided by the application can directly use the layout, style and event interaction of the existing codes, and is not limited to the method provided by the plug-in unit; the DOM nodes are not completely reconstructed aiming at the adjusted page display cells, and only the DOM nodes are rendered and reconstructed aiming at the newly added page display cells, namely, repeated DOM nodes are not existed, a large number of scripts are not used for adjusting the layout, CUP use is reduced, and overlapping style sheets can be directly used, so that the smoothness of the page is ensured, and large-data-level data display is realized without blocking.
Further effects of the above-described non-conventional preferred embodiments will be described below in connection with the detailed description.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the technical solutions of the present application will be clearly and completely described below with reference to specific embodiments and corresponding drawings. It will be apparent that the described embodiments are only some, but not all, embodiments of the application. All other embodiments, which can be made by those skilled in the art based on the embodiments of the application without making any inventive effort, are intended to be within the scope of the application.
At present, when a browser page is used, the forms in the browser page play an irreplaceable role by combining the horizontal cells, the vertical cells, the height of the cells in the same row and the width of the cells in the same column. However, when the rows and columns in the table are frozen, the conventional style of "position: active/fixed" is used, the current parent element (table row or column) is separated, the automatic width and height of the parent element are not considered any more, the occupation size of the frozen element is not considered any more, and the arrangement of the sibling elements at the same level is not considered any more, so that the table layout is disordered. In response to this problem, conventional implementations now have:
1. ① splitting frozen header, fixing left column, fixing right column, fixing bottom and adding up 9 blocks, and splicing to form a complete table by positioning.
② To ensure that the row and column widths of the nine split small tables can still be aligned, three table heads are copied by a fixed-header, a table __ header, a table __ fixed-right, three aggregate rows are copied by a table __ fixed-body, a table __ body and a table __ fixed-body, and three table bodies are copied by a table __ fixed-folder, a table __ folder and a table_fixed-folder; the whole table is very bulky, is not easy to expand and maintain, and does not support smooth display of a large amount of data.
③ In order to ensure that the scroll bars are always aligned when rolling, the positioning positions of the split 9 pieces of internal contents or the positions of the scroll bars need to be adjusted in real time through scripts.
2. The < canvas > canvas is utilized to draw the table by the script, a large number of data flow display can be supported, but because no DOM structure exists, the custom cell content style and the binding cell event are very troublesome, and the customization can not be expanded almost.
3. Other locatable elements are directly utilized to simulate the table, but the problem of longitudinal alignment, the problem of self-adaption of cell width height and the problem of longitudinal merging of cells are not solved well.
It can be seen that the existing solutions all have problems. Accordingly, a new table display method is needed.
The application provides a table display method, in the embodiment, the size information of a target table displayed by a web page can be acquired firstly, and the occupying position of a page display cell and the occupying position of a freezing cell in the target table; if a form adjustment instruction is monitored, determining the offset distance of the freezing cell according to the rolling distance corresponding to the form adjustment instruction; determining a target occupation position of the freezing cell in the target table according to a rolling direction corresponding to the table adjustment instruction, the occupation position of the freezing cell and the offset distance of the freezing cell; determining the position of the adjusted page display cell in the target table according to the rolling direction corresponding to the table adjustment instruction, the size information of the target table, the position of the page display cell and the rolling distance; and performing data rendering according to the target occupation position of the freezing cell in the target table and the occupation position of the adjusted page display cell in the target table, and displaying the adjusted target table on the web page. Therefore, the method provided by the application can directly use the layout, style and event interaction of the existing codes, and is not limited to the method provided by the plug-in unit; the DOM nodes are not completely reconstructed aiming at the adjusted page display cells, and only the DOM nodes are rendered and reconstructed aiming at the newly added page display cells, namely, repeated DOM nodes are not existed, a large number of scripts are not used for adjusting the layout, CUP use is reduced, and overlapping style sheets can be directly used, so that the smoothness of the page is ensured, and large-data-level data display is realized without blocking.
It should be noted that the embodiment of the present application may be applied to an electronic device (such as a mobile phone, a tablet, a computer, etc.) or a server. In addition to the above-mentioned embodiments, other embodiments are possible, and the present application is not limited thereto.
Various non-limiting embodiments of the present application are described in detail below with reference to the attached drawing figures.
Referring to fig. 1, a table display method in an embodiment of the present application is shown, where the method may include the following steps, for example:
S101: and acquiring the size information of a target table displayed by the web page, and the occupation position of a page display cell and the occupation position of a freezing cell in the target table.
In this embodiment, a form displayed in a web page in a browser may be referred to as a target form. The size information of the target table may be understood as the size of the target table, and may include, for example, the number of rows and columns of cells in the target table, and the size of pixels occupied by each cell; for example, the target table has one hundred rows of cells and one hundred columns of cells, and the height and width of each row and each column of cells are 20 pixels, that is, the size information of the target table is 2000 pixels.
Because the web page display table has a limited area size, it is possible that the target table cannot be displayed completely, and for convenience of description, cells of the target table displayed in the web page may be referred to as page display cells. The frozen cells are understood to be cells which do not move but maintain the display position when the page display cells of the target table need to be adjusted in the web page, and are typically the head frozen cells (i.e., the first row cells of the target table), the tail frozen cells (i.e., the last row cells of the target table), the first frozen cells (i.e., the first column cells of the target table), and the last frozen cells (i.e., the last column cells of the target table).
The position of a cell is understood to be the position of the cell in the target table (i.e., the row and column positions in the target table). And the location of the display of a cell in a web page may be referred to as the display location of the cell. It will be appreciated that cells in the target form that are displayed in the web page have display positions, whereas cells in the target form that are not displayed in the web page have no display positions, but only placeholders.
As an example, fig. 2 is a table code of a target table, where the outermost div of the table code is a block-level element, and the table element (table), the line element (tr), the header cell element (th), and the body cell element (td) are all standard DOM elements, and various styles and events can be added, and the freezing position is indicated by a class name fixed-xxx.
S102: if the form adjustment instruction is monitored, determining the offset distance of the freezing cell according to the rolling distance corresponding to the form adjustment instruction.
In this embodiment, the form adjustment instruction may be generated in response to a form size transformation event (such as zooming in or out of a target form) or a form scroll bar scroll event. It is understood that the form adjustment instructions may include a form adjusted scroll direction and scroll distance. The scrolling direction of the form adjustment may include positive portrait scroll (i.e., scroll down), negative portrait scroll (i.e., scroll up), positive landscape scroll (i.e., scroll right), negative landscape scroll (i.e., scroll left). The scroll distance may be understood as the distance moved in the scroll direction (e.g. how many pixels may be).
In this embodiment, if the table adjustment instruction is detected, the rolling distance corresponding to the table adjustment instruction may be used as the offset distance of the frozen cell in the target table. For example, if the target table is detected to scroll down by 30 pixels, the offset distance of the frozen cell may be determined to be 30 pixels.
S103: and determining the target occupation position of the frozen cell in the target table according to the rolling direction corresponding to the table adjustment instruction, the occupation position of the frozen cell and the offset distance of the frozen cell.
In this embodiment, after the form adjustment instruction is detected, the page display cell of the target form needs to be adjusted, and in order to keep the display position of the frozen cell unchanged, the occupation position of the frozen cell needs to be adjusted to ensure that the display position corresponding to the adjusted occupation position (i.e., the target occupation position) is the same as the display position before the form adjustment instruction is executed, thereby achieving the effect of freezing the cell.
In this embodiment, the freezing cells that need to be adjusted in the occupation position are different for different rolling directions, and the manner of calculating the target occupation position of the freezing cells in the target table is also different, and next, four cases will be respectively described.
First case: and if the rolling direction is forward longitudinal rolling, the freezing unit cell is a gauge head freezing unit cell. And if the rolling direction is the forward longitudinal rolling direction, taking the difference value between the row occupation position of the gauge head freezing unit cell and the offset distance of the gauge head freezing unit cell as the target row occupation position of the gauge head freezing unit cell in the target table.
For example, the initial header freeze cell row placeholders are 0-20 pixels. If the scrolling direction is forward vertical scrolling and vertical scrolling is 30 pixels, taking the difference between the row occupation position of the header freezing cell and the offset distance of the header freezing cell as the target row occupation position of the header freezing cell in the target table, namely, the target row occupation position of the header freezing cell in the target table is-30 to-10, which is a monitoring scroll bar event, dynamically setting the position of a cell (header freezing cell) with a class name of fixed-top to be offset downwards by 30 images (top: 30 px) relative to the original occupation position, correcting the actual display position of the header freezing cell to be started at 0 (occupation position-30+downwards offset 30), and ending at 20 (occupation position-10+downwards offset 30), namely, the initial display position, thereby realizing 'header freezing'. The application directly sets the style sheet instead of the style of the cell, so as to reduce the operation on the elements, and make full use of the rendering capability of the browser.
Second case: and if the rolling direction is negative longitudinal rolling, the freezing cell is a surface tail freezing cell. And if the rolling direction is the negative longitudinal rolling, taking the sum of the row occupation position of the table tail freezing cell and the offset distance of the table tail freezing cell as the target row occupation position of the table tail freezing cell in the target table.
For example, initially the column space of the tail freeze cell is 480 to 500 pixels. If the scrolling direction is negative vertical scrolling and vertical scrolling is 30 pixels, taking the sum of the row occupation position of the tail freezing cell and the offset distance of the tail freezing cell as the target row occupation position of the tail freezing cell in the target table, namely, the tail freezing cell is 510-530 in the target row occupation position of the target table, which is a monitoring scroll event, the dynamic setting type name is that the cell (tail freezing cell) position of the fixed-bottom is offset 30 images (bottom: 30 px) downwards relative to the original occupation position, the actual display position of the tail freezing cell is corrected to be started at 480 (occupation position 510+upwards offset 30), and ended at 500 (occupation position 530+upwards offset 30), namely, the initial display position, thereby realizing 'tail freezing'. The application directly sets the style sheet instead of the style of the cell, so as to reduce the operation on the elements, and make full use of the rendering capability of the browser.
Third case: and if the rolling direction is forward transverse rolling, the freezing cells are the first freezing cells. And if the rolling direction is the forward transverse rolling direction, taking the difference value between the column occupation position of the first-column freezing cell and the offset distance of the first-column freezing cell as the target column occupation position of the first-column freezing cell in the target table.
For example, initially the column occupancy position of the first frozen cell is 0-20 pixels. If the scrolling direction is forward and horizontal scrolling and is 30 pixels, taking the difference between the column occupation position of the first frozen cell and the offset distance of the first frozen cell as the target column occupation position of the first frozen cell in the target table, namely, the target column occupation position of the first frozen cell in the target table is-30 to-10, which is a monitoring scroll bar event, dynamically setting the position of a cell (first frozen cell) with the class name of fixed-left to the left relative to the original occupation position by 30 images (left: 30 px), correcting the actual display position of the first frozen cell to start at 0 (occupation position-30+right offset 30), and ending at 20 (occupation position-10+right offset 30), namely, the initial display position, thereby realizing 'first frozen'. The application directly sets the style sheet instead of the style of the cell, so as to reduce the operation on the elements, and make full use of the rendering capability of the browser.
Fourth case: and if the rolling direction is negative transverse rolling, the frozen cell is the last frozen cell. And if the rolling direction is the negative transverse rolling direction, taking the sum of the column occupation position of the last frozen cell and the offset distance of the last frozen cell as the target column occupation position of the last frozen cell in the target table.
For example, the column occupancy position of the last column freeze cell is 480 to 500 pixels at the initial time. If the scrolling direction is negative horizontal scrolling and horizontal scrolling is 30 pixels, taking the sum of the column occupation position of the last column freezing cell and the offset distance of the last column freezing cell as the target column occupation position of the last column freezing cell in the target table, namely, the target column occupation position of the last column freezing cell in the target table is 510-530, which is a monitoring scroll bar event, the position of a cell (last column freezing cell) dynamically set with a class name of fixed-right is offset to the right by 30 images (left: 30 px) relative to the original occupation position, the actual display position of the last column freezing cell is rectified to be started at 480 (occupation position 510+offset to the left by 30), and ended at 500 (occupation position 530+offset to the left by 30), namely, the initial display position, so that the last column freezing is realized. The application directly sets the style sheet instead of the style of the cell, so as to reduce the operation on the elements, and make full use of the rendering capability of the browser.
S104: and determining the adjusted occupation position of the page display cell in the target table according to the rolling direction corresponding to the table adjustment instruction, the size information of the target table, the occupation position of the page display cell and the rolling distance.
In this embodiment, the adjustable distance section in the scrolling direction corresponding to the table adjustment instruction may be determined according to the size information of the target table and the occupation position of the page display cell. The adjustable distance section may be understood as a difference between the size information of the target form and the display area size of the target form. For example, assuming that the height of the display area for showing the position of the table is 400 pixels and the height of the size information of the target table is 500 pixels, the longitudinally adjustable distance section is 10 pixels.
And if the rolling distance meets the adjustable distance section, determining the adjusted occupation position of the page display cell in the target table according to the occupation position of the page display cell and the rolling distance. If the rolling distance meets the adjustable distance interval, a certain number of page display cells corresponding to the rolling distance are added in the rolled display area, and the occupation position of the adjusted page display cells in the target table is required to be determined. Assume that the scroll distance is 30 pixels and the scroll direction is forward longitudinal scroll; if the row occupation position of the page display cell in the current display area is 100-500 pixels, the following adjustable distance interval is 100 pixels, and because the rolling distance meets the adjustable distance interval, the occupation position of the adjusted page display cell in the target table can be determined to be 130-530 according to the occupation position of the page display cell and the rolling distance.
And if the rolling distance does not meet the adjustable distance interval, determining the adjusted occupation position of the page display unit in the target table according to the occupation position of the page display unit and the adjustable distance interval. If the scrolling distance does not meet the adjustable distance interval, it is indicated that page display cells are not added in the display area after scrolling, or a certain number of page display cells corresponding to the adjustable distance interval are added, and at this time, the occupation positions of the page display cells after adjustment in the target table need to be determined or not determined. Assume that the scroll distance is 30 pixels and the scroll direction is forward longitudinal scroll; if the row occupation position of the page display cell in the current display area is 100-500 pixels, the following adjustable distance interval is 10 pixels, and since the rolling distance does not meet the adjustable distance interval, the adjusted row occupation position of the page display cell in the target table can be determined to be 110-510 according to the occupation position of the page display cell and the rolling distance; or the rolling distance is 30 pixels, and the rolling direction is forward longitudinal rolling; if the row occupation position of the page display cell in the current display area is 100-500 pixels, the following adjustable distance interval is 0 pixels, and the rolling distance does not meet the adjustable distance interval, so that the occupation position of the adjusted page display cell in the target table can be determined without according to the occupation position of the page display cell and the rolling distance, namely, the initial occupation position of the page display cell in the target table is kept.
S105: and performing data rendering according to the target occupation position of the freezing cell in the target table and the occupation position of the adjusted page display cell in the target table, and displaying the adjusted target table on the web page.
In this embodiment, the newly added to-be-displayed page cell may be determined according to the target occupation position of the frozen cell in the target table and the occupation position of the adjusted page display cell in the target table. It can be understood that the data of which rows and columns are currently rendered (i.e. the newly added to-be-displayed page display cells) needs to be calculated according to the total data amount of the cells of the target table (how many rows and columns are in total, how wide and high are set for each column), the data amount which can be displayed by the table visual area (i.e. the page display cells), and the current scroll bar position. Assuming that the row occupation position of the page display cell in the current display area is 100-500 pixels, and the adjusted row occupation position of the page display cell in the target table is 130-530, it may be determined that the row occupation position of the newly added page display cell to be displayed is 501-530.
Then, a virtual DOM node corresponding to the newly added to-be-displayed cell can be generated for the newly added to-be-displayed cell. And performing data rendering on the display area of the target form displayed on the web page according to the virtual DOM node corresponding to the newly added to-be-displayed cell, and displaying the adjusted target form on the web page. Specifically, the newly added display unit cells of the to-be-displayed page can be transferred to the front-end data driving frame P, the nodes are locally updated through the virtual DOM technology of the frame P, and quick response and quick rendering are realized, so that the browser rendering engine can re-render the table (the process is an automatic process, technical processing is not needed, and GPU rendering is called if GPU rendering is started), and the table freezing effect is realized. Therefore, the problem of table layout disorder caused by the fact that the table element is positioned away from the current parent element can be solved by utilizing relative positioning or offset, and thus, the freezing of the table is realized. In this way, DOM nodes are not all reconstructed for all the adjusted page display cells, but only the newly added page display cells are rendered and reconstructed, namely, repeated DOM nodes are not existed, a large number of scripts are not used for adjusting layout, CUP use is reduced, and overlapping style sheets can be directly used, so that the smoothness of pages is ensured, and large-data-level data display is realized without blocking.
In this embodiment, it can be seen that the size information of the target table displayed on the web page, and the occupation position of the page display cell and the occupation position of the freeze cell in the target table may be acquired first; if a form adjustment instruction is monitored, determining the offset distance of the freezing cell according to the rolling distance corresponding to the form adjustment instruction; determining a target occupation position of the freezing cell in the target table according to a rolling direction corresponding to the table adjustment instruction, the occupation position of the freezing cell and the offset distance of the freezing cell; determining the position of the adjusted page display cell in the target table according to the rolling direction corresponding to the table adjustment instruction, the size information of the target table, the position of the page display cell and the rolling distance; and performing data rendering according to the target occupation position of the freezing cell in the target table and the occupation position of the adjusted page display cell in the target table, and displaying the adjusted target table on the web page. Therefore, the method provided by the application can directly use the layout, style and event interaction of the existing codes, and is not limited to the method provided by the plug-in unit; the DOM nodes are not completely reconstructed aiming at the adjusted page display cells, and only the DOM nodes are rendered and reconstructed aiming at the newly added page display cells, namely, repeated DOM nodes are not existed, a large number of scripts are not used for adjusting the layout, CUP use is reduced, and overlapping style sheets can be directly used, so that the smoothness of the page is ensured, and large-data-level data display is realized without blocking.
Fig. 3 shows a table display device according to an embodiment of the application. The apparatus of this embodiment is an entity apparatus for performing the method of the foregoing embodiment. The technical solution is essentially the same as the above embodiment, and the device in this embodiment includes:
An information obtaining unit 301, configured to obtain size information of a target table displayed on a web page, and a occupation position of a page display cell and a occupation position of a freeze cell in the target table;
A distance determining unit 302, configured to determine an offset distance of the frozen cell according to a rolling distance corresponding to a table adjustment instruction if the table adjustment instruction is monitored;
A first determining unit 303, configured to determine, according to a rolling direction corresponding to the table adjustment instruction, a occupation position of the freezing unit cell, and an offset distance of the freezing unit cell, a target occupation position of the freezing unit cell in the target table;
a second determining unit 304, configured to determine, according to a rolling direction corresponding to the table adjustment instruction, size information of the target table, a occupation position of the page display cell, and the rolling distance, an occupation position of the adjusted page display cell in the target table;
And the data rendering unit 305 is configured to perform data rendering according to the target occupation position of the freezing cell in the target table and the occupation position of the adjusted page display cell in the target table, and display the adjusted target table on the web page.
Optionally, the distance determining unit 302 is configured to:
And if the table adjustment instruction is monitored, taking the rolling distance corresponding to the table adjustment instruction as the offset distance of the freezing cell in the target table.
Optionally, if the rolling direction is forward longitudinal rolling, the freezing cell is a header freezing cell; the first determining unit 303 is configured to:
And if the rolling direction is the forward longitudinal rolling direction, taking the difference value between the row occupation position of the gauge head freezing unit cell and the offset distance of the gauge head freezing unit cell as the target row occupation position of the gauge head freezing unit cell in the target table.
Optionally, if the rolling direction is negative longitudinal rolling, the freezing cell is a tail freezing cell; the first determining unit 303 is configured to:
and if the rolling direction is the negative longitudinal rolling, taking the sum of the row occupation position of the table tail freezing cell and the offset distance of the table tail freezing cell as the target row occupation position of the table tail freezing cell in the target table.
Optionally, if the rolling direction is forward lateral rolling, the frozen cells are first frozen cells; the first determining unit 303 is configured to:
And if the rolling direction is the forward transverse rolling direction, taking the difference value between the column occupation position of the first-column freezing cell and the offset distance of the first-column freezing cell as the target column occupation position of the first-column freezing cell in the target table.
Optionally, if the rolling direction is negative horizontal rolling, the frozen cell is a last frozen cell; the first determining unit 303 is configured to:
and if the rolling direction is the negative transverse rolling direction, taking the sum of the column occupation position of the last frozen cell and the offset distance of the last frozen cell as the target column occupation position of the last frozen cell in the target table.
Optionally, the second determining unit 304 is configured to:
Determining an adjustable distance interval in the rolling direction corresponding to the table adjustment instruction according to the size information of the target table and the occupation position of the page display unit;
If the rolling distance meets the adjustable distance interval, determining the adjusted occupation position of the page display cell in the target table according to the occupation position of the page display cell and the rolling distance;
And if the rolling distance does not meet the adjustable distance interval, determining the adjusted occupation position of the page display unit in the target table according to the occupation position of the page display unit and the adjustable distance interval.
Optionally, the data rendering unit 305 is configured to:
Determining a newly added page display cell to be displayed according to the target occupation position of the freezing cell in the target table and the occupation position of the page display cell after adjustment in the target table;
Generating virtual DOM nodes corresponding to the newly added to-be-displayed unit cells aiming at the newly added to-be-displayed unit cells;
And according to the virtual DOM node corresponding to the newly added to-be-displayed unit cell, performing data rendering on the display area of the target form displayed by the web page, and displaying the adjusted target form on the web page.
Optionally, the form adjustment instruction is generated in response to a form size transformation event or a form scroll bar scroll event.
Fig. 4 is a schematic structural diagram of an electronic device according to an embodiment of the present application. At the hardware level, the electronic device comprises a processor, optionally an internal bus, a network interface, a memory. The Memory may include a Memory, such as a Random-Access Memory (RAM), and may further include a non-volatile Memory (non-volatile Memory), such as at least 1 disk Memory. Of course, the electronic device may also include hardware required for other services.
The processor, network interface, and memory may be interconnected by an internal bus, which may be an ISA (Industry StandardArchitecture ) bus, a PCI (PERIPHERAL COMPONENT INTERCONNECT, peripheral component interconnect standard) bus, or EISA (Extended Industry StandardArchitecture ) bus, among others. The buses may be classified as address buses, data buses, control buses, etc. For ease of illustration, only one bi-directional arrow is shown in FIG. 4, but not only one bus or type of bus.
And the memory is used for storing the execution instruction. In particular, a computer program that executes instructions may be executed. The memory may include memory and non-volatile storage and provide the processor with instructions and data for execution.
In one possible implementation, the processor reads the corresponding execution instruction from the nonvolatile memory into the memory and then executes the execution instruction, and may also acquire the corresponding execution instruction from other devices to form the table display device on a logic level. The processor executes the execution instructions stored in the memory to implement the table display method provided in any embodiment of the present application by executing the execution instructions.
The method performed by the table display device according to the embodiment of fig. 1 of the present application may be applied to a processor or implemented by a processor. The processor may be an integrated circuit chip having signal processing capabilities. In implementation, the steps of the above method may be performed by integrated logic circuits of hardware in a processor or by instructions in the form of software. The processor may be a general-purpose processor, including a central processing unit (Central Processing Unit, CPU), a network processor (NetworkProcessor, NP), etc.; but may also be a digital signal Processor (DIGITAL SIGNAL Processor, DSP), application SPECIFIC INTEGRATED Circuit (ASIC), field-Programmable gate array (Field-Programmable GATEARRAY, FPGA) or other Programmable logic device, discrete gate or transistor logic device, discrete hardware components. The disclosed methods, steps, and logic blocks in the embodiments of the present application may be implemented or performed. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
The steps of the method disclosed in connection with the embodiments of the present application may be embodied directly in the execution of a hardware decoding processor, or in the execution of a combination of hardware and software modules in a decoding processor. The software modules may be located in a random access memory, flash memory, read only memory, programmable read only memory, or electrically erasable programmable memory, registers, etc. as well known in the art. The storage medium is located in a memory, and the processor reads the information in the memory and, in combination with its hardware, performs the steps of the above method.
The embodiment of the application also provides a readable medium, wherein the readable storage medium stores an execution instruction, and when the stored execution instruction is executed by a processor of electronic equipment, the electronic equipment can be enabled to execute the table display method provided in any embodiment of the application, and the method is specifically used for executing the table display method.
The electronic device described in the foregoing embodiments may be a computer.
It will be appreciated by those skilled in the art that embodiments of the present application may be provided as a method or a computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment, or a combination of software and hardware aspects.
The embodiments of the present application are described in a progressive manner, and the same and similar parts of the embodiments are all referred to each other, and each embodiment is mainly described in the differences from the other embodiments. In particular, for the device embodiments, since they are substantially similar to the method embodiments, the description is relatively simple, and reference is made to the description of the method embodiments in part.
It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus 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 apparatus. 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 apparatus that comprises the element.
The foregoing is merely exemplary of the present application and is not intended to limit the present application. Various modifications and variations of the present application will be apparent to those skilled in the art. Any modification, equivalent replacement, improvement, etc. which come within the spirit and principles of the application are to be included in the scope of the claims of the present application.