CN114327223B - Form display method and device - Google Patents

Form display method and device Download PDF

Info

Publication number
CN114327223B
CN114327223B CN202111629631.6A CN202111629631A CN114327223B CN 114327223 B CN114327223 B CN 114327223B CN 202111629631 A CN202111629631 A CN 202111629631A CN 114327223 B CN114327223 B CN 114327223B
Authority
CN
China
Prior art keywords
cell
target
occupation position
freezing
target table
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202111629631.6A
Other languages
Chinese (zh)
Other versions
CN114327223A (en
Inventor
王利
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Zhongdian Cloud Computing Technology Co ltd
Original Assignee
Zhongdian Cloud Computing Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Zhongdian Cloud Computing Technology Co ltd filed Critical Zhongdian Cloud Computing Technology Co ltd
Priority to CN202111629631.6A priority Critical patent/CN114327223B/en
Publication of CN114327223A publication Critical patent/CN114327223A/en
Application granted granted Critical
Publication of CN114327223B publication Critical patent/CN114327223B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • User Interface Of Digital Computer (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

The application discloses a form display method, which can directly use the layout, style and event interaction of the existing codes, and is not limited to the method provided by a 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.

Description

Form display method and device
Technical Field
The present application relates to the field of computers, and in particular, to a method and an apparatus for displaying a table.
Background
When the browser page is used, the forms in the browser page are combined by the transverse cells, the longitudinal cells, the height of the cells in the same row are automatically aligned, and the width of the cells in the same column are automatically aligned, so that the irreplaceable effect is achieved. 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. Accordingly, a new table display method is needed.
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.
Drawings
In order to more clearly illustrate the embodiments of the application or the prior art solutions, the drawings which are used in the description of the embodiments or the prior art will be briefly described below, it being obvious that the drawings in the description below are only some of the embodiments described in the present application, and that other drawings can be obtained according to these drawings without inventive faculty for a person skilled in the art.
FIG. 1 is a flowchart of a method for displaying a table according to an embodiment of the present application;
FIG. 2 is a diagram of a table code of a target table according to an embodiment of the present application;
FIG. 3 is a schematic diagram of a table display device according to an embodiment of the application;
fig. 4 is a schematic structural diagram of an electronic device according to an embodiment of the present application.
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.

Claims (9)

1. A method of displaying a form, the method comprising:
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;
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;
The step of 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, displaying the adjusted target table on the web page, including:
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.
2. The method of claim 1, wherein if the form adjustment command is detected, determining the offset distance of the frozen cell according to the rolling distance corresponding to the form adjustment command comprises:
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.
3. The method of claim 1, wherein if the scrolling direction is forward longitudinal scrolling, the frozen cells are header 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 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.
4. The method of claim 1, wherein if the scrolling direction is negative vertical scrolling, the freeze cell is a tail freeze 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.
5. The method of claim 1, wherein if the scrolling direction is forward lateral scrolling, the frozen cells are top 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.
6. The method of claim 1, wherein if the scrolling direction is negative lateral scrolling, the frozen cell is a last column 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.
7. The method according to any one of claims 1-6, wherein determining the adjusted occupancy position of the page display cell in the target table according to the scrolling direction corresponding to the table adjustment instruction, the size information of the target table, the occupancy position of the page display cell, and the scrolling 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 occupation position of the adjusted 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 cell in the target table according to the occupation position of the page display cell and the adjustable distance interval.
8. The method of any of claims 1-6, wherein the form adjustment instruction is generated in response to a form size transformation event or a form scrollbar scroll event.
9. A form display device, the device 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;
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;
The step of 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, displaying the adjusted target table on the web page, including:
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.
CN202111629631.6A 2021-12-28 2021-12-28 Form display method and device Active CN114327223B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111629631.6A CN114327223B (en) 2021-12-28 2021-12-28 Form display method and device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111629631.6A CN114327223B (en) 2021-12-28 2021-12-28 Form display method and device

Publications (2)

Publication Number Publication Date
CN114327223A CN114327223A (en) 2022-04-12
CN114327223B true CN114327223B (en) 2024-08-02

Family

ID=81015627

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111629631.6A Active CN114327223B (en) 2021-12-28 2021-12-28 Form display method and device

Country Status (1)

Country Link
CN (1) CN114327223B (en)

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102073502A (en) * 2011-01-11 2011-05-25 百度在线网络技术(北京)有限公司 Method for rendering page frame by WEB primary layout and device thereof
CN111930378A (en) * 2020-08-11 2020-11-13 上海亿锎智能科技有限公司 Method, device and system for realizing Web end project form designer

Family Cites Families (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP2558958B1 (en) * 2010-04-12 2016-06-08 Google, Inc. Row heights in electronic documents
CN103164401A (en) * 2011-12-08 2013-06-19 航天信息软件技术有限公司 Page tabular display method
CN107544952B (en) * 2017-08-28 2022-01-07 金蝶软件(中国)有限公司 Report generation method and device, storage medium and computer equipment
CN110968987B (en) * 2018-09-30 2022-05-20 腾讯科技(深圳)有限公司 Table display method and device, storage medium and electronic device
CN111931093B (en) * 2020-07-09 2024-07-02 北京皮尔布莱尼软件有限公司 Page form display method and mobile terminal
CN111931472B (en) * 2020-08-11 2023-10-20 抖音视界有限公司 Page table rendering method and device, electronic equipment and computer readable medium
CN113608815A (en) * 2021-08-12 2021-11-05 百融云创科技股份有限公司 Class Table component rendering method and system in WeChat applet

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102073502A (en) * 2011-01-11 2011-05-25 百度在线网络技术(北京)有限公司 Method for rendering page frame by WEB primary layout and device thereof
CN111930378A (en) * 2020-08-11 2020-11-13 上海亿锎智能科技有限公司 Method, device and system for realizing Web end project form designer

Also Published As

Publication number Publication date
CN114327223A (en) 2022-04-12

Similar Documents

Publication Publication Date Title
US20130219263A1 (en) Web site design system integrating dynamic layout and dynamic content
CN103853417A (en) Rolling and pagination display method and device for network dynamic picture
CN102999599B (en) A kind of picture display method and device
CN105069060B (en) HTML document paging typesetting method
CN113672320B (en) Method, equipment and storage medium for rendering webpage based on DOM element
CN105373593B (en) The method and device of object element in a kind of displayed web page
WO2019041666A1 (en) Method and system for optimizing infinite-scrolling page layout, storage medium, and electronic device
CN112835499A (en) Carousel graph display method, device, equipment and medium
CN113204401B (en) Browser rendering method, terminal and storage medium
US20130007601A1 (en) Positioning graphical objects within previously formatted text
CN115237522A (en) Page self-adaptive display method and device
CN113742612A (en) Data rendering method and device, electronic equipment and storage medium
CN114579912A (en) Page layout method, device, equipment and medium
CN106874387B (en) Method for displaying real-time information in self-adaptive HTML (Hypertext markup language) scrolling mode
CN114327223B (en) Form display method and device
CN105630746A (en) Page displaying method and terminal equipment
JP6395160B2 (en) Document layout of electronic display
CN105159939B (en) A kind of rendering method and device for picture
CN107391163B (en) Page data loading method and device in mobile terminal and application
CN105589883B (en) Method and device for displaying page elements of webpage
CN115329226A (en) Processing method, device, equipment and medium for realizing seamless rolling of webpage information
CN115390976A (en) Layout method of interface design, display method of interface and related equipment
CN109032476B (en) Method for displaying big data set in graphical user interface
CN112286603A (en) Table display method and device, electronic equipment and storage medium
CN113391869A (en) Page adaptation method and device, computer equipment and storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
CB02 Change of applicant information
CB02 Change of applicant information

Country or region after: China

Address after: No. N3013, 3rd Floor, R&D Building N, Artificial Intelligence Science and Technology Park, Wuhan Economic and Technological Development Zone, Wuhan City, Hubei Province, 430058

Applicant after: Zhongdian Cloud Computing Technology Co.,Ltd.

Address before: 430058 No. n3013, 3rd floor, R & D building, building n, Artificial Intelligence Science Park, economic and Technological Development Zone, Caidian District, Wuhan City, Hubei Province

Applicant before: CLP cloud Digital Intelligence Technology Co.,Ltd.

Country or region before: China

GR01 Patent grant
GR01 Patent grant