Data rendering method, system, device and storage medium based on table component

Abstract

The present application discloses a data rendering method, system, device and storage medium based on a table component, the method comprising the following steps: obtaining data to be rendered, assembling the data in the format of an array object, and obtaining table data; configuring the row information and column information of the table; calling the table component, passing the table data into the table component according to the row information and column information, completing the rendering, and obtaining the target table; redrawing the UI of the target table based on the table container parameters, and displaying the entire target table in the window. Through this application, the standardized data can be displayed with a good interactive experience and UI effect.

Description

Technical Field

[0001] The present invention relates to the technical field of information systems, and more specifically, to a data rendering method, system, device and storage medium based on a table component. Background Art

[0002] Nowadays, with the development and application of network technology, the data display carrier has also changed. Different from the display of paper data, using web pages to display data is more intuitive and convenient. Among the many web components for data display, table components occupy an important position. Tables are mainly used to display standardized and regularized data. In the daily development of enterprise-level applications, tables are undoubtedly the most commonly used. The method of quickly making tables and binding data is rendering. Before performing rendering, it is necessary to query the table data and bind the table data. After the data binding is completed, the rendering of the table is completed.

[0003] React (web development framework) is a JavaScript library for building user interfaces. React is widely used because of its unique design concept, revolutionary innovation, outstanding performance, and simple code logic. React is mainly used to build UI. In React, you can pass various types of parameters, such as declaring code, rendering UI, passing dynamic variables, and even interactive application components. Array table components can be implemented based on React, but there are the following problems in the data rendering process:

[0004] 1. Usually, traditional tables render data of the same field in the same column;

[0005] 2. After rendering, the entire table container may exceed the browser window, resulting in scroll bars or misalignment. Summary of the invention

[0006] In view of the above problems, the present invention provides a data rendering method based on a table component, which includes:

[0007] Table data acquisition step: acquiring data to be rendered, assembling the data in the format of an array object, and acquiring table data;

[0008] Table configuration steps: configure the row information and column information of the table;

[0009] Table data rendering step: calling a table component, passing the table data into the table component according to the row information and the column information, completing rendering, and obtaining a target table;

[0010] Table UI redrawing step: redrawing the UI of the target table based on the table container parameters, and displaying the entire target table in the window.

[0011] As a further improvement of the present invention, the table data rendering step specifically includes the following steps:

[0012] Steps to create a table container: Create a table container;

[0013] Table data receiving step: receiving the table data, and storing the table data in a storage container in the table component;

[0014] Table information receiving step: receiving the row information and the column information, calling a method for formatting data, and reassembling the table data according to the hierarchy and the row information and the column information;

[0015] Data parsing step: parsing the reassembled table data and preprocessing the table data;

[0016] Data rendering step: calling the pre-processed table data and combining it with the rendering layer HTML to complete the rendering of the table data.

[0017] As a further improvement of the present invention, the table UI redrawing step specifically includes the following steps:

[0018] Table characteristic parameter acquisition step: acquiring table header parameters and table characteristic parameters of the target table;

[0019] Display judgment step: judge whether to display the page number;

[0020] Redrawing step: setting the display effect of the table component according to the table container parameters, the table header parameters, the table feature parameters and the height of the page number.

[0021] As a further improvement of the present invention, when the size of the window changes, the table UI redrawing step also needs to be executed.

[0022] As a further improvement of the present invention, the table data rendering step also includes configuring table component functions, which include but are not limited to: realizing row data nesting, supporting hierarchical data expansion, and displaying data from different field sources based on hierarchies.

[0023] Based on the same inventive concept, the present invention also discloses a data rendering system based on a table component based on the data rendering method based on a table component disclosed in any one of the inventions.

[0024] The table component-based data rendering system includes:

[0025] A table data acquisition module acquires data to be rendered, assembles the data in the format of an array object, and acquires table data;

[0026] Table configuration module, configures the row and column information of the table;

[0027] The table data rendering module calls the table component, transfers the table data to the table component according to the row information and the column information, completes the rendering, and obtains the target table;

[0028] The table UI redrawing module redraws the UI of the target table based on the table container parameters, and displays the entire target table in the window.

[0029] As a further improvement of the present invention, the table data rendering module specifically includes:

[0030] Table container creation unit, creates a table container;

[0031] A table data receiving unit, receiving the table data and storing the table data in a storage container in the table component;

[0032] A table information receiving unit receives the row information and the column information, calls a method for formatting data, and reassembles the table data according to the hierarchy and the row information and the column information;

[0033] A data parsing unit, parsing the reassembled table data and preprocessing the table data;

[0034] The data rendering unit calls the pre-processed table data and completes the rendering of the table data in combination with the rendering layer HTML.

[0035] As a further improvement of the present invention, the table UI redrawing module specifically includes:

[0036] A table characteristic parameter acquisition unit, which acquires table header parameters and table characteristic parameters of the target table;

[0037] A display judgment unit, judging whether to display the page number;

[0038] The redrawing unit sets the display effect of the table component according to the table container parameter, the table header parameter, the table feature parameter and the height of the page number.

[0039] The present invention also includes a device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements any of the above-mentioned data rendering methods based on table components when executing the computer program.

[0040] The present invention also includes a storage medium on which a computer program is stored, wherein when the program is executed by a processor, any of the above-mentioned data rendering methods based on table components is implemented.

[0041] Compared with the prior art, the present invention has the following beneficial effects:

[0042] 1. A data rendering method based on table components is proposed to display normalized data with good interactive experience and UI effects;

[0043] 2. The table component is rich in functions and highly practical;

[0044] 3. Redrawing can be performed to avoid scroll bars or misalignment.

[0045] Details of one or more embodiments of the present application are set forth in the following drawings and description to make other features, objects, and advantages of the present application more readily apparent. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0047] Figure 1 It is an overall flow chart of a data rendering method based on a table component provided by an embodiment of the present invention;

[0048] Figure 2 yes Figure 1 The disclosed overall flow chart of step S3;

[0049] Figure 3 This is a rendering effect diagram provided by an embodiment of the present invention;

[0050] Figure 4 yes Figure 1 The overall flow chart of step S4 disclosed;

[0051] Figure 5 This is a structural framework diagram of a data rendering system based on a table component provided in this embodiment.

[0052] In the above picture:

[0053] 1. Table data acquisition module; 2. Table configuration module; 3. Table data rendering module; 4. Table UI redrawing module; 31. Table container creation unit; 32. Table data receiving unit; 33. Table information receiving unit; 34. Data parsing unit; 35. Data rendering unit; 41. Table feature parameter acquisition unit; 42. Display judgment unit; 43. Redrawing unit. DETAILED DESCRIPTION

[0054] In order to make the purpose, technical solutions and advantages of the present application clearer, the present application is described and illustrated below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not intended to limit the present application. Based on the embodiments provided in the present application, all other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present application.

[0055] Obviously, the drawings described below are only some examples or embodiments of the present application. For ordinary technicians in this field, the present application can also be applied to other similar scenarios based on these drawings without creative work. In addition, it can also be understood that although the efforts made in this development process may be complicated and lengthy, for ordinary technicians in this field related to the content disclosed in this application, some changes in design, manufacturing or production based on the technical content disclosed in this application are just conventional technical means, and should not be understood as insufficient content disclosed in this application.

[0056] Reference to "embodiments" in this application means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those of ordinary skill in the art that the embodiments described in this application may be combined with other embodiments without conflict.

[0057] Unless otherwise defined, the technical terms or scientific terms involved in this application should be understood by people with ordinary skills in the technical field to which this application belongs. The words "one", "a", "a", "the" and the like involved in this application do not indicate a quantitative limitation, and may represent the singular or plural. The terms "include", "comprise", "have" and any of their variations involved in this application are intended to cover non-exclusive inclusions; for example, a process, method, system, product or device that includes a series of steps or modules (units) is not limited to the listed steps or units, but may also include steps or units that are not listed, or may also include other steps or units inherent to these processes, methods, products or devices. The words "connect", "connected", "coupled" and the like involved in this application are not limited to physical or mechanical connections, but may include electrical connections, whether direct or indirect. The "multiple" involved in this application refers to two or more. "And / or" describes the association relationship of associated objects, indicating that there may be three relationships, for example, "A and / or B" can represent: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the objects before and after are in an "or" relationship. The terms "first", "second", "third", etc. involved in this application are only used to distinguish similar objects, and do not represent a specific ordering of the objects.

[0058] The present invention is described in detail below in conjunction with the various embodiments shown in the accompanying drawings, but it should be noted that these embodiments are not limitations of the present invention, and any equivalent transformations or substitutions in functions, methods, or structures made by ordinary technicians in the field based on these embodiments are all within the scope of protection of the present invention.

[0059] Before elaborating on each embodiment of the present invention in detail, the core inventive concept of the present invention is summarized and elaborated in detail through the following several embodiments.

[0060] The present invention can implement data rendering based on table components, and display normalized data with good interactive experience and UI effects.

[0061] Embodiment 1:

[0062] Reference Figures 1 to 4 As shown, this example discloses a specific implementation of a data rendering method based on a table component (hereinafter referred to as "method").

[0063] Specifically, refer to Figure 1 As shown, the method disclosed in this embodiment includes the following steps:

[0064] Step S1, obtaining data to be rendered, assembling the data according to the format of an array object, and obtaining table data.

[0065] Specifically, in some embodiments, the data to be rendered is first organized to make the data regular, and the organized data needs to be assembled according to the format of the array object to obtain the table data. There is no requirement for the key and value (key-value pair) of the data in the array object. For example, the code for organizing the regular data required by the table component is as follows:

[0066]

[0067]

[0068] Then, step S2 is executed to configure the row information and column information of the table.

[0069] Specifically, in some embodiments, when configuring the row and column content of a table, the key in the row configuration needs to be the key that exists in the table data to avoid the situation where the rendered cell is empty because the data cannot be found. For example, the code for configuring the row and column information of a table is as follows:

[0070]

[0071]

[0072]

[0073] Then, step S3 is executed to call the table component, and the table data is passed into the table component according to the row information and column information, and rendering is completed to obtain the target table.

[0074] Specifically, in some of the embodiments, reference is made to Figure 2 As shown, step S3 specifically includes the following steps:

[0075] S31, create a table container;

[0076] S32, receiving the table data, and storing the table data in a storage container in the table component;

[0077] S33, receiving the row information and the column information, calling a method for formatting data, and reassembling the table data according to the hierarchy and the row information and the column information;

[0078] S34, parsing the reassembled table data and preprocessing the table data;

[0079] S35, calling the pre-processed table data, and combining with the rendering layer HTML to complete the rendering of the table data.

[0080] Specifically, in some of the embodiments, a table container (page container) is first created to carry the rendered table content, and then the data to be rendered (i.e., table data) is received from the outside and stored inside the table component in an internal storage container (such as state). After the component receives the table data, it also receives table configuration parameters to control whether each row of data in the table is optional (i.e., whether a check box is displayed in the first column), whether only the sub-title field is displayed, which rows are selected by default, whether all are selected by default, etc., and then the method for formatting the data is called to reassemble the table data according to the hierarchy and control parameters (row information and column information).

[0081] Specifically, the reassembled table data is parsed, and in the render function, the pre-processed parsed data is called, and the data is rendered in combination with the rendering layer HTML. The header and column data of the table are rendered through the header; the body is the specific content of the data, and each piece of data in the body is rendered as a row in the table. According to the key field of each column in the header, the specific data of each row in the body is obtained and rendered as a cell.

[0082] Specifically, step S3 also includes configuring the table component function. The table component is implemented based on React. The component supports the rendering of regular data, single row selection, multiple row selection, row nesting, page turning, and table adaptive display width and other functions; cells can support rendering of common types of data such as strings, and can also render HTML nodes; the component supports displaying data from different field sources in the same column with hierarchy as the boundary, such as displaying field A in the first row and the first column, and the second row is a subset of A. The first column can display the data of field B, which solves the problem of table nesting and realizes the nesting of row data; the component can support component re-rendering when the browser window size changes, supports fixed table headers, page numbers, and content area scrolling; the component supports conventional table data rendering, and can also support hierarchical data expansion, as well as the display of data of different fields in the cells of parent row data and the cells of child data in the same column, for example: some row data contains field names and field aliases, and these two fields can be rendered in the same column; the component can also realize that parent data can display check boxes, and child data does not display check boxes, etc.

[0083] Specifically, the table component can control the selection and cancellation of row data, all selection and cancellation of all selection. The default selection method is that the first column of each row of data is a CheckBox. If you want to achieve the effect of clicking a row to select, you can set the parameter rowSelection:{type:"row"} when calling the table component. After each operation on row data, the callback function passed in from the outer layer will be called to return the selected data once, which is convenient for outer layer operations.

[0084] Specifically, for example: the code for calling the table component is as follows, and the rendering effect is as follows Figure 3 As shown,

[0085]

[0086] Then, step S4 is executed to redraw the UI of the target table based on the table container parameters, and the entire target table is displayed in the window.

[0087] Specifically, in some of the embodiments, reference is made to Figure 4 As shown, step S4 specifically includes the following steps:

[0088] S41, obtaining table header parameters and table characteristic parameters of the target table;

[0089] S42, determining whether to display the page number;

[0090] S43: setting the display effect of the table component according to the table container parameter, the table header parameter, the table feature parameter and the height of the page number.

[0091] Specifically, before rendering the table data, due to the uncertainty of the number of rows and columns (i.e. the width and height of the entire table container), the entire table container may exceed the browser window range after rendering, resulting in scroll bars or misalignment, etc. Therefore, after the data rendering is completed, the UI of the target table will be redrawn, the position of each module will be calculated, and the scrolling effect and cell style of the table component will be set. Similarly, when the browser window size (viewport window size) changes, this method also needs to be called to redraw the UI of the entire target table, and finally the entire target table will be displayed in the window, and only the content area (i.e. all rows) will be scrolled.

[0092] Specifically, get the width and height of the table container, then get the height of the rendered header, calculate the width of the entire header through the width of the header's child nodes, calculate the indentation of the beginning and end of the row, and the spacing of each cell in each row, and then determine whether to display the page number. Finally, subtract the height of the header, page number, etc. from the height of the table container to calculate the height of the scrollable area in the table. At the same time, compare the width of the table container with the sum of all the columns and their spacing in the table to determine whether horizontal scrolling needs to be added.

[0093] Through the data rendering based on the table component disclosed in the embodiment of the present application, the normalized data is displayed with a good interactive experience and UI effect; the table component is rich in functions and highly practical; it can be redrawn to avoid scroll bars or misalignment.

[0094] Details of one or more embodiments of the present application are set forth in the following drawings and description to make other features, objects, and advantages of the present application more readily apparent.

[0095] Embodiment 2:

[0096] In combination with the data rendering method based on the table component disclosed in the first embodiment, this embodiment discloses a specific implementation example of a data rendering system based on the table component (hereinafter referred to as the “system”).

[0097] Reference Figure 5 As shown, the system comprises:

[0098] Table data acquisition module 1, acquires data to be rendered, assembles the data in the format of an array object, and acquires table data;

[0099] Table configuration module 2, configuring the row information and column information of the table;

[0100] Table data rendering module 3, calling the table component, passing the table data into the table component according to the row information and column information, completing the rendering, and obtaining the target table;

[0101] The table UI redrawing module 4 redraws the UI of the target table based on the table container parameters, and displays the entire target table in the window.

[0102] Specifically, in some embodiments, the table data rendering module 3 specifically includes:

[0103] A table container creating unit 31, creating a table container;

[0104] A table data receiving unit 32 receives the table data and stores the table data in a storage container in the table component;

[0105] The table information receiving unit 33 receives the row information and the column information, calls a method for formatting data, and reassembles the table data according to the hierarchy and the row information and the column information;

[0106] A data parsing unit 34, which parses the reassembled table data and pre-processes the table data;

[0107] The data rendering unit 35 calls the pre-processed table data and completes the rendering of the table data in combination with the rendering layer HTML.

[0108] Specifically, in some embodiments, the table UI redrawing module 4 specifically includes:

[0109] The table characteristic parameter acquisition unit 41 acquires the table header parameters and table characteristic parameters of the target table;

[0110] A display determination unit 42, determining whether to display a page number;

[0111] The redrawing unit 43 sets the display effect of the table component according to the table container parameter, the table header parameter, the table feature parameter and the height of the page number.

[0112] For the technical solutions of the data rendering system based on a table component disclosed in this embodiment and the data rendering method based on a table component disclosed in the first embodiment, please refer to the description of the first embodiment, which will not be repeated here.

[0113] The above-mentioned embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the invention patent. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the patent of the present application shall be subject to the attached claims.

Claims

1. A data rendering method based on a table component, characterized in that , including the following steps: Table data acquisition step: acquiring data to be rendered, assembling the data in the format of an array object, and acquiring table data; Table configuration steps: configure the row information and column information of the table; Table data rendering step: calling a table component, passing the table data into the table component according to the row information and the column information, completing rendering, and obtaining a target table; Table UI redrawing step: redrawing the UI of the target table based on the table container parameters, and displaying the entire target table in the window; The table data rendering step specifically includes the following steps: Steps to create a table container: Create a table container; Table data receiving step: receiving the table data, and storing the table data in a storage container in the table component; Table information receiving step: receiving the row information and the column information, calling a method for formatting data, and reassembling the table data according to the hierarchy and the row information and the column information; Data parsing step: parsing the reassembled table data and preprocessing the table data; Data rendering step: calling the pre-processed table data and combining it with the rendering layer HTML to complete the rendering of the table data.

2. The data rendering method based on the table component according to claim 1, characterized in that: The table UI redrawing step specifically includes the following steps: Table characteristic parameter acquisition step: acquiring table header parameters and table characteristic parameters of the target table; Display judgment step: judge whether to display the page number; Redrawing step: setting the display effect of the table component according to the table container parameters, the table header parameters, the table feature parameters and the height of the page number.

3. The data rendering method based on the table component according to claim 1, characterized in that: When the window size of the window changes, the table UI redrawing step also needs to be executed.

4. The data rendering method based on the table component according to claim 1, characterized in that: The table data rendering step also includes configuring table component functions, which include but are not limited to: realizing row data nesting, supporting hierarchical data expansion, and displaying data from different field sources based on hierarchies.

5. A data rendering system based on table components, characterized in that ,include: A table data acquisition module acquires data to be rendered, assembles the data in the format of an array object, and acquires table data; Table configuration module, configures the row and column information of the table; The table data rendering module calls the table component, transfers the table data to the table component according to the row information and the column information, completes the rendering, and obtains the target table; A table UI redrawing module, which redraws the UI of the target table based on the table container parameters, and displays the entire target table in the window; Wherein, the table data rendering module specifically includes: Table container creation unit, creates a table container; A table data receiving unit, receiving the table data and storing the table data in a storage container in the table component; A table information receiving unit receives the row information and the column information, calls a method for formatting data, and reassembles the table data according to the hierarchy and the row information and the column information; A data parsing unit, parsing the reassembled table data and preprocessing the table data; The data rendering unit calls the pre-processed table data and completes the rendering of the table data in combination with the rendering layer HTML.

6. The data rendering system based on table components as claimed in claim 5, characterized in that: The table UI redrawing module specifically includes: A table characteristic parameter acquisition unit, which acquires table header parameters and table characteristic parameters of the target table; A display judgment unit, judging whether to display the page number; The redrawing unit sets the display effect of the table component according to the table container parameter, the table header parameter, the table feature parameter and the height of the page number.

7. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the table component-based data rendering method according to any one of claims 1 to 4 is implemented.

8. A storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the data rendering method based on the table component as described in any one of claims 1 to 4 is implemented.

Images