Front-end list width setting method, system, electronic device and storage medium

Abstract

The present invention provides a front-end list width setting method, system, electronic device and storage medium, relating to the field of data processing technology. The method comprises: obtaining list configuration information, and obtaining data features of each column according to the list configuration information; obtaining the total resolution width of the display device, and if the total resolution width is greater than or equal to the sum of the maximum column widths, displaying the list according to the maximum column width of each column; if the total resolution width is less than the sum of the maximum column widths, normalizing the data features of each column to obtain a normalized result; setting feature weights of the data features, calculating the width of each column according to the feature weights and the normalized result, and obtaining the initial column width of each column; dynamically adjusting the initial column width according to the original list width, obtaining the target list column width of each column, and displaying the list according to the target list column width. The present invention allows the front-end list column width to be flexibly adjusted according to actual conditions, perfectly adapting to diverse business scenarios.

Description

Technical Field

[0001] The present invention relates to the field of data processing technology, and in particular to a front-end list width setting method, system, electronic device and storage medium. Background Art

[0002] In today's era of rapid digital development, low-code platforms have gained widespread application in numerous fields due to their efficient and convenient development features. As one of the core components of low-code platforms, the form designer plays a crucial role in building diverse and personalized forms. As a key vehicle for information exchange, the rationality of form design has a direct and significant impact on user experience and work efficiency.

[0003] List elements are a common and crucial component in form design. They present large amounts of data in a structured manner, making it easy for users to view, compare, and analyze them. However, allocating list column widths has always been a challenge in form design. Different form lists may carry different types of data (such as text, numbers, dates, etc.), and each type of data requires different display space. Furthermore, different usage scenarios and user habits also place diverse and specific requirements on list column widths. Currently, existing list width allocation algorithms are mostly simple and fixed, making it difficult to meet the diverse needs of form lists in complex scenarios, resulting in irrational list column width allocation. Summary of the Invention

[0004] In view of the above-mentioned deficiencies in the prior art, the present invention provides a front-end list width setting method, system, electronic device and storage medium, which effectively solve the problem of unreasonable list width distribution in complex scenarios.

[0005] In a first aspect, the present invention provides a method for setting a front-end list width, the method comprising:

[0006] Obtain list configuration information, and obtain data characteristics of each column according to the list configuration information, wherein the data characteristics include at least maximum column width, average column width, required items, filling order, and list display order;

[0007] Obtaining the total resolution width of the display device; if the total resolution width is greater than or equal to the sum of the maximum column widths, displaying the list according to the maximum column width of each column, where the sum of the maximum column widths is the sum of the maximum column widths of all columns;

[0008] If the total resolution width is smaller than the sum of the maximum column widths, normalizing the data features of each column to obtain a normalized result;

[0009] Setting feature weights of the data features, calculating the width of each column according to the feature weights and the normalization results, and obtaining an initial column width of each column;

[0010] The initial column width is dynamically adjusted according to the original list width to obtain the target list column width of each column, and the list is displayed according to the target list column width.

[0011] In an optional implementation, if the total resolution width is greater than or equal to the sum of the maximum column widths, list display is performed according to the maximum column width of each column, including:

[0012] If the total resolution width is equal to the sum of the maximum column widths, the list column width of each column is the maximum column width;

[0013] If the total resolution width is greater than the sum of the maximum column widths, the list column width of each column is the sum of the maximum column width and the remaining average width, and the remaining average width is the difference between the total resolution width and the sum of the maximum column widths divided by the total number of columns.

[0014] In an optional embodiment, the normalizing the data features of each column to obtain a normalized result includes:

[0015] Divide the maximum column width of the target column by the maximum value of the maximum column width set of all columns to obtain the normalized maximum column width result;

[0016] Dividing the average width of the target column by the maximum value of the average width set of all columns to obtain a normalized average column width result;

[0017] If the target column is a required item, the normalized result of the required item is 1; if the target column is not a required item, the normalized result of the required item is 0;

[0018] Subtracting the reporting order ratio of the target column from 1 to obtain a reporting order normalization result, where the reporting order ratio is the ratio of the reporting order of the target column to the maximum reporting order;

[0019] A list display order normalization result is obtained by subtracting the list display order ratio of the target column from 1, where the list display order ratio is the ratio of the list display order of the target column to the maximum list display order.

[0020] In an optional embodiment, the calculation formula of the initial column width is as follows:

[0021]

[0022] In the above formula, column_width Indicates the initial column width, w 1 represents the maximum column width weight, n1 means the maximum column width normalized result, w 2 means average column width weight, n 2 represents the average column width normalization result, w 3 indicates the required weight. n 3 indicates the normalized result of the required field. w 4 represents the weight of the filling order, n 4 indicates the normalized result of the filling order. w 5 represents the weight of the list display order, n 5 means the list displays the results in the normalized order.

[0023] In an optional implementation, dynamically adjusting the initial column width according to the original list width to obtain a target list column width for each column includes:

[0024] Calculate the total initial column width by adding up the initial column widths of all columns;

[0025] Perform division calculation based on the original list width and the total initial column width to obtain an adjustment factor;

[0026] The initial column width of each column is multiplied by the adjustment factor to obtain the target list column width of each column.

[0027] In an optional embodiment, the method further comprises:

[0028] Determine the list column width type according to the list configuration information;

[0029] If the list column width type is default width or adaptive width, the list is displayed directly according to the default width or the adaptive width;

[0030] If the list column width type is smart width, the data features of each column are calculated according to the list configuration information.

[0031] In an optional implementation, if the list column width type is smart width and the target column is set to a fixed column width, the target column uses the fixed column width for list display.

[0032] In a second aspect, the present invention provides a front-end list width setting system, the system comprising:

[0033] An information acquisition module is used to obtain list configuration information and obtain data characteristics of each column according to the list configuration information, wherein the data characteristics include at least maximum column width, average column width, required items, filling order, and list display order;

[0034] A first calculation module is configured to obtain a total resolution width of a display device, and if the total resolution width is greater than or equal to the sum of maximum column widths, display the list according to the maximum column width of each column, where the sum of maximum column widths is the sum of the maximum column widths of all columns;

[0035] a data processing module, configured to normalize the data features of each column to obtain a normalized result if the total resolution width is smaller than the sum of the maximum column widths;

[0036] a second calculation module, configured to set a feature weight of the data feature, calculate the width of each column according to the feature weight and the normalization result, and obtain an initial column width of each column;

[0037] The column width adjustment module is used to dynamically adjust the initial column width according to the original list width, obtain the target list column width of each column, and display the list according to the target list column width.

[0038] In a third aspect, the present invention provides an electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the front-end list width setting method as described in the first aspect of the present invention.

[0039] In a fourth aspect, the present invention provides a computer-readable storage medium having a computer program stored thereon, wherein when the computer program is executed by a processor, the method for setting the front-end list width as described in the first aspect of the present invention is implemented.

[0040] The front-end list width setting method, system, electronic device and storage medium provided by the present invention can accurately meet the differences in data content and display requirements of different form lists in the low-code platform, allowing the list column width to be flexibly adjusted according to actual conditions, perfectly adapting to diverse business scenarios, and greatly reducing the amount of calculation and waiting time during list rendering, ensuring that users can quickly see the loaded list content. Taking into account the various characteristics of each column of data, such as data length, required items, filling order, list display order, etc., and combining the display end resolution and user manual settings, using weighted average and dynamic adjustment algorithms, the appropriate width of each column is accurately calculated, effectively avoiding display problems caused by excessive or small column widths, making list information clearer and neater, and significantly improving visual aesthetics. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following briefly introduces the drawings required for use in the embodiments. It should be understood that the following drawings only illustrate certain embodiments of the present invention and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other relevant drawings can be obtained based on these drawings without paying any creative work.

[0042] Figure 1 This is a first schematic diagram of the process of the method for setting the width of the front-end list provided by an embodiment of the present invention;

[0043] Figure 2 This is a second schematic diagram of the process of the front-end list width setting method provided by an embodiment of the present invention;

[0044] Figure 3 This is a third schematic diagram of the process of the method for setting the width of a front-end list provided by an embodiment of the present invention;

[0045] Figure 4 This is a fourth schematic diagram of the process of the front-end list width setting method provided by an embodiment of the present invention;

[0046] Figure 5 2 is a schematic diagram of the structure of a front-end list width setting system provided by an embodiment of the present invention;

[0047] Figure 6 It is a structural diagram of an electronic device provided by an embodiment of the present invention.

[0048] Description of main component symbols:

[0049] 500, front-end list width setting system; 510, information acquisition module; 520, first calculation module; 530, data processing module; 540, second calculation module; 550, column width adjustment module; 600, electronic device; 610, processor; 620, communication interface; 630, memory; 640, communication bus. DETAILED DESCRIPTION

[0050] To make the purpose, technical solutions and advantages of the present invention clearer, the technical solutions of the present invention will be further clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. It should be noted that the embodiments described are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.

[0051] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of the technical features being referred to. Thus, a feature identified as "first" or "second" may explicitly or implicitly include one or more of the features. In the description of the present invention, "plurality" means two or more, unless otherwise specifically defined.

[0052] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by those skilled in the art to which this application belongs. The terms used in this specification are for the purpose of describing specific embodiments only and are not intended to limit the present invention. As used herein, the term "and / or" includes any and all combinations of one or more of the associated listed items.

[0053] List elements are a common and crucial component in form design. They present large amounts of data in a structured manner, making it easy for users to view, compare, and analyze them. However, allocating list column widths has always been a challenge in form design. Different form lists may carry different types of data (such as text, numbers, dates, etc.), and each type of data requires different display space. Furthermore, different usage scenarios and user habits also place diverse and specific requirements on list column widths. Currently, existing list width allocation algorithms are mostly simple and fixed, making it difficult to meet the diverse needs of form lists in complex scenarios, resulting in irrational list column width allocation.

[0054] Example 1

[0055] The embodiment of the present invention provides a front-end list width setting method, which effectively solves the problem of unreasonable list column width distribution in complex scenarios. Figure 1 This is a first schematic diagram of the front-end list width setting method provided by an embodiment of the present invention. Figure 1 As shown, the method includes the following steps:

[0056] S100. Obtain list configuration information, and obtain data features of each column according to the list configuration information. The data features at least include maximum column width, average column width, required items, filling order, and list display order.

[0057] In an embodiment of the present invention, when the backend receives a list view rendering request, the backend system retrieves the list configuration information based on the list ID. The list configuration information includes all column width information and list column width types of the cached list. In this way, after the backend performs a query, the frontend does not need to perform a repeated query, thereby improving the system performance and response speed.

[0058] If the list column width type is default width or adaptive width, the backend will pass the corresponding configuration information to the frontend, which will render according to the settings and directly display the list according to the default width or adaptive width. Default width sets the list column width to a fixed value based on the resolution of the display device. This method is simple and direct, suitable for scenarios that do not have special requirements for column width and pursue quick setup and unified display effects. Adaptive width leaves the list column width to the frontend, which will automatically adjust the column width based on factors such as page layout and content length.

[0059] If the list column width type is smart width, the column width is calculated based on the length of each column data in the list, the resolution of the display device, and the user's manual settings. Specifically, first determine whether the user's manual modification mark exists. If the user has manually modified the list column width or turned off the smart width calculation, stop recalculating the list column width and respect the user's personalized settings. If the user has not manually modified the list column width or turned off the smart width calculation, perform the first rendering. To ensure the response speed of list rendering, the default width is used for the first rendering by default to avoid loading delays caused by complex calculations. If the list form data items are added or deleted, the smart width automatic calculation process will be re-entered to adjust the list layout in time to ensure that the list is always displayed in the best state.

[0060] After the page rendering is completed, the data characteristics of each column are obtained according to the list configuration information. The data characteristics include at least the maximum column width, average column width, required items, filling order and list display order. The weighted average and dynamic adjustment algorithms are used to accurately calculate the appropriate list column width for each column.

[0061] Specifically, the list data returned by the backend is read in a loop, and the maximum column width and average column width of each column are calculated. The maximum column width is the longest field width of all tables in a column, and the average column width is the average field width of all tables in a column. The required items, filling order and list display order are pre-set by the user according to actual conditions, and the list is rendered in the set order.

[0062] Optionally, the historically calculated width of the list, the weight data of the form control items corresponding to the list, and the weight data of each field in the list, which are returned along with the list data, will also be temporarily stored on the front end. The historically calculated width is the list column width previously calculated based on data characteristics and user needs. It records the optimal display width of the list in different situations. Temporarily storing the historically calculated width can preserve user usage habits and the display effect of the list to a certain extent. When the data has not changed significantly, the historical width can be used directly for display to improve the user experience. The weight data of the form control items corresponding to the list are calculated when the form design and page design are saved, and saved in the database table. These weight data reflect the importance of the form control in the overall list. The weight data of each field in the list is also calculated and stored in the database during the design and save phases. These weight data take into account factors such as the field data type and business importance.

[0063] S200 , obtaining the total resolution width of the display device. If the total resolution width is greater than or equal to the sum of the maximum column widths, displaying the list according to the maximum column width of each column. The sum of the maximum column widths is the sum of the maximum column widths of all columns.

[0064] Figure 2 This is a second schematic diagram of the front-end list width setting method provided by an embodiment of the present invention. Figure 2 As shown, step S200 specifically includes the following steps:

[0065] S210: If the total resolution width is equal to the sum of the maximum column widths, the list column width of each column is the maximum column width.

[0066] Sum the maximum widths of each column in the list to obtain the total maximum widths of all columns. Then compare this total maximum width to the total resolution width. If the total resolution width equals this total maximum width, it means the display device has enough space to display the content at the maximum length of each column without overflowing or displaying incomplete content. Displaying at the maximum width of each column allows each column in the list to fully display its content, avoiding information truncation due to space limitations.

[0067] S220. If the total resolution width is greater than the sum of the maximum column widths, the list column width of each column is the sum of the maximum column width and the remaining average width, and the remaining average width is the difference between the total resolution width and the sum of the maximum column widths divided by the total number of columns.

[0068] If the total resolution width is greater than the sum of the maximum column widths, this means the maximum lengths of all columns can be fully displayed within the device's resolution. To further optimize the list column width layout and prevent excessive widths of certain fields from causing overall disharmony, the remaining average width is calculated. This is the difference between the total resolution width and the sum of the maximum column widths, divided by the total number of columns. This relatively small value is used to fine-tune the width of each column while maintaining the overall layout. Therefore, the list column width of each column is the sum of the maximum column width and the remaining average width.

[0069] S300: If the total resolution width is smaller than the maximum column width sum, normalize the data features of each column to obtain a normalized result.

[0070] Figure 3 This is a third schematic diagram of the front-end list width setting method provided by an embodiment of the present invention. Figure 3 As shown, the normalization process specifically includes the following steps:

[0071] S310 : Divide the maximum column width of the target column by the maximum value in the maximum column width set of all columns to obtain a normalized maximum column width result.

[0072] In the embodiment of the present invention, the calculation formula of the normalized maximum column width is as follows:

[0073]

[0074] In the above formula, n 1 means the maximum column width normalized result, max_length Indicates the maximum column width of the target column. max ( max_lengths ) represents the maximum value among all the maximum column widths.

[0075] S320 : Divide the average width of the target column by the maximum value in the set of average widths of all columns to obtain a normalized average column width.

[0076] In the embodiment of the present invention, the calculation formula of the average column width normalization result is as follows:

[0077]

[0078] In the above formula, n 2 represents the average column width normalization result, avg_length Indicates the average column width of the target column. max ( avg_lengths ) represents the maximum value among the set of average column widths of all columns.

[0079] S330. If the target column is a required item, the normalized result of the required item is 1; if the target column is a non-required item, the normalized result of the required item is 0.

[0080] S340. Subtract the reporting order ratio from 1 to obtain a normalized result of the reporting order. The reporting order ratio is the ratio of the reporting order of the target column to the maximum reporting order.

[0081]

[0082] In the above formula, n 4 indicates the normalized result of the filling order. form_order Indicates the order in which the target columns are filled. max ( form_orders ) indicates the maximum filling order.

[0083] S350 , subtract the list display order ratio from 1 to obtain a list display order normalization result, where the list display order ratio is the ratio of the list display order of the target column to the maximum list display order.

[0084]

[0085] In the above formula, n 5 means the list displays the results in the normalized order. list_order Indicates the list display order of the target column, max ( list_orders ) indicates the maximum list display order.

[0086] S400 , setting feature weights of data features, calculating the width of each column according to the feature weights and normalization results, and obtaining an initial column width of each column.

[0087] In the embodiment of the present invention, a feature weight is assigned to each data feature based on actual conditions, and the total weight is 1. Optionally, the feature weights of maximum column width, average column width, required items, reporting order, and list display order are 0.4, 0.3, 0.1, 0.1, and 0.1, respectively.

[0088] Then, a weighted sum calculation is performed based on the feature weights and normalized results to obtain the initial column width of each column. The calculation formula for the initial column width is as follows:

[0089]

[0090] In the above formula, column_width Indicates the initial column width, w 1 represents the maximum column width weight, n 1 means the maximum column width normalized result, w 2 means average column width weight, n 2 represents the average column width normalization result, w3 indicates the required weight. n 3 indicates the normalized result of the required field. w 4 represents the weight of the filling order, n 4 indicates the normalized result of the filling order. w 5 represents the weight of the list display order, n 5 means the list displays the results in the normalized order.

[0091] S500: Dynamically adjust the initial column width according to the original list width, obtain the target list column width of each column, and display the list according to the target list column width.

[0092] When displaying a list on a web page or in an application, the list is typically placed in a container with a fixed width. This container width is the original table width visible to the user. Due to the varying number of columns and data content in a list, the sum of the initial column widths calculated using the above method may exceed the container width, resulting in an incomplete table display or the appearance of a horizontal scroll bar, impacting the user experience. Alternatively, the sum of the initial column widths may be significantly smaller than the container width, affecting the display quality. Therefore, the calculated column widths need to be dynamically adjusted based on the container width to ensure that the total width does not exceed the container width. Figure 4 This is a fourth schematic diagram of the front-end list width setting method provided by an embodiment of the present invention. Figure 4 As shown, the specific steps of dynamic adjustment are as follows:

[0093] S510 , performing sum calculation based on the initial column widths of all columns to obtain a total initial column width.

[0094] In an embodiment of the present invention, the initial column widths of all columns are summed to obtain the total initial column width. For example, a list has three columns with initial widths of 150px, 200px, and 250px, respectively. The total initial column width is 150+200+250=600px.

[0095] S520 : Perform division calculation based on the original list width and the total initial column width to obtain an adjustment factor.

[0096] In the embodiment of the present invention, the calculation formula of the adjustment factor is as follows:

[0097]

[0098] In the above formula, scaling_factor represents the adjustment factor, container_width Indicates the original list width, total_width Indicates the total initial column width.

[0099] For example, assuming that the container width is 300px and the total initial column width is 600px, the adjustment factor is 0.5; assuming that the container width is 900px and the total initial column width is 600px, the adjustment factor is 1.5.

[0100] S530 : Multiply the initial column width of each column by the adjustment factor to obtain the target list column width of each column.

[0101] In the embodiment of the present invention, the calculation formula for the list column width is as follows:

[0102]

[0103] In the above formula, final_column_width Indicates the target list column width.

[0104] By multiplying the initial list column width by the adjustment factor, the target list column width of each column will be scaled or enlarged in the same proportion, ensuring that the total width of the final list does not exceed the container width. For example, if the initial list column width is 200px, if the adjustment factor is 0.5, the target list column width will be scaled to 100px, and if the adjustment factor is 1.5, the target list column width will be scaled to 300px.

[0105] As a preferred implementation of an embodiment of the present invention, if the list column width type is smart width, but the user sets a fixed column width for a certain column or multiple columns, the corresponding columns after setting will no longer participate in the weight calculation, and the corresponding fixed width will be directly used for list display. When the user has specific requirements for the column width of certain fields in the list, personalized adjustments can be made, and the column width can be set separately for each column. This flexible setting method not only meets the user's personalized needs for special list column widths, but also retains the optimization function of smart width calculation for other columns, fully reflecting the concept of taking into account both intelligence and user autonomy.

[0106] The front-end list width setting method provided by the embodiment of the present invention can accurately meet the differences in data content and display requirements of different form lists in the low-code platform, allowing the list column width to be flexibly adjusted according to actual conditions, perfectly adapting to diverse business scenarios, and greatly reducing the amount of calculation and waiting time when rendering the list, ensuring that users can quickly see the loaded list content. Taking into account the various characteristics of each column of data, such as data length, required items, filling order, list display order, etc., and combining the display end resolution and user manual settings, using weighted average and dynamic adjustment algorithms, the appropriate width of each column is accurately calculated, effectively avoiding display problems caused by excessive or small column widths, making the list information clearer and neater, and significantly improving the visual aesthetics.

[0107] Example 2

[0108] Based on the same technical concept as the above method embodiment 1, the embodiment of the present invention provides a front-end list width setting system. Figure 5 This is a schematic diagram of the front-end list width setting system structure provided by an embodiment of the present invention. Figure 5 As shown, the front-end list width setting system 500 includes:

[0109] The information acquisition module 510 is used to obtain list configuration information and obtain data features of each column according to the list configuration information. The data features include at least maximum column width, average column width, required items, filling order and list display order.

[0110] The first calculation module 520 is used to obtain the total resolution width of the display device. If the total resolution width is greater than or equal to the total maximum column width, the list is displayed according to the maximum column width of each column. The total maximum column width is the sum of the maximum column widths of all columns.

[0111] The data processing module 530 is configured to normalize the data features of each column to obtain a normalized result if the total resolution width is smaller than the maximum column width sum.

[0112] The second calculation module 540 is used to set feature weights of data features, calculate the width of each column according to the feature weights and the normalization result, and obtain the initial column width of each column.

[0113] The column width adjustment module 550 is used to dynamically adjust the initial column width according to the original list width, obtain the target list column width of each column, and display the list according to the target list column width.

[0114] The front-end list width setting system provided by the embodiment of the present invention meets the differences in data content and display requirements of different form lists in the low-code platform, so that the list column width can be flexibly adjusted according to actual conditions and adapted to diverse business scenarios. Through reasonable algorithm design and processing flow, the amount of calculation and waiting time during list rendering are reduced, ensuring that users can quickly see the loaded list content. When changes such as additions and deletions occur in the list data, the system can automatically detect and recalculate the list column width, and adjust the list layout in time to ensure that users always see the list with the best display effect without manual intervention, thereby improving the automation and intelligence level of the system.

[0115] It can be understood that the implementation method of the front-end list width setting method described in the above embodiment 1 is also applicable to this embodiment and can achieve the same technical effect, so it will not be repeated here.

[0116] Example 3

[0117] Based on the same concept, an embodiment of the present invention further provides an electronic device, Figure 6is a schematic structural diagram of an electronic device provided by an embodiment of the present invention, such as Figure 6 As shown, the electronic device 600 may include: a processor 610, a communication interface 620, a memory 630, and a communication bus 640, wherein the processor 610, the communication interface 620, and the memory 630 communicate with each other via the communication bus 640. The processor 610 may call the logic instructions in the memory 630 to execute the steps of the front-end list width setting method described in the above embodiments. For example, the steps include:

[0118] S100, obtaining list configuration information, and obtaining data characteristics of each column according to the list configuration information, wherein the data characteristics include at least maximum column width, average column width, required items, filling order, and list display order;

[0119] S200: Obtain the total resolution width of the display device. If the total resolution width is greater than or equal to the sum of the maximum column widths, display the list according to the maximum column width of each column. The sum of the maximum column widths is the sum of the maximum column widths of all columns.

[0120] S300: If the total resolution width is less than the maximum column width sum, normalize the data features of each column to obtain a normalized result;

[0121] S400: Setting feature weights of data features, calculating the width of each column based on the feature weights and normalization results, and obtaining an initial column width of each column;

[0122] S500: Dynamically adjust the initial column width according to the original list width, obtain the target list column width of each column, and display the list according to the target list column width.

[0123] The processor 610 may be a central processing unit (CPU). The processor may also be other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA), other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, or a combination of these chips.

[0124] Furthermore, the logic instructions in the aforementioned memory 630 can be implemented as software functional units and, when sold or used as independent products, can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the portion that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions for causing a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in various embodiments of the present invention. The aforementioned storage medium includes various media capable of storing program code, such as a USB flash drive, a mobile hard drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0125] The memory 630 may include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function; the data storage area may store data created by the processor, etc. In addition, the memory may include a high-speed random access memory, and may also include a non-transitory memory, such as at least one disk storage device, a flash memory device, or other non-transitory solid-state storage device. In some embodiments, the memory may optionally include a memory remotely located relative to the processor, and these remote memories may be connected to the processor via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0126] Example 4

[0127] Based on the same concept, an embodiment of the present invention further provides a computer-readable storage medium storing a computer program. The computer program includes at least one code segment that can be executed by a main control device to control the main control device to implement the steps of the front-end list width setting method described in the above embodiments. For example, the steps include:

[0128] S100, obtaining list configuration information, and obtaining data characteristics of each column according to the list configuration information, wherein the data characteristics include at least maximum column width, average column width, required items, filling order, and list display order;

[0129] S200: Obtain the total resolution width of the display device. If the total resolution width is greater than or equal to the sum of the maximum column widths, display the list according to the maximum column width of each column. The sum of the maximum column widths is the sum of the maximum column widths of all columns.

[0130] S300: If the total resolution width is less than the maximum column width sum, normalize the data features of each column to obtain a normalized result;

[0131] S400: Setting feature weights of data features, calculating the width of each column based on the feature weights and normalization results, and obtaining an initial column width of each column;

[0132] S500: Dynamically adjust the initial column width according to the original list width, obtain the target list column width of each column, and display the list according to the target list column width.

[0133] Based on the same technical concept, an embodiment of the present invention further provides a computer program, which, when executed by a main control device, is used to implement the above method embodiment.

[0134] In summary, the front-end list width setting method, system, electronic device and storage medium provided by the present invention can accurately meet the differences in data content and display requirements of different form lists in the low-code platform, allowing the list column width to be flexibly adjusted according to actual conditions, perfectly adapting to diverse business scenarios, and greatly reducing the amount of calculation and waiting time when rendering the list, ensuring that users can quickly see the loaded list content. Taking into account the various characteristics of each column of data, such as data length, required items, filling order, list display order, etc., and combining the display end resolution and user manual settings, using weighted average and dynamic adjustment algorithms, the appropriate width of each column is accurately calculated, effectively avoiding display problems caused by excessive or small column widths, making the list information clearer and neater, and significantly improving the visual aesthetics. When changes such as additions and deletions occur in the list data, the system can automatically detect and recalculate the list column width, and adjust the list layout in time to ensure that the user always sees the list with the best display effect, without the need for manual intervention, thereby improving the automation and intelligence level of the system.

[0135] References herein to "embodiments" mean that a particular feature, structure, or characteristic described in connection with the embodiments may be included in at least one embodiment of the present application. The appearance of this phrase in various places in the specification does not necessarily refer to the same embodiment, nor does it constitute an independent or alternative embodiment that is mutually exclusive of other embodiments. It is understood, both explicitly and implicitly, by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0136] The above-described embodiments merely illustrate several implementations of the present invention, and while their descriptions are relatively specific and detailed, they should not be construed as limiting the scope of the present invention. It should be noted that a person skilled in the art would be able to make numerous variations and improvements without departing from the spirit of the present invention, all of which fall within the scope of protection of the present invention. Therefore, the scope of protection of the present invention shall be determined by the appended claims.

[0137] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various embodiments of the present invention.

Claims

1. A method for setting the width of a front-end list, characterized in that: The method comprises: Obtain list configuration information, and obtain data characteristics of each column according to the list configuration information, wherein the data characteristics include at least maximum column width, average column width, required items, filling order, and list display order; Obtaining the total resolution width of the display device; if the total resolution width is greater than or equal to the sum of the maximum column widths, displaying the list according to the maximum column width of each column, where the sum of the maximum column widths is the sum of the maximum column widths of all columns; If the total resolution width is smaller than the sum of the maximum column widths, normalizing the data features of each column to obtain a normalized result; Setting feature weights of the data features, calculating the width of each column according to the feature weights and the normalization results, and obtaining an initial column width of each column; Dynamically adjust the initial column width according to the original list width to obtain the target list column width of each column, and display the list according to the target list column width; The normalization process is performed on the data features of each column to obtain a normalized result, including: Divide the maximum column width of the target column by the maximum value of the maximum column width set of all columns to obtain the normalized maximum column width result; Dividing the average width of the target column by the maximum value of the average width set of all columns to obtain a normalized average column width result; If the target column is a required item, the normalized result of the required item is 1; if the target column is not a required item, the normalized result of the required item is 0; Subtracting the reporting order ratio of the target column from 1 to obtain a reporting order normalization result, where the reporting order ratio is the ratio of the reporting order of the target column to the maximum reporting order; A list display order normalization result is obtained by subtracting the list display order ratio of the target column from 1, where the list display order ratio is the ratio of the list display order of the target column to the maximum list display order.

2. The method for setting the front-end list width according to claim 1, wherein: If the total resolution width is greater than or equal to the sum of the maximum column widths, a list display is performed based on the maximum column width of each column, including: If the total resolution width is equal to the sum of the maximum column widths, the list column width of each column is the maximum column width; If the total resolution width is greater than the sum of the maximum column widths, the list column width of each column is the sum of the maximum column width and the remaining average width, and the remaining average width is the difference between the total resolution width and the sum of the maximum column widths divided by the total number of columns.

3. The method for setting the front-end list width according to claim 1, wherein: The calculation formula for the initial column width is as follows: In the above formula, column_width Indicates the initial column width, w 1 represents the maximum column width weight, n 1 means the maximum column width normalized result, w 2 means average column width weight, n 2 represents the average column width normalization result, w 3 indicates the required weight. n 3 indicates the normalized result of the required field. w 4 represents the weight of the filling order, n 4 indicates the normalized result of the filling order. w 5 represents the weight of the list display order, n 5 means the list displays the results in the normalized order.

4. The method for setting the front-end list width according to claim 3, wherein: The dynamically adjusting the initial column width according to the original list width to obtain the target list column width of each column includes: Calculate the total initial column width by adding up the initial column widths of all columns; Perform division calculation based on the original list width and the total initial column width to obtain an adjustment factor; The initial column width of each column is multiplied by the adjustment factor to obtain the target list column width of each column.

5. The method for setting the front-end list width according to claim 1, wherein: The method further comprises: Determine the list column width type according to the list configuration information; If the list column width type is default width or adaptive width, the list is displayed directly according to the default width or the adaptive width; If the list column width type is smart width, the data features of each column are calculated according to the list configuration information.

6. The method for setting the front-end list width according to claim 5, wherein: If the list column width type is smart width and the target column is set to fixed column width, the target column uses the fixed column width for list display.

7. A front-end list width setting system, characterized in that: The system comprises: An information acquisition module is used to obtain list configuration information and obtain data characteristics of each column according to the list configuration information, wherein the data characteristics include at least maximum column width, average column width, required items, filling order, and list display order; A first calculation module is configured to obtain a total resolution width of a display device, and if the total resolution width is greater than or equal to the sum of maximum column widths, display the list according to the maximum column width of each column, where the sum of maximum column widths is the sum of the maximum column widths of all columns; a data processing module, configured to normalize the data features of each column to obtain a normalized result if the total resolution width is smaller than the sum of the maximum column widths; a second calculation module, configured to set a feature weight of the data feature, calculate the width of each column according to the feature weight and the normalization result, and obtain an initial column width of each column; A column width adjustment module is used to dynamically adjust the initial column width according to the original list width, obtain the target list column width of each column, and display the list according to the target list column width; The normalization process is performed on the data features of each column to obtain a normalized result, including: Divide the maximum column width of the target column by the maximum value of the maximum column width set of all columns to obtain the normalized maximum column width result; Dividing the average width of the target column by the maximum value of the average width set of all columns to obtain a normalized average column width result; If the target column is a required item, the normalized result of the required item is 1; if the target column is not a required item, the normalized result of the required item is 0; Subtracting the reporting order ratio of the target column from 1 to obtain a reporting order normalization result, where the reporting order ratio is the ratio of the reporting order of the target column to the maximum reporting order; A list display order normalization result is obtained by subtracting the list display order ratio of the target column from 1, where the list display order ratio is the ratio of the list display order of the target column to the maximum list display order.

8. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: The processor executes the computer program to implement the front list width setting method according to any one of claims 1 to 6.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method for setting the front list width according to any one of claims 1 to 6 is implemented.

Images