Cloud-UI-based editable table dynamic combination column implementation method

Abstract

The invention discloses a Cloud-UI (User Interface)-based editable table dynamic combination column implementation method. The implementation method comprises the following steps: initializing component parameters; a table DataHandle method is called, and a table DataHandle method is called; whether the table is created for the first time or not is judged, if yes, new TableData is generated, and if not, the new TableData is compared with intTableData. And real-time linkage of an editing function and a summation function is realized through a zbValueChange method, so that the user experience is improved. The data processing logic is optimized through a table DataHandle method and an amuntHandle method, and the table rendering and calculation performance is improved.

Description

Technical Field

[0001] The present invention relates to the field of table components, and in particular to a method for implementing dynamic combination columns of an editable table based on Cloud-UI. Background Art

[0002] In modern web applications, dynamic tables are essential components for data display and interaction. Traditional table components typically require predefined column structures and lack the flexibility to support dynamic column combinations and real-time calculations. Furthermore, existing technologies often separate table editing and aggregation functions, making real-time updates and dynamic calculations impossible.

[0003] Existing technical solutions:

[0004] Existing table components typically use a static column structure. Column definitions must be pre-set during table initialization and cannot be dynamically adjusted to meet business needs. Furthermore, editing and aggregation functions are often separated, preventing edited data from updating aggregate values ​​in real time, resulting in a poor user experience. Existing solutions are often developed for specific frameworks, lacking versatility and making them difficult to adapt to complex business scenarios.

[0005] 1. Static column structure: The table column structure is fixed and cannot be dynamically adjusted according to business needs.

[0006] 2. Separation of editing and calculation: The editing function and the aggregation function cannot be linked in real time, resulting in untimely data updates.

[0007] 3. Poor compatibility: Existing solutions are usually developed for specific frameworks and lack versatility. Summary of the Invention

[0008] In view of the above problems, the present invention is proposed to provide a method for dynamically combining columns in an editable table based on Cloud-UI, which overcomes the above problems or at least partially solves the above problems.

[0009] According to one aspect of the present invention, a method for dynamically combining columns in an editable table based on Cloud-UI is provided, the method comprising:

[0010] Initialize component parameters;

[0011] Call the tableDataHandle method;

[0012] Is this the first time the table is created? If so, generate newTableDatas; otherwise, compare newTableData with intTableData.

[0013] Optionally, after comparing newTableData with intTableData, the following steps are further included:

[0014] Update newTableData;

[0015] Call amountHandle to calculate the total;

[0016] Add the total result to newTableData;

[0017] Deep copy newTableData and assign it to tableData;

[0018] Rendering a table;

[0019] Monitor indicator value changes;

[0020] Call the zbValueChange method to monitor indicator value changes;

[0021] Call the amountHangdle method to update the total;

[0022] Update tableData.

[0023] Optionally, the initialization of component parameters also includes:

[0024] Dynamically generate table columns based on participating institutions and dynamic indicators;

[0025] Supports editing indicator values ​​and inputting target values ​​based on institutions and indicators;

[0026] The header totals the actual calculated value and is updated in real time.

[0027] Optionally, the initialization component parameters specifically include:

[0028] tableHead: table header related data;

[0029] orgList: The selected organization list, supports multiple organization selection, including organization code and organization name;

[0030] intTableData: initialize data;

[0031] readonly: whether the value is editable.

[0032] Optionally, the header-related data includes indicator type, indicator name, indicator unit, and indicator target value.

[0033] Optionally, the rendering of the table specifically includes: processing table data;

[0034] Use the tableDataHandle method to dynamically combine columns and reverse display data:

[0035] Combine the corresponding indicator target values ​​based on the organization dimension;

[0036] Determine whether the table is created or edited for the first time based on the length of intTableData;

[0037] Compare newTableData and intTableData and update data dynamically;

[0038] Call the amountHandle method to calculate the total value and add the result to newTableData.

[0039] Optionally, the calling of amountHandle to calculate the total specifically includes:

[0040] Use the amountHandle method, with the indicator as the dimension, and use the reduce method to accumulate the target value to generate the total result;

[0041] Add the total result to newTableData and update the table data.

[0042] This invention provides a method for dynamically combining columns in an editable table based on Cloud-UI. The method includes: initializing component parameters; calling the tableDataHandle method; and determining whether the table is being created for the first time. If so, generating newTableDatas; otherwise, comparing newTableData with intTableData. The zbValueChange method enables real-time linkage between editing and aggregation functions, enhancing the user experience. The tableDataHandle and amountHandle methods are used to optimize data processing logic, improving table rendering and calculation performance.

[0043] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are specifically listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0045] Figure 1This is a flowchart of a method for implementing dynamic column combination in an editable table based on Cloud-UI provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0046] Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although exemplary embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments set forth herein. Rather, these embodiments are provided to enable a more thorough understanding of the present disclosure and to fully convey the scope of the present disclosure to those skilled in the art.

[0047] The terms "comprises" and "comprising" and any variations thereof in the description, embodiments, claims and drawings of the present invention are intended to cover non-exclusive inclusions, for example, including a series of steps or units.

[0048] The technical solution of the present invention is further described in detail below with reference to the accompanying drawings and embodiments.

[0049] Example 1

[0050] like Figure 1 As shown, a method for dynamically combining columns in an editable table based on Cloud-UI is provided, and the method includes:

[0051] Initialize component parameters;

[0052] Call the tableDataHandle method;

[0053] Whether the table is created for the first time, if so, generate newTableDatas;

[0054] Otherwise, compare newTableData with intTableData;

[0055] Update newTableData;

[0056] Call amountHandle to calculate the total;

[0057] Add the total result to newTableData;

[0058] Deep copy newTableData and assign it to tableData;

[0059] Rendering a table;

[0060] Monitor indicator value changes;

[0061] Call the zbValueChange method to monitor indicator value changes;

[0062] Call the amountHangdle method to update the total;

[0063] Update tableData.

[0064] Dynamic combination column generation, dynamically generating table columns based on participating institutions and dynamic indicators.

[0065] Supports editing indicator values ​​and inputting indicator target values ​​based on organization and indicator dimensions.

[0066] The header totals the actual calculated value and is updated in real time.

[0067] Component parameter design, including:

[0068] tableHead: table header related data, including indicator type, indicator name, indicator unit, and indicator target value.

[0069] orgList: The selected organization list, supports multiple organization selection, including organization code and organization name. intTableData: Initializes the data.

[0070] readonly: whether the value is editable.

[0071] Tabular data processing

[0072] Use the tableDataHandle method to dynamically combine columns and reverse display data:

[0073] Combine the corresponding indicator target values ​​based on the institution dimension.

[0074] Determine whether the table is being created or edited for the first time based on the length of intTableData.

[0075] Compare newTableData and intTableData and update data dynamically.

[0076] Call the amountHandle method to calculate the total value and add the result to newTableData.

[0077] Total calculation, including:

[0078] Use the amountHandle method, take the indicator as the dimension, and use the reduce method to accumulate the target value to generate the total result.

[0079] Add the total result to newTableData and update the table data.

[0080] Real-time updates, including:

[0081] Use the zbValueChange method to monitor indicator value changes and call the amountHandle method to update the total value in real time.

[0082] Example 2

[0083] Component design and parameter passing

[0084] Component name: editDynamicTable

[0085] parameter:

[0086] tableHead: table header data, including indicator type, indicator name, indicator unit, and indicator target value.

[0087] orgList: Organization list, supports multiple organization selection.

[0088] intTableData: Initialization data.

[0089] readonly: whether the value is editable.

[0090] Dynamic composite column generation

[0091] In the tableDataHandle method, dynamically combine columns based on the organization and indicator dimensions.

[0092] Determine whether the table is being created or edited for the first time based on the length of intTableData:

[0093] If the length of intTableData is 0, it is the first time to create a table, and the newTableData data item is retained. If the length of intTableData is greater than 0, it is an edited table, and the newTableData data item is compared.

[0094] And intTableData, dynamically update data.

[0095] Total calculation, including:

[0096] In the amountHandle method, the indicator is used as the dimension, and the target value is accumulated through the reduce method to generate the total result.

[0097] Add the total result to newTableData and update the table data.

[0098] Real-time updates include: in the zbValueChange method, monitoring indicator value changes, and calling the amountHandle method to update the total value in real time.

[0099] Beneficial effects: 1. Support dynamic combination columns: dynamically generate table columns based on institutions and indicators, and flexibly adapt to different business scenarios.

[0100] 2. Real-time editing and total calculation: Use the zbValueChange method to achieve real-time linkage between editing and total functions to improve user experience

[0101] 3. Wide compatibility: Compatible with multiple front-end frameworks (such as Element-UI, Ant Design) and has wide applicability.

[0102] 4. Efficient data processing: Optimize data processing logic through the tableDataHandle and amountHandle methods to improve table rendering and calculation performance.

[0103] The above specific implementation methods further illustrate the objectives, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above are only specific implementation methods of the present invention and are not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.

Claims

1. A method for implementing dynamic combination columns in an editable table based on Cloud-UI, characterized in that: The implementation method includes: Initialize component parameters; Call the tableDataHandle method; Is this the first time the table is created? If so, generate newTableDatas; otherwise, compare newTableData with intTableData.

2. According to claim 1, a method for implementing dynamic combination columns of an editable table based on Cloud-UI is characterized in that: After comparing newTableData and intTableData, the following steps are also included: Update newTableData; Call amountHandle to calculate the total; Add the total result to newTableData; Deep copy newTableData and assign it to tableData; Rendering a table; Monitor indicator value changes; Call the zbValueChange method to monitor indicator value changes; Call the amountHangdle method to update the total; Update tableData.

3. The method for implementing dynamic combination columns of an editable table based on Cloud-UI according to claim 1, characterized in that: The initialization component parameters also include: Dynamically generate table columns based on participating institutions and dynamic indicators; Supports editing indicator values ​​and inputting target values ​​based on institutions and indicators; The header totals the actual calculated value and is updated in real time.

4. The method for implementing dynamic combination columns of an editable table based on Cloud-UI according to claim 1, characterized in that: The initialization component parameters specifically include: tableHead: table header related data; orgList: The selected organization list, supports multiple organization selection, including organization code and organization name; intTableData: initialize data; readonly: whether the value is editable.

5. A method for implementing dynamic combination columns of editable tables based on Cloud-UI according to claim 4, characterized in that: The header-related data includes indicator type, indicator name, indicator unit, and indicator target value.

6. The method for implementing dynamic combination columns of an editable table based on Cloud-UI according to claim 2, characterized in that: The rendering table specifically includes: table data processing; Use the tableDataHandle method to dynamically combine columns and reverse display data: Combine the corresponding indicator target values ​​based on the organization dimension; Determine whether the table is created or edited for the first time based on the length of intTableData; Compare newTableData and intTableData and update data dynamically; Call the amountHandle method to calculate the total value and add the result to newTableData.

7. The method for implementing dynamic combination columns of an editable table based on Cloud-UI according to claim 2, characterized in that: The calling of amountHandle to calculate the total specifically includes: Use the amountHandle method, with the indicator as the dimension, and use the reduce method to accumulate the target value to generate the total result; Add the total result to newTableData and update the table data.

Images