Form page display method and product

Abstract

The invention provides a form page display method and product, and the method comprises the steps: responding to a display instruction of a first form page, and determining a first candidate unit width of the first form page according to a first natural width of a first component and an occupied unit number of the first component; the first component is a non-fixed-width component included in the first form page; determining a first target unit width of the first form page according to the first candidate unit width; and displaying the first form page according to the first target unit width, the target width corresponding to the first form page, the number of occupied units of the components included in the first form page and the display sequence. According to the method and the device, the target unit width of the form page is determined based on the natural width and the occupied unit number of the non-fixed-width component, the form page is divided and the units are distributed to the component according to the units with the width, alignment of the component in the form page is realized, and the component alignment efficiency and the component alignment display effect of the form page can be improved.

Description

Technical Field

[0001] The present application relates to the field of display technology, and in particular to a method and product for displaying a form page. Background Art

[0002] As a window for interacting with users, the friendliness of the interactive functions and the visual aesthetics of the form page are increasingly valued. A form page generally includes multiple components, such as an input box, a drop-down selection box, a segment controller, etc.

[0003] By aligning the components of the form page, the form page can be made more beautiful and interactive. However, most of the current alignment methods use the alignment lines of the form page and the method of dragging components to align the components in the form page. This alignment method has low component alignment efficiency and cannot guarantee the component alignment display effect.

[0004] How to improve the component alignment efficiency and component alignment display effect of form pages has become an urgent problem to be solved. Summary of the invention

[0005] The main purpose of the embodiments of the present application is to provide a display method and product for a form page, aiming to improve the component alignment efficiency and component alignment display effect of the form page.

[0006] The present application provides a method for displaying a form page, comprising: in response to a display instruction of a first form page, determining a first candidate unit width of the first form page according to a first natural width of a first component and the number of occupied units of the first component; the first component is a component of non-fixed width included in the first form page; determining a first target unit width of the first form page according to the first candidate unit width; and displaying the first form page according to the first target unit width, a target width corresponding to the first form page, the number of occupied units of the components included in the first form page, and a display order.

[0007] In one embodiment, after the step of displaying the first form page according to the first target unit width, the target width corresponding to the first form page, the number of occupied units of components included in the first form page, and the display order, the display method of the form page further includes: in response to an event that triggers the natural width of the first component to change from the first natural width to the second natural width, determining a second candidate unit width of the first form page according to the second natural width of the first component and the number of occupied units of the first component; determining a second target unit width of the first form page according to the second candidate unit width; and updating the first form page according to the second target unit width, the target width corresponding to the first form page, the number of occupied units of the components, and the display order.

[0008] In one embodiment, the step of displaying the first form page according to the first target unit width, the target width corresponding to the first form page, the number of occupied units of components included in the first form page, and the display order includes: obtaining a target display state of the first form page, where the target display state is an expanded state or a collapsed state; determining the number m of displayed components of the first form page according to the target display state, where m is a positive integer; and displaying the first form page according to the first target unit width, the target width corresponding to the first form page, m components of the first form page, the number of occupied units of the m components, and the display order.

[0009] In one embodiment, determining the number m of display components of the first form page according to the target display state includes: determining the target number of row units of the first form page according to the first target unit width and the target width corresponding to the first form page; determining the number m of display components of the first form page in the target display state according to the target number of row units, the number of display rows of the first form page in the target display state, the number of occupied units of the components, and the display order.

[0010] In one embodiment, after the step of displaying the first form page according to the first target unit width, the target width corresponding to the first form page, the number of occupied units of components included in the first form page, and the display order, the form page display method further includes: determining a zoom factor of the first form page in response to a zoom operation on the first form page; multiplying the first target unit width by the zoom factor to obtain a third reference unit width of the first form page; determining a third target unit width of the first form page according to the third reference unit width; and updating the first form page according to the third target unit width, the target width corresponding to the first form page, the number of occupied units of the components, and the display order.

[0011] In one embodiment, the step of determining a first target unit width of the first form page based on the first candidate unit width includes: determining a larger value between the first candidate unit width and a preset minimum unit width of the first form page as a first reference unit width of the first form page; determining a first row unit quantity of the first form page based on the first reference unit width and the target width corresponding to the first form page; when the first row unit quantity is a non-integer, rounding down the first row unit quantity to obtain a second row unit quantity of the first form page; comparing a first value with a target value of a row fill rate of the first form page to obtain a comparison result; the first value is a ratio of a second value to the target width corresponding to the first form page, and the second value is a product of the second row unit quantity and the first reference unit width; when the comparison result is that the first value is less than the target value, determining the first target unit width based on the second row unit quantity and the target width corresponding to the first form page.

[0012] The present application also provides a form page display system, comprising a first unit width module, a second unit width module and a form page display module; the first unit width module is used to respond to a display instruction of the first form page, and determine a first candidate unit width of the first form page according to a first natural width of a first component and the number of occupied units of the first component; the first component is a component of non-fixed width included in the first form page; the second unit width module is used to determine a first target unit width of the first form page according to the first candidate unit width; the form page display module is used to display the first form page according to the first target unit width, the target width corresponding to the first form page, the number of occupied units of the components included in the first form page, and the display order.

[0013] The present application also provides an electronic device, which includes a memory and a processor, wherein the memory stores a computer program, and the processor implements the above-mentioned form page display method when executing the computer program.

[0014] The present application also provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method for displaying the form page is implemented.

[0015] The present application also provides a computer program product, which is stored in a storage medium and implements the above-mentioned form page display method when the computer program product is executed by at least one processor.

[0016] The present application provides a method and product for displaying a form page, which can realize the display alignment of components in a form page by dividing the form page with units as the granularity and allocating the units to components, thereby improving the component alignment efficiency of the form page. In addition, by using the first natural width of the first component included in the first form page and the number of occupied units of the first component, the first candidate unit width of the first form page is determined, and according to the first candidate unit width, the first target unit width of the first form page is determined, so that the target unit width suitable for all components included in the form page can be determined, thereby improving the component alignment display effect of the form page. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] Figure 1 It is a flowchart of a method for displaying a form page provided in an embodiment of the present application;

[0018] Figure 2 This is a schematic diagram of the effect of the method for displaying a form page provided in an embodiment of the present application. Figure 1 ;

[0019] Figure 3 This is a schematic diagram of the effect of the method for displaying a form page provided in an embodiment of the present application. Figure 2 ;

[0020] Figure 4 This is a schematic diagram of the effect of the method for displaying a form page provided in an embodiment of the present application. Figure 3 ;

[0021] Figure 5 This is a schematic diagram of the effect of the method for displaying a form page provided in an embodiment of the present application. Figure 4 ;

[0022] Figure 6 It is a structural diagram of a display system for a form page provided in an embodiment of the present application;

[0023] Figure 7is a schematic diagram of the structure of an embodiment of an electronic device provided in an embodiment of the present application;

[0024] Figure 8 It is a structural schematic diagram of another embodiment of the electronic device provided by the present application. DETAILED DESCRIPTION

[0025] The following will be combined with the drawings in the embodiments of the present application to clearly describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, rather than all the embodiments. All other embodiments obtained by ordinary technicians in this field based on the embodiments in the present application belong to the scope of protection of this application.

[0026] The terms "first", "second", etc. in the specification and claims of the present application are used to distinguish similar objects, and are not used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable under appropriate circumstances, so that the embodiments of the present application can be implemented in an order other than those illustrated or described here, and the objects distinguished by "first", "second", etc. are generally of one type, and the number of objects is not limited. For example, the first object can be one or more. In addition, "and / or" in the specification and claims represents at least one of the connected objects, and the character " / " generally indicates that the objects associated with each other are in an "or" relationship.

[0027] The display method of the form page provided in the embodiment of the present application can be applied to the terminal, can also be applied to the server side, and can also be software running in the terminal or the server side. In some embodiments, the terminal can be a smart phone, a tablet computer, a laptop computer, a desktop computer, etc.; the server side can be configured as an independent physical server, or a server cluster or distributed system composed of multiple physical servers, and can also be configured as a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms; the software can be an application that implements the display method of the form page, etc., but is not limited to the above forms.

[0028] The following describes in detail the method for displaying a form page provided in the embodiment of the present application through specific embodiments in conjunction with the accompanying drawings.

[0029] See also Figure 1 A method for displaying a form page provided in an embodiment of the present application may include:

[0030] Step S101: in response to a display instruction of a first form page, determining a first candidate unit width of the first form page according to a first natural width of a first component and the number of units occupied by the first component; the first component is a component of non-fixed width included in the first form page;

[0031] Step S102: determining a first target cell width of a first form page according to a first candidate cell width;

[0032] Step S103: displaying the first form page according to the first target unit width, the target width corresponding to the first form page, the number of occupied units of components included in the first form page, and the display order.

[0033] The embodiment of the present application provides a method for displaying a form page, which divides the form page with units as the granularity and allocates the units to components, so as to realize the display alignment of the components in the form page and improve the component alignment efficiency of the form page. In addition, by using the first natural width of the first component included in the first form page and the number of occupied units of the first component, the first candidate unit width of the first form page is determined, and according to the first candidate unit width, the first target unit width of the first form page is determined, so that the target unit width suitable for all components included in the form page can be determined, thereby improving the component alignment display effect of the form page.

[0034] Optionally, the natural width of the first component is the width that the first component itself wishes to occupy when the width of the first component is not explicitly specified, and the natural width of the first component will change with the change of the displayed content. Generally speaking, in order to ensure that the displayed content of the first component can be fully displayed, the display width of the first component on the form page should not be less than the natural width of the first component. Optionally, the preset minimum unit width is 210 pixels. Optionally, the target width corresponding to the first form page is equal to the width of the container for accommodating components on the first form page.

[0035] In one embodiment, the step S101 above determines the first candidate unit width of the first form page according to the first natural width of the first component included in the first form page and the number of occupied units of the first component, including:

[0036] A ratio of a first natural width of the first component to the number of occupied units of the first component is determined as a first candidate unit width of the first form page.

[0037] In another embodiment, determining the first candidate unit width of the first form page according to the first natural width of the first component included in the first form page and the number of occupied units of the first component in the above step S101 includes:

[0038] The first candidate cell width is determined by the following formula:

[0039] L'1=n'1*w0+(n'1-1)*r

[0040] Wherein, L'1 represents the first natural width of the first component, n'1 represents the number of occupied units of the first component, w0 represents the first candidate unit width, r represents the unit spacing, r is a preset value, and optionally, r=16 pixels.

[0041] It is worth mentioning that when the number of first components included in the form page is greater than 1, the first candidate unit width corresponding to each first component can be determined according to the first natural width of each first component and the number of occupied units of the first component, and then the maximum value of the first candidate unit widths corresponding to each first component can be selected as the first candidate unit width of the first form page.

[0042] In one embodiment, the above step S102: determining the first target unit width of the first form page according to the first candidate unit width includes:

[0043] Determine a larger value between the first candidate cell width and the preset minimum cell width of the first form page as a first reference cell width of the first form page;

[0044] A first target unit width of the first form page is determined according to the first reference unit width.

[0045] In the embodiment of the present application, when the first form page has a minimum unit width requirement, the larger value of the first candidate unit width and the preset minimum unit width of the first form page is determined as the first reference unit width of the first form page, and the first target unit width of the first form page is determined according to the first reference unit width. In this way, on the basis of satisfying the preset minimum unit width of the form page, a target unit width suitable for all components included in the form page can be determined, thereby improving the component alignment display effect of the form page.

[0046] The determining of the first target unit width of the first form page according to the first reference unit width may include:

[0047] The first reference unit width is determined as the first target unit width of the first form page.

[0048] In the embodiment of the present application, when the first form page has a minimum unit width requirement, by directly determining the larger value of the first candidate unit width and the preset minimum unit width of the first form page as the first target unit width of the first form page, it is possible to quickly determine the target unit width suitable for all components included in the form page on the basis of satisfying the preset minimum unit width of the form page, thereby improving the component alignment efficiency and component alignment display effect of the form page.

[0049] The determining of the first target unit width of the first form page according to the first reference unit width may further include:

[0050] Determining the number of first row units of the first form page according to the first reference unit width and the target width corresponding to the first form page;

[0051] In the case that the number of cells in the first row is an integer, the first reference cell width is determined as the first target cell width.

[0052] In the case where the number of cells in the first row is a non-integer, the number of cells in the first row is rounded down to obtain the number of cells in the second row of the first form page, and the first value is compared with the target value of the row fill rate of the first form page to obtain a comparison result;

[0053] When the comparison result shows that the first value is less than the target value, determining a first target cell width according to the number of cells in the second row and the target width corresponding to the first form page;

[0054] If the comparison result shows that the first value is greater than or equal to the target value, the first reference cell width is determined as the first target cell width;

[0055] The first value is a ratio of the second value to a target width corresponding to the first form page, and the second value is a product of the number of second row cells and the first reference cell width.

[0056] Optionally, the number of cells in the first row of the first form page is calculated by the following formula:

[0057] L=n1*w1+(n1-1)*r

[0058] Wherein, L represents the target width corresponding to the first form page, n1 represents the number of cells in the first row, w1 represents the first reference cell width, and r represents the cell spacing.

[0059] If the number of cells in the first row n1 calculated by the above formula is a non-integer, the number of cells in the first row n1 can be rounded down to obtain the number of cells in the second row n2 of the first form page. For example, n1=4.3, by rounding down, n2=4 is obtained.

[0060] Further, the second value A2=n2*w1, and the first value A1=A2 / L=(n2*w1) / L.

[0061] Optionally, the target value of the row filling rate of the first form page is A0=[L-(n2-1)*r] / L.

[0062] If A1<A0, the first target unit width w'1 can be calculated by the following formula:

[0063] L = n2*w'1+(n2-1)*r, or

[0064] L=n2*w'1

[0065] If A1≥A0, the first target cell width w′1=the first reference cell width w1.

[0066] Take the first component as a segment controller component as an example, Figure 2 As shown, in the case of A1<A0, if the first reference unit width w1 is directly used as the first target unit width w'1, the display width of the segmented controller component on the first form page is the red frame width = 2*w1, if the first target unit width w'1 is calculated using the formula L = n2*w'1+(n2-1)*r, the display width of the segmented controller component on the first form page is widened from the red frame width 2*w1 to 2*w'1 along the direction of the arrow, so that the fill rate of the first form page is higher, the first form page is more beautiful and has better interactivity.

[0067] In the embodiment of the present application, when the first form page has a minimum unit width requirement, the number of first-row units of the first form page is determined based on the first reference unit width and the target width corresponding to the first form page, and when the number of first-row units is a non-integer, the number of first-row units is rounded down to obtain the number of second-row units of the first form page, and based on a comparison result of a first value determined by the number of second-row units with a target value of a row fill rate of the first form page, the first target unit width is determined further based on the number of second-row units and the target width corresponding to the first form page, so that the fill rate of the first form page can be further improved on the basis of ensuring the alignment of various components in the first form page, so that the first form page is more beautiful and has better interactivity.

[0068] In another embodiment, the above step S102: determining the first target unit width of the first form page according to the first candidate unit width includes:

[0069] The first candidate cell width is determined as the first target cell width of the first form page.

[0070] In the embodiment of the present application, when there is no minimum unit width requirement for the first form page, the first candidate unit width is directly determined as the first target unit width of the first form page, and the first form page and components are divided according to the first target unit width, thereby improving the component alignment efficiency and component alignment display effect of the form page.

[0071] In another embodiment, the above step S102: determining the first target unit width of the first form page according to the first candidate unit width includes:

[0072] Determining the number of third row units of the first form page according to the first candidate unit width and the target width corresponding to the first form page;

[0073] When the number of cells in the third row is an integer, the first candidate cell width is determined as the first target cell width.

[0074] When the number of cells in the third row is a non-integer, the number of cells in the third row is rounded down to obtain the number of cells in the fourth row of the first form page, and the third value is compared with the target value of the row fill rate of the first form page to obtain a comparison result;

[0075] When the comparison result shows that the third value is smaller than the target value, determining a first target cell width according to the number of cells in the fourth row and the target width corresponding to the first form page;

[0076] If the comparison result is that the third value is greater than or equal to the target value, determining the first candidate cell width as the first target cell width;

[0077] The third value is a ratio of the fourth value to the target width corresponding to the first form page, and the fourth value is a product of the number of cells in the fourth row and the width of the first candidate cell.

[0078] The above process of determining the first target cell width according to the number of cells in the fourth row and the target width corresponding to the first form page may refer to the process of determining the first target cell width according to the number of cells in the second row and the target width corresponding to the first form page, which will not be repeated here.

[0079] In the embodiment of the present application, when there is no minimum unit width requirement for the first form page, the number of first row units of the first form page is determined based on the first candidate unit width and the target width corresponding to the first form page, and when the number of first row units is a non-integer, the number of first row units is rounded down to obtain the number of second row units of the first form page, and based on a comparison result of a third value determined by the number of second row units with a target value of the row fill rate of the first form page, the first target unit width is determined further based on the number of second row units and the target width corresponding to the first form page, so that the fill rate of the first form page can be further improved on the basis of ensuring the alignment of various components in the first form page, so that the first form page is more beautiful and has better interactivity.

[0080] It is worth mentioning that the components included in the first form page in the above step S103 are any types of components included in the first form page, that is, any component included in the first form page can be a non-fixed width component or a fixed width component.

[0081] Exemplarily, the first form page includes 8 selection box components, 1 segment controller component and 1 operation button combination component, wherein the 8 selection box components are all fixed-width components, and the label texts to be displayed on the first form page are: cycle, whether to calculate, indicator type, filler, reviewer, tracker, indicator ID / name, inconsistent results, the segment controller component is a non-fixed-width component, and the label text to be displayed on the first form page is status, and the operation button combination component is a fixed-width component, and the label texts to be displayed on the first form page of each operation button in the component are reset, query, and collapse, and the number of units occupied by each selection box component is 1, the number of units occupied by the segment controller component is 2, and the number of units occupied by the operation button combination component is 1. The display order of each component from front to back on the first form page is the cycle selection box component, the segment controller component, the inconsistent results selection box component, the indicator ID / name selection box component, the whether to calculate selection box component, the indicator type selection box component, the filler selection box component, the reviewer selection box component, the tracker selection box component and the operation button combination component.

[0082] Further, the first candidate cell width of the first form page can be determined according to the first natural width of the segment controller component and the number of occupied cells. Then, the larger value of the first candidate cell width and the preset minimum cell width of the first form page can be determined as the first reference cell width of the first form page, and the first target cell width l1 of the first form page can be determined according to the first reference cell width. Then, the number of row cells of the first form page can be determined according to the first target cell width l1 and the target width corresponding to the first form page, that is, the first form page can be divided into cells of the first target cell width l1, and according to the number of row cells of the first form page and the number of occupied cells of the components, in accordance with the display order of the components from front to back on the first form page, the first division unit of the first row on the first form page can be allocated to the period selection box component, the second division unit and the third division unit of the first row can be allocated to the segment controller component, the fourth division unit of the first row can be allocated to the inconsistent result selection box component, the fourth division unit of the first row can be allocated to the inconsistent result selection box component, and the fifth division unit of the first row can be allocated to the inconsistent result selection box component. The 5th division unit is assigned to the indicator ID / name selection box component, the 1st division unit in the 2nd row is assigned to the whether to calculate selection box component, the 2nd division unit in the 2nd row is assigned to the indicator type selection box component, the 3rd division unit in the 2nd row is assigned to the reporter selection box component, the 4th division unit in the 2nd row is assigned to the reviewer selection box component, the 5th division unit in the 2nd row is assigned to the tracker selection box component, and the 1st division unit in the 3rd row is assigned to the operation button combination component allocation unit, so that 8 selection box components, 1 segment controller component and 1 operation button combination component can be aligned in the first form page, and the following is obtained: Figure 3 The first form page is shown.

[0083] Continue to refer Figure 3 Since the determined first target unit width l1 is suitable for each component, the display content of the segment controller component can be fully displayed in the first form page, and the sum of the display width and unit spacing of the indicator type selection box component and the respondent selection box component is just equal to the display width of the segment controller component, achieving a better component alignment display effect.

[0084] In one embodiment, in the above step S103: after displaying the first form page according to the first target unit width, the target width corresponding to the first form page, the number of occupied units and the display order of the components of the first form page, the method for displaying the form page provided by the embodiment of the present application further includes:

[0085] In response to an event that triggers the natural width of the first component to change from a first natural width to a second natural width, determining a second candidate unit width for the first form page according to the second natural width of the first component and the number of occupied units of the first component;

[0086] Determining a second target cell width of the first form page according to the second candidate cell width;

[0087] The first form page is updated according to the second target unit width, the target width corresponding to the first form page, the number of occupied units and the display order of the components of the first form page.

[0088] Combination Figure 3 and Figure 4 When the period selected by the user through the period selection box component is 202408, the display content of the segment controller component includes 5 display items: all, to be submitted, under review, completed, and no need to fill in. When the period selected by the user through the period selection box component is 202407, the display content of the segment controller component includes 6 display items: all, to be submitted, under review, completed, reporting closed, and no need to fill in. The statistical quantity of the same display item in different periods may not be the same. For example, the statistical quantity under review for period 202407 is 7, and the statistical quantity under review for period 202408 is 63. Changes in the display items and the statistical quantity of each display item will cause the natural width of the segment controller component to change.

[0089] Furthermore, in response to the user's operation of changing the selection cycle from 202708 to 202707, the second natural width of the segment controller component corresponding to the cycle 202707 can be obtained, and the second target unit width l2 of the first form page can be determined according to the second natural width of the segment controller component, the number of occupied units, and the preset minimum unit width. Further, the number of row units of the first form page can be determined according to the second target unit width l2 and the target width corresponding to the first form page, that is, the first form page is re-divided into units of the second target unit width l2, and according to the number of row units, the number of occupied units of the components and the display order, the divided units on the first form page are redistributed to 8 selection box components, 1 segment controller component and 1 operation button combination component, so that the 8 selection box components, 1 segment controller component and 1 operation button combination component can still be aligned in the first form page, and the following is obtained. Figure 4 The first form page is shown.

[0090] Continue to refer Figure 4When the selection period is changed from 202708 to 202707, 8 selection box components, 1 segment controller component and 1 operation button combination component are realigned and displayed in the form page according to the display order. Since the determined first target unit width l2 is suitable for each component, the display content corresponding to the period 202707 of the segment controller component can still be fully displayed in the first form page, and the sum of the display width and unit spacing of the indicator type selection box component and the reporter selection box component is still equal to the display width of the segment controller component, which also has a good component alignment display effect.

[0091] The implementation process of determining the second candidate unit width of the first form page according to the second natural width of the first component and the number of occupied units of the first component may refer to the implementation process of step S101 above, which will not be repeated here.

[0092] The implementation process of determining the second target cell width of the first form page according to the second candidate cell width may refer to the implementation process of step S102 , which will not be described in detail herein.

[0093] The embodiment of the present application determines the second target unit width of the first form page based on the second natural width of the first component, the number of occupied units, and the preset minimum unit width in response to an event that triggers the natural width of the first component to change from the first natural width to the second natural width, and re-divides the first form page into units of the second target unit width, and re-allocates the divided units on the first form page to the components, so that the components in the first form page can still be aligned in the first form page, which can further improve the component alignment efficiency and component alignment display effect of the form page.

[0094] In one embodiment, the step S103 of displaying the first form page according to the first target unit width, the target width corresponding to the first form page, the number of units occupied by components of the first form page, and the display order includes:

[0095] Obtaining a target display state of the first form page, where the target display state is an expanded state or a collapsed state;

[0096] According to the target display state, determine the number m of display components of the first form page, where m is a positive integer;

[0097] The first form page is displayed according to the first target unit width, the target width corresponding to the first form page, the m components of the first form page, the number of occupied units of the m components, and the display order.

[0098] Optionally, the expanded state may be a fully expanded state or a partially expanded state.

[0099] Among them, the m components of the first form page can be any m components included in the first form page, and can also be the first m components of the first form page determined according to the display order of the components on the first form page. It can also include s components that must be displayed on the first form page under the target display state, and the first ms components of the first form page other than the above s components determined according to the display order of the components on the first form page, where s is a positive integer.

[0100] Exemplarily, the display order of each component on the first form page from front to back is the cycle selection box component, the segment controller component, the inconsistent result selection box component, the indicator ID / name selection box component, the whether to calculate selection box component, the indicator type selection box component, the filler selection box component, the reviewer selection box component, the tracker selection box component and the operation button combination component. Assuming that when the target display state is the collapsed state, the number of display components of the first form page m=3, and the operation button combination component is a component that must be displayed on the first form page in the collapsed state, then according to the display order of each component on the first form page, it can be determined that the first two components of the first form page except the operation button combination component are the cycle selection box component and the segment controller component, and finally it is determined that the three components to be displayed in the collapsed state of the first form page are the cycle selection box component, the segment controller component and the operation button combination component.

[0101] Assume that the number of row units of the first form page is 5 according to the first target unit width and the target width corresponding to the first form page. According to the number of row units and the number of units occupied by the cycle selection box component, the segment controller component and the operation button combination component, the first division unit of the first row on the first form page can be allocated to the cycle selection box component, the second division unit and the third division unit of the first row to the segment controller component, and the fourth division unit of the first row to the operation button combination component allocation unit in the display order from front to back, and the following is obtained: Figure 5 The first form page is shown.

[0102] In the embodiment of the present application, by determining the number m of display components of the first form page in the target display state, dividing the first form page into units of the first target unit width, and allocating the divided units on the first form page to the m components of the first form page, the components displayed on the first form page can be aligned in the first form page in different display states of the first form page or when the display state is switched, thereby further improving the component alignment efficiency and component alignment display effect of the form page.

[0103] In one implementation, the determining the number m of display components of the first form page according to the target display state includes:

[0104] The minimum value of the preset display component quantity in the target display state and the quantity of components included in the first form page is determined as the display component quantity m of the first form page.

[0105] Exemplarily, when the first form page is partially expanded, the preset number of display components is 5, and the first form page includes 10 components, then the number of display components of the first form page m=5.

[0106] In another embodiment, the determining the number m of display components of the first form page according to the target display state includes:

[0107] Determining the target number of row units for the first form page according to the first target unit width and the target width corresponding to the first form page;

[0108] The number m of display components of the first form page in the target display state is determined according to the target number of row units, the number of display rows of the first form page in the target display state, the number of occupied units of the components, and the display order.

[0109] Optionally, when the first row unit number n1 is an integer, the target row unit number n=the first row unit number n1; when the first row unit number is a non-integer, the target row unit number n=the second row unit number n2.

[0110] Furthermore, the target row unit number and the number of display rows of the first form page in the target display state may be multiplied to obtain the total number of available units a of the first form page in the target display state. Furthermore, if in the target display state, there are no components that must be displayed on the first form page, the number of units occupied by each component may be accumulated in sequence according to the display order of each component from front to back on the first form page. If the accumulated value of the number of units occupied by the first b components is less than or equal to the number of available units a, and the accumulated value of the number of units occupied by the first b+1 components is greater than the number of available units a, then the number of displayed components m=b on the first form page is determined.

[0111] If in the target display state, there are s components that must be displayed on the first form page, the numbers of occupied units of components other than the above s components can be accumulated in sequence according to the display order of each component from front to back on the first form page; if the accumulated value of the numbers of occupied units of the first c components other than the above s components is less than or equal to ad, and the accumulated value of the numbers of occupied units of the first c+1 components other than the above s components is greater than ad, then the number of displayed components on the first form page is determined to be m=s+c, where d is the sum of the numbers of occupied units of the above s components.

[0112] The embodiment of the present application determines the target number of row units of the first form page through the first target unit width and the target width corresponding to the first form page, and based on the target number of row units, the number of displayed rows of the first form page in the target display state, the number of occupied units of the components, and the display order, the number m of displayed components of the first form page in the target display state can be accurately determined, thereby improving the accuracy of allocating the divided units on the first form page to the m components of the first form page, and further improving the component alignment efficiency and component alignment display effect of the form page.

[0113] In one embodiment, after the above step S103: displaying the first form page according to the first target unit width, the target width corresponding to the first form page, the number of occupied units of the components included in the first form page, and the display order, the form page display method provided by the embodiment of the present application further includes:

[0114] In response to a zoom operation on the first form page, determining a zoom factor of the first form page;

[0115] Multiplying the first target unit width by the zoom factor to obtain a third reference unit width of the first form page;

[0116] Determining a third target unit width of the first form page according to the third reference unit width;

[0117] The first form page is updated according to the third target unit width, the target width corresponding to the first form page, the number of occupied units and the display order of the components included in the first form page.

[0118] The embodiment of the present application determines a third reference unit width of the first form page in response to a zooming operation on the first form page, determines a third target unit width of the first form page according to the third reference unit width, divides the first form page according to the third target unit width, and sequentially allocates the divided units on the first form page to each component according to the display order of each component from front to back on the first form page, thereby further improving the component alignment efficiency and component alignment display effect of the form page.

[0119] The determining of the third target unit width of the first form page according to the third reference unit width may include:

[0120] In the case where the first form page has no minimum unit width requirement, determining the third reference unit width as the third target unit width of the first form page;

[0121] In the case that the first form page has a minimum unit width requirement, a larger value between the third reference unit width and the preset minimum unit width of the first form page is determined as the third target unit width of the first form page.

[0122] Optionally, in the case where the zoom operation on the first form page is to reduce the first form page, the zoom multiple of the first form page is less than 1, and the third reference unit width of the first form page obtained by multiplying the first target unit width by the zoom multiple is less than the first target unit width. Assuming that the third reference unit width is less than or equal to the preset minimum unit width, the preset minimum unit width can be determined as the third target unit width. Further, the number of row units of the first form page can be determined according to the preset minimum unit width and the target width corresponding to the first form page, that is, the first form page is divided into units of the preset minimum unit width to obtain the number of divided units per row of the first form page. Further, according to the number of row units of the first form page and the number of occupied units of the components, the divided units on the first form page can be sequentially allocated to each component according to the display order of each component from front to back on the first form page to obtain an updated first form page.

[0123] Optionally, in the case where the zoom operation on the first form page is to enlarge the first form page, the zoom multiple of the first form page is greater than 1, and the first target unit width is multiplied by the zoom multiple to obtain a third reference unit width of the first form page that is greater than the first target unit width. Since the first target unit width is greater than the preset minimum unit width, the third reference unit width is also greater than the preset minimum unit width, and the third reference unit width can be directly determined as the third target unit width. Further, the number of row units of the first form page can be determined based on the third reference unit width and the target width corresponding to the first form page, that is, the first form page is divided by the third reference unit width to obtain the number of divided units per row of the first form page. Further, according to the number of row units of the first form page and the number of occupied units of the components, and in accordance with the display order of the components from front to back on the first form page, the divided units on the first form page can be sequentially allocated to the components to obtain the updated first form page.

[0124] In an embodiment of the present application, in response to a zooming operation on a first form page, a third reference unit width of the first form page is determined. When the first form page has a minimum unit width requirement, a larger value between the third reference unit width and a preset minimum unit width of the first form page is determined as the third target unit width of the first form page, and the first form page is divided according to the third target unit width. In addition, the divided units on the first form page are sequentially allocated to the components according to the display order of the components from front to back on the first form page. In this way, the target unit width suitable for all components included in the form page can be quickly determined on the basis of satisfying the preset minimum unit width of the form page, which can further improve the component alignment efficiency and component alignment display effect of the form page.

[0125] The display method of the form page provided by the embodiment of the present application determines the first target unit width of the first form page based on the natural width and the number of occupied units of the first form page component, divides the first form page into units of the first target unit width, and allocates the divided units on the first form page to the m components to be displayed in the target display state of the first form page, so that in different display states of the first form page, or when the display state is switched, the components displayed on the first form page can be aligned in the first form page. After displaying the first form page with aligned components, in response to an event that triggers a change in the natural width of the component in the first form page, or a zoom operation on the first form page, a second target unit width or a third target unit width can be determined, and the first form page is divided into units of the second target unit width or the third target unit width, and the divided units on the first form page are allocated to the components of the first form page, so that when the natural width of the component changes or the first form page is zoomed, the components displayed on the first form page can still be aligned in the first form page. In addition, in the process of determining the first target unit width of the first form page based on the natural width and the number of occupied units of the first form page components, by rounding down the number of row units and determining the first target unit width based on the rounded number of row units and the target width corresponding to the first form page, the fill rate of the first form page can be further improved on the basis of ensuring the alignment of the components in the first form page, making the first form page more beautiful and more interactive.

[0126] See also Figure 6 The embodiment of the present application also provides a form page display system 600, which can implement the above-mentioned form page display method. The system includes: a first unit width module 601, a second unit width module 602 and a form page display module 603.

[0127] The first unit width module 601 is used to determine the first candidate unit width of the first form page in response to the display instruction of the first form page according to the first natural width of the first component and the number of occupied units of the first component; the first component is a component of non-fixed width included in the first form page;

[0128] The second unit width module 602 is used to determine a first target unit width of the first form page according to the first candidate unit width;

[0129] The form page display module 603 is used to display the first form page according to the first target unit width, the target width corresponding to the first form page, the number of occupied units of the components included in the first form page, and the display order.

[0130] The form page display system provided in the embodiment of the present application can implement the various steps of the above-mentioned form page display method embodiment and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0131] Alternatively, if Figure 7 As shown, the embodiment of the present application further provides an electronic device 700, including a processor 701 and a memory 702, the memory 702 stores a program or instruction that can be run on the processor 701, and the program or instruction is executed by the processor 701 to implement the various steps of the above-mentioned form page display method embodiment, and can achieve the same technical effect, to avoid repetition, it is not repeated here. It should be noted that the electronic device in the embodiment of the present application includes the above-mentioned mobile electronic device and non-mobile electronic device.

[0132] Figure 8 A schematic diagram of the hardware structure of an electronic device for implementing an embodiment of the present application is provided, wherein the electronic device includes:

[0133] The processor 801 may be implemented by a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (Application Specific Integrated Circuit, ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of the present application;

[0134] The memory 802 can be implemented in the form of a read-only memory (ROM), a static storage device, a dynamic storage device, or a random access memory (RAM). The memory 802 can store an operating system and other application programs. When the technical solution provided in the embodiment of this specification is implemented by software or firmware, the relevant program code is stored in the memory 802, and the processor 801 calls and executes the method for displaying the form page in the embodiment of this application;

[0135] Input / output interface 803, used to implement information input and output;

[0136] The communication interface 804 is used to realize the communication interaction between the device and other devices. The communication can be realized through a wired manner (such as USB, network cable, etc.) or a wireless manner (such as mobile network, WIFI, Bluetooth, etc.);

[0137] A bus 805 that transmits information between the various components of the device (e.g., the processor 801, the memory 802, the input / output interface 803, and the communication interface 804);

[0138] The processor 801 , the memory 802 , the input / output interface 803 and the communication interface 804 are connected to each other in communication within the device via a bus 805 .

[0139] The electronic device provided in the embodiment of the present application can implement the various steps of the above-mentioned form page display method embodiment and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0140] The embodiment of the present application also provides a computer-readable storage medium, on which a program or instruction is stored. When the program or instruction is executed by a processor, the various steps of the above-mentioned form page display method embodiment are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0141] The processor is the processor in the electronic device in the above embodiment. The computer-readable storage medium includes a computer-readable storage medium such as a computer read-only memory ROM, a random access memory RAM, a magnetic disk or an optical disk.

[0142] An embodiment of the present application further provides a chip, which includes a processor and a communication interface, the communication interface and the processor are coupled, and the processor is used to run programs or instructions to implement the various steps of the above-mentioned form page display method embodiment, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0143] It should be understood that the chip mentioned in the embodiments of the present application can also be called a system-level chip, a system chip, a chip system or a system-on-chip chip, etc.

[0144] An embodiment of the present application provides a computer program product, which is stored in a storage medium. The program product is executed by at least one processor to implement the various steps of the above-mentioned form page display method embodiment, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0145] It should be noted that, in this article, the terms "comprise", "include" or any other variant thereof are intended to cover non-exclusive inclusion, so that the process, method, article or device including a series of elements includes not only those elements, but also includes other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise one..." do not delete the existence of other identical elements in the process, method, article or device including the element. In addition, it should be pointed out that the scope of the methods and devices in the embodiments of the present application is not limited to performing functions in the order shown or discussed, and may also include performing functions in a substantially simultaneous manner or in reverse order according to the functions involved, for example, the described method may be performed in an order different from that described, and various steps may also be added, omitted, or combined. In addition, the features described with reference to certain examples may be combined in other examples.

[0146] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a computer software product, which is stored in a storage medium (such as ROM / RAM, a disk, or an optical disk), and includes a number of instructions for a terminal (which can be a mobile phone, a computer, a server, or a network device, etc.) to execute the methods described in each embodiment of the present application.

[0147] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of the present application, ordinary technicians in this field can also make many forms without departing from the purpose of the present application and the scope of protection of the claims, all of which are within the protection of the present application.

Claims

1. A method for displaying a form page, characterized in that: include: In response to a display instruction of a first form page, determining a first candidate unit width of the first form page according to a first natural width of a first component and the number of units occupied by the first component; the first component is a component of non-fixed width included in the first form page; Determining a first target cell width of the first form page according to the first candidate cell width; The first form page is displayed according to the first target unit width, the target width corresponding to the first form page, the number of occupied units of components included in the first form page, and the display order.

2. The method for displaying a form page according to claim 1, wherein: After the step of displaying the first form page according to the first target unit width, the target width corresponding to the first form page, the number of occupied units and the display order of components included in the first form page, the method for displaying the form page further includes: In response to an event that triggers the natural width of the first component to change from the first natural width to a second natural width, determining a second candidate unit width of the first form page according to the second natural width of the first component and the number of occupied units of the first component; Determining a second target cell width of the first form page according to the second candidate cell width; The first form page is updated according to the second target unit width, the target width corresponding to the first form page, the number of occupied units of the components, and the display order.

3. The method for displaying a form page according to claim 1, wherein: The step of displaying the first form page according to the first target unit width, the target width corresponding to the first form page, the number of occupied units and the display order of components included in the first form page, comprises: Acquire a target display state of the first form page, where the target display state is an expanded state or a collapsed state; According to the target display state, determine the number m of display components of the first form page, where m is a positive integer; The first form page is displayed according to the first target unit width, the target width corresponding to the first form page, the m components of the first form page, the number of occupied units of the m components, and the display order.

4. The method for displaying a form page according to claim 3, wherein: The determining, according to the target display state, the number m of display components of the first form page includes: Determining a target number of row units for the first form page according to the first target unit width and a target width corresponding to the first form page; The number m of displayed components of the first form page in the target display state is determined according to the target number of row units, the number of displayed rows of the first form page in the target display state, the number of occupied units and the display order of the components.

5. The method for displaying a form page according to claim 1, wherein: After the step of displaying the first form page according to the first target unit width, the target width corresponding to the first form page, the number of occupied units and the display order of components included in the first form page, the method for displaying the form page further includes: In response to a zoom operation on the first form page, determining a zoom factor of the first form page; Multiplying the first target unit width by the zoom factor to obtain a third reference unit width of the first form page; Determining a third target unit width of the first form page according to the third reference unit width; The first form page is updated according to the third target unit width, the target width corresponding to the first form page, the number of occupied units of the components, and the display order.

6. The method for displaying a form page according to claim 1, wherein: The step of determining a first target unit width of the first form page according to the first candidate unit width includes: Determine a larger value between the first candidate cell width and a preset minimum cell width of the first form page as a first reference cell width of the first form page; determining the number of first row units of the first form page according to the first reference unit width and a target width corresponding to the first form page; When the number of the first row of units is a non-integer, the first row of units is rounded down to obtain the number of the second row of units on the first form page; Compare the first value with the target value of the row fill rate of the first form page to obtain a comparison result; the first value is a ratio of the second value to the target width corresponding to the first form page, and the second value is a product of the number of the second row cells and the first reference cell width; When the comparison result is that the first value is smaller than the target value, the first target cell width is determined according to the second row cell quantity and the target width corresponding to the first form page.

7. A form page display system, characterized in that: It includes a first unit width module, a second unit width module and a form page display module; The first unit width module is used to respond to a display instruction of the first form page and determine a first candidate unit width of the first form page according to a first natural width of a first component and the number of units occupied by the first component; the first component is a component of non-fixed width included in the first form page; The second unit width module is used to determine a first target unit width of the first form page according to the first candidate unit width; The form page display module is used to display the first form page according to the first target unit width, the target width corresponding to the first form page, the number of occupied units and the display order of the components included in the first form page.

8. An electronic device, characterized in that: The electronic device includes a memory and a processor, the memory stores a computer program, and the processor implements the method for displaying a form page according to any one of claims 1 to 6 when executing the computer program.

9. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the method for displaying a form page according to any one of claims 1 to 6 is implemented.

10. A computer program product, characterized in that The computer program product is stored in a storage medium, and when the computer program product is executed by at least one processor, the method for displaying a form page according to any one of claims 1 to 6 is implemented.

Images