Table rendering method and device based on JSON configuration, equipment and storage medium

Abstract

The invention discloses a table rendering method, device and equipment based on JSON configuration and a storage medium, and relates to the technical field of table rendering, the method comprises the steps that a JSON configuration format of a table is defined at an administrator client, and the JSON configuration format comprises column configuration, data configuration and style configuration of the table; sending the JSON configuration data to a server side; when a user accesses a user client, a server receives the JSON configuration data and analyzes the JSON configuration data to obtain column information, data request rules and style information of a table; the server side returns the analyzed JSON configuration data to the user client side; the user client generates a Vue code of a table according to the column information, the data request rule and the style information; and the user client executes the Vue code to generate a corresponding HTML code, and renders and displays the table.

Description

Technical Field

[0001] This application relates to the technical field of table rendering, and particularly to a table rendering method, device, equipment, and storage medium based on JSON configuration. Background Art

[0002] In the Internet era, the rapid development of information technology enables a vast amount of data to be transmitted and stored in the form of images on the Internet every moment. These image data often contain a vast amount of text content, which poses more complex requirements for the utilization of image data. As an efficient structure for carrying text information, tables often appear in various images containing information introductions. Identifying the structure of the tables and the content of the cells in these table images is of great significance.

[0003] In the traditional development mode, developers need to write a large amount of HTML code to implement table rendering, which not only increases the development workload but also is not conducive to the unified maintenance of page styles. Summary of the Invention

[0004] The purpose of this application is to provide a table rendering method, device, equipment, and storage medium based on JSON configuration.

[0005] To achieve the above purpose, this application provides the following solutions:

[0006] In the first aspect, this application provides a table rendering method based on JSON configuration, including:

[0007] Defining the JSON configuration format of the table on the administrator client, where the JSON configuration format includes column configuration, data configuration, and style configuration of the table;

[0008] Sending the JSON configuration data to the server;

[0009] When a user accesses the user client, the server will receive the JSON configuration data, parse the JSON configuration data to obtain column information, data request rules, and style information of the table;

[0010] The server returns the parsed JSON configuration data to the user client;

[0011] The user client generates Vue code for the table according to the column information, data request rules, and style information;

[0012] The user client executes the Vue code to generate the corresponding HTML code and renders and displays the table.

[0013] Optionally, the step of defining the JSON configuration format of the table on the administrator client includes:

[0014] Determine the column configuration section in the JSON configuration format, where the column configuration section includes column identifier, column name, data type, whether to display, whether to be editable, sorting rule, and corresponding data field name;

[0015] Determine the data configuration section in the JSON configuration format, where the data configuration section includes data request address, data request parameters, and paging rule;

[0016] Determine the style configuration section in the JSON configuration format, where the style configuration section includes style class name of the table, column width, row height, background color, and font style.

[0017] Optionally, the step of defining the JSON configuration format of the table in the administrator client includes:

[0018] Provide a visual table configuration interface, where the table configuration interface includes a column configuration area, a data configuration area, and a style configuration area;

[0019] Receive the column configuration information input by the developer in the column configuration area, and generate JSON data of the column configuration section according to the column configuration information;

[0020] Receive the data configuration information input by the developer in the data configuration area, and generate JSON data of the data configuration section according to the data configuration information;

[0021] Receive the style configuration information input by the developer in the style configuration area, and generate JSON data of the style configuration section according to the style configuration information;

[0022] Combine the JSON data of the column configuration section, the JSON data of the data configuration section, and the JSON data of the style configuration section into complete JSON configuration data.

[0023] Optionally, the step of sending the JSON configuration data to the server includes:

[0024] The administrator client sends the JSON configuration data to the preset receiving address of the server through a preset communication protocol.

[0025] Optionally, the step that the server receives the JSON configuration data and parses the JSON configuration data to obtain the column information, data request rule, and style information of the table includes:

[0026] After the server receives the JSON configuration data, it parses the JSON configuration data;

[0027] Extract the column information of the table according to the parsing result, where the column information includes column identifiers, column names, and data types;

[0028] Extract the data request rules according to the parsing result, where the data request rules include data request addresses, data request parameters, and paging rules;

[0029] Extract the style information according to the parsing result, where the style information includes the style class name, column width, and row height of the table.

[0030] Optionally, the step of the server returning the parsed JSON configuration data to the user client includes:

[0031] The server returns the corresponding JSON configuration information according to the column information;

[0032] The server requests the data required for the table from a database or other data source according to the data request rules in the JSON configuration information;

[0033] After receiving the data, the server assembles and returns the data to the user client;

[0034] The step of the user client generating the Vue code of the table according to the column information, data request rules, and style information includes:

[0035] The user client generates HTML rendering code according to the style information, JSON configuration information, and data information in combination with Vue code.

[0036] Optionally, after the step of the user client generating the HTML rendering code according to the style information, JSON configuration information, and data information in combination with Vue code, the method further includes:

[0037] The user client generates a custom table style according to the custom template code.

[0038] In a second aspect, the present application provides a table rendering system based on JSON configuration, including:

[0039] An administrator client for defining the JSON configuration format of the table, where the JSON configuration format includes column configuration, data configuration, and style configuration of the table;

[0040] Sending the JSON configuration data to the server;

[0041] A server for receiving the JSON configuration data and parsing the JSON configuration data to obtain the column information, data request rules, and style information of the table when a user accesses the user client;

[0042] Return the parsed JSON configuration data to the client;

[0043] A user client for generating Vue code for a table based on the column information, data request rules, and style information;

[0044] Execute the Vue code to generate the corresponding HTML code and render and display the table.

[0045] Optionally, the administrator client is further configured to:

[0046] Determine the column configuration part in the JSON configuration format, where the column configuration part includes column identifiers, column names, data types, whether to display, whether to be editable, sorting rules, and corresponding data field names;

[0047] Determine the data configuration part in the JSON configuration format, where the data configuration part includes data request addresses, data request parameters, and paging rules;

[0048] Determine the style configuration part in the JSON configuration format, where the style configuration part includes the style class name of the table, column width, row height, background color, and font style.

[0049] Optionally, the administrator client is further configured to:

[0050] Provide a visual table configuration interface, where the table configuration interface includes a column configuration area, a data configuration area, and a style configuration area;

[0051] Receive the column configuration information input by the developer in the column configuration area and generate JSON data for the column configuration part according to the column configuration information;

[0052] Receive the data configuration information input by the developer in the data configuration area and generate JSON data for the data configuration part according to the data configuration information;

[0053] Receive the style configuration information input by the developer in the style configuration area and generate JSON data for the style configuration part according to the style configuration information;

[0054] Combine the JSON data for the column configuration part, the JSON data for the data configuration part, and the JSON data for the style configuration part into complete JSON configuration data.

[0055] Optionally, the administrator client is further configured to:

[0056] Send the JSON configuration data to a preset receiving address on the server through a preset communication protocol.

[0057] Optionally, the server is further configured to:

[0058] After receiving the JSON configuration data, parse the JSON configuration data;

[0059] Extract column information of the table according to the parsing result, where the column information includes column identifiers, column names, and data types;

[0060] Extract data request rules according to the parsing result, where the data request rules include data request addresses, data request parameters, and paging rules;

[0061] Extract style information according to the parsing result, where the style information includes table style class names, column widths, and row heights.

[0062] Optionally, the server is further configured to:

[0063] Return corresponding JSON configuration information according to the column information;

[0064] Request data required for the table from a database or other data sources according to the data request rules in the JSON configuration information;

[0065] After receiving the data, splice and assemble the data and return it to the user client;

[0066] The user client is further configured to:

[0067] The user client generates HTML rendering code by combining the style information, JSON configuration information, and data information with Vue code.

[0068] Optionally, the user client is further configured to:

[0069] The user client generates a custom table style according to the custom template code.

[0070] In a third aspect, the present application provides a computer device, including: a memory, a processor, and a computer program stored on the memory and executable on the processor, where the processor executes the computer program to implement the steps of the JSON configuration-based table rendering method described in any one of the above.

[0071] In a fourth aspect, the present application provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the steps of the JSON configuration-based table rendering method described in any one of the above are implemented.

[0072] In a fifth aspect, the present application provides a computer program product, including a computer program which, when executed by a processor, implements the steps of the method for rendering a table based on JSON configuration described in any one of the above.

[0073] In a sixth aspect, the present application provides an electronic device, including: a processor, where the processor is used to execute the steps of the method for rendering a table based on JSON configuration described above.

[0074] According to the specific embodiments provided by the present application, the following technical effects are disclosed in the present application:

[0075] The present application provides a method, device, equipment and storage medium for rendering a table based on JSON configuration. By defining a unified JSON configuration format, the efficiency of table development is greatly improved. The flexibility and scalability of the JSON format enable the columns, data and styles of the table to be customized according to business requirements, without the need to write cumbersome code for each table. This design not only reduces the development threshold, but also enables non-technical personnel to participate in table configuration, further improving the development efficiency. At the same time, the flexibility and scalability of the table are enhanced. When the business requirements change, only the JSON configuration needs to be updated, without modifying the underlying code, which greatly simplifies the maintenance work of the system. In addition, the unified management of style configuration ensures that the table can maintain a consistent visual effect on different pages and scenarios, improving the consistency of the user experience. Moreover, the user experience is optimized. The real-time preview function provided by the client enables users to instantly see the table effect during the configuration process, enhancing the interactivity. The server dynamically generates the required data according to the user request and returns it, reducing the waiting time and improving the response speed. This instant response mechanism enables users to obtain the required information faster, further improving the user satisfaction. Description of the Drawings

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

[0077] Figure 1 It is a schematic flowchart of a method for rendering a table based on JSON configuration provided by an embodiment of the present application;

[0078] Figure 2 It is one of the schematic logical diagrams of a method for rendering a table based on JSON configuration provided by an embodiment of the present application;

[0079] Figure 3Schematic diagram 2 of the logic of a table rendering method based on JSON configuration provided by an embodiment of the present application;

[0080] Figure 4 Functional module schematic diagram of a table rendering system based on JSON configuration provided by an embodiment of the present application;

[0081] Figure 5 Schematic diagram of the structure of a computer device provided by an embodiment of the present application. Detailed implementation manners

[0082] Next, the technical solutions in the embodiments of the present application will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present application.

[0083] As Figure 1 shown, some embodiments of the present application provide a table rendering method based on JSON configuration. In the embodiments of the present application, the following steps 101 to 106 are included. Among them:

[0084] Step 101, define the JSON configuration format of the table on the administrator client, and the JSON configuration format includes column configuration, data configuration, and style configuration of the table.

[0085] In the embodiments of the present application, a JSON configuration format is first defined to describe various attributes of the table. This JSON configuration format generally includes three major parts: column configuration (colConfig), data configuration (dataConfig), and style configuration (styleConfig) of the table. Column configuration (colConfig): Defines the column information of the table, including attributes such as the display name of each column, the corresponding data field, the width of the column, whether it is sortable, and whether it is fixed. This configuration enables the table to flexibly adjust the column layout according to different business requirements. Data configuration (dataConfig): Describes how to obtain the data required by the table. It may include the data source URL, request parameters, paging information, etc. The data configuration enables the server to accurately return the required data according to the request of the administrator client. Style configuration (styleConfig): Defines the style information of the table, such as table border, background color, font style, etc. The style configuration ensures that the table can maintain a consistent visual effect in different pages and scenarios.

[0086] Specifically, referring to Figure 2 , the process of defining the JSON configuration format of the table can be as follows:

[0087] In the first step, enter the table column configuration interface and generate the required JSON configuration for the table through the visual column configuration function (you can also manually configure the JSON file).

[0088] In the second step: obtain the configured JSON of the table through the encapsulated LoadMtc method in the.cs file and assign it to ViewData

[0089] In the third step: obtain the column configuration in the.cs file through the @Html.Raw(Model.LoadMtc()) method in the.cshtml file and assign it to a certain field in the vue data

[0090] In the fourth step: on the page introducing the jstui component library, use the j-table tag to bind the JSON configuration generated by the server and assign the data data to the j-table. The jstui component is a ui component library developed by the overseas business department of Jushuitan and suitable for the project.

[0091] So far, when the code runs, the corresponding table can be generated in the web browser and displayed in the corresponding j-table area; when the user clicks the query, the front end will initiate a request to the server according to axios. The server obtains the JSON configuration according to the OnPostPageLoadAsync method and automatically generates the table data required for the corresponding request and returns it to the front-end page.

[0092] The administrator client provides a visual table configuration interface where users can input or select various configuration information of the table, such as the name, data type, data source, etc. of the table columns. This information is then collected and processed by the administrator client program.

[0093] Step 102: Send the JSON configuration data to the server.

[0094] In the embodiment of the present application, once the user completes the table configuration, the administrator client program organizes this configuration information into JSON data according to the previously defined JSON configuration format. Then, the administrator client sends this JSON configuration data to the server through HTTP requests or other means.

[0095] Step 103: When the user accesses the user client, the server will receive the JSON configuration data, parse the JSON configuration data to obtain the column information, data request rules, and style information of the table.

[0096] In the embodiment of the present application, after the server receives the JSON configuration data sent by the administrator client, it first performs parsing. The parsing process involves syntax checking and data structure verification of the JSON data to ensure the integrity and accuracy of the data.

[0097] Refer to Figure 3 , the specific parsing process is as follows: The j-table component is a table component encapsulated based on vue. The main parameters include colConfig (column configuration), data (table data), dataPage (table pagination), etc. Among them, the colConfig and data parameters are required. If the table only needs to be displayed without special functional requirements, only these two parameters need to be configured to generate the required table; the j-table component generates the corresponding tr and td through parsing the colConfig field and using the v-for loop of vue. Among them, the label field is used to display the table header name, and the name field is used to match the data in the data field. In addition, the colConfig field can also configure functions such as column width, whether it is fixed, sorting, etc.; its template field can also customize the cell style, which is achieved by obtaining the vue slot. This custom provides increased extensibility of the component and more usage scenarios for the table;

[0098] The j-table component also encapsulates most of the operation events. Developers can configure row-click (row click event callback), row-check (multiple checkbox selection event callback), etc. These methods will all return the data of the row clicked by the user. Developers can perform save and modification operations according to the returned data without paying attention to the ui style;

[0099] In the table column configuration interface, the column configuration data conforming to the colConfig format can be edited;

[0100] When the server receives a table data request, it first obtains the json configuration of the table through the encapsulated OnPostPageLoadAsync method, parses the colList content, obtains the values in the database according to the fld field, and generates the corresponding table data to be returned to the front end for display.

[0101] Step 104, when the user accesses the user client, the server will receive the JSON configuration data and parse the JSON configuration data to obtain the column information, data request rules, and style information of the table.

[0102] In an embodiment of the present application, after parsing the JSON configuration data, the server dynamically generates the HTML rendering code for the table according to the column information, data request rules, and style information therein. This process may involve multiple links such as database query, data conversion, and template rendering. The generated HTML code will include the structure, data, and style information of the table.

[0103] Step 105, the server returns the parsed JSON configuration data to the user client.

[0104] In an embodiment of the present application, the server returns the parsed JSON configuration data to the user client by means of an HTTP response or the like.

[0105] Step 106, the user client executes the Vue code to generate the corresponding HTML code and renders and displays the table.

[0106] In an embodiment of the present application, after receiving the parsed JSON configuration data returned by the server, the user client will execute the corresponding Vue code to generate the corresponding HTML code, which is embedded in the current web page. The browser parses and executes this HTML code, thereby rendering the table configured by the user on the web page. This process involves multiple links such as the DOM parsing and rendering engine of the browser. Finally, the user can see the table generated according to their configuration information on the web page.

[0107] In an embodiment of the present application, by defining a unified JSON configuration format, the efficiency of table development is greatly improved. The flexibility and scalability of the JSON format enable the columns, data, and styles of the table to be customized according to business requirements, without having to write cumbersome code for each table. This design not only lowers the development threshold but also enables non-technical personnel to participate in table configuration, further improving the development efficiency. At the same time, the flexibility and scalability of the table are enhanced. When the business requirements change, only the JSON configuration needs to be updated, without modifying the underlying code, which greatly simplifies the maintenance work of the system. In addition, the unified management of style configuration ensures that the table can maintain a consistent visual effect in different pages and scenarios, improving the consistency of the user experience. Moreover, the user experience is optimized. The real-time preview function provided by the client enables users to instantly see the table effect during the configuration process, enhancing the interactivity. The server dynamically generates the required data according to the user request and returns it, reducing the waiting time and improving the response speed. This instant response mechanism enables users to obtain the required information faster, further improving user satisfaction.

[0108] Optionally, step 101 includes:

[0109] Step 1011: Determine the column configuration section in the JSON configuration format. The column configuration section includes column identifier, column name, data type, whether to display, whether to be editable, sorting rule, and the corresponding data field name.

[0110] In the embodiments of the present application, the column identifier is the unique identifier for each column, which is used to distinguish different columns in the program. When generating a table or processing table data, the column identifier can be used as an index or key to ensure the accuracy and consistency of the data.

[0111] The column name is the column name displayed at the table header, which is used to tell the user what type of data the column contains. The column name should be concise and clear, and can accurately reflect the content of the column.

[0112] The data type specifies the type of data in the column, such as string, number, date, etc. This helps the program to adopt the correct format and verification method when processing data.

[0113] Whether to display is a boolean value, which is used to specify whether the column is displayed in the table. In some cases, it may not be necessary to display all columns, so the unnecessary columns can be hidden through this setting.

[0114] Whether to be editable is a boolean value, which is used to specify whether the user can edit the data in the column. For read-only data or critical data, it can be set to non-editable.

[0115] The sorting rule specifies the sorting method of the column data, such as ascending order, descending order, or default no sorting. This helps the user to arrange the data in a specific order when viewing the data.

[0116] The corresponding data field name is the name corresponding to the field in the data source. When obtaining or submitting data, the program will map the data according to this field name.

[0117] Step 1012: Determine the data configuration section in the JSON configuration format. The data configuration section includes data request address, data request parameters, and paging rule.

[0118] In the embodiments of the present application, the data request address is the URL or interface address for obtaining table data. The program will request data through this address to populate the table.

[0119] The data request parameters are the parameters required when requesting data, such as query conditions, filtering conditions, etc. These parameters will affect the returned data results.

[0120] The paging rule specifies how to display the returned data in pages. This includes information such as the number of data items displayed per page, the current page number, and the total number of pages.

[0121] Step 1013, determine the style configuration part in the JSON configuration format, where the style configuration part includes the style class name, column width, row height, background color, and font style of the table.

[0122] In the embodiments of the present application, the style class name of the table is the CSS class name applied to the table and is used to define the overall style of the table. By modifying the style rules of this class name, the appearance of the table can be changed.

[0123] The column width specifies the width of each column. This helps to keep the table neat and easy to read.

[0124] The row height specifies the height of the table rows. Appropriate row height can make the table more beautiful and easy to read.

[0125] The background color sets the background color of the table or cells. This can be used to highlight certain data or change the overall visual effect of the table.

[0126] The font style specifies the font, size, color, etc. of the text in the table. This helps to improve the readability and aesthetics of the table.

[0127] Optionally, step 102 includes:

[0128] Step 1021, provide a visual table configuration interface, where the table configuration interface includes a column configuration area, a data configuration area, and a style configuration area.

[0129] In the embodiments of the present application, create a developer-friendly graphical interface, that is, a table configuration interface, for developers to conveniently configure various attributes of the table. This interface is divided into three main areas: a column configuration area, a data configuration area, and a style configuration area. Each area focuses on different aspects of table configuration, enabling developers to clearly understand and operate. By providing a visual interface, the complexity of developers' configuring the table is reduced, allowing non-technical personnel to easily participate in the configuration and design of the table.

[0130] Step 1022, receive the column configuration information input by the developer in the column configuration area and generate the JSON data of the column configuration part according to the column configuration information.

[0131] In the embodiments of the present application, in the column configuration area, the developer can input or select relevant attributes of the column, such as column identifier, column name, data type, etc. The system will generate or update the JSON data of the column configuration part in real time according to the developer's input. Collect the column configuration information in a developer-friendly way and convert it into a structured JSON format for subsequent program processing and rendering.

[0132] Step 1023, receive the data configuration information input by the developer in the data configuration area, and generate JSON data for the data configuration part according to the data configuration information.

[0133] In the embodiment of the present application, in the data configuration area, the developer can specify the address, parameters, paging rules, etc. of the data request. The system will generate JSON data for the data configuration part based on these inputs. It allows the developer to flexibly configure the data source and presentation method to ensure that the table can display data that meets the business requirements.

[0134] Step 1024, receive the style configuration information input by the developer in the style configuration area, and generate JSON data for the style configuration part according to the style configuration information.

[0135] In the embodiment of the present application, in the style configuration area, the developer can select or input the style class name, column width, row height, background color, font style, etc. of the table. The system will generate JSON data for the style configuration part based on these style information. It provides flexible style configuration options, enabling the developer to customize the appearance of the table according to the brand or personal preference.

[0136] Step 1025, combine the JSON data of the column configuration part, the JSON data of the data configuration part, and the JSON data of the style configuration part into complete JSON configuration data.

[0137] In the embodiment of the present application, the system will combine the JSON data of the column configuration, data configuration, and style configuration generated in the previous three steps into a complete JSON configuration data. This complete JSON configuration data contains all the configuration information of the table and can be used for subsequent table rendering and data processing. By combining the configuration information of different parts, a comprehensive and structured configuration data is generated, providing a complete instruction set for table rendering and data processing.

[0138] Optionally, step 103 includes: the administrator client sends the JSON configuration data to a preset receiving address on the server through a preset communication protocol.

[0139] In the embodiment of the present application, the communication protocol is the rules and agreements followed when transmitting data between the administrator client and the server. A preset communication protocol means that how to transmit data has been previously agreed between the client and the server, including the data format, transmission method, error handling mechanism, etc. Common communication protocols include HTTP, HTTPS, WebSocket, etc. Which protocol to use specifically depends on the application requirements and server support.

[0140] The server is a server or a cluster of servers that provides data processing and storage services. The preset receiving address is a specific URL or interface set by the server to receive the JSON configuration data sent by the client. The client sends the JSON configuration data to this receiving address through a communication protocol. After receiving the data, the server will perform corresponding processing according to the configuration data, such as generating tables, querying data, etc.

[0141] Optionally, step 104 includes:

[0142] Step 1041, after the server receives the JSON configuration data, it parses the JSON configuration data.

[0143] In the embodiment of the present application, after the server receives the JSON configuration data sent by the client, it first needs to parse these data. The parsing process is to convert the JSON-formatted string data into a data structure that the server program can understand and operate on, such as an object or an array. This step is the basis for subsequent processing. Only by correctly parsing the JSON data can the server perform corresponding operations according to the configuration.

[0144] Step 1042, extract the column information of the table according to the parsing result, where the column information includes column identifiers, column names, and data types.

[0145] In the embodiment of the present application, after parsing the JSON configuration data, the server extracts the column information of the table according to the parsing result. The column information usually includes column identifiers (used to uniquely identify each column), column names (names displayed at the table header), and data types (types of data in the column, such as strings, numbers, etc.). These column information are necessary for generating the table structure, processing table data, and rendering the table.

[0146] Step 1043, extract the data request rules according to the parsing result, where the data request rules include data request addresses, data request parameters, and paging rules.

[0147] In the embodiment of the present application, the server also extracts the data request rules from the parsing result. The data request rules specify how to obtain the data required by the table, including data request addresses (source URLs or interfaces of the data), data request parameters (conditions for filtering or querying data), and paging rules (how to display the data in pages). These rules ensure that the server can correctly request and process data to meet the display requirements of the table.

[0148] Step 1044, extract the style information according to the parsing result, where the style information includes the style class name, column width, and row height of the table.

[0149] In the embodiments of the present application, the server extracts style information from the parsing result. The style information defines the appearance and layout of the table, including the style class name of the table (used to apply CSS styles), column widths (the width of each column), row heights (the height of each row), etc. These style information enable the server to generate a table appearance that meets the user's needs and improve the user experience.

[0150] Optionally, step 105 includes:

[0151] Step 1051, the server returns the corresponding JSON configuration information according to the column information.

[0152] In the embodiments of the present application, after the server extracts the column information, it generates the HTML structure of the table according to this information. The HTML structure includes a table header (usually containing column names) and a table body part (used to fill data). The server generates corresponding HTML tags (such as , , , , , etc.) to construct the basic framework of the table.

[0153] Step 1052: The server requests the data required for the table from the database or other data sources according to the data request rules described in the JSON configuration information.

[0154] In the embodiment of the present application, after extracting the data request rules, the server will initiate a data request to the database or other data sources according to these rules. The data request rules include data request addresses, data request parameters, paging rules, etc. These information guide the server on how to obtain the required data. The server may use methods such as SQL queries and API calls to obtain data from the database or external services.

[0155] Step 1053: After receiving the data, the server assembles and returns the data to the user client.

[0156] In the embodiment of the present application, after receiving the data, the server will fill the data into the corresponding positions in the main body of the table according to the column information and the structure of the data. The data of each column will correspond to the Inside the label, fill in according to the order of rows and columns. The server may perform operations such as data format conversion and data verification to ensure the correctness and consistency of the data.

[0157] Step 1054, the user client generates HTML rendering code according to the style information, JSON configuration information, and data information combined with Vue code.

[0158] In the embodiment of the present application, after the user client extracts the style information, it will adjust the style of the generated HTML rendering code according to this information. The style information includes the style class name, column width, row height, etc. of the table, which are used to define the appearance and layout of the table. The user client will apply the style class name to the HTML tags, or apply style rules through inline styles, CSS files, etc. The style adjustment makes the generated table more in line with the user's needs and aesthetics, improving the user experience.

[0159] Optionally, after the step 1054, the method further includes: the user client generates a custom table style according to the custom template code.

[0160] In the embodiment of the present application, after the user client generates the HTML rendering code of the table, it will first perform optimization processing on this code. The purpose of the optimization processing is to improve the quality of the code, making it more efficient, readable, and easy to maintain.

[0161] Readability refers to the degree to which the code is easy for humans to understand and read. The server may improve its readability by formatting the code (such as indenting, line breaks, comments, etc.). A clear code structure, meaningful variable names, and comments can all help developers understand the logic and purpose of the code faster. Improving readability not only helps with current maintenance work but also facilitates future code expansion and modification.

[0162] Execution efficiency refers to the speed and resource consumption of the code during runtime. The server may improve the execution efficiency of the code by deleting unnecessary code, merging duplicate code blocks, using more efficient algorithms or data structures, etc.

[0163] Based on the same inventive concept, the embodiment of the present application also provides a JSON configuration-based table rendering system for implementing the above-mentioned JSON configuration-based table rendering method. The implementation solutions provided by this device to solve problems are similar to the implementation solutions described in the above method. Therefore, the specific limitations in one or more of the following JSON configuration-based table rendering system embodiments can refer to the limitations on the JSON configuration-based table rendering method in the above text and will not be elaborated here.

[0164] In an exemplary embodiment, such as Figure 4 As shown, a table rendering system 20 based on JSON configuration is provided, including:

[0165] An administrator client 201 for defining the JSON configuration format of the table, where the JSON configuration format includes column configuration, data configuration, and style configuration of the table;

[0166] Sending the JSON configuration data to the server 202;

[0167] A server 202 for receiving the JSON configuration data and parsing the JSON configuration data to obtain column information, data request rules, and style information of the table when a user accesses the user client 203;

[0168] Returning the parsed JSON configuration data to the client;

[0169] A user client 203 for generating Vue code of the table according to the column information, data request rules, and style information;

[0170] Executing the Vue code to generate corresponding HTML code and rendering and displaying the table.

[0171] Optionally, the administrator client 201 is further configured to:

[0172] Determine the column configuration part in the JSON configuration format, where the column configuration part includes column identifier, column name, data type, whether to display, whether to be editable, sorting rule, and corresponding data field name;

[0173] Determine the data configuration part in the JSON configuration format, where the data configuration part includes data request address, data request parameters, and pagination rule;

[0174] Determine the style configuration part in the JSON configuration format, where the style configuration part includes style class name of the table, column width, row height, background color, and font style.

[0175] Optionally, the administrator client 201 is further configured to:

[0176] Provide a visual table configuration interface, where the table configuration interface includes a column configuration area, a data configuration area, and a style configuration area;

[0177] Receive column configuration information input by a developer in the column configuration area and generate JSON data of the column configuration part according to the column configuration information;

[0178] Receive the data configuration information input by the developer in the data configuration area, and generate JSON data for the data configuration part according to the data configuration information;

[0179] Receive the style configuration information input by the developer in the style configuration area, and generate JSON data for the style configuration part according to the style configuration information;

[0180] Combine the JSON data of the column configuration part, the JSON data of the data configuration part, and the JSON data of the style configuration part into complete JSON configuration data.

[0181] Optionally, the administrator client 201 is further configured to:

[0182] Send the JSON configuration data to the preset receiving address of the server 202 through a preset communication protocol.

[0183] Optionally, the server 202 is further configured to:

[0184] After receiving the JSON configuration data, parse the JSON configuration data;

[0185] Extract the column information of the table according to the parsing result, where the column information includes column identifier, column name, and data type;

[0186] Extract the data request rules according to the parsing result, where the data request rules include data request address, data request parameters, and paging rules;

[0187] Extract the style information according to the parsing result, where the style information includes the style class name, column width, and row height of the table.

[0188] Optionally, the server 202 is further configured to:

[0189] Return the corresponding JSON configuration information according to the column information;

[0190] Request the data required by the table from the database or other data sources according to the data request rules in the JSON configuration information;

[0191] After receiving the data, splice and assemble the data and return it to the user client 203;

[0192] The user client 203 is further configured to:

[0193] The user client 203 generates HTML rendering code according to the style information, JSON configuration information, and data information in combination with Vue code.

[0194] Optionally, the user client 203 is further configured to:

[0195] The user client 203 generates a custom table style according to the custom template code.

[0196] In the embodiments of the present application, by defining a unified JSON configuration format, the efficiency of table development is greatly improved. The flexibility and scalability of the JSON format enable the columns, data, and styles of the table to be customized according to business requirements, eliminating the need to write cumbersome code for each table. This design not only lowers the development threshold but also allows non-technical personnel to participate in table configuration, further enhancing development efficiency. At the same time, the flexibility and scalability of the table are enhanced. When business requirements change, only the JSON configuration needs to be updated, without modifying the underlying code, which greatly simplifies system maintenance. In addition, the unified management of style configuration ensures that the table maintains a consistent visual effect on different pages and scenarios, improving the consistency of the user experience. Moreover, the user experience is optimized. The real-time preview function provided by the client enables users to instantly see the table effect during the configuration process, enhancing interactivity. The server dynamically generates the required data according to the user request and returns it, reducing waiting time and improving response speed. This instant response mechanism enables users to obtain the required information faster, further increasing user satisfaction.

[0197] The present application provides an electronic device, including: a processor, and the processor is configured to execute the steps of the above-mentioned JSON configuration-based table rendering method.

[0198] In an exemplary embodiment, a computer device is provided. The computer device can be a server or a terminal, and its internal structure diagram can be as Figure 5 shown. The computer device includes a processor, a memory, an input / output interface (Input / Output, abbreviated as I / O), and a communication interface. Among them, the processor, the memory, and the input / output interface are connected through a system bus, and the communication interface is connected to the system bus through the input / output interface. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program, and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The database of the computer device is used to store JSON configuration-based table rendering data. The input / output interface of the computer device is used for the processor to exchange information with external devices. The communication interface of the computer device is used to communicate with external terminals through a network connection. When the computer program is executed by the processor, it implements a JSON configuration-based table rendering method.

[0199] Those skilled in the art can understand that Figure 5 The structure shown is only a block diagram of some structures related to the solution of this application, and does not constitute a limitation on the computer device to which the solution of this application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine some components, or have different component arrangements.

[0200] In an exemplary embodiment, a computer device is further provided, including a memory and a processor. A computer program is stored in the memory, and when the processor executes the computer program, the steps in the above method embodiments are implemented.

[0201] In an exemplary embodiment, a computer-readable storage medium is provided, storing a computer program, and when the computer program is executed by a processor, the steps in the above method embodiments are implemented.

[0202] In an exemplary embodiment, a computer program product is provided, including a computer program, and when the computer program is executed by a processor, the steps in the above method embodiments are implemented.

[0203] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use, and processing of relevant data need to comply with relevant regulations.

[0204] Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be completed by instructing relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above methods. Among them, any reference to a memory, database, or other medium used in the embodiments provided in this application can include at least one of non-volatile and volatile memories. Non-volatile memories can include read-only memory (ROM), magnetic tapes, floppy disks, flash memories, optical memories, high-density embedded non-volatile memories, resistive random access memories (ReRAMs), magnetoresistive random access memories (MRAMs), ferroelectric random access memories (FRAMs), phase change memories (PCMs), graphene memories, etc. Volatile memories can include random access memory (RAM) or external cache memories, etc. By way of illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM), etc.

[0205] The databases involved in the embodiments provided in this application can include at least one of relational databases and non-relational databases. Non-relational databases can include distributed databases based on blockchain, etc., without limitation. The processors involved in the embodiments provided in this application can be general-purpose processors, central processors, graphics processors, digital signal processors, programmable logics, data processing logics based on quantum computing, etc., without limitation.

[0206] The technical features of the above embodiments can be combined arbitrarily. For the sake of concise description, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, it should be considered as the scope described in this specification.

[0207] In this article, specific examples are used to elaborate on the principles and implementation manners of this application. The description of the above embodiments is only used to help understand the method and its core idea of this application; at the same time, for those of ordinary skill in the art, according to the idea of this application, there will be changes in the specific implementation manners and application scopes. In summary, the content of this specification should not be construed as a limitation to this application.

Claims

1. A table rendering method based on JSON configuration, characterized in that: The table rendering method based on JSON configuration includes: Define the JSON configuration format of the table on the administrator client, where the JSON configuration format includes the column configuration, data configuration, and style configuration of the table; Send the JSON configuration data to the server; When a user accesses the user client, the server receives the JSON configuration data and parses the JSON configuration data to obtain table column information, data request rules, and style information; The server returns the parsed JSON configuration data to the user client; The user client generates the Vue code of the table according to the column information, data request rules and style information; The user client executes the Vue code to generate corresponding HTML code, and renders and displays the table.

2. The table rendering method based on JSON configuration according to claim 1, characterized in that: The step of defining the JSON configuration format of the table on the administrator client includes: Determine a column configuration part in the JSON configuration format, wherein the column configuration part includes a column identifier, a column name, a data type, whether to display, whether to edit, a sorting rule, and a corresponding data field name; Determine a data configuration part in the JSON configuration format, wherein the data configuration part includes a data request address, data request parameters, and paging rules; A style configuration part in the JSON configuration format is determined, wherein the style configuration part includes a style class name, column width, row height, background color, and font style of a table.

3. The table rendering method based on JSON configuration according to claim 2 is characterized in that: The step of defining the JSON configuration format of the table on the administrator client includes: Provide a visual table configuration interface, which includes a column configuration area, a data configuration area, and a style configuration area; Receive the column configuration information input by the developer in the column configuration area, and generate JSON data of the column configuration part according to the column configuration information; Receive data configuration information input by the developer in the data configuration area, and generate JSON data of the data configuration part according to the data configuration information; Receiving style configuration information input by a developer in the style configuration area, and generating JSON data of a style configuration part according to the style configuration information; The JSON data of the column configuration part, the JSON data of the data configuration part, and the JSON data of the style configuration part are combined into complete JSON configuration data.

4. The table rendering method based on JSON configuration according to claim 3 is characterized in that: The step of sending the JSON configuration data to the server includes: The administrator client sends the JSON configuration data to the preset receiving address of the server through a preset communication protocol.

5. The table rendering method based on JSON configuration according to claim 1, characterized in that: The server receives the JSON configuration data and parses the JSON configuration data to obtain table column information, data request rules, and style information, including: After receiving the JSON configuration data, the server parses the JSON configuration data; Extracting table column information according to the parsing result, wherein the column information includes column identifier, column name, and data type; Extracting data request rules according to the parsing results, wherein the data request rules include data request addresses, data request parameters and paging rules; The style information is extracted according to the parsing result, and the style information includes the style class name, column width, and row height of the table.

6. The table rendering method based on JSON configuration according to claim 1, characterized in that: The step of the server returning the parsed JSON configuration data to the user client includes: The server returns the corresponding JSON configuration information according to the column information; The server requests the data required for the table from the database or other data source according to the data request rules described in the JSON configuration information; After receiving the data, the server will assemble and splice the data and return it to the user client; The step of the user client generating the Vue code of the table according to the column information, data request rules and style information includes: The user client generates HTML rendering code according to the style information, JSON configuration information, data information and Vue code.

7. The table rendering method based on JSON configuration according to claim 6 is characterized in that: After the user client generates HTML rendering code according to the style information, JSON configuration information, data information and Vue code, the method further includes: The user client generates a customized table style based on the customized template code.

8. A table rendering system based on JSON configuration, characterized in that: The table rendering system based on JSON configuration includes: The administrator client is used to define the JSON configuration format of the table, which includes the column configuration, data configuration and style configuration of the table; Send the JSON configuration data to the server; The server is used to receive the JSON configuration data when the user accesses the user client, and parse the JSON configuration data to obtain the column information, data request rules and style information of the table; Return the parsed JSON configuration data to the client; A user client, used to generate a Vue code of a table according to the column information, data request rules and style information; Execute the Vue code to generate the corresponding HTML code, and render and display the table.

9. An electronic device, characterized in that: include: A processor, wherein the processor is used to execute the steps of the table rendering method based on JSON configuration as described in any one of claims 1 to 7.

10. A computer device comprising: A memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the table rendering method based on JSON configuration described in any one of claims 1 to 7.

Images