CN113935300A - Dynamic table generation method and device - Google Patents
Dynamic table generation method and device Download PDFInfo
- Publication number
- CN113935300A CN113935300A CN202111205076.4A CN202111205076A CN113935300A CN 113935300 A CN113935300 A CN 113935300A CN 202111205076 A CN202111205076 A CN 202111205076A CN 113935300 A CN113935300 A CN 113935300A
- Authority
- CN
- China
- Prior art keywords
- column
- width
- display
- data
- dynamic
- 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
- G06F40/18—Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The present disclosure provides a dynamic table generation method and apparatus, acquiring user query information; sending the query information to a back end; receiving query return data sent by the back end; and analyzing and generating a table according to the query return data and a preset rule, wherein the title, the column width and the column number displayed by the table are dynamically generated by the query return data. The table generated by the method is dynamically generated by query return data sent by the back end, so that the column information of the table is not controlled by the front end any more but is dynamically generated by the back end, and dynamic loading column and self-adaptive column width display can be realized.
Description
Technical Field
The present disclosure relates to the field of computer technologies, and in particular, to a method and an apparatus for generating a dynamic table.
Background
A table is one of the most basic data display modes of a front-end page, and in the prior art, as the number of rows and columns in the table increases, the number of elements in the page increases; when the number of elements of a page increases, the column width of the table generated by the front-end control is fixed, which is not favorable for the good presentation of the table contents.
Disclosure of Invention
The present disclosure provides a dynamic table generation method and apparatus, which are used to solve the defect of fixed column display in table display in the prior art, and achieve the purpose of dynamically loading columns and adaptive column width display.
The present disclosure provides a dynamic table generating method, including:
acquiring user query information;
sending the query information to a back end;
receiving query return data sent by the back end;
and analyzing and generating a table according to the query return data and a preset rule, wherein the title, the column width and the column number displayed by the table are dynamically generated by the query return data.
According to the dynamic table generation method provided by the present disclosure, the parsing and generating a table according to the query return data and a preset rule specifically includes:
extracting each title of the corresponding table according to the query return data;
converting the data except the titles in the query return data into filling data to form a filling data array;
and performing table rendering according to each title and the filling data array to generate the table.
According to the method for generating a dynamic table provided by the present disclosure, extracting each title of a corresponding table according to the query return data specifically includes: and generating the columns corresponding to the titles of the set positions of the table into fixed columns according to column generation rules, and generating the columns corresponding to the titles of the rest positions in the table into dynamic columns.
According to the dynamic table generating method provided by the present disclosure, the table rendering according to each title and the filling data array specifically includes: when the table column is rendered, filling a column of supplementary columns for table display when the table width is less than or equal to the display width of the terminal equipment; and when the table width is larger than the display width of the terminal equipment, setting a column scroll bar in the left-right direction for table display.
According to the dynamic table generating method provided by the present disclosure, when the table width is less than or equal to the display width of the terminal device, filling a column of supplementary columns for table display, specifically including: when the table width is smaller than the display width of the terminal equipment, displaying the supplementary column in a mode that the column width of the supplementary column is the difference value between the display width of the terminal equipment and the display width of the table; wherein the table display width is the sum of the fixed column widths and the sum of the dynamic column widths; and when the table width is equal to the display width of the terminal equipment, the width of the supplementary column is zero.
According to the dynamic table generating method provided by the present disclosure, when the table width is greater than the display width of the terminal device, the setting of the column scroll bar in the left-right direction for the table display specifically includes: when the form width is larger than the display width of the terminal equipment, displaying the form in a mode that the form display width is equal to the display width of the terminal equipment; wherein the table display width is the sum of the fixed column widths and the sum of the dynamic column widths.
According to the image generation method provided by the present disclosure, the performing table rendering according to each title and the filling data array specifically includes: and rendering columns corresponding to the titles of the table according to the filling data in the filling data array or the self-defined function.
The present disclosure also provides a dynamic table generating apparatus, including:
the user query information acquisition unit is used for acquiring user query information;
the information sending unit is used for sending the query information to a back end;
the information receiving unit is used for receiving the query return data sent by the back end;
and the table generating unit is used for analyzing and generating a table according to the query return data and a preset rule, wherein the title, the column width and the column number displayed by the table are dynamically generated by the query return data.
The present disclosure also provides an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor implements the steps of the dynamic table generating method according to any one of the above methods when executing the program.
The present disclosure also provides a non-transitory computer readable storage medium having stored thereon a computer program which, when executed by a processor, implements the steps of the dynamic table generation method as described in any of the above.
According to the dynamic table generation method and device provided by the disclosure, the table is dynamically generated by query return data sent by a back end, so that column information of the table is not controlled by the front end any more, but is dynamically generated by the back end, the table can be displayed more flexibly, and functions of dynamically loading columns, displaying column width in a self-adaptive mode and the like are realized.
Drawings
In order to more clearly illustrate the technical solutions of the present disclosure or the prior art, the drawings needed for the description of the embodiments or the prior art will be briefly described below, and it is obvious that the drawings in the following description are some embodiments of the present disclosure, and other drawings can be obtained by those skilled in the art without creative efforts.
FIG. 1 is a schematic flow chart diagram of a dynamic table generation method provided by the present disclosure;
FIG. 2 is a schematic flow chart showing the detail of step 140 in FIG. 1;
FIG. 3 is a schematic diagram of a form generated using the dynamic form generation method provided by the present disclosure;
FIG. 4 is a schematic diagram of yet another form generated using the dynamic form generation method provided by the present disclosure;
FIG. 5 is a schematic diagram of yet another form generated using the dynamic form generation method provided by the present disclosure;
FIG. 6 is a schematic structural diagram of a dynamic table generating apparatus provided by the present disclosure;
fig. 7 is a schematic structural diagram of an electronic device provided by the present disclosure.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present disclosure more clear, the technical solutions of the embodiments of the present disclosure will be described clearly and completely with reference to the drawings in the embodiments of the present disclosure, and it is obvious that the described embodiments are some, but not all, of the embodiments of the present disclosure. All other embodiments, which can be obtained by a person skilled in the art without making creative efforts based on the embodiments of the present disclosure, belong to the protection scope of the embodiments of the present disclosure.
The HTML table is defined by a < table > tag. Each table has a number of rows (defined by < tr > tags) and each row is divided into a number of cells (defined by < td > tags). The letter td refers to table data (table data), i.e., the contents of the data cell. The data cells may contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and the like.
The existing HTML table technology is mature, the case of fixed columns is very mature, and there are some technical implementations for tables with variable titles (for example, the title may be 2 columns or 20 columns), that is, cases with uncertain titles, such as implementing dynamic table columns based on element-ui, but this is limited by the limitation of element-ui framework based on vue, such as using other framework based on vue or other framework based on act, and needs to be implemented additionally.
However, there is no solution for supporting dynamic rendering of columns, adaptive column width display, and deleting some columns or other custom rendering conditions as required after all columns are loaded.
The embodiment of the disclosure provides a set of independent table controls, which can support dynamic loading of columns, self-adaptation of column widths, custom rendering of columns, dynamic deletion of columns or other custom rendering.
As shown in fig. 1, an embodiment of the present disclosure provides a dynamic table generation method, including:
step 110: acquiring user query information;
specifically, for example, 29 columns of data with dates of 2021-06-09 to 2021-07-07 are required to be generated to show the schedule of all the persons in 29 days. The requirements are as follows: if the query time interval is changed, the displayed columns are changed, so that the table title is variable.
Step 120: sending the query information to a back end;
in the embodiment of the disclosure, the front-end part is responsible for specifying the query requirement of the time range and requests the back-end to perform the query.
Step 130: receiving query return data sent by the back end;
in the embodiment of the disclosure, the back end generates data in a specified time range according to the query requirement sent by the front end, and returns the data to the front end. Specifically, for example, 29-day data of 2021-06-09 to 2021-07-07 of the selected person is generated and returned to the front end.
The query return data form is specifically, for example:
"zhangsan (zhangsan)":
[ default column width: 60, title: "2021-06-09", data are shown: 0;
default column width: 60, title: "2021-06-10", data shown: 0;
default column width: 60, title: "2021-06-11", data shown: 0;
default column width: 60, title: "2021-06-12", data shown: 0;
default column width: 60, title: "2021-06-13", data are shown: 0, self-defined function: "setHolidayStyle";
default column width: 60, title: "2021-06-14", data shown: 0, self-defined function: "deleteColumn";
…
default column width: 60, title: "2021-07-07", data shown: 2; ]
"Lifourteen (lisi)":
[ default column width: 60, title: "2021-06-09", data are shown: 0;
default column width: 60, title: "2021-06-10", data shown: 0;
default column width: 60, title: "2021-06-11", data shown: 0;
default column width: 60, title: "2021-06-12", data shown: 0;
default column width: 60, title: "2021-06-13", data are shown: 0, self-defined function: "setHolidayStyle";
default column width: 60, title: "2021-06-14", data shown: 0, self-defined function: "deleteColumn";
…
default column width: 60, title: "2021-07-07", data shown: 1; ].
In this example, the default width (default size) of the column is 60 pixels, the titles (columnName) are date titles, the display data (data) is unit display data, and the column may also be rendered by supporting an incoming custom function, the custom function of the title is defined by the custom function (userdeefinefunction), the function participates in the title and the serial number of the column, and supports the binding of the custom function, for example: two functions, setHolidayStyle and deleteColumn, can set a specific date style or delete a column, and can also have more custom functions to complete more functions.
As can be seen from the above example, in the query return data returned by the back end, the title, the column width, the column display data, and the custom function when rendering the title are all fed back by the back end, so that the front end receives the query return data, analyzes the query return data according to the data, and performs rendering display according to the requirement of the back end return data.
Step 140: and analyzing and generating a table according to the query return data and a preset rule, wherein the title, the column width and the column number displayed by the table are dynamically generated by the query return data.
The front end is responsible for analyzing query return data, analyzing all titles, rendering all lines of data, supporting custom function binding and completing more functions.
Specifically, for example, when a table is rendered on a page, rendering of a column width is adapted according to a set default column width and column number, custom rendering may also be added, for example, a special style is set for a time column of which the time column is a weekend, a double-click event deletion column is set during column rendering, and if all columns need to be manually deleted (for example, weekend, holiday, and the like) after loading, double-click is performed on a title, so that column dynamic loading, custom rendering, and dynamic deletion are realized.
In the embodiment of the present disclosure, as shown in fig. 2, the parsing process of querying the return data in step 140 specifically includes:
step 210: extracting each title of the corresponding table according to the query return data;
in step 210, specifically, the columns at the set positions in the table are generated as fixed columns according to the column generation rule, and the columns at the rest positions in the table are generated as dynamic columns in the embodiment of the present disclosure. Specifically, in the above example, the number column (leftmost column in the table) and the person column in the table are generated as fixed columns, and the date column and the like are generated as dynamic columns that can be scrolled left and right.
Specifically, for example, the first row data of the table is sorted as: [ serial number, person, 2021-06-09, 2021-06-10, 2021-06-11, 2021-06-12, 2021-06-13, 2021-06-14, …, 2021-07-07 ].
The first row of data in the arrangement shows that the sequence number columns and the personnel columns are set as fixed columns to be fixedly displayed on the equipment display screen, each date column is set as a dynamic rolling column to be dynamically rolled.
Step 220: converting the data except the titles in the query return data into filling data to form a filling data array;
the data except the header in the query return data is sorted to form a packed data array, specifically, for example, in the above example, the sorted packed data array is:
[1, Zhangthree, 0, 0, 0, 0, 0, …, 2 ];
[2, Lifours, 0, 0, 0, 0, 0, …, 1 ];
it can be seen that the corresponding data arrangement is performed according to the title of the first line in the form of line data.
Step 230: and performing table rendering according to each title and the filling data array to generate the table.
In step 230, specifically, when the table column is rendered, and the table width is less than or equal to the display width of the terminal device, a column of supplementary columns is filled for table display; and when the table width is larger than the display width of the terminal equipment, setting a column scroll bar in the left-right direction for table display.
In this step, the display screen of the terminal device can be filled up with supplementary columns when the number of table columns is small by filling the supplementary columns in the last (rightmost) column; similarly, when the number of columns of the table is large, the table is displayed on the display screen of the terminal device in the form of a scrolling column, and the scrollable column scroll bar is the dynamic column set in step 210.
In the embodiment of the present disclosure, when the table width is less than or equal to the display width of the terminal device, filling a column of supplementary columns for table display includes: when the table width is smaller than the display width of the terminal equipment, displaying the supplementary column in a mode that the column width of the supplementary column is the difference value between the display width of the terminal equipment and the display width of the table; wherein the table displays the width of the sum of the fixed column widths plus the total number of dynamic column widths plus the default column width; and when the table width is equal to the display width of the terminal equipment, the width of the supplementary column is zero.
In the embodiment of the present disclosure, the width rendering rule of a column is: if the specified column count default column width is less than the width of the page except for the sequence number column (anchor column) and the personnel column (anchor column), then the end column (supplementary column) is populated with a column width of table width-sequence number column width-personnel column width-specified column count default column width. The purpose of this is that the table columns are not distorted by the widening in the case of a table width determination. As shown in FIG. 3, since the query date range is only set to 2021-06-24 to 2021-06-25 for the query results of two days, the number of columns in the table is small, and in order to prevent the columns displayed in the table from being widened to occupy the whole display page, a supplementary column is added at the rightmost side of the table, and the column width of the supplementary column is determined according to the width of the whole display page occupied actually. As can also be seen from fig. 3, the table can be rendered in different colors according to different persons, different titles, or different cell values. The date of the day shown in fig. 3, that is, the title of the day of "2021-06-24" in the figure, is rendered as a first color, 13 persons in total are rendered as a second color according to the data content of the cells of columns "2021-06-24" and "2021-06-25" corresponding to the 1 st, 3, 4, 6, 7, 11, 12 and 13 persons, respectively, the data content of the cells of columns "2021-06-24" and "2021-06-25" corresponding to the 2 nd person is rendered as a fourth color, the data content of the cells of columns "2021-06-24" and "2021-06-25" corresponding to the 10 th person is rendered as a third color, the data contents of the cells corresponding to the 5 th, 8 th and 9 th personnel in the columns 2021-06-24 and 2021-06-25 are rendered to be free of filling color.
In the embodiment of the present disclosure, when the table width is greater than the display width of the terminal device, the setting of the column scroll bar in the left-right direction for performing table display specifically includes: when the form width is larger than the display width of the terminal equipment, displaying the form in a mode that the form display width is equal to the display width of the terminal equipment; wherein the table display width is the sum of the fixed column widths + the number of dynamic column display columns default column widths.
In the embodiment of the present disclosure, the width rendering rule of a column is: if the designated column number is larger than the default column width than the width of the page excluding the serial number column (anchor column) and the person column (anchor column), the end column (supplementary column) is not filled, and the left-right scroll bar is automatically set. As shown in fig. 4, since the query date range is set to 2021-06-09 to 2021-07-07, and the query results in 29 days are obtained, the number of columns in the table is large, and the display effect is better presented, so that the display effect is not affected by narrowing the column width due to displaying all the query results in the days on the display page. As can also be seen in fig. 4, each row in the table renders the cells of the columns corresponding to saturday and sunday in the header to gray; rendering cells with data content of 0 filled in cells of each person in other date columns except saturday and sunday as non-filling color; rendering cells filled in the cells of the persons in the other date columns except for saturday and sunday and having the data numerical value range of 1-3 into a second color; rendering cells filled in the cells of the persons in the other date columns except for saturday and sunday and having the data numerical value range of 4-6 as a third color; rendering cells with the data numerical value range larger than 6 filled in the cells of the persons in the other date columns except saturday and sunday as a fourth color; the day's title shown in FIG. 4, i.e., "2021-06-23" in the figure, is rendered in the first color.
In fig. 4, it can be seen that when the data contents of the corresponding cells in different date columns are different, the corresponding renderings of the same person are rendered into different colors according to the value range of the data, for example, the 2 nd person therein, whose filling data of the corresponding cell in the title column of "2021-06-15" is "6", and renders the filling color of the corresponding cell in the title column of "2021-06-15" of the 2 nd person into a third color according to the preset rendering rule in this example; similarly, the filling data of the corresponding cell in the title column corresponding to the 2 nd person "2021-06-28" or "2021-06-29" is "6", and the filling color of the corresponding cell in the title column corresponding to the 2 nd person "2021-06-28" or "2021-06-29" is rendered to be the third color according to the preset rendering rule in the present example; similarly, the filling data of the corresponding cells in the title columns of "2021-06-16" to "2021-06-25" except saturday and sunday is a numerical value greater than 6 for the 2 nd person, and the filling color of the corresponding cells in the title columns of "2021-06-16" to "2021-06-25" except saturday and sunday is rendered as the fourth color for the 2 nd person according to the preset rendering rule in this example. For another example, the numerical value of the filling data of the corresponding cell in the title column except saturday and sunday corresponding to "2021-06-15" to "2021-06-18" and "2021-06-123" to "2021-06-29" by the 10 th person in the table is a number between 4 and 6, and the filling color of the corresponding cell in the title column corresponding to the date period by the 10 th person is rendered to the third color according to the rendering rule preset in the present example; the numerical value of the filling data of the corresponding cell in the title column corresponding to the 10 th person from "2021-06-22" to "2021-06-23" is a number greater than 6, and the filling color of the corresponding cell in the title column corresponding to the date period of the 10 th person is rendered to the fourth color according to the rendering rule preset in this example.
In the embodiment of the present disclosure, in step 230, performing table rendering according to each title and the padding data array specifically includes: and rendering columns corresponding to the titles of the table according to the filling data in the filling data array or the self-defined function. In the embodiment of the present disclosure, the filling content of the column corresponding to each title in the table may be data directly filled in the cells of the column, or perform customized function rendering corresponding to the set column, and the rendering effect may be to set the column as double-click deletion, double-click hiding, render different colors according to the numerical value range for the filled values of the cells, and the like.
As shown in FIG. 5, the table is bound with a double-click delete column function, and corresponding logic is executed in response to the double-click action of the user, and if the user double-clicks the table column, the column is deleted. FIG. 5 shows the table display after the relevant columns for Saturday and Sunday have been double-clicked and deleted. In fig. 5, since the inquiry date range is set to the time range of 2021-06-17 to 2021-07-01, since the column of saturday and sunday during the period of 2021-06-17 to 2021-07-01 in the table after the double-click deletion response has been deleted and is not displayed in the table, the number of columns displayed in the table cannot fill up the display page at this time, and therefore a column of supplementary columns is filled in the rightmost side of the table, and the column width of the supplementary columns is set with the aim of filling up the entire display page. The rendering rule of the table in fig. 5 is the same as that of fig. 4, and the day's title, i.e., "2021-06-24" in the drawing, shown in fig. 5 is rendered in the first color. In fig. 5, it can be seen that when the data contents of the corresponding cells in different date columns are different, the corresponding renderings of the same person are rendered into different colors according to the value range of the data, for example, 2 nd and 10 th persons have a range of "4-6" and a range above "6" due to the filling data of the cells of the columns in the corresponding query date time range, so that the corresponding cell renderings are filled into a third color and a fourth color.
As shown in fig. 6, a description is given of the dynamic table generating apparatus provided in the embodiment of the present disclosure, and the dynamic table generating apparatus described below and the dynamic table generating method described above may be referred to in correspondence with each other.
The embodiment of the present disclosure provides a dynamic table generating device, including:
a user query information obtaining unit 610 for obtaining user query information;
in the embodiment of the disclosure, the user can query the table data according to actual needs.
Specifically, for example, 30 columns of data with the generation date of 2021-06-01 to 2021-06-30 are required to show the workload of 1-10 setting personnel in 30 days. The requirements are as follows: if the query time interval is changed, the displayed columns are changed, so that the table title is variable.
An information sending unit 620, configured to send the query information to a back end;
in the embodiment of the disclosure, the front-end part is responsible for specifying the query requirement of the time range and requests the back-end to perform the query.
An information receiving unit 630, configured to receive query return data sent by the backend;
in the embodiment of the disclosure, the back end generates data in a specified time range according to the query requirement sent by the front end, and returns the data to the front end. Specifically, for example, 30-day data of 2021-06-01 to 2021-06-30 of 10 selected persons is generated and returned to the front end.
For example, the default width (default size) of each column in the query return data is 40 pixels, the title (columnName) is a serial number title, a person title and a date title, the display data (data) is unit display data, and the column can be rendered by supporting an incoming custom function, and the custom function of the title is defined by a custom function (userdefinifunction) which participates in the title and the serial number of the column, and supports the binding of the custom function, for example: two functions, setHolidayStyle and deleteColumn, can set a specific date style or delete a column, and can also have more custom functions to complete more functions.
The table generating unit 640 is configured to generate a table according to the query return data by parsing according to a preset rule, where a title, a column width, and a number of columns displayed in the table are dynamically generated from the query return data.
In the embodiment of the disclosure, in the query return data returned by the back end, the title, the column width, the column display data and the custom function during title rendering are all fed back by the back end, so that the front end receives the query return data, analyzes the query return data according to the data, and performs rendering display according to the requirement of the back end return data.
The front end is responsible for analyzing query return data, analyzing all titles, rendering all lines of data, supporting custom function binding and completing more functions.
Specifically, for example, when a table is rendered on a page, rendering of a column width is adapted according to a set default column width and column number, custom rendering may also be added, for example, a special style is set for a time column of which the time column is a weekend, a double-click event deletion column is set during column rendering, and if all columns need to be manually deleted (for example, weekend, holiday, and the like) after loading, double-click is performed on a title, so that column dynamic loading, custom rendering, and dynamic deletion are realized.
In the embodiment of the present disclosure, the table generating unit 640 specifically includes:
the table title extraction subunit is used for extracting each title of the corresponding table according to the query return data;
in the embodiment of the present disclosure, in the table header extraction subunit, specifically, the column corresponding to the header at the set position of the table is generated as a fixed column according to a column generation rule, and the columns corresponding to the headers at the rest positions in the table are generated as dynamic columns. Specifically, in the above example, the number column (leftmost column in the table) and the person column in the table are generated as fixed columns, and the date column and the like are generated as dynamic columns that can be scrolled left and right.
Specifically, for example, the first row data of the table is sorted as: [ serial number, person, 2021-06-01, 2021-06-02, 2021-06-03, 2021-06-04, 2021-06-05, 2021-06-06, …, 2021-06-30 ].
The first row of data in the arrangement shows that the sequence number columns and the personnel columns are set as fixed columns to be fixedly displayed on the equipment display screen, each date column is set as a dynamic rolling column to be dynamically rolled.
The line data conversion subunit is used for converting all data except all the titles in the query return data into filling data to form a filling data array;
the data except the header in the query return data is sorted to form a packed data array, specifically, for example, in the above example, the sorted packed data array is:
[1，A，0，0，0，0，0，…，1]；
[2，B，0，0，0，0，0，…，1]；
it can be seen that the corresponding data arrangement is performed according to the title of the first line in the form of line data.
And the rendering subunit is used for performing table rendering according to each title and the filling data array.
In the embodiment of the present disclosure, in the rendering subunit, specifically, when the table column is rendered, and when the table width is less than or equal to the display width of the terminal device, a column of supplementary columns is filled for table display; and when the table width is larger than the display width of the terminal equipment, setting a column scroll bar in the left-right direction for table display.
In this step, the display screen of the terminal device can be filled up with supplementary columns when the number of table columns is small by filling the supplementary columns in the last (rightmost) column; similarly, when the number of columns of the table is large, the table is displayed on a display screen of the terminal equipment in a rolling column mode, and a scrollable column scroll bar is a dynamic column of the table.
In the embodiment of the present disclosure, when the table width is less than or equal to the display width of the terminal device, filling a column of supplementary columns for table display includes: when the table width is smaller than the display width of the terminal equipment, displaying the supplementary column in a mode that the column width of the supplementary column is the difference value between the display width of the terminal equipment and the display width of the table; wherein the table displays the width of the sum of the fixed column widths plus the total number of dynamic column widths plus the default column width; and when the table width is equal to the display width of the terminal equipment, the width of the supplementary column is zero.
In the embodiment of the present disclosure, the width rendering rule of a column is: if the specified column count default column width is less than the width of the page except for the sequence number column (anchor column) and the personnel column (anchor column), then the end column (supplementary column) is populated with a column width of table width-sequence number column width-personnel column width-specified column count default column width. The purpose of this is that the table columns are not distorted by the widening in the case of a table width determination.
In the embodiment of the present disclosure, when the table width is greater than the display width of the terminal device, the setting of the column scroll bar in the left-right direction for performing table display specifically includes: when the form width is larger than the display width of the terminal equipment, displaying the form in a mode that the form display width is equal to the display width of the terminal equipment; wherein the table display width is the sum of the fixed column widths + the number of dynamic column display columns default column widths.
In the embodiment of the present disclosure, the width rendering rule of a column is: if the designated column number is larger than the default column width than the width of the page excluding the serial number column (anchor column) and the person column (anchor column), the end column (supplementary column) is not filled, and the left-right scroll bar is automatically set.
In the embodiment of the present disclosure, performing table rendering according to each title and the padding data array in the rendering subunit specifically includes: and rendering each column of the table according to the filling data in the filling data array or the self-defined function. In the embodiment of the present disclosure, the filling content of the title in the first row of the table corresponding to other rows except the first row in the table may be data directly filled in the cell corresponding to the title, or the corresponding column is subjected to a self-defined function rendering, and the rendering effect may be to set the column as a double-click deletion, a double-click hiding, rendering different colors for the numerical value filled in the cell according to a numerical range, and the like.
For example, the table is bound with a double-click column deleting function, corresponding logic is executed in response to the double-click action of the user, and if the user double-clicks the table column, the column is deleted. The inquiry date range is set to be 2021-06-17 to 2021-07-01 time range, and as the column of saturday and sunday in the period from 2021-06-17 to 2021-07-01 in the table after the double-click deletion response is deleted and is not displayed in the table, the column number displayed in the table cannot fully occupy the display page at this time, a column of supplementary column is filled at the rightmost side of the table, and the column width of the supplementary column is set to aim at fully occupying the whole display page.
Fig. 7 illustrates a physical structure diagram of an electronic device, and as shown in fig. 7, the electronic device may include: a processor (processor)710, a communication Interface (Communications Interface)720, a memory (memory)730, and a communication bus 740, wherein the processor 710, the communication Interface 720, and the memory 730 communicate with each other via the communication bus 740. Processor 710 may call logic instructions in memory 730 to perform a dynamic table generation method comprising: acquiring user query information; sending the query information to a back end; receiving query return data sent by the back end; and analyzing and generating a table according to the query return data and a preset rule, wherein the title, the column width and the column number displayed by the table are dynamically generated by the query return data.
In addition, the logic instructions in the memory 730 can be implemented in the form of software functional units and stored in a computer readable storage medium when the software functional units are sold or used as independent products. Based on such understanding, the technical solutions of the embodiments of the present disclosure may be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the methods described in the embodiments of the present disclosure. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and other various media capable of storing program codes.
In another aspect, the present disclosure also provides a computer program product comprising a computer program stored on a non-transitory computer readable storage medium, the computer program comprising program instructions which, when executed by a computer, enable the computer to perform the dynamic table generation method provided by the above methods, the method comprising: acquiring user query information; sending the query information to a back end; receiving query return data sent by the back end; and analyzing and generating a table according to the query return data and a preset rule, wherein the title, the column width and the column number displayed by the table are dynamically generated by the query return data.
In yet another aspect, the present disclosure also provides a non-transitory computer-readable storage medium having stored thereon a computer program, which when executed by a processor is implemented to perform the dynamic table generation methods provided above, the method comprising: acquiring user query information; sending the query information to a back end; receiving query return data sent by the back end; and analyzing and generating a table according to the query return data and a preset rule, wherein the title, the column width and the column number displayed by the table are dynamically generated by the query return data.
The above-described embodiments of the apparatus are merely illustrative, and the units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment. One of ordinary skill in the art can understand and implement it without inventive effort.
Through the above description of the embodiments, those skilled in the art will clearly understand that each embodiment can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware. With this understanding in mind, the above-described technical solutions may be embodied in the form of a software product, which can be stored in a computer-readable storage medium such as ROM/RAM, magnetic disk, optical disk, etc., and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the methods described in the embodiments or some parts of the embodiments.
Finally, it should be noted that: the above examples are only intended to illustrate the technical solutions of the present disclosure, not to limit them; although the present disclosure has been described in detail with reference to the foregoing embodiments, it should be understood by those of ordinary skill in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some technical features may be equivalently replaced; and such modifications or substitutions do not depart from the spirit and scope of the corresponding technical solutions of the embodiments of the present disclosure.
Claims (10)
1. A dynamic table generation method, comprising:
acquiring user query information;
sending the query information to a back end;
receiving query return data sent by the back end;
and analyzing and generating a table according to the query return data and a preset rule, wherein the title, the column width and the column number displayed by the table are dynamically generated by the query return data.
2. The method for generating a dynamic form according to claim 1, wherein the parsing to generate a form according to the query return data and a preset rule specifically includes:
extracting each title of the corresponding table according to the query return data;
converting the data except the titles in the query return data into filling data to form a filling data array;
and performing table rendering according to each title and the filling data array to generate the table.
3. The method for generating a dynamic form according to claim 2, wherein the extracting the titles of the corresponding forms according to the query return data specifically includes: and generating the columns corresponding to the titles at the set positions of the table into fixed columns according to column generation rules, and generating the columns corresponding to the titles at the rest positions in the table into dynamic columns.
4. The dynamic table generating method of claim 3, wherein the table rendering according to each title and the padding data array specifically comprises: when the table column is rendered, filling a column of supplementary columns for table display when the table width is less than or equal to the display width of the terminal equipment; and when the table width is larger than the display width of the terminal equipment, setting a column scroll bar in the left-right direction for table display.
5. The method according to claim 4, wherein when the table width is less than or equal to the display width of the terminal device, filling a column of supplementary columns for table display includes: when the table width is smaller than the display width of the terminal equipment, displaying the supplementary column in a mode that the column width of the supplementary column is the difference value between the display width of the terminal equipment and the display width of the table; wherein the table display width is the sum of the fixed column widths and the sum of the dynamic column widths; and when the table width is equal to the display width of the terminal equipment, the width of the supplementary column is zero.
6. The method according to claim 4, wherein when the table width is larger than the display width of the terminal device, the setting of the column scroll bar in the left-right direction for table display specifically includes: when the form width is larger than the display width of the terminal equipment, displaying the form in a mode that the form display width is equal to the display width of the terminal equipment; wherein the table display width is the sum of the fixed column widths and the sum of the dynamic column widths.
7. The dynamic table generating method of claim 3, wherein the table rendering according to each title and the padding data array specifically comprises: and rendering columns corresponding to the titles of the table according to the filling data in the filling data array or the self-defined function.
8. A dynamic form generation apparatus, comprising:
the user query information acquisition unit is used for acquiring user query information;
the information sending unit is used for sending the query information to a back end;
the information receiving unit is used for receiving the query return data sent by the back end;
and the table generating unit is used for analyzing and generating a table according to the query return data and a preset rule, wherein the title, the column width and the column number displayed by the table are dynamically generated by the query return data.
9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the steps of the dynamic table generation method according to any of claims 1 to 7 are implemented when the program is executed by the processor.
10. A non-transitory computer readable storage medium, on which a computer program is stored, the computer program, when being executed by a processor, implementing the steps of the dynamic table generation method according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111205076.4A CN113935300A (en) | 2021-10-15 | 2021-10-15 | Dynamic table generation method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111205076.4A CN113935300A (en) | 2021-10-15 | 2021-10-15 | Dynamic table generation method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113935300A true CN113935300A (en) | 2022-01-14 |
Family
ID=79279790
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111205076.4A Pending CN113935300A (en) | 2021-10-15 | 2021-10-15 | Dynamic table generation method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113935300A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117270855A (en) * | 2023-11-22 | 2023-12-22 | 杭州比智科技有限公司 | Method for realizing table height self-adaption based on vue |
-
2021
- 2021-10-15 CN CN202111205076.4A patent/CN113935300A/en active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117270855A (en) * | 2023-11-22 | 2023-12-22 | 杭州比智科技有限公司 | Method for realizing table height self-adaption based on vue |
| CN117270855B (en) * | 2023-11-22 | 2024-01-30 | 杭州比智科技有限公司 | Method for realizing table height self-adaption based on vue |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CA2676445C (en) | Visual editor for electronic mail | |
| US8082519B2 (en) | Efficient display systems and methods | |
| US7146562B2 (en) | Method and computer system for displaying a table with column header inscriptions having a reduced horizontal size | |
| CN102650985B (en) | Dynamic typesetting method of display menu | |
| CN104820589B (en) | A kind of method and its device of dynamic adaptation webpage | |
| CN106294301B (en) | Report generation method and device | |
| CN103034720B (en) | Method, peripheral device and system for forming webpage | |
| EP2874054A1 (en) | Application text adjusting method, device, and terminal | |
| CN106610785A (en) | Commodity object list information processing method and apparatus | |
| CN113935300A (en) | Dynamic table generation method and device | |
| CN114564131B (en) | Content publishing method, device, computer equipment and storage medium | |
| CN107526755A (en) | The processing method and processing device of data | |
| CN111324836A (en) | Page processing method and device, computer equipment and storage medium | |
| CN109151547B (en) | Carousel method, carousel device, terminal and storage medium | |
| CN112199139B (en) | Self-adaptive adjustment method and device for system scaling | |
| US20240143898A1 (en) | Content typesetting method and apparatus, computer device, and storage medium | |
| CN111767492A (en) | Picture loading method and device, computer equipment and storage medium | |
| CN107423051B (en) | Data configuration method and device | |
| CN110516028B (en) | Method and device for realizing complex editor based on act | |
| CN108304118B (en) | Screenshot method and device | |
| CN115421691A (en) | Data rolling method and device based on virtual list and computer equipment | |
| JP2020060804A (en) | Output content generation device, output content generation method and program | |
| WO2010007908A1 (en) | Information output apparatus, information output method, and recording medium | |
| CN104391829B (en) | A kind of method and device for realizing multimedia messages and text mixing | |
| CN114625465B (en) | Text display method and device based on RN (radio network controller) component, 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 |