Method and System for Implementing a Table with Dynamically Configurable Display and Search

Abstract

The present invention discloses a method and system for implementing a table with dynamic configuration display and search, belonging to the technical field of table configuration. The technical problem to be solved is how to implement the dynamic configuration of the table and the linkage relationship with the backend query under the front-end and back-end separation framework. The method includes the following steps: implementation of a front-end dynamic table component, implementation of a back-end dynamic query list, dynamic configuration display of the table, and search of the table. The implementation of a table with dynamic configuration display and search by combining ElementUI and elasticsearch further realizes the implementation of dynamic query conditions for the table on the basis of realizing the dynamic display configuration of the table.

Description

Technical Field

[0001] The present invention relates to the technical field of table configuration, and in particular to a method and system for realizing a table capable of dynamically configuring display and search. Background Art

[0002] The el-table component in the native ElementUI does not implement the function of displaying table columns according to user dynamic configuration. As the demand of many business systems continues to expand, the information that needs to be displayed in the front-end table will continue to increase. However, in the actual operation process, each customer has different information requirements for table display. Customers often need to more intuitively display only the information they are concerned about on the front-end page.

[0003] How to realize the dynamic configuration of tables and the linkage between tables and back-end queries in a framework with separation of front-end and back-end is a technical problem that needs to be solved. Summary of the invention

[0004] The technical task of the present invention is to address the above shortcomings and provide a method and system for realizing a table that can be dynamically configured for display and search, so as to solve the technical problem of how to realize the dynamic configuration of the table and the linkage relationship between the table and the back-end query in a front-end and back-end separation framework.

[0005] In a first aspect, the present invention provides a method for implementing a table capable of dynamically configuring display and search, comprising the following steps:

[0006] Implementation of the front-end dynamic table component: Based on ElementUI, the table configuration component is introduced in the front-end page, the table column configuration information is defined as a JSON array, and a table column configuration menu for dynamically configuring columns is added to the front-end page. For each current user, the table column configuration information set by the user is stored in the back-end in the form of a JSON array, and a mapping relationship between the user ID, table ID and the corresponding JSON array is established;

[0007] Implementation of dynamic query list in the backend: When configuring the table list on the frontend page, add queryable configuration items to the list. For queryable columns, cache the queryable columns through the frontend page and form a queryable column array based on the column name. The queryable column array and query conditions are passed to the backend as parameters. The backend calls the query construction method of elasticsearch to execute the query based on the returned queryable column array and query statement, and returns the query results to the frontend page table.

[0008] Dynamic configuration display of the table: Get the current user information through the front-end page cache, read the corresponding JSON array from the back-end based on the user ID specified in the user information, bind the JSON array to the table configuration component, dynamically render the list on the front-end page and generate an array of queryable columns, and dynamically modify the columns through the table column configuration menu;

[0009] Search of the table: The front-end page sends the query conditions input by the user and the array of queryable columns to the back-end in the form of parameters. The back-end executes the query by calling the query construction method of elasticsearch according to the returned array of queryable columns and the query statement, and returns the query results to the table on the front-end page.

[0010] Preferably, the implementation of the front-end dynamic table includes the following steps:

[0011] Introduce the table component, input box component, and dropdown list component in ElementUI on the front-end page and encapsulate them;

[0012] For each table, define the table column configuration information of the table as a JSON array. The configuration information of each column in the table is used as a JSON body in the JSON array. Bind the JSON array to the table component and dynamically render the list on the front-end page through the vue template. The table column configuration information includes column name, column attributes, column width, display status, display order, text type, and switch type or label type. The order of the JSON body in the JSON array is the display order of the corresponding column in the list on the front-end page;

[0013] Based on the input box component and the dropdown list component, add a table column configuration menu on the front-end page. The table column configuration menu is used to implement dynamic modification of the list, including configuring whether a column is displayed in the table, the display order of the column in the table, and whether the column supports query;

[0014] Obtain the user information through the front-end page, store the specified table column configuration information in the user information in the form of a JSON array in the back-end, establish a mapping relationship between the user identifier, table identifier, and the corresponding JSON array in the back-end, and configure the default table configuration information and store it in the back-end in the form of a JSON array;

[0015] Correspondingly, the dynamic configuration display of the table includes the following steps:

[0016] Obtain the user information of the current user through page caching, and obtain the corresponding configuration information from the back-end based on the user identifier specified in the user information;

[0017] If the corresponding configuration information does not exist in the back-end, select the JSON array of the default table configuration information, bind the corresponding table configuration information in the JSON array to the table component, dynamically render the list on the front-end page and generate an array of queryable columns, and dynamically modify the columns through the table column configuration menu;

[0018] If there is corresponding configuration information at the backend, obtain the JSON array of user configuration information, bind the corresponding table configuration information in the JSON array to the table component, dynamically render the list on the front-end page and generate an array of queryable columns, and dynamically modify the columns through the table column configuration menu.

[0019] Preferably, the implementation of the backend dynamic query list includes the following steps:

[0020] For each column in the table, add a queryable configuration item to the configuration information of the list through the front-end page;

[0021] Process the column names with queryable configuration items in the front-end page into an array as the queryable column array;

[0022] When the search bar provided by the front-end page sends a query request to the backend, use the queryable column array as a parameter to send a query request to the backend. Based on the list specified in the query request, the backend is used to call the query construction method of elasticsearch to perform data query;

[0023] Correspondingly, the search of the table includes the following steps:

[0024] The user enters a query statement or query condition in the input box provided by the front-end page;

[0025] The front-end page passes the query condition and the queryable column array as parameters to the backend;

[0026] The backend traverses the queryable column array, obtains the column name and column data type of each column in the queryable column array. For each column information read, call the query construction method of elasticsearch according to the column data type, splice the corresponding query statement or query condition to execute the query, and return the query result to the front-end page table.

[0027] Preferably, the implementation of the front-end dynamic table component further includes the following steps:

[0028] Introduce the el-tabs component in the front-end page to implement list configuration between parent and child components. In the front-end page of a vue parent component, introduce the el-tabs component and introduce multiple tabbed tables, and uniformly manage multiple tabbed tables through the parent component.

[0029] In a second aspect, an invention provides a table implementation system capable of dynamically configured display and search, which is used to execute a table implementation method according to any one of the first aspect. The system includes:

[0030] A table configuration implementation module, which is used to implement the front-end dynamic table component: based on ElementUI, the table configuration component is introduced in the front-end page, the table column configuration information is defined as a JSON array, and a table column configuration menu for dynamically configuring columns is added to the front-end page. For each current user, the table column configuration information set by the user is stored in the back-end in the form of a JSON array, and a mapping relationship between the user identifier, the table identifier and the corresponding JSON array is established;

[0031] A table query implementation module, which is used to implement the backend dynamic query list: when configuring the table list on the frontend page, a queryable configuration item is added to the list. For queryable columns, the queryable columns are cached by the frontend page and a queryable column array is formed based on the column name. The queryable column array and query conditions are passed to the backend as parameters. The backend executes the query based on the queryable column array and query statement returned, calls the query construction method of elasticsearch, and returns the query result to the frontend page table;

[0032] A table configuration display module, which is used to obtain the current user information through the front-end page cache, read the corresponding JSON array from the back-end based on the user ID specified in the user information, bind the JSON array to the table configuration component, dynamically render the list on the front-end page and generate an array of queryable columns, and dynamically modify the columns through the table column configuration menu;

[0033] The table search module is used to call the front-end page, send the query conditions and queryable column array entered by the user to the back-end in the form of parameters through the front-end page, and call the back-end. The back-end executes the query based on the returned queryable column array and query statement, calls the query construction method of elasticsearch, and returns the query result to the front-end page table.

[0034] Preferably, the table configuration implementation module is used to perform the following:

[0035] Introduce the table component, input box component, and drop-down list component in ElementUI on the front-end page and encapsulate them;

[0036] For each table, define the table column configuration information of the table as a JSON array, and the configuration information of each column in the table is a JSON body of the JSON array. Bind the JSON array to the table component, and dynamically render the list on the front-end page through the template of Vue. The table column configuration information includes column name, column attribute, column width, display status, display order, text type, and switch type or label type. The order of the JSON body in the JSON array is the display order of the corresponding column in the list of the front-end page;

[0037] Based on the input box component and the drop-down list component, a table column configuration menu is added to the front-end page. The table column configuration menu is used to implement dynamic modification of the list, including configuring whether a column is displayed in the table, the display order of the column in the table, and whether the column supports querying;

[0038] Obtain user information through the front-end page, and store the specified table column configuration information in the user information in the form of a JSON array in the back-end. Establish a mapping relationship between the user identifier, the table identifier, and the corresponding JSON array in the back-end, and configure the default table configuration information and store it in the back-end in the form of a JSON array;

[0039] Correspondingly, the table configuration display module is used to perform the following:

[0040] Obtain the user information of the current user through page caching, and obtain the corresponding configuration information from the back-end based on the user identifier specified in the user information;

[0041] If the corresponding configuration information does not exist in the back-end, select the JSON array of the default table configuration information, bind the corresponding table configuration information in the JSON array to the table component, dynamically render the list on the front-end page and generate an array of queryable columns, and dynamically modify the columns through the table column configuration menu;

[0042] If the corresponding configuration information exists in the back-end, obtain the JSON array of the user configuration information, bind the corresponding table configuration information in the JSON array to the table component, dynamically render the list on the front-end page and generate an array of queryable columns, and dynamically modify the columns through the table column configuration menu.

[0043] Preferably, the table query implementation module is used to perform the following:

[0044] For each column in the table, add a queryable configuration item to the configuration information of the list through the front-end page;

[0045] Process the column names with queryable configuration items in the front-end page into an array as the queryable column array;

[0046] When a query request is sent to the back-end from the search bar provided on the front-end page, send the queryable column array as a parameter to the back-end to initiate a query request. Based on the list specified in the query request, the back-end is used to call the query construction method of elasticsearch to perform data query;

[0047] Correspondingly, the search module of the table is used to perform the following:

[0048] The user enters a query statement or query condition in the input box provided on the front-end page;

[0049] The front - end page passes the query conditions and the queryable column array as parameters to the back - end;

[0050] The back - end traverses the queryable column array, obtains the column names and column data types of each column in the queryable column array. For each column's information read, according to the column's data type, it calls the query construction method of Elasticsearch, concatenates the corresponding query statement or query condition to execute the query, and returns the query result to the front - end page table.

[0051] Preferably, the table configuration implementation module is also used to perform the following:

[0052] Introduce the el - tabs component in the front - end page to implement list configuration between parent and child components. In the front - end page of a vue parent component, introduce the el - tabs component, introduce multiple tabbed tables, and uniformly manage multiple tabbed tables through the parent component.

[0053] The method and system for implementing a table with dynamic configuration display and search of the present invention have the following advantages: In front - end development, based on ElementUI, introduce a table configuration component in the front - end page, which can realize reading column information of the table through an interface, eliminating the need to modify the column display configuration line by line in the code. And by introducing a dropdown box component, the function of directly providing a dynamic configuration list to users can be realized, enabling users to personalize their tables, reducing situations such as when a user wants to add or delete a display column, which affects the user experience of other users and increases the workload of front - end and back - end developers. BRIEF DESCRIPTION OF THE DRAWINGS

[0054] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following will briefly introduce the drawings required for use in the embodiments or the description of the prior art. Obviously, the following drawings are only some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can be obtained based on these drawings.

[0055] The present invention will be further described below with reference to the drawings.

[0056] Figure 1 It is a flowchart of the method for implementing a table with dynamic configuration display and search in Embodiment 1. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0057] The present invention will be further described below with reference to the drawings and specific embodiments, so that those skilled in the art can better understand the present invention and be able to implement it. However, the specific embodiments cited do not limit the present invention. Without conflict, the embodiments of the present invention and the technical features in the embodiments can be combined with each other.

[0058] The embodiments of the present invention provide a method and system for implementing a table with dynamic configuration display and search, which are used to solve the technical problem of how to implement the dynamic configuration of a table and the linkage relationship with backend queries under a front-end and back-end separation framework.

[0059] Embodiment 1:

[0060] A method for implementing a table with dynamic configuration display and search according to the present invention includes the following steps:

[0061] S100. Implementation of the front-end dynamic table component: Based on ElementUI, introduce a table configuration component on the front-end page, define the table column configuration information as a JSON array, add a table column configuration menu for dynamically configuring columns on the front-end page, and store the table column configuration information set by the user in the form of a JSON array in the backend for each current user, and establish a mapping relationship between the user identifier, the table identifier, and the corresponding JSON array;

[0062] S200. Implementation of the backend dynamic query list: When configuring the list of the table on the front-end page, add queryable configuration items to the list. For queryable columns, cache the queryable columns on the front-end page and form a queryable column array based on the column names, and pass the queryable column array and the query conditions as parameters to the backend. The backend executes the query by calling the query construction method of elasticsearch according to the passed-back queryable column array and the query statement, and returns the query result to the front-end page table;

[0063] S300. Dynamic configuration display of the table: Obtain the current user information through caching on the front-end page, read the corresponding JSON array from the backend based on the user identifier specified in the user information, bind the JSON array to the table configuration component, dynamically render the list on the front-end page and generate an array of queryable columns, and dynamically modify the columns through the table column configuration menu;

[0064] S400. Search of the table: The front-end page sends the query conditions input by the user and the queryable column array as parameters to the backend. The backend executes the query by calling the query construction method of elasticsearch according to the passed-back queryable column array and the query statement, and returns the query result to the front-end page table.

[0065] Among them, the implementation of the front-end dynamic table in step S100 includes the following steps:

[0066] (1) Introduce the table component, input box component, and dropdown list component in ElementUI on the front-end page and encapsulate them;

[0067] (2) For each table, define the table column configuration information of the table as a JSON array. The configuration information of each column in the table is used as a JSON body in the JSON array. Bind the JSON array to the table component and dynamically render the list on the front-end page through the vue template. The table column configuration information includes column name, column attributes, column width, display status, display order, text type, and switch type or label type. The order of the JSON bodies in the JSON array is the display order of the corresponding columns in the list on the front-end page;

[0068] (3) Based on the input box component and the drop-down list component, add a table column configuration menu on the front-end page. The table column configuration menu is used to implement dynamic modification of the list, including configuring whether a column is displayed in the table, the display order of the column in the table, and whether the column supports querying;

[0069] (4) Obtain user information through the front-end page, and store the specified table column configuration information in the user information in the form of a JSON array in the back-end. Establish a mapping relationship between the user identifier, the table identifier, and the corresponding JSON array in the back-end, and configure the default table configuration information and store it in the back-end in the form of a JSON array.

[0070] Correspondingly, the dynamic configuration display of the table includes the following steps:

[0071] (1) Obtain the user information of the current user through page caching, and obtain the corresponding configuration information from the back-end based on the user identifier specified in the user information;

[0072] (2) If the corresponding configuration information does not exist in the back-end, select the JSON array of the default table configuration information, bind the corresponding table configuration information in the JSON array to the table component, dynamically render the list on the front-end page and generate an array of queryable columns, and dynamically modify the columns through the table column configuration menu;

[0073] (3) If the corresponding configuration information exists in the back-end, obtain the JSON array of the user configuration information, bind the corresponding table configuration information in the JSON array to the table component, dynamically render the list on the front-end page and generate an array of queryable columns, and dynamically modify the columns through the table column configuration menu.

[0074] The implementation of the dynamic table component in the front-end of this embodiment specifically includes the following five processes.

[0075] (1) First, introduce the table, input box, and drop-down list components in ElementUI.

[0076] (2) Perform secondary encapsulation based on the above components. Since there are different data processing methods for the columns displayed in the table, in addition to the column name, column attributes, and column width, the information that needs to be stored for each column of the table also needs to additionally save the type of data displayed in the current column. In this embodiment, several common types of processing methods are encapsulated, mainly including text type (directly display the data in the current column), time type (need to format the time), switch type or label type (display different components according to different data, such as different states of the switch, etc.).

[0077] (3) After completing the above content, start to implement the current function: First, define all the information of a table as a JSON array, and the relevant configuration information of each column is a JSON object in the array. The order of the JSON objects in the array is the display order of the list on the page. The attributes included in the JSON are the current column name, current column attributes (corresponding to the attributes passed by the backend), current column data type, current column width, whether the current column is queryable, and whether the current column is displayed. After the data format is defined, bind the array value to the component, and the list can be dynamically rendered through the vue template.

[0078] (4) After implementing the dynamic rendering of the list according to the data, it is necessary to implement the dynamic modification of the list configuration on the page. In this embodiment, a menu for table column configuration is completed by combining multiple components such as dropdown boxes, forms, radio boxes, and buttons. The menu first dynamically renders the form according to the JSON array in (3). Then, by clicking the "display or not" radio box in the form, it can be configured whether the current column is displayed in the table; by clicking the "filterable or not" radio box in the form, it can be configured whether the search bar in the component can query according to this column; by clicking the "move up" and "move down" buttons in the form, the display order of the current column in the table can be modified. In addition, the dynamic rendering method adopted by the page is to render after the user submits, rather than real-time rendering, mainly to avoid the situation where the user modifies some configuration items and then cancels without submitting the current configuration, optimizing the user experience.

[0079] (5) Store the current user identifier, table identifier, and the attributes of each column of the table in the database through the backend interface for persistence, so that users can continue to maintain their personalized table display during subsequent use. Since there is no corresponding user data in the newly created database, all users cannot find the configuration information when they first use. At this time, default values need to be added, that is, all users who have not configured the table columns will display all data columns according to the configuration information defined by the developer.

[0080] The implementation of the backend dynamic query list in step S200 of this embodiment includes the following steps:

[0081] (1) For each column in the table, add a queryable configuration item in the configuration information of the list through the front-end page;

[0082] (2) Process the column names of the columns with queryable configuration items in the front-end page into an array as the queryable column array;

[0083] (3) When the search bar provided by the front-end page sends a query request to the back-end, use the queryable column array as a parameter to send a query request to the back-end. Based on the list specified in the query request, the back-end is used to call the query construction method of elasticsearch to perform data query.

[0084] Correspondingly, the search of the table in step S400 includes the following steps:

[0085] (1) The user enters a query statement or query condition in the input box provided by the front-end page;

[0086] (2) The front-end page passes the query condition and the queryable column array as parameters to the back-end;

[0087] (3) The back-end traverses the queryable column array, obtains the column name and column data type of each column in the queryable column array. For each column information read, call the query construction method of elasticsearch according to the column data type, splice the corresponding query statement or query condition to execute the query, and return the query result to the front-end page table.

[0088] The implementation of the back-end dynamic query list in this embodiment specifically includes the following two processes.

[0089] (1) After implementing the front-end configuration of the dynamic list, considering that there should be a constraint relationship between the columns displayed in the table and the query conditions, that is, the columns not displayed in the current list should not be used as query filtering conditions, so the need to implement a dynamic query list arises. First, when the front-end page configures the display columns of the table, add a "queryable" configuration item. Process the column names of the columns with this configuration item into an array in the front-end. Each time the search bar in the component sends a query request to the back-end, provide this array as a parameter to the back-end together.

[0090] (2) After the back-end receives the parameters, traverse the array, take out the column name and column data type of each column in the array. For each column information taken out, call the query construction method of elasticsearch according to the column data type, splice the corresponding query statement or query condition. For example, when configuring exact query and fuzzy query, the spliced query statements should be different. For different column data types, there will also be special processing such as adding quotation marks and escape characters.

[0091] As an improvement, the implementation of the front-end dynamic table component in this embodiment further includes the following steps:

[0092] Introduce the el-tabs component on the front-end page to implement list configuration between parent and child components. In the front-end page of a vue parent component, introduce the el-tabs component, introduce multiple tabbed tables, and uniformly manage multiple tabbed tables through the parent component.

[0093] In the improvement of this embodiment, the component is further encapsulated to implement list configuration between parent and child components through the el-tabs component. That is, in the page of a vue parent component, introduce the el-tabs component, introduce multiple tabbed tables, and uniformly manage them through the parent component. The parent component stores all the table information, and the table information of each tab page is used as an attribute stored in the parent component. When the page is opened, the parent component is first rendered. The parent component obtains all the tabbed table information included in the entire el-tabs and binds the corresponding information to each table page according to the tab name of the el-tab, so as to implement the configuration information processing of multiple tables by one interface.

[0094] Taking a to-do list table as an example, the specific implementation method is as follows:

[0095] (1) First, clarify all the columns that need to be displayed in the to-do list table, specifically including serial number, to-do name, to-do serial number, to-do status, to-do start time, to-do limit time, operation column, etc. Define the required processing rules in the template according to the data type, assemble them into JSON, store all the column information in a JSON array, and bind the array to the component of the present invention through v-bind, so that the defined to-do list can be dynamically displayed on the page where the current component is introduced.

[0096] (2) Introduce the configuration table menu in the present invention. The menu dynamically generates forms for each column and echoes relevant data by obtaining all the column information in the JSON array. Then, the user can modify the display status, order, whether to query, column width, etc. of each column in the configuration table menu on the current page. After the configuration is completed, click submit. The front-end submits the JSON array to the back-end. After the back-end converts it into a string, it is persistently stored in the database according to the current user ID and the table being operated on.

[0097] (3) When a certain user opens the to-do list form, a request will be sent to the backend first to query whether there is any saved list information of the current user in the database. If there is, the previously saved JSON array will be returned. After receiving it, the front-end component will re-render the list according to the configuration, so as to achieve the personalized form display of the user. If the configuration of the current user is not found in the database, that is, the user opens the form for the first time, or the user does not use the dynamic form configuration function, all columns will be displayed according to the column configuration information of the most primitive form defined in (1).

[0098] (4) In the form configuration menu, the user checks the queryable radio box on the column that needs to be configured for query. After saving, the array of queryable columns on the current page will be updated. Thereafter, whenever the user clicks the query button after entering the query condition in the input box, the array of queryable columns will be passed to the backend as a parameter together with the query condition. The backend will traverse the results according to the returned array, respectively call the query construction method of elasticsearch, add different query statements, and then execute the query and return the results to the front-end form.

[0099] This embodiment is based on the implementation of a form that can be dynamically configured for display and search by combining ElementUI and elasticsearch. By secondary encapsulation of components, the el-table is completed to realize the relevant configurations of dynamically configurable column display, column order, column width, etc. on the page, and can be further encapsulated into a front-end component with multiple tabs through el-tab, and each tab page can be dynamically configured for form display.

[0100] This embodiment is based on the implementation of a form that can be dynamically configured for display and search by combining ElementUI and elasticsearch. On the basis of realizing the dynamic display configuration of the form, the dynamic query condition of the form is further realized. Add a queryable configuration item to the form configuration column, cache and process the array of queryable columns through the front-end page, and use it as a parameter each time the backend interface is called for query, so that the backend can traverse and call to generate the query condition of elasticsearch according to the array, so as to achieve dynamic form query corresponding to the user's configuration and meet the user's personalized needs.

[0101] Embodiment 2:

[0102] A system for implementing a form that can be dynamically configured for display and search according to the present invention includes a form configuration implementation module, a form query implementation module, a form configuration display module, and a form search module. This system can execute the method disclosed in Embodiment 1.

[0103] The table configuration implementation module is used to implement the front - end dynamic table component: Based on ElementUI, introduce the table configuration component on the front - end page, define the table column configuration information as a JSON array, add a table column configuration menu for dynamically configuring columns on the front - end page. For each current user, store the table column configuration information set by the user in the form of a JSON array to the back - end, and establish a mapping relationship between the user identifier, table identifier, and the corresponding JSON array.

[0104] The table query implementation module is used to implement the back - end dynamic query list: When configuring the list of the table on the front - end page, add query - able configuration items to the list. For query - able columns, cache the query - able columns through the front - end page and form a query - able column array based on the column names. Pass the query - able column array and query conditions as parameters to the back - end. The back - end executes the query by calling the query construction method of elasticsearch according to the passed - back query - able column array and query statement, and returns the query result to the front - end page table.

[0105] The table configuration display module is used to obtain the current user information through front - end page caching, read the corresponding JSON array from the back - end based on the user identifier specified in the user information, bind the JSON array to the table configuration component, dynamically render the list on the front - end page and generate an array of query - able columns, and dynamically modify columns through the table column configuration menu.

[0106] The table search module is used to call the front - end page, send the query conditions input by the user and the query - able column array to the back - end in the form of parameters through the front - end page, and call the back - end. The back - end executes the query by calling the query construction method of elasticsearch according to the passed - back query - able column array and query statement, and returns the query result to the front - end page table.

[0107] In this embodiment, the table configuration implementation module is used to perform the following:

[0108] (1) Introduce the table component, input box component, and dropdown list component in ElementUI on the front - end page and encapsulate them;

[0109] (2) For each table, define the table column configuration information of the table as a JSON array. The configuration information of each column in the table is used as a JSON body in the JSON array. Bind the JSON array to the table component, and dynamically render the list on the front - end page through the vue template. The table column configuration information includes column name, column attribute, column width, display status, display order, text type, and switch type or label type. The order of the JSON bodies in the JSON array is the display order of the corresponding columns in the front - end page list;

[0110] (3) Based on the input box component and the drop-down list component, add a table column configuration menu on the front-end page. The table column configuration menu is used to implement dynamic modification of the list, including configuring whether a column is displayed in the table, the display order of the column in the table, and whether the column supports querying.

[0111] (4) Obtain user information through the front-end page, and store the specified table column configuration information in the user information in the form of a JSON array in the back-end. Establish a mapping relationship between the user identifier, the table identifier, and the corresponding JSON array in the back-end, and configure the default table configuration information and store it in the back-end in the form of a JSON array.

[0112] Correspondingly, the table configuration display module is used to perform the following:

[0113] (1) Obtain the user information of the current user through page caching, and obtain the corresponding configuration information from the back-end based on the user identifier specified in the user information.

[0114] (2) If the corresponding configuration information does not exist in the back-end, select the JSON array of the default table configuration information, bind the corresponding table configuration information in the JSON array to the table component, dynamically render the list on the front-end page and generate an array of queryable columns, and dynamically modify the columns through the table column configuration menu.

[0115] (3) If the corresponding configuration information exists in the back-end, obtain the JSON array of the user configuration information, bind the corresponding table configuration information in the JSON array to the table component, dynamically render the list on the front-end page and generate an array of queryable columns, and dynamically modify the columns through the table column configuration menu.

[0116] Based on the table configuration implementation module and the table configuration display module, the implementation of the front-end dynamic table component in this embodiment specifically includes the following five processes.

[0117] (1) First, introduce the table, input box, and drop-down list components in ElementUI.

[0118] (2) Perform secondary encapsulation on the basis of the above components. Since there are different data processing methods for the columns displayed in the table, in addition to the column name, column attributes, and column width, the information that needs to be stored for each column of the table also needs to additionally save the type of data displayed in the current column. This embodiment encapsulates several common types of processing methods, mainly including text type (directly display the data in the current column), time type (need to format the time), switch type or label type (display different components according to different data, such as different states of the switch, etc.).

[0119] (3) After completing the above, start implementing the current function: First, define all the information of a table as a JSON array, and the relevant configuration information for each column is a JSON object in the array. The order of the JSON objects in the array is the display order in the list on the page. The properties included in the JSON are the current column name, the current column property (corresponding to the property passed by the backend), the current column data type, the current column width, whether the current column is queryable, and whether the current column is displayed. After the data format is defined, bind the array value to the component, and the list can be dynamically rendered through the vue template.

[0120] (4) After implementing the dynamic rendering of the list based on the data, it is necessary to implement the dynamic modification of the list configuration on the page. In this embodiment, a menu for table column configuration is completed by combining multiple components such as dropdown boxes, forms, radio boxes, and buttons. The menu first dynamically renders the form according to the JSON array in (3). Then, by clicking the display radio box in the form, it can be configured whether the current column is displayed in the table; by clicking the filterable radio box in the form, it can be configured whether the search bar in the component can query based on this column; by clicking the up and down buttons in the form, the display order of the current column in the table can be modified. In addition, the dynamic rendering method adopted by the page is to render after the user submits, rather than real-time rendering, mainly to avoid the user modifying some configuration items and then canceling without submitting the current configuration, optimizing the user experience.

[0121] (5) Persist the current user identifier, table identifier, and the attributes of each column of the table into the database through the backend interface, so that the user can continue to maintain their personalized table display during subsequent use. Since there is no corresponding user data in the newly created database, all users cannot find the configuration information when they first use it. At this time, default values need to be added, that is, all users who have not configured the table columns will display all data columns according to the configuration information defined by the developer.

[0122] The table query implementation module is used to perform the following:

[0123] (1) For each column in the table, add a queryable configuration item to the list configuration information through the front-end page;

[0124] (2) Process the column names with queryable configuration items in the front-end page into an array as the queryable column array;

[0125] (3) When the search bar provided by the front-end page sends a query request to the backend, send the queryable column array as a parameter to the backend to initiate a query request. Based on the list specified in the query request, the backend is used to call the query construction method of elasticsearch to query the data.

[0126] Correspondingly, the search module of the table is used to perform the following:

[0127] (1) The user enters a query statement or query condition in the input box provided on the front-end page;

[0128] (2) The front-end page passes the query condition and the array of queryable columns as parameters to the back-end;

[0129] (3) The back-end traverses the array of queryable columns, obtains the column name and column data type of each column in the array of queryable columns. For each column of information read, according to the column data type, it calls the query construction method of elasticsearch, splices the corresponding query statement or query condition to execute the query, and returns the query result to the table on the front-end page.

[0130] Based on the table query implementation module and the search module of the table, the implementation of the back-end dynamic query list in the steps of this embodiment specifically includes the following two processes.

[0131] (1) After the front-end configures the dynamic list, considering that there should be a constraint relationship between the columns displayed in the table and the query conditions, that is, the columns not displayed in the current list should not be used as query filtering conditions, so the requirement for implementing the dynamic query list is generated. First, when the front-end page configures the columns to be displayed in the table, a new configuration item "queryable" is added. The column names with this configuration item are processed as an array on the front-end. Each time the search bar in the component sends a query request to the back-end, this array is provided to the back-end as a parameter.

[0132] (2) After the back-end receives the parameter, it traverses the array, takes out the column name and column data type of each column in the array. For each column of information taken out, according to the column data type, it calls the query construction method of elasticsearch, splices the corresponding query statement or query condition. For example, when configuring precise query and fuzzy query, the spliced query statements should be different. For different column data types, there will also be special processing such as adding quotation marks and escape characters.

[0133] As an improvement, the table configuration implementation module of this embodiment is also used to perform the following: Introduce the el-tabs component on the front-end page to implement list configuration between parent and child components. In the front-end page of a vue parent component, introduce the el-tabs component, introduce multiple tabbed tables, and uniformly manage multiple tabbed tables through the parent component.

[0134] The above has detailedly demonstrated and described the present invention through the accompanying drawings and preferred embodiments. However, the present invention is not limited to these disclosed embodiments. Based on the above-mentioned multiple embodiments, those skilled in the art can know that code review means in different above-mentioned embodiments can be combined to obtain more embodiments of the present invention, and these embodiments are also within the protection scope of the present invention.

Claims

1. A method for implementing a table with dynamic configuration for display and search, characterized in that, It includes the following steps: Implementation of the front-end dynamic table component: Based on ElementUI, introduce the table configuration component on the front-end page, define the table column configuration information as a JSON array, add a table column configuration menu for dynamically configuring columns on the front-end page. For each current user, store the table column configuration information set by the user in the form of a JSON array in the back-end, and establish a mapping relationship between the user identifier, the table identifier, and the corresponding JSON array; Implementation of the back-end dynamic query list: When configuring the list of the table on the front-end page, add queryable configuration items to the list. For the queryable columns, cache the queryable columns through the front-end page and form a queryable column array based on the column names. Use the queryable column array and the query conditions as parameters to be passed to the back-end. The back-end executes the query by calling the query construction method of elasticsearch according to the passed-back queryable column array and the query statement, and returns the query result to the front-end page table; Dynamic configuration display of the table: Obtain the current user information through the front-end page cache, read the corresponding JSON array from the back-end based on the user identifier specified in the user information, bind the JSON array to the table configuration component, dynamically render the list on the front-end page and generate an array of queryable columns, and dynamically modify the columns through the table column configuration menu; Search of the table: The front-end page sends the query conditions input by the user and the queryable column array to the back-end in the form of parameters. The back-end executes the query by calling the query construction method of elasticsearch according to the passed-back queryable column array and the query statement, and returns the query result to the front-end page table.

2. The method for implementing a table capable of dynamically configured display and search according to claim 1, wherein The implementation of the front-end dynamic table includes the following steps: Introduce the table component, input box component, and dropdown list component in ElementUI on the front-end page and encapsulate them; For each table, define the table column configuration information of the table as a JSON array. The configuration information of each column in the table is used as a JSON body in the JSON array. Bind the JSON array to the table component, and dynamically render the list on the front-end page through the vue template. The table column configuration information includes column name, column attributes, column width, display status, display order, text type, and switch type or label type. The order of the JSON bodies in the JSON array is the display order of the corresponding columns in the front-end page list; Based on the input box component and the dropdown list component, add a table column configuration menu on the front-end page. The table column configuration menu is used to implement dynamic modification of the list, including configuring whether a column is displayed in the table, the display order of the column in the table, and whether the column supports query; Obtain the user information through the front-end page, store the table column configuration information specified in the user information in the form of a JSON array in the back-end, establish a mapping relationship between the user identifier, the table identifier, and the corresponding JSON array in the back-end, and configure the default table configuration information and store it in the back-end in the form of a JSON array; Correspondingly, the dynamic configuration display of the table includes the following steps: Obtain the user information of the current user through page caching, and obtain the corresponding configuration information from the backend based on the user identifier specified in the user information; If the corresponding configuration information does not exist in the backend, select the JSON array of default table configuration information, bind the corresponding table configuration information in the JSON array to the table component, dynamically render the list on the front-end page and generate an array of queryable columns, and dynamically modify the columns through the table column configuration menu; If the corresponding configuration information exists in the backend, obtain the JSON array of user configuration information, bind the corresponding table configuration information in the JSON array to the table component, dynamically render the list on the front-end page and generate an array of queryable columns, and dynamically modify the columns through the table column configuration menu.

3. The method for implementing a table capable of dynamically configuring display and search according to claim 2, wherein The implementation of the backend dynamic query list includes the following steps: For each column in the table, add a queryable configuration item to the list configuration information through the front-end page; Process the column names with queryable configuration items in the front-end page into an array as the queryable column array; When the search bar provided by the front-end page sends a query request to the backend, use the queryable column array as a parameter to send a query request to the backend. Based on the list specified in the query request, the backend is used to call the query construction method of elasticsearch to perform data query; Correspondingly, the search of the table includes the following steps: The user enters a query statement or query condition in the input box provided by the front-end page; The front-end page passes the query condition and the queryable column array as parameters to the backend; The backend traverses the queryable column array, obtains the column name and column data type of each column in the queryable column array. For each column of information read, call the query construction method of elasticsearch according to the column data type, splice the corresponding query statement or query condition to execute the query, and return the query result to the front-end page table.

4. The method for implementing a table with dynamic configuration of display and search according to any one of claims 1-3, characterized in that, The implementation of the front-end dynamic table component also includes the following steps: Introduce the el-tabs component in the front-end page to implement list configuration between parent and child components. In the front-end page of a vue parent component, introduce the el-tabs component, introduce multiple tabbed tables, and uniformly manage multiple tabbed tables through the parent component.

5. A table implementation system capable of dynamically configuring display and search, characterized in that, For implementing a table implementation method that can be dynamically configured for display and search as described in any one of claims 1-4, the system includes: A table configuration implementation module, which is used to execute the implementation of the front-end dynamic table component: introduce a table configuration component in the front-end page based on ElementUI, define the table column configuration information as a JSON array, add a table column configuration menu for dynamically configuring columns in the front-end page, and store the table column configuration information set by the user in the form of a JSON array to the backend for each current user, and establish a mapping relationship between the user identifier, the table identifier and the corresponding JSON array; Table query implementation module, which is used to execute the implementation of the backend dynamic query list: when the front-end page configures the list of the table, add queryable configuration items to the list. For the queryable columns, cache the queryable columns through the front-end page and form a queryable column array based on the column names, and pass the queryable column array and query conditions as parameters to the backend. The backend executes the query by calling the query construction method of elasticsearch according to the returned queryable column array and query statement, and returns the query result to the front-end page table; Table configuration display module, which is used to obtain the current user information through the front-end page cache, read the corresponding JSON array from the backend based on the user identifier specified in the user information, bind the JSON array to the table configuration component, dynamically render the list on the front-end page and generate an array of queryable columns, and dynamically modify the columns through the table column configuration menu; Table search module, which is used to call the front-end page, send the query conditions input by the user and the queryable column array to the backend in the form of parameters through the front-end page, and call the backend. The backend executes the query by calling the query construction method of elasticsearch according to the returned queryable column array and query statement, and returns the query result to the front-end page table.

6. The table implementation system capable of dynamically configured display and search according to claim 5, wherein The table configuration implementation module is used to execute the following: Introduce the table component, input box component and dropdown list component in ElementUI in the front-end page and encapsulate them; For each table, define the table column configuration information of the table as a JSON array, and the configuration information of each column in the table is used as a JSON body of the JSON array. Bind the JSON array to the table component and dynamically render the list on the front-end page through the vue template. The table column configuration information includes column name, column attributes, column width, display status, display order, text type, and switch type or label type. The order of the JSON bodies in the JSON array is the display order of the corresponding columns in the front-end page list; Based on the input box component and the dropdown list component, add a table column configuration menu on the front-end page, which is used to implement the dynamic modification of the list, including configuring whether the column is displayed in the table, the display order of the column in the table, and whether the column supports query; Obtain the user information through the front-end page, store the specified table column configuration information in the user information in the form of a JSON array in the backend, establish a mapping relationship between the user identifier, table identifier and the corresponding JSON array in the backend, and configure the default table configuration information and store it in the backend in the form of a JSON array; Correspondingly, the table configuration display module is used to execute the following: Obtain the user information of the current user through the page cache, and obtain the corresponding configuration information from the backend based on the user identifier specified in the user information; If there is no corresponding configuration information in the backend, select the JSON array of default table configuration information, bind the corresponding table configuration information in the JSON array to the table component, dynamically render the list on the front-end page and generate an array of queryable columns, and dynamically modify the columns through the table column configuration menu; If there is corresponding configuration information in the backend, obtain the JSON array of user configuration information, bind the corresponding table configuration information in the JSON array to the table component, dynamically render the list on the front-end page and generate an array of queryable columns, and dynamically modify the columns through the table column configuration menu.

7. The table implementation system for dynamically configurable display and search according to claim 6, wherein The table query implementation module is used to perform the following: For each column in the table, add queryable configuration items to the configuration information of the list through the front-end page; Process the column names with queryable configuration items in the front-end page into an array as the queryable column array; When the search bar provided on the front-end page sends a query request to the backend, send the queryable column array as a parameter to the backend. Based on the list specified in the query request, the backend is used to call the query construction method of elasticsearch to perform data query; Correspondingly, the search module of the table is used to perform the following: The user enters a query statement or query condition in the input box provided on the front-end page; The front-end page passes the query condition and the queryable column array as parameters to the backend; The backend traverses the queryable column array, obtains the column name and column data type of each column in the queryable column array. For each column of information read, call the query construction method of elasticsearch according to the column data type, splice the corresponding query statement or query condition to execute the query, and return the query result to the front-end page table.

8. The table implementation system capable of dynamically configured display and search according to any one of claims 5-7, characterized in that The table configuration implementation module is also used to perform the following: Introduce the el-tabs component on the front-end page to implement list configuration between parent and child components. In the front-end page of a vue parent component, introduce the el-tabs component, introduce multiple tabbed tables, and uniformly manage multiple tabbed tables through the parent component.

Images