阅读说明：本技术 一种数据显示的预处理方法、装置及其存储介质 (Preprocessing method and device for data display and storage medium thereof ) 是由 张政 于 2019-03-08 设计创作，主要内容包括：本发明公开了一种数据显示的预处理方法、装置及其存储介质,该方法包括根据请求指令获取预显示数据,将预显示数据按预定规则划分为多项数据单元,根据每项所述数据单元按预定方式生成对应的数据单元显示区,将所述数据单元显示区按预定方式进行排布,得到数据单元显示排布图；根据实际显示区域的范围确定所述数据单元显示排布图中实际显示的所述数据单元显示区；对确定的所述数据单元显示区进行显示前的预处理。根据实际显示区域的范围确定在数据单元显示排布图中覆盖的数据单元显示区,只对覆盖的数据单元显示区进行显示前的预处理。减小了数据显示前预处理的数据处理量,进而避免了显示数据时出现的卡顿现象。(The invention discloses a preprocessing method, a preprocessing device and a storage medium for data display, wherein the method comprises the steps of obtaining pre-display data according to a request instruction, dividing the pre-display data into a plurality of data units according to a preset rule, generating a corresponding data unit display area according to each data unit according to a preset mode, and arranging the data unit display areas according to the preset mode to obtain a data unit display layout; determining the data unit display area actually displayed in the data unit display arrangement diagram according to the range of the actual display area; and preprocessing the determined data unit display area before display. And determining a data unit display area covered in the data unit display arrangement diagram according to the range of the actual display area, and only preprocessing the covered data unit display area before display. The data processing amount of preprocessing before data display is reduced, and then the pause phenomenon when the data are displayed is avoided.)

1. A method of pre-processing a data display, the method comprising:

acquiring pre-display data according to the request instruction;

dividing the pre-display data into a plurality of data units according to a preset rule, wherein the data units are divided into corresponding parts of the pre-display data;

generating a corresponding data unit display area according to each data unit in a preset mode, wherein the data unit display area is a display area for displaying data corresponding to the data unit;

arranging the data unit display areas according to a preset mode to obtain a data unit display arrangement diagram;

determining the data unit display area actually displayed in the data unit display arrangement diagram according to the range of the actual display area;

and preprocessing the determined data unit display area before display.

2. The method of claim 1, wherein the determining the data cell display area actually displayed in the data cell display layout according to the range of the actual display area comprises:

receiving a displacement request of the actual display area;

generating a displacement instruction according to the displacement request;

calculating to obtain the position of the actual display area after displacement according to the displacement instruction;

and determining the data unit display area actually displayed in the data unit display layout according to the position of the actual display area after displacement.

3. The method of claim 1, wherein the arranging the data cell display regions in a predetermined manner to obtain a data cell display layout comprises:

determining the arrangement sequence of the data unit display areas;

and arranging the data unit display areas adjacently along a preset dimension according to the arrangement sequence to obtain the data unit display arrangement diagram.

4. The method of claim 3, wherein the determining the data cell display area actually displayed in the data cell display layout according to the range of the actual display area comprises:

defining the initial position of the first data unit display area arranged according to the arrangement sequence along a preset dimension as an initial end;

acquiring a first end of an actual display area, which is closest to the starting end along a preset dimension direction;

calculating the distance between the first end and the starting end along a preset dimension to obtain a distance size value;

marking corresponding sequence number index values for the data unit display area according to the arrangement sequence;

calculating the distance between each data unit display area and the starting end along a preset dimension to obtain a corresponding nearest distance value;

arranging the closest distance value of each data unit display area according to the sequence of the sequence number index values to obtain a matching array sequence;

matching according to the distance size value and the matching array sequence according to the arrangement sequence to obtain a first nearest distance value; wherein the first closest value is the closest value that is the first one of the matching array sequences greater than or equal to the distance size value;

acquiring a first sequence number index value of a target data unit display area according to the first closest distance value, wherein the target data unit display area is a data unit display area corresponding to the first closest distance value, and the first sequence number index value is a sequence number index value corresponding to the target data unit display area;

dividing the length size value of the actual display area along the preset dimension direction by the length size value of the data unit display area with the shortest length size along the preset dimension direction to obtain the maximum display data unit display area quantity value of the actual display area;

summing the first sequence number index value and the maximum display data unit display area number value to obtain a second sequence number index value;

and determining the data unit display area which is actually displayed in the corresponding data unit display arrangement diagram according to the first sequence number index value and the second sequence number index value.

5. The method of claim 4, wherein determining the data cell display region actually displayed in the data cell display layout pattern according to the first index value and the second index value comprises:

determining the difference between the first sequence index value and a predetermined first data unit buffer value,

if the difference is greater than-1, taking the difference as a starting sequence number index value, and if the difference is less than or equal to-1, recording the starting sequence number index value as 0;

judging the sum of the preset second data unit buffer area quantity value and the maximum display data unit display area quantity value,

if the sum value is greater than the maximum sequence number index value, the maximum sequence number index value is an ending sequence number index value, and if the sum value is less than or equal to the maximum sequence number index value, the sum value is used as the ending sequence number index value;

and determining the data unit display area which is actually displayed in the corresponding data unit display arrangement diagram according to the initial sequence number index value and the ending sequence number index value.

6. A pre-processing apparatus for data display, the apparatus comprising:

the acquisition module is used for acquiring the pre-display data according to the request instruction;

the dividing module is used for dividing the pre-display data into a plurality of data units according to a preset rule, wherein the data units are divided corresponding parts of the pre-display data;

the generating module is used for generating a corresponding data unit display area according to each data unit in a preset mode, wherein the data unit display area is a display area for displaying data corresponding to the data unit;

the arrangement module is used for arranging the data unit display areas according to a preset mode to obtain a data unit display arrangement diagram;

the determining module is used for determining the data unit display area actually displayed in the data unit display layout according to the range of the actual display area;

and the preprocessing module is used for preprocessing the determined data unit display area before display.

7. Preprocessing apparatus for data display according to claim 6, characterized in that it comprises:

the receiving module is used for receiving a displacement request of the actual display area;

the generating module is used for generating a displacement instruction according to the displacement request;

the first calculation module is used for calculating the position of the actual display area after displacement according to the displacement instruction;

and the determining module is used for determining the data unit display area actually displayed in the data unit display arrangement diagram according to the position of the actual display area after displacement.

8. Preprocessing apparatus for data display according to claim 6, characterized in that it comprises:

the determining module is used for determining the arrangement sequence of the data unit display areas;

the arrangement module is used for adjacently arranging the data unit display areas along a preset dimension according to the arrangement sequence to obtain the data unit display arrangement diagram.

9. Preprocessing apparatus for data display according to claim 8, characterized in that the apparatus comprises:

the defining module is used for defining the initial position of the first data unit display area arranged according to the arrangement sequence along a preset dimension as an initial end;

the acquisition module is used for acquiring a first end of the actual display area, which is closest to the starting end along a preset dimension direction;

the second calculation module is used for calculating the distance between the first end and the starting end along a preset dimension to obtain a distance size value;

the marking module is used for marking corresponding sequence index values for the data unit display area according to the arrangement sequence;

the second calculation module is used for calculating the distance between each data unit display area and the starting end along a preset dimension to obtain a corresponding nearest distance value;

the arrangement module is used for arranging the closest distance value of each data unit display area according to the sequence of the sequence number index values to obtain a matching array sequence;

the matching module is used for matching the distance size value with the matching array sequence according to the arrangement sequence to obtain a first nearest distance value; wherein the first closest value is the closest value that is the first one of the matching array sequences greater than or equal to the distance size value;

the obtaining module is further configured to obtain a first sequence number index value of a target data unit display area according to the first closest distance value, where the target data unit display area is a data unit display area corresponding to the first closest distance value, and the first sequence number index value is a sequence number index value corresponding to the target data unit display area;

the second calculation module is further configured to divide the length dimension value of the actual display area along the preset dimension direction by the length dimension value of the data unit display area with the shortest length dimension along the preset dimension direction, so as to obtain a maximum display data unit display area quantity value of the actual display area; the first sequence number index value is further used for summing the number value of the display area of the maximum display data unit to obtain a second sequence number index value;

and the determining module is used for determining the data unit display area which is actually displayed in the corresponding data unit display arrangement diagram according to the first sequence number index value and the second sequence number index value.

10. The method of claim 9, wherein determining the data cell display region actually displayed in the data cell display layout pattern according to the first index value and the second index value comprises:

a judging module for judging the difference value between the first sequence number index value and the preset first data unit buffer area number value,

if the difference is greater than-1, taking the difference as a starting sequence number index value, and if the difference is less than or equal to-1, recording the starting sequence number index value as 0;

judging the sum of the preset second data unit buffer area quantity value and the maximum display data unit display area quantity value,

if the sum value is greater than the maximum sequence number index value, the maximum sequence number index value is an ending sequence number index value, and if the sum value is less than or equal to the maximum sequence number index value, the sum value is used as the ending sequence number index value;

and the determining module is used for determining the data unit display area which is actually displayed in the corresponding data unit display arrangement diagram according to the initial sequence number index value and the ending sequence number index value.

11. A pre-processing apparatus for data display, the apparatus comprising: a processor and a memory;

the memory has stored therein an application executable by the processor for causing the processor to perform the steps of pre-processing of the display of data as claimed in any one of claims 1 to 5.

12. A computer-readable storage medium, on which a computer program is stored, which program, when being executed by a processor, carries out the steps of pre-processing of a data display according to any one of claims 1 to 5.

Technical Field

The present invention relates to the field of data display, and in particular, to a method and an apparatus for preprocessing data display, and a storage medium thereof.

Background

In the process of displaying data on the display, the data needs to be preprocessed before being displayed. Typically, the pre-display data is pre-processed after the system receives the request. After the amount of the preprocessed data reaches a certain number of levels, the image is blocked during displaying due to the large processing amount of the data, and therefore the interactive experience of a user is reduced.

For example, in Web application development, data is arranged vertically in a table form and then displayed on a display. This approach is consistent with the habit of people browsing pages, but requires rendering of all the tabular form data before it is displayed, i.e., the preprocessing mentioned above. Then, if the data reaches a certain magnitude, the display screen will be stuck.

In addition, mass data can be split into a plurality of small data set blocks by the paging device, and then the small data set blocks are rendered, but the paging device occupies the space of the page, and the paging device needs to be frequently clicked to turn the page, so that the operation difficulty is increased, and the rendering of non-core UI components such as the paging device in the page is also caused. The inventor finds that the prior art has at least the following problem, and the technical problem of display blockage when processing data of a certain order of magnitude is caused by the fact that the prior art needs to carry out preprocessing on all the data to be displayed.

Disclosure of Invention

The invention provides a preprocessing method for data display, which comprises the following steps:

acquiring pre-display data according to the request instruction;

dividing the pre-display data into a plurality of data units according to a preset rule, wherein the data units are divided into corresponding parts of the pre-display data;

generating a corresponding data unit display area according to each data unit in a preset mode, wherein the data unit display area is a display area for displaying data corresponding to the data unit;

arranging the data unit display areas according to a preset mode to obtain a data unit display arrangement diagram;

determining the data unit display area actually displayed in the data unit display arrangement diagram according to the range of the actual display area;

and preprocessing the determined data unit display area before display.

Optionally, the determining the data unit display area actually displayed in the data unit display layout according to the range of the actual display area includes:

receiving a displacement request of the actual display area;

generating a displacement instruction according to the displacement request;

calculating to obtain the position of the actual display area after displacement according to the displacement instruction;

and determining the data unit display area actually displayed in the data unit display layout according to the position of the actual display area after displacement.

Optionally, the arranging the data unit display areas according to a predetermined manner to obtain a data unit display arrangement diagram includes:

determining the arrangement sequence of the data unit display areas;

and arranging the data unit display areas adjacently along a preset dimension according to the arrangement sequence to obtain the data unit display arrangement diagram.

Optionally, the determining the data unit display area actually displayed in the data unit display layout according to the range of the actual display area includes:

defining the initial position of the first data unit display area arranged according to the arrangement sequence along a preset dimension as an initial end;

acquiring a first end of an actual display area, which is closest to the starting end along a preset dimension direction;

calculating the distance between the first end and the starting end along a preset dimension to obtain a distance size value;

marking corresponding sequence number index values for the data unit display area according to the arrangement sequence;

calculating the distance between each data unit display area and the starting end along a preset dimension to obtain a corresponding nearest distance value;

arranging the closest distance value of each data unit display area according to the sequence of the sequence number index values to obtain a matching array sequence;

matching according to the distance size value and the matching array sequence according to the arrangement sequence to obtain a first nearest distance value; wherein the first closest value is the closest value that is the first one of the matching array sequences greater than or equal to the distance size value;

acquiring a first sequence number index value of a target data unit display area according to the first closest distance value, wherein the target data unit display area is a data unit display area corresponding to the first closest distance value, and the first sequence number index value is a sequence number index value corresponding to the target data unit display area;

dividing the length size value of the actual display area along the preset dimension direction by the length size value of the data unit display area with the shortest length size along the preset dimension direction to obtain the maximum display data unit display area quantity value of the actual display area;

summing the first sequence number index value and the maximum display data unit display area number value to obtain a second sequence number index value;

and determining the data unit display area which is actually displayed in the corresponding data unit display arrangement diagram according to the first sequence number index value and the second sequence number index value.

Optionally, the determining, according to the first sequence number index value and the second sequence number index value, the data unit display area actually displayed in the corresponding data unit display arrangement diagram includes:

determining the difference between the first sequence index value and a predetermined first data unit buffer value,

if the difference is greater than-1, taking the difference as a starting sequence number index value, and if the difference is less than or equal to-1, recording the starting sequence number index value as 0;

judging the sum of the preset second data unit buffer area quantity value and the maximum display data unit display area quantity value,

if the sum value is greater than the maximum sequence number index value, the maximum sequence number index value is an ending sequence number index value, and if the sum value is less than or equal to the maximum sequence number index value, the sum value is used as the ending sequence number index value;

and determining the data unit display area which is actually displayed in the corresponding data unit display arrangement diagram according to the initial sequence number index value and the ending sequence number index value.

The invention provides a preprocessing device for data display, which comprises:

the acquisition module is used for acquiring the pre-display data according to the request instruction;

the dividing module is used for dividing the pre-display data into a plurality of data units according to a preset rule, wherein the data units are divided corresponding parts of the pre-display data;

the generating module is used for generating a corresponding data unit display area according to each data unit in a preset mode, wherein the data unit display area is a display area for displaying data corresponding to the data unit;

the arrangement module is used for arranging the data unit display areas according to a preset mode to obtain a data unit display arrangement diagram;

the determining module is used for determining the data unit display area actually displayed in the data unit display layout according to the range of the actual display area;

and the preprocessing module is used for preprocessing the determined data unit display area before display.

Optionally, the apparatus further comprises:

the receiving module is used for receiving a displacement request of the actual display area;

the generating module is used for generating a displacement instruction according to the displacement request;

the first calculation module is used for calculating the position of the actual display area after displacement according to the displacement instruction;

and the determining module is used for determining the data unit display area actually displayed in the data unit display arrangement diagram according to the position of the actual display area after displacement.

Optionally, the apparatus further comprises:

the determining module is used for determining the arrangement sequence of the data unit display areas;

the arrangement module is used for adjacently arranging the data unit display areas along a preset dimension according to the arrangement sequence to obtain the data unit display arrangement diagram.

Optionally, the apparatus further comprises:

the defining module is used for defining the initial position of the first data unit display area arranged according to the arrangement sequence along a preset dimension as an initial end;

the acquisition module is used for acquiring a first end of the actual display area, which is closest to the starting end along a preset dimension direction;

the second calculation module is used for calculating the distance between the first end and the starting end along a preset dimension to obtain a distance size value;

the marking module is used for marking corresponding sequence index values for the data unit display area according to the arrangement sequence;

the second calculation module is used for calculating the distance between each data unit display area and the starting end along a preset dimension to obtain a corresponding nearest distance value;

the arrangement module is used for arranging the closest distance value of each data unit display area according to the sequence of the sequence number index values to obtain a matching array sequence;

the matching module is used for matching the distance size value with the matching array sequence according to the arrangement sequence to obtain a first nearest distance value; wherein the first closest value is the closest value that is the first one of the matching array sequences greater than or equal to the distance size value;

the obtaining module is further configured to obtain a first sequence number index value of a target data unit display area according to the first closest distance value, where the target data unit display area is a data unit display area corresponding to the first closest distance value, and the first sequence number index value is a sequence number index value corresponding to the target data unit display area;

the second calculation module is further configured to divide the length dimension value of the actual display area along the preset dimension direction by the length dimension value of the data unit display area with the shortest length dimension along the preset dimension direction, so as to obtain a maximum display data unit display area quantity value of the actual display area; the first sequence number index value is further used for summing the number value of the display area of the maximum display data unit to obtain a second sequence number index value;

and the determining module is used for determining the data unit display area which is actually displayed in the corresponding data unit display arrangement diagram according to the first sequence number index value and the second sequence number index value.

Optionally, the apparatus further comprises:

a judging module for judging the difference value between the first sequence number index value and the preset first data unit buffer area number value,

if the difference is greater than-1, taking the difference as a starting sequence number index value, and if the difference is less than or equal to-1, recording the starting sequence number index value as 0;

judging the sum of the preset second data unit buffer area quantity value and the maximum display data unit display area quantity value,

if the sum value is greater than the maximum sequence number index value, the maximum sequence number index value is an ending sequence number index value, and if the sum value is less than or equal to the maximum sequence number index value, the sum value is used as the ending sequence number index value;

and the determining module is used for determining the data unit display area which is actually displayed in the corresponding data unit display arrangement diagram according to the initial sequence number index value and the ending sequence number index value.

The invention also provides a preprocessing device for data display, which comprises: a processor and a memory;

an application program executable by the processor is stored in the memory for causing the processor to perform the step of pre-processing the data display.

The invention also provides a computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the steps of the pre-processing of the data display.

As can be seen from the above, based on the above-described embodiment, the data cell display area covered in the data cell display arrangement pattern is determined according to the range of the actual display area, and only the covered data cell display area is subjected to pre-processing before display. The data processing amount of preprocessing before data display is reduced, and then the pause phenomenon when the data are displayed is avoided.

Drawings

FIG. 1 is a schematic diagram of a pre-processing method flow 100 for data display in one embodiment;

FIG. 2 is a diagram illustrating a first state layout of a data cell display layout and an actual display area in one embodiment;

FIG. 3 is a diagram illustrating a flow 200 of a pre-processing method for data display in one embodiment;

FIG. 4 is a diagram illustrating a second state layout of a data cell display layout and actual display area in one embodiment;

FIG. 5 is a diagram illustrating a flow 300 of a pre-processing method for data display in one embodiment;

FIG. 6 is a diagram illustrating a third state layout of a data cell display layout and actual display area in one embodiment;

FIG. 7 is a diagram illustrating a flow 400 of a pre-processing method for data display in one embodiment;

FIG. 8 is a diagram illustrating a fourth state layout of a data cell display layout and actual display area in one embodiment;

FIG. 9 is a diagram illustrating a flow 500 of a pre-processing method for data display in one embodiment;

FIG. 10 is a flow diagram illustrating a method for preprocessing data for display in accordance with an embodiment;

FIG. 11 is a diagram of a preprocessing device architecture 600 for data display in one embodiment;

FIG. 12 is a diagram of a preprocessing device architecture 700 for data display in one embodiment;

FIG. 13 is a diagram of a preprocessing device architecture 800 for data display in one embodiment;

FIG. 14 is a diagram of a preprocessing device architecture 900 for data display in one embodiment;

FIG. 15 is a diagram of a preprocessing device architecture 1000 for data display according to one embodiment.

Detailed Description

In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is further described in detail below with reference to the accompanying drawings and examples.

Fig. 1 is a schematic diagram of a preprocessing method flow 100 for data display in an embodiment, and fig. 2 is a schematic diagram of a first state layout of a data cell display layout and an actual display area in an embodiment. As shown in fig. 1 and 2, in one embodiment, the present application provides a method of pre-processing a data display, the method comprising:

s101, obtaining pre-display data according to a request instruction;

in the step, corresponding data is called according to a demand request instruction of a user, and the data can be used as pre-display data to perform subsequent processing. The pre-display data is data to be preprocessed, which is called into the background, and can be displayed after being preprocessed.

S102, dividing the pre-display data into a plurality of data units according to a preset rule, wherein the data units are the divided corresponding parts of the pre-display data;

in this step, the pre-display data needs to be divided first, where the predetermined rule means that the pre-display data can be divided into multiple data units according to the length or type of the data, for example, each data unit contains a part of the pre-display data, and all the data units can eventually include all the pre-display data.

S103, generating a corresponding data unit display area according to each data unit in a preset mode, wherein the data unit display area is a display area for displaying data corresponding to the data unit;

the data in each item of data unit is patterned in this step. As shown in fig. 2, the triangular data cell display area, the circular data cell display area, and the rectangular data cell display area are specific forms of the data cell display area, and thus it can be seen that the specific area of the data cell display area is not limited in specific shape.

S104, arranging the data unit display areas according to a preset mode to obtain a data unit display arrangement diagram;

in this step, the data cell display regions that have been patterned are arranged to form an arranged layout pattern, i.e. a data cell display layout pattern. As shown in fig. 2, the overall layout obtained by arranging the data cell display regions, i.e., the data cell display layout.

S105, determining the data unit display area actually displayed in the data unit display layout according to the range of the actual display area;

in this step, first, a concept of an actual display area needs to be described, and when displaying an image, data to be displayed is not displayed at the same time, because a display area provided by a display is limited, then, a range area actually displayed by the display is the actual display area mentioned in this step. According to the data cell display layout positions covered by the actual display area, corresponding data cell display areas in the coverage area can be obtained, and finally the corresponding data cell display areas need to be extracted. As shown in fig. 2, a dashed-line frame is indicated as an actual display area. As can be seen from the figure, the actual display area covers both the circular data unit display area and the rectangular data unit display area. That is, the circular data unit display area and the rectangular data unit display area are certain data unit display areas.

And S106, preprocessing the determined data unit display area before display.

In this step, the selected data cell display area is preprocessed, and it is not difficult to see that all the data cell display areas are not preprocessed, that is, although the data to be displayed has a very large data amount, the data to be displayed is preprocessed only by the data in the actual display area. As shown in fig. 2, the circular data unit display area and the rectangular data unit display area are preprocessed, otherwise, the triangular data unit display area is not processed.

The embodiment provides a data display preprocessing method, and particularly, pre-display data is divided into a plurality of data units, and the divided data units are patterned to obtain a data unit display area. It should be noted that the data unit display area herein is not limited to a specific area shape, that is, the range area of the data unit display area may be rectangular, circular, or triangular. And then, arranging the data unit display areas according to a certain mode to form a data unit display arrangement diagram. And determining a data unit display area covered in the data unit display arrangement diagram according to the range of the actual display area, and preprocessing the covered data unit display area before display.

FIG. 3 is a diagram illustrating a flow 200 of a preprocessing method for data display according to an embodiment, and FIG. 4 is a diagram illustrating a layout of data unit display and a layout of a second state of an actual display area according to an embodiment.

As shown in fig. 3 and 4, in an embodiment, the determining the data unit display area actually displayed in the data unit display arrangement layout according to the range of the actual display area includes:

s201, receiving a displacement request of the actual display area;

it should be noted in this step that the relative positions of the actual display area and the data unit display layout pattern are not fixed, for example, in a browser, the user can change the relative positions of the actual display area and the data unit display layout pattern by rolling the wheel with the mouse, so the displacement request in this step can be understood as the displacement request sent by the user with the mouse wheel.

S202, generating a displacement instruction according to the displacement request;

in this step, a corresponding displacement instruction is generated according to a displacement request sent by a user, and a specific distance of displacement needs to be determined according to a corresponding displacement of a mouse scroll wheel, for example. The specific manner of determining the relative displacement is routine for those skilled in the art and will not be described further herein.

S203, calculating to obtain the position of the actual display area after displacement according to the displacement instruction;

in this step, according to the displacement instruction of the previous step, the actual display area obtains a new position according to the relative displacement, and at this time, since the position of the actual display area is changed, the range of the display layout pattern of the coverage data unit is also changed correspondingly.

And S204, determining the data unit display area actually displayed in the data unit display layout according to the position of the shifted actual display area.

In the range after the actual display area is shifted in this step, the area actually displayed has also been changed correspondingly. Thus, the data unit display area covered is also changed accordingly, and a new data unit display area can be determined in this step. As shown in fig. 4, the actual display area is between the two parallel lines, the left column is in the state before shifting, the right column is in the state after shifting, the uppermost data unit display area after shifting is removed, wherein the first data unit display area of the dashed box is to be inserted upward.

In this embodiment, a specific implementation manner is provided for determining the data display area after the actual display area is displaced, in which a corresponding displacement instruction is generated according to the received displacement request, and after the position of the actual display area is changed correspondingly according to the displacement instruction, the new position is used to determine the data unit display area actually displayed in the layout diagram. And preprocessing the newly determined data unit display area.

FIG. 5 is a diagram illustrating a flow 300 of a preprocessing method for data display according to an embodiment, and FIG. 6 is a diagram illustrating a layout of data unit display and a layout of an actual display area according to a third embodiment. As shown in fig. 5 and fig. 6, in an embodiment, the arranging the data unit display regions according to a predetermined manner to obtain a data unit display arrangement diagram includes:

s301, determining the arrangement sequence of the data unit display areas;

in this step, the arrangement order of the data unit display areas needs to be determined, and in fact, this step may be understood as one of specific forms of arrangement in a predetermined manner.

S302, the data unit display areas are adjacently arranged along a preset dimension according to the arrangement sequence, and the data unit display arrangement diagram is obtained.

The preset dimension in this step means, for example, a dimension in which one dimension is arranged in the vertical order or in the horizontal direction. It should be noted that the top and bottom arrangement and the lateral arrangement are only specific examples for better understanding of the present step, and are not intended to limit the concept of the dimension of the present step.

The embodiment provides a specific arrangement mode of the data unit display area, for example, when the data unit display area is a regular rectangle, a list-form data unit display arrangement diagram can be obtained. In the scene of the browser, the data unit display areas are arranged in a regular rectangle, and the obtained data unit display layout is also rectangular as a whole. However, for example, the arrangement mode shown in fig. 6 may also be understood as being arranged according to a preset dimension, and it can be seen that the data unit display area is not a regular graph, but may also be arranged according to a preset dimension.

FIG. 7 is a diagram illustrating a flow 400 of a preprocessing method for data display according to an embodiment, and FIG. 8 is a diagram illustrating a layout of data unit display and a layout of an actual display area according to an embodiment in a fourth state. As shown in fig. 7 or fig. 8, in an embodiment, the determining the data unit display area actually displayed in the data unit display arrangement layout according to the range of the actual display area includes:

s401, defining the initial position of the first data unit display area arranged according to the arrangement sequence along a preset dimension as an initial end;

in order to perform subsequent calculation better in this step, a start end needs to be set in a preset dimension, and the start end is used as a reference point of a coordinate system.

S402, acquiring a first end of the actual display area, which is closest to the starting end along a preset dimension direction;

in this step, the actual display area is a two-dimensional area, two ends, that is, the end closest to the start end and the end farthest from the start end, appear in the preset dimension, and the end closest to the start end of the actual display area is recorded as the first end.

S403, calculating the distance between the first end and the starting end along a preset dimension to obtain a distance size value;

in the step, based on the first end found in the previous step, calculating the distance from the first end to the starting end along the preset dimension direction, namely a distance size value;

s404, marking corresponding sequence number index values for the data unit display area according to the arrangement sequence;

in this step, index values of sequence numbers are marked on the arrangement sequence of the data unit display area, and the index values are needed to mark the sequence of the data unit display area for later calling.

S405, calculating the distance between each data unit display area and the starting end along a preset dimension to obtain a corresponding nearest distance value;

in this step, the closest distance value between each data unit display area and the starting end along the preset dimension is calculated, and in the preset dimension, each data unit display area can be simplified into a one-dimensional size range, and the minimum value of the size range is the closest distance value.

S406, arranging the closest distance value of each data unit display area according to the sequence of the sequence number index values to obtain a matching array sequence;

it should be noted that the matching array sequence in this step is only one representation, and is essentially a sequence in order of the number index value.

S407, matching according to the distance size value and the matching array sequence according to the arrangement sequence to obtain a first nearest distance value; wherein the first closest value is the closest value that is the first one of the matching array sequences greater than or equal to the distance size value;

the first closest distance value needs to be obtained in the matching array sequence of this step. And comparing the distance size value with each nearest distance value in the array, wherein the comparison sequence is the arrangement sequence. The first closest distance value that is greater than or equal to the distance dimension value is the first closest distance value.

S408, acquiring a first sequence number index value of a target data unit display area according to the first closest distance value, wherein the target data unit display area is a data unit display area corresponding to the first closest distance value, and the first sequence number index value is a sequence number index value corresponding to the target data unit display area;

s409, dividing the length size value of the actual display area along the preset dimension direction by the length size value of the data unit display area with the shortest length size along the preset dimension direction to obtain the maximum display data unit display area quantity value of the actual display area;

in this step, since the actual display area has two ends along the preset one-dimensional scale, the data unit display area where the other end of the actual display area is located needs to be calculated. In order to simplify the calculation amount, the calculation of the data unit display area at the other end is replaced by the maximum display data unit display area number value, and the specific principle will be explained in detail later, which is not repeated herein.

S410, summing the first sequence number index value and the maximum display data unit display area quantity value to obtain a second sequence number index value;

in this step, the data unit display area covered by the actual display area along the one-dimensional preset dimension is calculated.

S411 determines the data unit display area actually displayed in the corresponding data unit display arrangement diagram according to the first sequence number index value and the second sequence number index value.

In this step, after the first sequence number index value and the second sequence number index value are calculated, the corresponding data unit display areas are already determined, and the data unit display areas between the first sequence number index value and the second sequence number index value should be included in the preset dimension and need to be preprocessed.

In this embodiment, a specific method for determining the data unit display area is provided, where a starting end is set in a preset dimension and is used as a reference point, and a distance size value between the first end and the starting end is obtained according to a position of an actual display area. And aiming at the position size range of each data unit display area along the preset dimension, the minimum value in the position size range is the nearest distance value, each nearest distance value is respectively matched with the distance size value, the target data unit display area covered by the first end of the actual display area is determined, the data unit display area covered by the other end of the actual display area is obtained by calculation according to the number value of the largest display data unit display area, and the data unit display area actually displayed in the corresponding data unit display layout is further determined.

Fig. 9 is a schematic diagram illustrating a flow 500 of a preprocessing method for data display according to an embodiment, and fig. 10 is a schematic diagram illustrating a flow architecture of the preprocessing method for data display according to an embodiment. As shown in fig. 9 and 10, in an embodiment, the determining the data unit display area actually displayed in the corresponding data unit display arrangement diagram according to the first sequence number index value and the second sequence number index value includes:

s501, determining the index value of the first sequence number and the value of the number of the buffer of the predetermined first data unit,

if the difference is greater than-1, taking the difference as a starting sequence number index value, and if the difference is less than or equal to-1, recording the starting sequence number index value as 0;

in this step, the concept of a third index value is then introduced in order to buffer the preprocessing. The method aims to expand the range of the display area of the actually displayed data unit in the range of preprocessing, provide buffering in preprocessing when the actually displayed area is rapidly displaced, and obtain the index value of the initial sequence number according to the calculation in the step.

S502, judging the sum of the preset second data unit buffer area quantity value and the maximum display data unit display area quantity value,

if the sum value is greater than the maximum sequence number index value, the maximum sequence number index value is an ending sequence number index value, and if the sum value is less than or equal to the maximum sequence number index value, the sum value is used as the ending sequence number index value;

similarly, the ending sequence number index value may be obtained for calculation in this step.

S503, determining the data unit display area actually displayed in the corresponding data unit display layout according to the initial sequence number index value and the ending sequence number index value.

In this embodiment, a specific implementation method for increasing a display area of a buffered preprocessed data unit is provided, and after a first sequence number index value and a second sequence number index value are obtained, a concept of a third sequence number index value is introduced. The reason why the first sequence number index value and the second sequence number index value are expanded and the judgment of the starting sequence number index value and the ending sequence number index value is carried out is that if the expanded values exceed the arrangement limit of the data unit display area, the data units only need to be preprocessed to the first data unit display area and the last data unit display area.

The working process and the basic principle are as follows:

the following further describes the preprocessing method for data display according to the present application, taking the virtual list technique as an example. It should be noted that the virtual list technique is only an example for better illustrating the present application and is not a specific limitation to the present application.

The virtual list technique is a technique for rendering a certain part of mass data with high pertinence according to the visual area, and in short, a virtual list is a list rendered by the visual area.

Acquiring pre-display data according to the request instruction;

assuming that a large data set having a length of 1000 is obtained according to a request instruction, the large data set is rendered to a page.

Dividing the pre-display data into a plurality of data units according to a preset rule, wherein the data units are divided into corresponding parts of the pre-display data;

as shown in fig. 8 and 10, the data structure is as follows: [ List-Item-1, List-Item-2, List-Item-3, …, List-Item-1000], wherein each element List-Item-n in the data set is an object composed of a key-value, and the so-called element is the data unit in the above step.

Generating a corresponding data unit display area according to each data unit in a preset mode, wherein the data unit display area is a display area for displaying data corresponding to the data unit;

for simplicity of explanation, it is assumed that the data unit display area is a rectangular box of equal height; such as a height of 30px (note: this is an assumed value for more intuitively explaining the basic principle that the actual occupation height of each data unit display area on the page in actual production should not be constant.)

Determining the arrangement sequence of the data unit display areas;

it can be seen that [ List-Item-1, List-Item-2, List-Item-3, …, List-Item-1000] has been sorted according to order, and in practical applications, the display of data itself has a certain precedence order, and even if the division is for multiple data units, the display order actually still exists.

And arranging the data unit display areas adjacently along a preset dimension according to the arrangement sequence to obtain the data unit display arrangement diagram.

Because the data unit display area is a regular rectangle, after being arranged according to the preset dimension, the obtained data unit display layout appears in a list form, the actual total height of the list should be 1000 × 30px 30000px, and in actual life and production, people cannot use an end display with high pixels, and usually, a page can only reserve a certain pixel space for showing (for example, the maximum visible height of 150 px), so that even if all data amount in the list is rendered to the page, the data that can be directly observed by naked eyes by a user is only 150px/30px 5 list item data sets, based on which we make a boldly attempt, that is, rendering is performed only on the 5 visible list item data sets, the rest users cannot observe at the first time, we do not perform actual rendering processing, and meanwhile, in order to ensure that the user can observe more data sets, by monitoring the scrolling event of the scroll bar, the 5 visual data sets can be dynamically replaced to meet the requirements of users, so that the overall rendering performance of the page is greatly improved. The visible range of 5 list heights therein can be understood as the actual display area.

Defining the initial position of the first data unit display area arranged according to the arrangement sequence along a preset dimension as an initial end;

dividing the whole virtualization List into 3 layers, wherein the outermost layer is a visible area wrapping layer, the middle layer is a rolling area wrapping layer, the innermost layer is a specific List content viewing layer, the internal viewing layer needs to be positioned absolutely (position) relative to the middle layer, and the coordinate value TOP of each List-Item in the vertical direction is calculated and summed based on the height of the previous List-Item, and the specific calculation method is as follows:

List-Item-1, Item 1 in the List, has a Top value of 0. In practice, the TOP value is the start point, i.e. a start origin along a predetermined dimension is required for subsequent calculations.

Acquiring a first end of an actual display area, which is closest to the starting end along a preset dimension direction; and calculating the distance between the first end and the starting end along a preset dimension to obtain a distance size value.

The calculation method is consistent with a height calculation algorithm of List-Item, and is also obtained by an offset height method of a real node at the stage of finishing mounting of the component. Wherein, offset height is the distance dimension value.

Marking corresponding sequence number index values for the data unit display area according to the arrangement sequence;

List-Item-2, the Top value of which is the height H of List-Item-1, is the 2 nd Item in the List₁

List-Item-3, the 3 rd Item in the List, has a Top value of the sum of the heights of List-Item-1 and List-Item-2 (H)₁+H₂)

The Nth Item in the List, List-Item-N, has a Top value that is the sum of the heights of the first N-1 items, List-Item (H)₁+H₂+…+H_N-1)

From this, it can be deduced that the Top value of each Item List-Item

The actual height of each List-Item List Item can be calculated and obtained at the mounting completion stage according to the life cycle characteristics of the read component, namely, the actual DOM node is taken to the real DOM node through ref in a componentDidMount function, then an offsetHeight method is used for obtaining, and the obtained value is stored in a memory (namely, in a List-Item key value object), so that the advantage that the height does not need to be recalculated when the view layer component is rendered again after being unloaded is achieved.

In addition, if the actual display area is displaced, for example, displacement is realized by a mouse wheel, an onScroll Event for listening to scrolling of a scroll bar needs to be defined on the outermost visual area layer, each time a user scrolls in the area, a callback function of the Event returns to an Event object in real time, and the actual vertical offset distance offset top of the user can be taken by acquiring a scrollTop attribute in the Event object. The offset top and offset height in this case have the same effect, i.e., the distance dimension value.

Arranging the closest distance value of each data unit display area according to the sequence of the sequence number index values to obtain a matching array sequence;

matching according to the distance size value and the matching array sequence according to the arrangement sequence to obtain a first nearest distance value; wherein the first closest value is the closest value that is the first one of the matching array sequences greater than or equal to the distance size value;

acquiring a first sequence number index value of a target data unit display area according to the first closest distance value, wherein the target data unit display area is a data unit display area corresponding to the first closest distance value, and the first sequence number index value is a sequence number index value corresponding to the target data unit display area;

set [0, H ] of the vertical offset value of the offset Top value from List-Item-n in step 1₁,H_1-2,…,H_1-N]Matching is performed to find the first element satisfying the requirement that the offset Top is greater than or equal to the array element, i.e. the target data unit display area.

The first sequence number is denoted as index, indicating that offsetTop is actually the distance size value.

Dividing the length size value of the actual display area along the preset dimension direction by the length size value of the data unit display area with the shortest length size along the preset dimension direction to obtain the maximum display data unit display area quantity value of the actual display area;

the specific formula is as follows:

where visibleHeight is the length dimension value of the actual display area along the direction of the preset dimension, and minListHeight is the length dimension value of the display area of the data unit with the shortest length dimension along the direction of the preset dimension. Obtaining the maximum display data unit display area quantity value by visibleListNum;

summing the first sequence number index value and the maximum display data unit display area number value to obtain a second sequence number index value;

determining the first sequence index value and a predetermined first data unit buffer value,

if the difference is greater than-1, taking the difference as a starting sequence number index value, and if the difference is less than or equal to-1, recording the starting sequence number index value as 0;

judging the sum of the preset second data unit buffer area quantity value and the maximum display data unit display area quantity value,

if the sum value is greater than the maximum sequence number index value, the maximum sequence number index value is an ending sequence number index value, and if the sum value is less than or equal to the maximum sequence number index value, the sum value is used as the ending sequence number index value;

and determining the data unit display area which is actually displayed in the corresponding data unit display arrangement diagram according to the initial sequence number index value and the ending sequence number index value.

In practical development tests, it is found that when the scroll bar is scrolled up or down too fast, the actual display part may appear intermittently or temporarily with a blank phenomenon caused by untimely rendering, and the interactive experience is slightly sharp, so that a buffering concept is introduced, namely, an artificial List-Item quantity with a configurable cacheSize reserved at the head and the tail part, cacheSize is a first data unit cache quantity value, and meanwhile, an actual startOfetfsindex value, namely a starting index value, can be calculated by combining the previously calculated index value, namely the first index value. It should be noted that cacheSize in this embodiment is equivalent to the case where the first data unit buffer count value and the second data unit buffer count value are the same.

The specific formula is as follows:

startOffsetIndex＝index–cacheSize>-1？index–cacheSize:0

in the same way, it can be known that,

endOffsetIndex? maxLength-1: index + visibleListNum + cacheSize, visibleListNum is miniListheight, maxLength is the length of the whole data set)

endOffsetIndex is the end index value.

And (5) React: is a JavaScript library for building user interaction interfaces.

FIG. 11 is a diagram of a preprocessing device architecture 600 for data display in one embodiment. As shown in fig. 11, in an embodiment, the present application further provides a data display preprocessing apparatus, including:

an obtaining module 101, configured to obtain pre-display data according to a request instruction;

a dividing module 102, configured to divide the pre-display data into multiple data units according to a predetermined rule, where the data units are divided corresponding portions of the pre-display data;

a generating module 103, configured to generate a corresponding data unit display area according to each data unit in a predetermined manner, where the data unit display area is a display area displaying data corresponding to the data unit;

the arrangement module 104 is configured to arrange the data unit display areas according to a predetermined manner to obtain a data unit display arrangement diagram;

a determining module 105, configured to determine the data unit display area actually displayed in the data unit display layout according to the range of the actual display area;

and the preprocessing module 106 is configured to perform preprocessing before displaying on the determined data unit display area.

FIG. 12 is a diagram of a preprocessing device architecture 700 for data display in one embodiment. As shown in fig. 12, in an embodiment, the apparatus further includes:

a receiving module 201, configured to receive a displacement request of the actual display area;

the generating module 103 is configured to generate a displacement instruction according to the displacement request;

the first calculation module 202 is configured to calculate, according to the displacement instruction, a position of the actual display area after displacement;

the determining module 105 is configured to determine the data unit display area actually displayed in the data unit display layout according to the shifted position of the actual display area.

FIG. 13 is a diagram of a preprocessing device architecture 800 for data display according to one embodiment. As shown in fig. 13, in an embodiment, the apparatus further includes:

the determining module 105 is configured to determine an arrangement order of the data unit display areas;

the arrangement module 104 is configured to adjacently arrange the data unit display areas along a preset dimension according to the arrangement order to obtain the data unit display arrangement diagram.

FIG. 14 is a diagram of a preprocessing device architecture 900 for data display according to one embodiment. As shown in fig. 14, in one embodiment, the apparatus further comprises:

a defining module 401, configured to define an initial position of the first data unit display area arranged according to the arrangement order along a preset dimension as an initial end;

the obtaining module 101 is configured to obtain a first end of the actual display area, which is closest to the starting end along a preset dimension direction;

a second calculating module 402, configured to calculate a distance between the first end and the start end along a preset dimension to obtain a distance size value;

a marking module 403, configured to mark, according to the arrangement order, a corresponding sequence index value for the data unit display area;

the second calculating module 402 is configured to calculate a distance between each data unit display area and the start end along a preset dimension, so as to obtain a corresponding closest distance value;

the arrangement module 104 is configured to arrange the closest distance value of each data unit display area according to the sequence of the sequence index values to obtain a matching array sequence;

a matching module 404, configured to match the distance size value with the matching array sequence according to the arrangement order to obtain a first closest distance value; wherein the first closest value is the closest value that is the first one of the matching array sequences greater than or equal to the distance size value;

the obtaining module 101 is further configured to obtain a first sequence number index value of a target data unit display area according to the first closest distance value, where the target data unit display area is a data unit display area corresponding to the first closest distance value, and the first sequence number index value is a sequence number index value corresponding to the target data unit display area;

the second calculating module 402 is further configured to divide the length dimension value of the actual display area along the preset dimension direction by the length dimension value of the data unit display area with the shortest length dimension along the preset dimension direction, so as to obtain a maximum display data unit display area quantity value of the actual display area; the first sequence number index value is further used for summing the number value of the display area of the maximum display data unit to obtain a second sequence number index value;

the determining module 105 is configured to determine the data unit display area actually displayed in the data unit display layout according to the first sequence number index value and the second sequence number index value.

FIG. 15 is a diagram of a preprocessing device architecture 1000 for data display according to one embodiment. As shown in fig. 15, in one embodiment, the apparatus further comprises:

a determining module 501, configured to determine a difference between the first sequence number index and a predetermined first data unit buffer value,

if the difference is greater than-1, taking the difference as a starting sequence number index value, and if the difference is less than or equal to-1, recording the starting sequence number index value as 0;

judging the sum of the preset second data unit buffer area quantity value and the maximum display data unit display area quantity value,

if the sum value is greater than the maximum sequence number index value, the maximum sequence number index value is an ending sequence number index value, and if the sum value is less than or equal to the maximum sequence number index value, the sum value is used as the ending sequence number index value;

the determining module 105 is configured to determine the data unit display area actually displayed in the data unit display layout according to the starting sequence number index value and the ending sequence number index value.

In one embodiment, the present application further provides a data display preprocessing apparatus, including: a processor and a memory;

an application program executable by the processor is stored in the memory for causing the processor to perform the step of pre-processing the data display.

In an embodiment, the present application further provides a computer readable storage medium, on which a computer program is stored, which when executed by a processor implements the pre-processing steps of the data display.

The above description is only for the purpose of illustrating the preferred embodiments of the present invention and is not to be construed as limiting the invention, and any modifications, equivalents, improvements and the like made within the spirit and principle of the present invention should be included in the scope of the present invention.