CN115935925A - Form adapting method, electronic device and computer readable storage medium - Google Patents
Form adapting method, electronic device and computer readable storage medium Download PDFInfo
- Publication number
- CN115935925A CN115935925A CN202211332296.8A CN202211332296A CN115935925A CN 115935925 A CN115935925 A CN 115935925A CN 202211332296 A CN202211332296 A CN 202211332296A CN 115935925 A CN115935925 A CN 115935925A
- Authority
- CN
- China
- Prior art keywords
- width
- column
- target
- current
- adaptation
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The application provides a form adapting method, an electronic device and a computer readable storage medium, wherein the method comprises the following steps: s1: acquiring the current width of a target interface in real time; s2: detecting whether the current width is larger than the preset interface width or not; if not, executing S3; if so, executing S4; s3: acquiring the fixed width of each column in the target table to generate a first adaptive table; s4: based on the current width, the width of each column in the target table is assigned to obtain a second adapted table. Determining the width of a blank column based on the current width W1 and the width W2 of the first column in the first adaptive table, wherein the width of the blank column is not less than W1-W2; blank columns are added at the end of the first adaptation table based on their width to achieve data alignment. The method can make the form adapt to the interfaces with different sizes well, improve the self-adapting capability of the form, facilitate the reading and checking of a user and improve the adaptation efficiency.
Description
Technical Field
The present application relates to the field of front-end development technologies, and in particular, to a form adaptation method, an electronic device, and a computer-readable storage medium.
Background
A form is one of the basic Interface elements that are often used in front-end development, and UI (User Interface) presentation of a form is critical to User experience and data presentation. Because the screen sizes of different terminal devices are different, when webpage data are loaded through the terminal devices, the webpage form needs to adapt to the screens of the different terminal devices, so that a good display effect is achieved.
Js-based table developed by a table component in a framework plug-in has powerful functions, but is not friendly to the appearance effect of the conditions of displaying industrial data, company production data and the like which need a large number of data columns.
Patent CN106681972a discloses a table display method, comprising: calculating the sum of all columns currently displayed in the table and the column width of the column with the highest weight value in the current weight list, wherein each column to be determined whether to be displayed or not and the weight value corresponding to each column are stored in the weight list; detecting whether the sum of the column widths is larger than the total width that the table can display; if the sum of the column widths is less than or equal to the total displayable width of the table, displaying the column with the highest weight value in the table, deleting the column with the highest weight value and the weight value corresponding to the column from a weight list, taking the weight list after deleting the column as a current weight list, and repeatedly executing the step of calculating the sum of the column widths; if the sum of the column widths is larger than the total displayable width of the table, hiding each column in the current weight list, and displaying all columns currently displayed in the table on the terminal equipment. The method adjusts the table through the weight value and the weight list, and is complex to operate.
Based on this, the present application provides a form adaptation method, an electronic device, and a computer-readable storage medium to improve the prior art.
Disclosure of Invention
The application aims to provide a form adapting method, an electronic device and a computer readable storage medium, which can enable a form to be well adapted to interfaces with different sizes, improve the self-adapting capability of the form, facilitate reading and checking of a user and improve the adapting efficiency.
The purpose of the application is realized by adopting the following technical scheme:
in a first aspect, the present application provides a form adaptation method, including:
s1: acquiring the current width of a target interface in real time;
s2: detecting whether the current width is larger than a preset interface width; if not, executing S3; if so, executing S4;
s3: acquiring the fixed width of each column in the target table to generate a first adaptive table;
s4: and based on the current width, assigning a width of each column in the target table to obtain a second adaptive table.
The technical scheme has the beneficial effects that: acquiring the current width of a target interface (the width of the target interface at the current moment) in real time, detecting whether the current width is larger than the preset interface width, and if the current width is not larger than the preset interface width, acquiring the fixed width of each column in a target table to generate a first adaptive table; and if the current width is larger than the preset interface width, based on the current width, assigning a value to the width of each column in the target table to obtain a second adaptive table. When the current width of the interface is not larger than the preset interface width, directly acquiring the fixed width of each column in the target table to generate a first adaptation table, so that complex adaptation operation is avoided, and the first adaptation table is more regular and uniform; when the current width of the interface is larger than the preset interface width, performing assignment operation to obtain a second adaptation table, so that the second adaptation table can be flexibly adjusted along with the change of the current width of the interface; the method can make the form adapt to the interfaces with different sizes well, improve the self-adapting capability of the form, facilitate the reading and checking of a user and improve the adaptation efficiency.
The method can ensure that the form is well adapted to interfaces with different sizes, so as to improve the self-adapting capability of the form, facilitate the reading and checking of a user and improve the adaptation efficiency.
In some optional embodiments, the obtaining the current width of the target interface in real time includes:
and monitoring the width of the target interface in real time by using a monitor to obtain the current width.
The technical scheme has the beneficial effects that: and monitoring the width of the target interface in real time by using a monitor so as to obtain the current width. The width of the target interface can be acquired in real time, the intelligent degree is high, the labor cost is saved, if the width of the target interface is not monitored in real time by using a monitor, the width of various target interfaces needs to be input in advance, the time and the labor are consumed, and errors are easy to occur; the method for acquiring the current width can not only ensure that the acquisition operation is not missed when the width of the target interface is changed, but also improve the acquisition efficiency.
In some optional embodiments, the monitoring, by a monitor, the width of the target interface in real time to obtain the current width includes:
detecting whether the width of the target interface changes or not by using a monitor;
if the target interface changes, the changed width of the target interface is obtained and used as the current width;
if no change occurs, no action is taken.
The technical scheme has the beneficial effects that: detecting whether the width of a target interface changes or not by using a monitor; if the width of the target interface changes, acquiring the changed width of the target interface as the current width; and if the width of the target interface is not changed, not operating. The width change of the target interface can be obtained by detecting the width of the target interface based on the monitor, the intelligent degree is high, the detection effect is good, the detection result can be quickly obtained, and the detection efficiency is high;
if the width of the target interface is not changed, other operations are not needed, the current width does not need to be obtained and stored again, and the storage and calculation resources are saved;
and if the change of the width of the target interface is detected, acquiring the changed width of the target interface as the current width, which is the basis for ensuring the form to be adapted to the current width.
In some optional embodiments, the obtaining a fixed width of each column in the target table to generate a first adapted table includes:
acquiring the average data length of each column in the target table;
determining a fixed width of each column in the target table based on an average data length of each column in the target table to generate the first fit table.
The technical scheme has the beneficial effects that: the method comprises the steps of obtaining the average data length of each column in a target table, determining the fixed width of each column in the target table according to the average data length of each column in the target table (the fixed width of each column means that the width of the column is fixed and invariable, and the widths of different columns can be different), and generating a first adaptive table by taking the fixed width of each column in the target table as the column width. This approach may allow a fixed width of each column in the target table to accommodate the average data length, which is beneficial to ensure that each column of the first fit table may better display the data (data in each cell).
In some optional embodiments, the determining the fixed width of each column in the target table based on the average data length of each column in the target table comprises:
determining the fixed width of each column in the target table and storing the fixed width to a preset array based on the average data length of each column in the target table;
the generating the first adaptation table includes:
and acquiring the fixed width of each column in the target table from the preset array to generate the first adaptive table.
The technical scheme has the beneficial effects that: based on the average data length of each column in the target table, determining the fixed width of each column in the target table and storing the fixed width to a preset array, then obtaining the fixed width of each column in the target table from the preset array (calling data in the preset array), and generating a first adaptive table. The method can store the fixed width of each column in the target table, can call the data in the preset array at any time, can recycle the data, saves the code amount of a program, is convenient for unified modification and calculation, and has higher operation efficiency.
In some optional embodiments, the assigning the width of each column in the target table to obtain the second adaptation table based on the current width includes:
determining a width of each column in the target table based on the current width, the number of columns in the target table, and an average data length of each column in the target table to generate the second adaptation table, the width of the second adaptation table being the same as the current width.
The technical scheme has the beneficial effects that: determining the width of each column in the target table according to the current width, the number of columns of the target table and the average data length of each column in the target table to generate a second adaptive table (obtained in real time according to the current width, the number of columns of the target table and the average data length of each column in the target table); the second adaptive form can be ensured to occupy the whole target interface in the target interfaces with different widths, so that the problem that a user cannot clearly read due to the fact that the current width of the target interface is increased, but the target form is small is solved, and the form is visual and more attractive.
In some optional embodiments, the obtaining a fixed width of each column in the target table to generate a first adapted table further includes:
determining the width of a blank column based on the current width W1 and the width W2 of a first column in the first adaptation table, wherein the width of the blank column is not less than W1-W2;
and adding a blank column at the end of the first adaptive table based on the width of the blank column to realize data alignment, so that the first column can be adjacent to any column in the process of sliding the scroll bar of the first adaptive table from side to side.
The technical scheme has the beneficial effects that: firstly, acquiring a current width W1 and a width W2 of a first column in a first adaptation table, setting the width of a blank column at the end of the first adaptation table to be not less than W1-W2 (the difference between the current width and the width of the first column in the first adaptation table), and adding the blank column at the end of the first adaptation table based on the width of the blank column to realize data alignment, so that the first column can be adjacent to any column in the process of sliding a scroll bar of the first adaptation table left and right. The method can align any column of data in the first adaptive table with the first column of data (the first column is fixed in position) so as to achieve the effect of better comparing the data, and in the process of sliding the scroll bar of the first adaptive table left and right, a user can slide any column to be in border with the first column due to blank columns, so that the relationship between the data in the first column and any column can be checked more conveniently.
In a second aspect, the present application provides an electronic device comprising a memory storing a computer program and a processor configured to implement the following steps when executing the computer program:
s1: acquiring the current width of a target interface in real time;
s2: detecting whether the current width is larger than a preset interface width; if not, executing S3; if yes, executing S4;
s3: acquiring the fixed width of each column in the target table to generate a first adaptive table;
s4: and based on the current width, assigning a width of each column in the target table to obtain a second adaptive table.
In some optional embodiments, the processor is configured to obtain the current width of the target interface in real-time when executing the computer program in the following manner:
and monitoring the width of the target interface in real time by using a monitor to obtain the current width.
In some optional embodiments, the processor is configured to execute the computer program to listen in real-time to the width of the target interface with a listener to obtain the current width in the following manner:
detecting whether the width of the target interface changes or not by using a monitor;
if the target interface changes, the changed width of the target interface is obtained and used as the current width;
if no change occurs, no action is taken.
In some optional embodiments, the processor is configured to obtain the fixed width of each column in the target table to generate the first adapted table by:
acquiring the average data length of each column in the target table;
determining a fixed width of each column in the target table based on the average data length of each column in the target table to generate the first adaptation table.
In some optional embodiments, the processor is configured to determine the fixed width of each column in the target table based on the average data length of each column in the target table in the following manner when executing the computer program:
determining the fixed width of each column in the target table and storing the fixed width to a preset array based on the average data length of each column in the target table;
the generating the first adaptation table includes:
and acquiring the fixed width of each column in the target table from the preset array to generate the first adaptive table.
In some optional embodiments, the processor is configured to execute the computer program to assign a value to a width of each column in the target table to obtain the second adapted table based on the current width in the following manner:
determining a width of each column in the target table based on the current width, the number of columns in the target table, and an average data length of each column in the target table to generate the second adaptation table, the width of the second adaptation table being the same as the current width.
In some optional embodiments, the processor is configured to obtain the fixed width of each column in the target table to generate the first adapted table by:
determining the width of a blank column based on the current width W1 and the width W2 of a first column in the first adaptation table, wherein the width of the blank column is not less than W1-W2;
and adding a blank column at the end of the first adaptation table based on the width of the blank column to realize data alignment, so that the first column can be adjacent to any column in the process of sliding the scroll bar of the first adaptation table left and right.
In a third aspect, the present application provides a computer readable storage medium having stored thereon a computer program which, when executed by a processor, carries out the steps of any of the methods described above.
Drawings
The present application is further described below with reference to the accompanying drawings and embodiments.
Fig. 1 shows a flowchart of a form adaptation method provided in an embodiment of the present application.
Fig. 2 illustrates a flowchart of generating a first adaptation table according to an embodiment of the present application.
Fig. 3 shows a schematic diagram of a first adaptation table provided in an embodiment of the present application.
Fig. 4 illustrates a schematic diagram for adding a blank column according to an embodiment of the present application.
Fig. 5 is a diagram illustrating a second adaptation table provided in an embodiment of the present application.
Fig. 6 shows a schematic structural diagram of an electronic device provided in an embodiment of the present application.
Fig. 7 shows a schematic structural diagram of a program product provided in an embodiment of the present application.
Detailed Description
The following embodiments are further described with reference to the accompanying drawings and the detailed description, and it should be noted that, in the case of no conflict, any combination between the embodiments or technical features described below may form a new embodiment.
In the embodiments of the present application, "at least one" means one or more, and "a plurality" means two or more. "and/or" describes the association relationship of the associated objects, meaning that there may be three relationships, e.g., a and/or B, which may mean: a alone, A and B together, and B alone, wherein A and B may be singular or plural. The character "/" generally indicates that the former and latter associated objects are in an "or" relationship. "at least one of the following" or similar expressions refer to any combination of these items, including any combination of the singular or plural items. For example, at least one (one) of a, b, or c, may represent: a, b, c, a and b, a and c, b and c, a and b and c, wherein a, b and c can be single or multiple. It is to be noted that "at least one item" may also be interpreted as "one or more item(s)".
It should also be noted that in the embodiments of the present application, words such as "exemplary" or "for example" are used to indicate examples, illustrations or descriptions. Any embodiment or design described herein as "exemplary" or "e.g.," is not necessarily to be construed as preferred or advantageous over other embodiments or designs. Rather, use of the word "exemplary" or "such as" is intended to present concepts related in a concrete fashion.
First, one of the technical fields (front-end development) of the present application will be briefly described below.
The front-end development is a process of creating a WEB page or APP and other front-end interfaces and presenting the front-end interfaces to a user, and user interface interaction of an internet product is realized through HTML, CSS and JavaScript and various derived technologies, frames and solutions.
The front-end development is evolved from webpage making, and has obvious era characteristics in name. In the evolution process of the Internet, webpage making is a product of the Web1.0 era, the main content of early websites is static, pictures and characters are taken as the main content, and the behavior of using websites by users is also taken as the main content. With the development of the internet technology and the application of HTML5 and CSS3, the modern webpage is more beautiful, the interaction effect is obvious, and the function is more powerful.
Front-end development has brought a large number of high-performance mobile terminal device applications following mobile internet development. HTML5, wide application of node. JS, various UI frames and JS library layers are infinite, and the development difficulty is gradually improved.
Form adaptation is an indispensable ring in the field of web front-end development in the website development and production industry, and visualization and interaction effects are realized by debugging forms.
Method embodiment
Referring to fig. 1, fig. 1 shows a flowchart of a form adaptation method provided in an embodiment of the present application.
The embodiment of the application provides a form adapting method, which comprises the following steps:
s1: acquiring the current width of a target interface in real time;
s2: detecting whether the current width is larger than a preset interface width; if not, executing S3; if so, executing S4;
s3: acquiring the fixed width of each column in the target table to generate a first adaptive table;
s4: and based on the current width, assigning a width of each column in the target table to obtain a second adaptive table.
Therefore, the current width of the target interface (the width of the target interface at the current moment) is obtained in real time, whether the current width is larger than the preset interface width or not is detected, and if the current width is not larger than the preset interface width, the fixed width of each column in the target table is obtained to generate a first adaptive table;
and if the current width is larger than the preset interface width, based on the current width, assigning the width of each column in the target table to obtain a second adaptive table.
When the current width of the interface is not larger than the preset interface width, directly acquiring the fixed width of each column in the target table to generate a first adaptation table, so that complex adaptation operation is avoided, and the first adaptation table is more regular and uniform;
when the current width of the interface is larger than the preset interface width, performing assignment operation to obtain a second adaptation table, so that the second adaptation table can be flexibly adjusted along with the change of the current width of the interface;
the method can make the form adapt to the interfaces with different sizes well, improve the self-adapting capability of the form, facilitate the reading and checking of a user and improve the adaptation efficiency.
The target interface is not limited in the embodiment of the application, and may be, for example, a fixed screen of a mobile phone, a foldable screen, a notebook screen, a computer screen, a television screen, a screen of an intelligent wearable device, and an interface of various applications.
The current width of the target interface is not limited in the embodiments of the present application, and may be, for example, 10px, 30px, 50px, 60px, 100px, 200px, 500px, 650px, 800px, 1000px, 1500px, 3000px, 5000px, 10000px, etc. Where px refers to pixels, px is the smallest unit of a digital image or graphic that can be displayed and represented on a digital display device. A pixel is a basic logical unit in a digital pattern.
The preset interface width is not limited in the embodiment of the present application, and may be, for example, 10px, 30px, 50px, 60px, 100px, 200px, 500px, 650px, 800px, 1000px, 1500px, 3000px, 5000px, 10000px, or the like.
In the embodiment of the present application, neither the first adaptation table nor the second adaptation table is limited, and the first adaptation table and the second adaptation table may be any table that can adapt to a target interface, such as an Excel table, a Word table, a PPT table, a WPS table, a FineReport table, and a SeaTable table.
In some optional embodiments, the obtaining the current width of the target interface in real time (i.e., step S1) includes:
and monitoring the width of the target interface in real time by using a monitor to obtain the current width.
Therefore, the width of the target interface is monitored in real time by using the monitor, so that the current width is obtained.
The width of the target interface can be acquired in real time, the intelligent degree is high, the labor cost is saved, if the width of the target interface is not monitored in real time by using a monitor, the width of various target interfaces needs to be input in advance, the time and the labor are consumed, and errors are easy to occur;
the method for acquiring the current width can not only ensure that the acquisition operation is not missed when the width of the target interface is changed, but also improve the acquisition efficiency.
The listener is not limited in this embodiment of the application, and may be, for example, a watch snoop function in the vue framework, configured to snoop a change of a value, where a snooping object may be a variable or an object. The watch function is a method for the listening function provided inside the vue framework and can be used to drive some operations with specific data changes in response to data changes.
In some alternative embodiments, the watch snoop function accepts two parameters handler: function (newVal, oldVal), the first argument (newVal) representing the new value after change, the second argument (oldVal) representing the value before change. The snooped data must be data declared in data or in the props passed by the parent component to the child component, and the snoop function has two functions: 1. immediate function: component loading immediately triggers callback function execution (typically, the snoop function is not executed when data is bound for the first time, and is executed only when data changes, so the immediate property is needed to execute the snoop function if data needs to be bound for the first time). 2. deep function: i.e. a deep snoop function, which is used when complex types of data are used, for example, when the content of an object in an array changes, in order to discover changes in the data inside the object, and the deep snoop function is not needed when monitoring changes in the array. However, the deep snoop function cannot snoop the change of the array and the new addition of the object, and can only be listened to by triggering in a response mode.
In some optional embodiments, the monitoring, by a monitor, the width of the target interface in real time to obtain the current width includes:
detecting whether the width of the target interface changes or not by using a monitor;
if the target interface changes, the changed width of the target interface is obtained as the current width;
if no change occurs, no action is taken.
Therefore, whether the width of the target interface changes or not is detected by using the monitor; if the width of the target interface changes, the changed width of the target interface is obtained as the current width; and if the width of the target interface is not changed, not operating.
The width change of the target interface can be obtained by detecting the width of the target interface based on the monitor, the intelligent degree is high, the detection effect is good, the detection result can be quickly obtained, and the detection efficiency is high;
if the width of the target interface is not detected to be changed, other operations are not needed, the current width does not need to be obtained and stored again, and storage and calculation resources are saved;
and if the change of the width of the target interface is detected, acquiring the changed width of the target interface as the current width, which is the basis for guaranteeing the adaptation of the form to the current width.
In some optional embodiments, a variable screen width is declared first to store the current width of the target interface, the change of the screen width attribute value is monitored, the changed value of the screen width is printed and observed, the current width is obtained once every preset time length, and the current width is assigned to the screen width in the data.
Referring to fig. 2, fig. 2 shows a schematic flowchart for generating a first adaptation table according to an embodiment of the present application.
In some optional embodiments, the obtaining a fixed width of each column in the target table to generate a first adaptation table (i.e., step S3) includes:
step S201: acquiring the average data length of each column in the target table;
step S202: determining a fixed width of each column in the target table based on an average data length of each column in the target table to generate the first fit table.
Therefore, the average data length of each column in the target table is obtained, the fixed width of each column in the target table is determined according to the average data length of each column in the target table (the fixed width of each column means that the width of the column is fixed and constant, and the widths of different columns can be different), and then the fixed width of each column in the target table is taken as the column width to generate the first adaptive table.
The method can enable the fixed width of each column in the target table to accommodate the average data length, and is beneficial to ensure that each column of the first adaptive table can better display data (data in each cell).
The average data length of each column in the target table is not limited in the embodiments of the present application, and may be, for example, 1 byte, 2 bytes, 3 bytes, 5 bytes, 7 bytes, 8 bytes, 10 bytes, 15 bytes, 16 bytes, 32 bytes, 64 bytes, 128 bytes, 526 bytes, 1024 bytes, and the like.
In some optional embodiments, the determining the fixed width of each column in the target table based on the average data length of each column in the target table comprises:
determining the fixed width of each column in the target table and storing the fixed width to a preset array based on the average data length of each column in the target table;
the generating the first adaptation table includes:
and acquiring the fixed width of each column in the target table from the preset array to generate the first adaptive table.
Therefore, based on the average data length of each column in the target table, the fixed width of each column in the target table is determined and stored in the preset array, and then the fixed width of each column in the target table is obtained from the preset array (data in the preset array is called), so that a first adaptive table is generated.
The method not only can store the fixed width of each column in the target table, but also can call the data in the preset array at any time, can recycle the data, saves the code amount of a program, is convenient for unified modification and calculation, and has higher operation efficiency.
The preset array is not limited in the embodiment of the present application, and may be, for example, a numerical array, a character array, a variable array, or the like. An Array (Array) is an ordered sequence of elements that is used to store a plurality of sets of data of the same type. The individual variables that make up an array are referred to as the elements of the array, also referred to as the elements of the array, and sometimes as subscript variables. An array is a data form in which a plurality of elements having the same type are organized in an ordered form for processing convenience in program design, and a collection of the ordered homogeneous elements is called an array. The preset arrays in the application are arrays which are sorted according to the number of columns and used for storing the fixed width of each column in the target table.
In some optional embodiments, the assigning the width of each column in the target table to obtain the second adaptation table based on the current width (i.e., step S4) includes:
determining a width of each column in the target table based on the current width, the number of columns in the target table, and an average data length of each column in the target table to generate the second adaptation table, the width of the second adaptation table being the same as the current width.
Therefore, the width of each column in the target table is determined according to the current width, the number of columns of the target table and the average data length of each column in the target table to generate a second adaptive table (obtained in real time according to the current width, the number of columns of the target table and the average data length of each column in the target table);
the second adaptive form can be ensured to occupy the whole target interface in the target interfaces with different widths, so that the problem that a user cannot clearly read due to the fact that the current width of the target interface is increased, but the target form is small is solved, and the form is visual and more attractive.
The number of columns of the target table is not limited in the embodiments of the present application, and may be, for example, 1, 2, 3, 5, 7, 8, 10, 15, 16, 32, 64, 128, 526, and the like.
In some optional embodiments, a value of a preset ratio may be assigned to a colWidth array (i.e., a preset array, where the colWidth array may store a column width value of each column in the target table according to an average data length of each column in the target table) according to the current width of the target interface, where the colWidth array may be planned according to an average data length of each column in the target table.
In some optional embodiments, the obtaining a fixed width of each column in the target table to generate a first adaptation table (i.e., step S3) further includes:
determining the width of a blank column based on the current width W1 and the width W2 of a first column in the first adaptation table, wherein the width of the blank column is not less than W1-W2;
and adding a blank column at the end of the first adaptation table based on the width of the blank column to realize data alignment, so that the first column can be adjacent to any column in the process of sliding the scroll bar of the first adaptation table left and right.
Therefore, the current width W1 and the width W2 of the first column in the first adaptation table are obtained firstly, the width of a blank column at the end of the first adaptation table is set to be not less than W1-W2 (the difference between the current width and the width of the first column in the first adaptation table), and the blank column is added at the end of the first adaptation table based on the width of the blank column to realize data alignment, so that the first column can be adjacent to any column in the process of sliding the scroll bar of the first adaptation table from left to right.
The method can align any column of data in the first adaptive table with the first column of data (the first column is fixed in position) so as to achieve the effect of better comparing the data, and in the process of sliding the scroll bar of the first adaptive table left and right, a user can slide any column to be in border with the first column due to blank columns, so that the relationship between the data in the first column and any column can be checked more conveniently.
The width of the blank column is not limited in the embodiment of the present application, and may be, for example, 10px, 30px, 50px, 60px, 100px, 200px, 500px, 650px, 800px, 1000px, 1500px, 3000px, 5000px, or the like. In one example, the current width is 1200px, the width of the first column in the first adaptation table is 150px, and the width of the blank column at the end of the first adaptation table is not less than 1050px.
Referring to fig. 3 to 5, fig. 3 shows a schematic diagram of a first adaptation table provided in an embodiment of the present application, fig. 4 shows a schematic diagram of adding a blank column provided in an embodiment of the present application, and fig. 5 shows a schematic diagram of a second adaptation table provided in an embodiment of the present application.
In a specific embodiment, first, a listener is used to obtain the current width of a target interface, and declares a variable, namely, a screenWidth, for storing the current width of the target interface, and then the listener (watch snoop function) is used to detect whether the width of the target interface changes, and if the width of the target interface changes, the changed width of the target interface is obtained as the current width; if the width of the target interface is not changed, no operation is performed;
after acquiring the current width of the target interface, detecting whether the current width is greater than the preset interface width, and if the current width is not greater than the preset interface width, acquiring a fixed width of each column in the target table to generate a first adaptation table, in this embodiment, the preset width of the target interface is 650px, and if the current width is not greater than 650px (for example, the current width is 600 px), generating the first adaptation table, which may be performed by acquiring an average data length of each column in the target table, determining a fixed width of each column in the target table according to the average data length of each column in the target table (the fixed width of each column means that the width of the column is fixed and is not fixed, and the widths of different columns may be different), determining the fixed width of each column in the target table based on the average data length of each column in the target table and storing the fixed width into a preset array, acquiring the fixed width of each column in the target table from the preset array, and generating the first table by using the fixed width of each column in the target table as the column width.
<xnotran> , , colWidth ( ), , colWidth colWidth {72, 50, 50, 50, 50, 50, 50, 50, 70, 50, 60, 50, 45, 70, 45}, 72px, 50px, 50px, 50px, 50px, 50px, 50px, 50px, 70px, 50px, 60px, 50px, 45px, 70px, 45px. </xnotran> And calling the array colWidth to assign a value to each column width of the target table, so as to generate a first adaptation table, wherein the first adaptation table is shown in FIG. 3.
In some practical scenarios, as shown in fig. 4, a user needs to compare data of a first column and any column in the first adaptation table, so that the first column can be adjacent to any column in the process of sliding the scroll bar of the first adaptation table left and right, first obtain a current width W1 and a width W2 of the first column in the first adaptation table, set a width of a blank column at the end of the first adaptation table to be not less than W1-W2 (a difference between the current width and the width of the first column in the first adaptation table), and add the blank column at the end of the first adaptation table based on the width of the blank column to achieve data alignment, so that the first column can be adjacent to any column in the process of sliding the scroll bar of the first adaptation table left and right. The current width is 800px, the width of the first column in the first adaptation table is 50px, and the width of the blank column at the end of the first adaptation table is not less than 750px.
If the current width is greater than 650px (for example, the current width is 770 px), determining the width of each column in the target table according to the current width, the number of columns of the target table, and the average data length of each column in the target table, so as to generate a second adaptive table (obtained in real time according to the current width, the number of columns of the target table, and the average data length of each column in the target table). For example, a watch () method (i.e., a listener, also called a watch listening function) is used to monitor a variable screen width, and when the current width changes (e.g., when the folding screen is switched between the unfolded and folded states or when the horizontal screen and the vertical screen of the mobile phone are switched), the screen width after the current change can be obtained in real time, and then the changeWidth () function is triggered, so that the width of each column of the target table can be assigned again when the folding screen is unfolded or folded each time. In the embodiment of the present application, the colWidth array is dynamically assigned according to the current width of the target interface and the preset ratio, so that it can be ensured that the entire target interface can be occupied by the second adaptation tables in the target interfaces with different widths, and the second adaptation tables are shown in FIG. 5.
In some specific application scenarios, a first device may be used to perform screen projection (hereinafter, an electronic device, such as a computer, a television, or a wearable device) on a second device (hereinafter, a screen projection is also referred to as co-screen, screen sharing, and multi-screen interaction), specifically, a picture of a mobile device a (i.e., a first device, such as a mobile phone, an ipad, or a computer) is displayed on another device B (i.e., a second device, such as a projector, a conference tablet, a mosaic screen, an electronic whiteboard, or a television) in "real time" by an interaction method, and output contents include various multimedia information, such as a form, an album, a video, and an audio, and also include a real-time operation picture on the device a). If a plurality of application interfaces of the device a are launched on the receiving device (at this time, each application interface may be referred to as a split screen interface), a plurality of listeners may be set, and a plurality of colWidth arrays (i.e., preset arrays that can store the column width value of each column in the target table according to the average data length of each column in the target table) are assigned at a plurality of preset ratios according to a plurality of current widths, so as to obtain a plurality of tables with the same size or different sizes; the main table may be selected from a plurality of tables, and other tables may be associated with the main table as sub-tables and changed according to a change in the main table.
The form size recommendation function can be added in the form adaptation process, namely, the sizes of various forms are recommended to be selected by a user according to the monitoring result of the monitor on the current width of the target interface, and the sizes of the forms can be customized by the user, so that the target interface is adapted. The target interface may also be one of split screen interfaces (e.g., split screen up and down, split screen left and right, split screen multiple, etc.), each split screen interface is used to display a different application interface, and each application interface may include multiple grids and different types of tables. When the device B is used to display the multiple application interfaces of the device a, the multiple application interfaces may or may not fully occupy the screen of the device B. The target interface may be one of a plurality of application interfaces.
In the process of using the blank columns, a specific saving function can be started, that is, after the user edits the table, only the user edits (such as analysis, modification, calculation, filling and the like in the data comparison process) are saved, the blank columns are not saved, and the blank columns can be automatically deleted when the user "saves" the table.
Apparatus embodiment
The embodiment of the present application further provides an electronic device, and a specific implementation manner of the electronic device is consistent with the implementation manner and the achieved technical effect described in the foregoing method embodiment, and some contents are not described again.
An electronic device is provided, the electronic device comprising a memory storing a computer program and a processor configured to implement the following steps when executing the computer program:
s1: acquiring the current width of a target interface in real time;
s2: detecting whether the current width is larger than a preset interface width; if not, executing S3; if so, executing S4;
s3: acquiring the fixed width of each column in the target table to generate a first adaptive table;
s4: and based on the current width, assigning a width of each column in the target table to obtain a second adaptive table.
In some alternative embodiments, the processor is configured to obtain the current width of the target interface in real time when executing the computer program in the following manner:
and monitoring the width of the target interface in real time by using a monitor to obtain the current width.
In some optional embodiments, the processor is configured to execute the computer program to listen in real-time to the width of the target interface with a listener to obtain the current width in the following manner:
detecting whether the width of the target interface changes or not by using a monitor;
if the target interface changes, the changed width of the target interface is obtained as the current width;
if no change occurs, no action is taken.
In some alternative embodiments, the processor is configured to obtain the fixed width of each column in the target table to generate the first fit table by:
acquiring the average data length of each column in the target table;
determining a fixed width of each column in the target table based on an average data length of each column in the target table to generate the first fit table.
In some optional embodiments, the processor is configured to determine the fixed width of each column in the target table based on the average data length of each column in the target table in the following manner when executing the computer program:
determining the fixed width of each column in the target table and storing the fixed width to a preset array based on the average data length of each column in the target table;
the generating the first adaptation table includes:
and acquiring the fixed width of each column in the target table from the preset array to generate the first adaptive table.
In some alternative embodiments, the processor is configured to execute the computer program to assign a value to the width of each column in the target table to obtain the second adapted table based on the current width in the following manner:
determining a width of each column in the target table based on the current width, the number of columns in the target table, and an average data length of each column in the target table to generate the second adaptation table, the width of the second adaptation table being the same as the current width.
In some optional embodiments, the processor is configured to obtain the fixed width of each column in the target table to generate the first adapted table by:
determining the width of a blank column based on the current width W1 and the width W2 of a first column in the first adaptation table, wherein the width of the blank column is not less than W1-W2;
and adding a blank column at the end of the first adaptation table based on the width of the blank column to realize data alignment, so that the first column can be adjacent to any column in the process of sliding the scroll bar of the first adaptation table left and right.
Referring to fig. 6, fig. 6 shows a schematic structural diagram of an electronic device provided in an embodiment of the present application.
The electronic device includes at least one memory 210, at least one processor 220, and a bus 230 connecting different platform systems.
The memory 210 may include readable media in the form of volatile memory, such as Random Access Memory (RAM) 211 and/or cache memory 212, and may further include Read Only Memory (ROM) 213.
Wherein the memory 210 further stores a computer program that can be executed by the processor 220 such that the processor 220 implements the steps of any of the methods described above.
Accordingly, the processor 220 may execute the computer programs described above, and may execute the utility 214.
The processor 220 may employ one or more Application Specific Integrated Circuits (ASICs), DSPs, programmable Logic Devices (PLDs), complex Programmable Logic Devices (CPLDs), field-Programmable Gate arrays (FPGAs), or other electronic components.
The electronic device may also communicate with one or more external devices 240, such as a keyboard, pointing device, bluetooth device, etc., and may also communicate with one or more devices capable of interacting with the electronic device, and/or with any devices (e.g., routers, modems, etc.) that enable the electronic device to communicate with one or more other computing devices. Such communication may be through input-output interface 250. Also, the electronic device may communicate with one or more networks (e.g., a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public network, such as the internet) via the network adapter 260. Network adapter 260 may communicate with other modules of the electronic device via bus 230. It should be appreciated that although not shown in the figures, other hardware and/or software modules may be used in conjunction with the electronic device, including but not limited to: microcode, device drivers, redundant processors, external disk drive arrays, RAID systems, tape drives, and data backup storage platforms, to name a few.
Media embodiments
An embodiment of the present application further provides a computer-readable storage medium, where a computer program is stored, and when the computer program is executed by a processor, the steps of any one of the methods are implemented, and a specific implementation manner of the method is consistent with the implementation manner and the achieved technical effect described in the foregoing method embodiment, and some details are not repeated.
Referring to fig. 7, fig. 7 shows a schematic structural diagram of a program product provided in an embodiment of the present application.
The program product is for implementing any of the methods described above. The program product may employ a portable compact disc read only memory (CD-ROM) and include program code, and may be run on a terminal device, such as a personal computer. However, the program product of the present invention is not limited thereto, and in the embodiments of the present application, the readable storage medium may be any tangible medium that can contain or store a program, which can be used by or in connection with an instruction execution system, apparatus, or device. The program product may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable disk, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
A computer readable storage medium may include a propagated data signal with readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A readable storage medium may also be any readable medium that can communicate, propagate, or transport the program for use by or in connection with the instruction execution system, apparatus, or device. Program code embodied on a readable storage medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing. Program code for carrying out operations for aspects of the present invention may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, C + +, or the like, as well as conventional procedural programming languages, such as the C language, python language, or similar programming languages. The program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device and partly on a remote computing device, or entirely on the remote computing device or server. In situations involving remote computing devices, the remote computing devices may be connected to the user computing device through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to external computing devices (e.g., through the internet using an internet service provider).
While the present application is described in terms of various aspects, including exemplary embodiments, the principles of the invention should not be limited to the disclosed embodiments, but are also intended to cover various modifications, equivalents, and alternatives falling within the spirit and scope of the invention as defined by the appended claims.
Claims (10)
1. A method of form adaptation, the method comprising:
s1: acquiring the current width of a target interface in real time;
s2: detecting whether the current width is larger than a preset interface width; if not, executing S3; if so, executing S4;
s3: acquiring the fixed width of each column in the target table to generate a first adaptive table;
s4: and based on the current width, assigning a width of each column in the target table to obtain a second adaptive table.
2. The form fitting method of claim 1, wherein the obtaining a current width of a target interface in real-time comprises:
and monitoring the width of the target interface in real time by using a monitor to obtain the current width.
3. The form adapting method according to claim 2, wherein the monitoring the width of the target interface in real time by using a monitor to obtain the current width comprises:
detecting whether the width of the target interface changes or not by using a monitor;
if the target interface changes, the changed width of the target interface is obtained and used as the current width;
if no change occurs, no action is taken.
4. The table adaptation method of claim 1, wherein the obtaining of the fixed width of each column in the target table to generate the first adaptation table comprises:
acquiring the average data length of each column in the target table;
determining a fixed width of each column in the target table based on an average data length of each column in the target table to generate the first fit table.
5. The table fitting method according to claim 4, wherein the determining the fixed width of each column in the target table based on the average data length of each column in the target table comprises:
determining the fixed width of each column in the target table and storing the fixed width to a preset array based on the average data length of each column in the target table;
the generating the first adaptation table includes:
and acquiring the fixed width of each column in the target table from the preset array to generate the first adaptive table.
6. The form adapting method according to claim 4, wherein the assigning the width of each column in the target form to obtain the second adapted form based on the current width comprises:
determining a width of each column in the target table based on the current width, the number of columns in the target table, and an average data length of each column in the target table to generate the second adaptation table, the width of the second adaptation table being the same as the current width.
7. The table fitting method according to claim 1, wherein the obtaining of the fixed width of each column in the target table to generate the first fitting table further comprises:
determining the width of a blank column based on the current width W1 and the width W2 of a first column in the first adaptation table, wherein the width of the blank column is not less than W1-W2;
and adding a blank column at the end of the first adaptation table based on the width of the blank column to realize data alignment, so that the first column can be adjacent to any column in the process of sliding the scroll bar of the first adaptation table left and right.
8. An electronic device, characterized in that the electronic device comprises a memory and a processor, the memory storing a computer program, the processor being configured to carry out the following steps when executing the computer program:
s1: acquiring the current width of a target interface in real time;
s2: detecting whether the current width is larger than a preset interface width; if not, executing S3; if so, executing S4;
s3: acquiring the fixed width of each column in the target table to generate a first adaptive table;
s4: and based on the current width, assigning a width of each column in the target table to obtain a second adaptive table.
9. The electronic device of claim 8, wherein the processor is configured to obtain the current width of the target interface in real-time when executing the computer program in the following manner:
and monitoring the width of the target interface in real time by using a monitor to obtain the current width.
10. A computer-readable storage medium, characterized in that the computer-readable storage medium stores a computer program which, when being executed by a processor, carries out the steps of the method according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211332296.8A CN115935925A (en) | 2022-10-28 | 2022-10-28 | Form adapting method, electronic device and computer readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211332296.8A CN115935925A (en) | 2022-10-28 | 2022-10-28 | Form adapting method, electronic device and computer readable storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115935925A true CN115935925A (en) | 2023-04-07 |
Family
ID=86651698
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211332296.8A Pending CN115935925A (en) | 2022-10-28 | 2022-10-28 | Form adapting method, electronic device and computer readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115935925A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116341506A (en) * | 2023-05-25 | 2023-06-27 | 广东杰纳医药科技有限公司 | Method for iteratively calculating column width of table |
| CN116578219A (en) * | 2023-04-28 | 2023-08-11 | 北京洞悉网络有限公司 | Form page self-adaptive display method and device suitable for left and right double screens, computer equipment and computer readable storage medium |
-
2022
- 2022-10-28 CN CN202211332296.8A patent/CN115935925A/en active Pending
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116578219A (en) * | 2023-04-28 | 2023-08-11 | 北京洞悉网络有限公司 | Form page self-adaptive display method and device suitable for left and right double screens, computer equipment and computer readable storage medium |
| CN116341506A (en) * | 2023-05-25 | 2023-06-27 | 广东杰纳医药科技有限公司 | Method for iteratively calculating column width of table |
| CN116341506B (en) * | 2023-05-25 | 2023-08-25 | 广东杰纳医药科技有限公司 | Method for iteratively calculating column width of table |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109634598B (en) | Page display method, device, equipment and storage medium | |
| CN115935925A (en) | Form adapting method, electronic device and computer readable storage medium | |
| CN110389807B (en) | Interface translation method and device, electronic equipment and storage medium | |
| US11720235B2 (en) | Method and apparatus for browsing table in document, and electronic device and storage medium | |
| US9792267B2 (en) | Simplifying identification of potential non-visibility of user interface components when responsive web pages are rendered by disparate devices | |
| CN110070593B (en) | Method, device, equipment and medium for displaying picture preview information | |
| CN111796820B (en) | Method and device for constructing front-end page based on integrated assembly and electronic equipment | |
| CN109582317B (en) | Method and apparatus for debugging hosted applications | |
| CN110554874A (en) | Method and device for reusing webpage components of SaaS platform | |
| CN112099684A (en) | Search display method and device and electronic equipment | |
| US10951486B2 (en) | Terminal device, UI expansion method, and UI expansion program | |
| CN113467660A (en) | Information sharing method and electronic equipment | |
| US9524073B1 (en) | Triggering action on a web page | |
| CN111782106B (en) | Method and device for displaying page menu bar, electronic equipment and readable medium | |
| CN113688341B (en) | Dynamic picture decomposition method and device, electronic equipment and readable storage medium | |
| CN109992698B (en) | Data processing method and device, electronic equipment and readable storage medium | |
| CN105577518A (en) | Method and electronic device for displaying website corresponding information in instant messaging | |
| CN110618811B (en) | Information presentation method and device | |
| CN116048371A (en) | Page component switching method, device, equipment, medium and product in application program | |
| CN109814778B (en) | Method and device for realizing small program tab, electronic equipment and medium | |
| CN111310086A (en) | Page jump method and device and electronic equipment | |
| CN114489910B (en) | Video conference data display method, device, equipment and medium | |
| CN115357361A (en) | Task processing method, device, equipment and medium | |
| CN109190097B (en) | Method and apparatus for outputting information | |
| CN113761871A (en) | Rich text rendering method and device, electronic equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |