Cascade form data editing system and method based on declarative configuration

Abstract

The invention relates to the technical field of computer software, in particular to a cascade form data editing system and method based on declarative configuration. Comprising a declarative configuration management module which receives form configuration data, field types, explicit and implicit conditions, verification rules and change callback which are functions for receiving row data and row indexes; the dynamic layout calculation module is used for calling an explicit-implicit condition function to obtain a visible field set and generating a grid column width template character string; the two-dimensional state management module is used for establishing a row-column two-dimensional array to record a cell verification triggering state; the rendering output module is used for calling a field type function to determine a component type to generate a form interface; the linkage event processing module responds to the field value change to update the two-dimensional array and calls a change callback function; and the verification execution module is used for executing verification according to the two-dimensional array triggering state and associating a result to the cell. According to the method, functional dynamic configuration, cell-level accurate verification and self-adaptive layout are realized.

Description

Technical Field

[0001] This invention relates to the field of computer software technology, specifically to a cascading form data editing system and method based on declarative configuration. Background Technology

[0002] In enterprise-level web applications, dynamic form editing is a common requirement. Users need to add and delete multiple data records with the same structure, and fill in and validate the fields in each record.

[0003] The existing technology has the following drawbacks: First, there is the problem of static configuration. Existing solutions mostly use static configuration or limited conditional rendering, which cannot achieve deep dynamics based on row-level data. When the same field needs to present different behaviors in different data rows, a lot of condition judgment code needs to be written. Second, there is the problem of coarse validation granularity. The validation status management of existing form components is based on the form level or row level, which cannot accurately locate individual cells, resulting in users not receiving accurate error feedback. Third, there is the problem of insufficient layout adaptability. Traditional layout solutions use static templates, which cannot adjust the layout in real time when fields are dynamically displayed or hidden, resulting in layout holes or compression deformation on the page. Summary of the Invention

[0004] This invention provides a cascading form data editing system and method based on declarative configuration, achieving a unified solution for functional dynamic configuration, precise cell-level validation, and adaptive layout.

[0005] To achieve the above objectives, the present invention provides the following technical solution: This invention discloses a cascading form data editing system based on declarative configuration, comprising: The declarative configuration management module receives form configuration data, which includes an array of field definitions. Each field definition contains a function for its field type, explicit / implicit conditions, validation rules, and change callbacks. The function receives the current row data and the row index as parameters. The dynamic layout calculation module calls the explicit / implicit condition function in the field definition for each row of data to obtain the set of visible fields for the current row, and generates a grid column width template string based on the width value of each field in the set of visible fields; The two-dimensional state management module includes a row and column two-dimensional array. The first dimension of the two-dimensional array corresponds to the data row index, and the second dimension corresponds to the field index in the field definition array. The element value of the two-dimensional array records the verification trigger status of the corresponding cell. The rendering output module calls the field type function in the field definition to determine the component type and attribute value of each cell, and generates a form interface by combining the grid column width template string; The linkage event handling module responds to field value change events, updates the element value at the corresponding position in the two-dimensional array to the triggered state, and calls the corresponding change callback function in the field definition; The verification execution module calls the corresponding verification rule function in the field definition based on the position of the element marked as triggered in the two-dimensional array, and associates the verification result with the corresponding cell.

[0006] As a preferred embodiment of the present invention, the generation of the grid column width template string includes: Extract the width value of each field in the set of visible fields; The width values ​​are concatenated with spaces in the order of the fields in the set of visible fields to form the grid column width template string.

[0007] As a preferred technical solution of the present invention, the dynamic layout calculation module responds to data changes. When the number of data rows changes or the field visibility status changes, it re-executes the calculation of the visible field set and the generation of the grid column width template string.

[0008] As a preferred embodiment of the present invention, the two-dimensional state management module further includes a batch triggering interface, comprising: The row-level trigger interface receives the row index parameter and updates the element values ​​of all fields corresponding to that row in the two-dimensional array to true in batches. The column-level trigger interface receives a field index parameter, iterates through all rows of the two-dimensional array, and updates the value of the element at the corresponding field index position in each row to true.

[0009] As a preferred technical solution of the present invention, the element values ​​of the two-dimensional array are of Boolean type. In the initial state, all element values ​​are false. When the linkage event processing module detects a change in the field value of the corresponding cell, it updates the element value corresponding to the cell to true.

[0010] As a preferred embodiment of the present invention, the rendering output module includes determining the component type and attribute values, including: Iterate through the field definition array and data rows, passing the current row data and row index to the field type function; The type of component to be rendered in the corresponding cell is determined based on the function's return value; Pass the current row data and row index to other function properties in the field definition to obtain the component's configuration property value; Assign the position of each component in the grid according to the column width defined in the grid column width template string.

[0011] As a preferred embodiment of the present invention, the parameters received by the change callback function include: the field identifier of the currently changed field, the current row data, the current row index, and the complete form data array.

[0012] As a preferred embodiment of the present invention, the execution process of the verification execution module includes: Traverse the two-dimensional array and filter out the coordinates of the elements whose values ​​are true. Retrieve the corresponding row data based on the row index of the location coordinates, and retrieve the corresponding field definition from the field definition array based on the column index; Pass the row data and row index into the validation rule function in the field definition; The return value of the verification rule function determines whether the verification passes, and the verification result is stored in association with the location coordinates.

[0013] This invention also proposes a cascading form data editing method based on declarative configuration, comprising: Receive form configuration data, which includes an array of field definitions. Each field definition contains a function for the field type, display / hidden conditions, validation rules, and change callbacks. The function receives the current row data and the row index as parameters. For each row of data, the explicit / implicit condition function in the field definition is called to obtain the set of visible fields for the current row, and a grid column width template string is generated based on the width value of each field in the set of visible fields; Create a two-dimensional array with rows and columns. The first dimension of the two-dimensional array corresponds to the data row index, and the second dimension corresponds to the field index in the field definition array. The element value of the two-dimensional array records the validation trigger status of the corresponding cell. The field type function in the field definition is called to determine the component type and attribute value of each cell, and the form interface is generated by combining the grid column width template string; When a change in a field value is detected, the element value at the corresponding position in the two-dimensional array is updated to the trigger state, and the corresponding change callback function in the field definition is called; Based on the position of the element marked as triggered in the two-dimensional array, the corresponding validation rule function in the field definition is called, and the validation result is associated with the corresponding cell.

[0014] The beneficial effects of this invention are: 1. This invention utilizes a functional configuration system, designing field types, explicit / implicit conditions, validation rules, and other configuration items as functions that receive row data and row indices, thus achieving fully dynamic configuration. The same field definition can exhibit different behaviors based on different row data, eliminating the need to write extensive conditional judgment code and significantly improving configuration flexibility and code maintainability.

[0015] 2. This invention manages the validation trigger state using a two-dimensional array structure of rows and columns. The first dimension corresponds to the data row, and the second dimension corresponds to the field, achieving precise state control at the cell level. Compared to existing form-level or row-level state management methods, this invention can accurately locate the cell position that needs to be validated, avoiding unnecessary full validation and improving validation efficiency and user experience accuracy.

[0016] 3. This invention organically combines functional dynamic configuration, two-dimensional state management, and dynamic layout calculation to form a complete technical solution. When the visibility state of a field changes, the dynamic layout calculation module generates a grid column width template string in real time based on the set of visible fields, achieving adaptive adjustment of the layout and solving the layout disorder problem that occurs when fields change dynamically in traditional static layout schemes. Attached Figure Description

[0017] The accompanying drawings are provided to further illustrate the invention and form part of the specification. They are used in conjunction with embodiments of the invention to explain the invention and do not constitute a limitation thereof. In the drawings: Figure 1 This is a schematic diagram of the structure of a cascading form data editing system based on declarative configuration according to the present invention; Figure 2 This is a flowchart of a method for a cascading form data editing system based on declarative configuration according to the present invention; Figure 3 This is an example diagram illustrating the structure of form configuration data in the declarative configuration management module of this invention; Figure 4 This is a schematic diagram of the parameter input system for functional configuration items in the declarative configuration of this invention; Figure 5 This is a schematic diagram of the overall architecture and data flow relationship between modules of a cascading form data editing system based on declarative configuration according to the present invention; Figure 6 This is a schematic diagram illustrating the calculation process of the dynamic grid layout calculation module of the present invention to generate the grid column width template string; Figure 7 This is a schematic diagram illustrating the mapping relationship between the two-dimensional state array and the form interface cells of this invention; Figure 8 This is a schematic diagram of the structure of the two-dimensional array triggerList in the two-dimensional state management module of this invention; Figure 9 This is a schematic diagram of the parameter structure of the change callback function in the linkage event processing module of the present invention; Figure 10 This is a schematic diagram illustrating the implementation process of verification trigger status management in the verification execution module of this invention; Figure 11This is an example image of the overall form interface effect rendered and output by the present invention. Detailed Implementation

[0018] The preferred embodiments of the present invention will be described below with reference to the accompanying drawings. It should be understood that the preferred embodiments described herein are for illustration and explanation only and are not intended to limit the present invention.

[0019] Example 1: As Figure 1 As shown, the present invention provides a cascading form data editing system based on declarative configuration, comprising: The declarative configuration management module receives form configuration data, which includes an array of field definitions. Each field definition contains a function for its field type, explicit / implicit conditions, validation rules, and change callbacks. The function receives the current row data and the row index as parameters. Specifically, the declarative configuration management module is used to receive and manage form configuration data. The form configuration data includes an array of field definitions.

[0020] The field definition array contains several field definition objects, each describing a field in the form. Each field definition object contains the following properties.

[0021] The field definition object contains a field identifier property, which is used to uniquely identify the field.

[0022] The field definition object contains a field type attribute, which takes the form of a function. The function accepts two parameters, valueItem and valueIndex, where valueItem represents the current row data object and valueIndex represents the current row index. The function returns the component type identifier.

[0023] The field definition object contains explicit / implicit conditional attributes, which are in the form of functions. These functions accept the valueItem and valueIndex parameters and return a boolean value to control the visibility of the field.

[0024] The field definition object contains validation rule attributes, which are in the form of functions. The functions accept valueItem and valueIndex parameters and return a validation rule object containing validation functions and error messages.

[0025] The field definition object contains a change callback property, which takes the form of a function. The function receives parameters including the changed field value, the current row index, the field identifier, the current row data object, and the complete form data array.

[0026] The field definition object contains a width value property, which defines the column width occupied by the field in the grid layout.

[0027] In one specific implementation, the field type function of a certain field dynamically returns different component type identifiers based on the value of a certain attribute in the current row of data. For example, the field type function of the payment method field returns a drop-down selection box type identifier when the order type is "online payment" and a text input box type identifier when the order type is "offline payment".

[0028] In another specific embodiment, the display / hidden condition function of a field determines whether to display it based on the value of another field in the current row of data. For example, the display / hidden condition function of the specification field determines whether the value of the category field is empty. If the category field value is not empty, it returns true, making the specification field visible; if the category field value is empty, it returns false, making the specification field hidden.

[0029] In another specific embodiment, a callback function for a change in a certain field modifies the values ​​of other fields in the current row of data when the value of that field changes. For example, a callback function for a change in the category field clears the value of the specification field in the current row of data when the category value changes, thus achieving inter-field linkage control.

[0030] By designing field types, visibility conditions, validation rules, and change callbacks as functions that receive row data and row indexes, the configuration is fully dynamic. The same field definition can present different component types, visibility states, validation rules, and linked behaviors based on different row data.

[0031] The dynamic layout calculation module calls the explicit / implicit condition function in the field definition for each row of data to obtain the set of visible fields for the current row, and generates a grid column width template string based on the width value of each field in the set of visible fields; Furthermore, the template string for generating grid column widths includes: Extract the width value of each field in the set of visible fields; The width values ​​are concatenated with spaces in the order of the fields in the set of visible fields to form the grid column width template string.

[0032] Furthermore, the dynamic layout calculation module responds to data changes. When the number of data rows changes or the visibility status of fields changes, it re-executes the calculation of the set of visible fields and the generation of the grid column width template string.

[0033] Specifically, the dynamic layout calculation module is used to dynamically generate grid layout templates based on the data. This module calculates the layout for each row of data separately, allowing different data rows to present different field layouts.

[0034] The dynamic layout calculation module iterates through the array of field definitions, calls the explicit / implicit condition function for each field definition, and passes in the current row data and row index. It filters the fields based on the boolean value returned by the function, collecting the fields that return true to form the set of visible fields for the current row.

[0035] After obtaining the set of visible fields, the dynamic layout calculation module extracts the width value attribute of each field in the set. The width values ​​are arranged according to the order of the fields in the set of visible fields. The module concatenates these width values ​​using spaces as delimiters to form a grid column width template string.

[0036] In one specific implementation, suppose that after a row of data is evaluated using a visible / hidden conditional function, the visible field set contains three fields with width values ​​of "1fr", "2fr", and "100px" respectively. The dynamic layout calculation module concatenates these three width values ​​into the string "1fr 2fr 100px", which serves as the grid column width template string for that row. The rendering module uses this string as the column width definition for the grid layout, causing the first column to occupy one flexible unit, the second column to occupy two flexible units, and the third column to have a fixed width of 100 pixels.

[0037] In another specific embodiment, different data rows of the same form may generate different sets of visible fields. For example, the conditional function for a certain field in the first row of data returns true, while the same field in the second row returns false. In this case, the visible field set of the first row includes the field, resulting in a longer grid column width template string; the visible field set of the second row does not include the field, resulting in a shorter grid column width template string. By using different grid column width template strings for the two rows, row-level layout differentiation is achieved.

[0038] The dynamic layout calculation module responds to data changes to update the layout in real time. When the number of rows in the form data array changes, such as when a user adds a new row or deletes an existing row, the module recalculates the visible field set and generates the grid column width template string for all the changed data rows. When the attribute value affecting the visibility of a field in a row changes, causing the return value of the visibility condition function to change, the module recalculates the visible field set for that row and regenerates the grid column width template string for that row.

[0039] The technical advantage of this implementation lies in achieving a truly flexible and adaptive layout by independently calculating the layout for each row of data and using functional conditional judgments for showing and hiding fields. When fields are dynamically shown or hidden, the grid column width template string is updated synchronously, avoiding the problem of blank spaces left after fields are hidden in traditional static layouts, and also avoiding layout compression and deformation issues.

[0040] The two-dimensional state management module includes a row and column two-dimensional array. The first dimension of the two-dimensional array corresponds to the data row index, and the second dimension corresponds to the field index in the field definition array. The element value of the two-dimensional array records the verification trigger status of the corresponding cell. Furthermore, the two-dimensional state management module also includes a batch triggering interface, comprising: The row-level trigger interface receives the row index parameter and updates the element values ​​of all fields corresponding to that row in the two-dimensional array to true in batches. The column-level trigger interface receives a field index parameter, iterates through all rows of the two-dimensional array, and updates the value of the element at the corresponding field index position in each row to true.

[0041] Furthermore, the elements of the two-dimensional array are of Boolean type. Initially, all elements are false. When the linkage event processing module detects a change in the field value of the corresponding cell, it updates the element value of the corresponding cell to true.

[0042] Specifically, the two-dimensional state management module is used to manage the validation trigger status of each cell in the form. This module uses a two-dimensional array structure of rows and columns to achieve precise state tracking at the cell level.

[0043] The first dimension of the two-dimensional array corresponds to the data row index, the second dimension corresponds to the field index, and the element value records the verification trigger status of the corresponding cell. The state of any cell can be accurately located by the row and column coordinates.

[0044] In one specific embodiment, assuming the form contains 3 rows of data and 4 field definitions, a 3-row, 4-column two-dimensional array is created, and the element value at position [1][2] records the validation trigger status of the third field in the second row.

[0045] The elements of the two-dimensional array are of Boolean type. A true value indicates that the corresponding cell needs to be validated, while a false value indicates that the corresponding cell does not need to be validated. During initialization, all elements of the two-dimensional array are set to false. When the event handling module detects a change in the field value of a cell, it updates the corresponding element of the two-dimensional array to true, marking that the cell needs to be validated.

[0046] The two-dimensional status management module also includes a batch trigger interface for batch updating the validation trigger status of multiple cells. The batch trigger interface includes row-level trigger interfaces and column-level trigger interfaces.

[0047] The row-level trigger interface receives the row index as a parameter. This interface iterates through all column positions corresponding to that row index in the two-dimensional array, updating the values ​​of the elements at those positions to true in batches. In one specific embodiment, when the row-level trigger interface is called and row index 1 is passed in, all element values ​​in the second row of the two-dimensional array are updated to true, indicating that all cells corresponding to all fields in that row need to undergo validation.

[0048] The column-level trigger interface receives a field index as a parameter. This interface iterates through all rows of the two-dimensional array, updating the value of the element at that field index in each row to true. In one specific embodiment, when the column-level trigger interface is called and field index 2 is passed in, the value of the third column element in all rows of the two-dimensional array is updated to true, indicating that the cells corresponding to that field in all data rows need to be validated.

[0049] In another specific embodiment, when a user submits the entire form, the system calls the row-level trigger interface for all rows, batch updating all element values ​​in the two-dimensional array to true, triggering validation of all cells. When the validation rules for a certain field change, the system calls the column-level trigger interface corresponding to that field, triggering re-validation of that field in all rows.

[0050] The technical advantage of this implementation lies in achieving cell-level state management granularity through a two-dimensional array. Compared to traditional form-wide or row-level validation state management, this invention can precisely control whether any cell needs to be validated, avoiding unnecessary full validation operations and improving system performance. Simultaneously, the batch trigger interface provides row-level and column-level batch operation capabilities, enabling efficient execution when batch validation is required.

[0051] The rendering output module calls the field type function in the field definition to determine the component type and attribute value of each cell, and generates a form interface by combining the grid column width template string; Furthermore, in the rendering output module, determining the component type and attribute values ​​includes: Iterate through the field definition array and data rows, passing the current row data and row index to the field type function; The type of component to be rendered in the corresponding cell is determined based on the function's return value; Pass the current row data and row index to other function properties in the field definition to obtain the component's configuration property value; Assign the position of each component in the grid according to the column width defined in the grid column width template string.

[0052] Specifically, the rendering output module is used to convert configuration data and layout information into a visual form interface. This module renders the form components based on the functional configuration in the field definitions and the grid column width template string generated by the dynamic layout calculation module.

[0053] The rendering output module iterates through the field definition array and data rows. For each combination of field and data row, it passes the current row data and row index to the field type function of that field, and determines the component type that should be rendered for the corresponding cell based on the returned component type identifier.

[0054] In one specific implementation, after receiving the current row of data, the field type function of a certain field determines the value of the category field in that row of data. When the category value is "electronic products", the function returns "select", and the module determines that the cell will render a drop-down selection box component; when the category value is "clothing", the function returns "input", and the module determines that the cell will render a text input box component.

[0055] After determining the component type, the rendering output module continues to retrieve the component's configuration attribute values. The module passes the current row data and row index to other function attributes defined in the field definition. These function attributes include disable state functions, placeholder text functions, and optional list functions. Each function returns its corresponding attribute configuration value after execution. The module collects these attribute configuration values ​​to form a complete component configuration.

[0056] In one specific embodiment, after receiving the data from the current row, the option list function of a drop-down selection box component returns different option arrays based on the category value of that row. When the category is "electronic products," the function returns an option array containing "mobile phone," "computer," and "tablet"; when the category is "clothing," the function returns an option array containing "tops," "pants," and "shoes and hats." The module uses the returned option arrays as the optional configuration for the cell's drop-down selection box component.

[0057] The rendering output module uses the grid column width template string to assign the positions of each component within the grid. The module places each component sequentially into its corresponding column position according to the column width values ​​defined in the grid column width template string. Each width value in the grid column width template string corresponds to a visible field, and the module maps components to the corresponding grid columns according to the order of these visible fields.

[0058] In one specific embodiment, the grid column width template string for a certain row is "1fr 2fr 100px", indicating that the row has three visible fields. The rendering output module places the component of the first visible field in the first column of the grid, with a column width of 1 elastic unit; places the component of the second visible field in the second column, with a column width of 2 elastic units; and places the component of the third visible field in the third column, with a fixed width of 100 pixels.

[0059] In another specific embodiment, when the visibility of a field in a row of data changes, the dynamic layout calculation module regenerates the grid column width template string for that row. Upon receiving the new grid column width template string, the rendering output module re-executes the component position allocation. The module adjusts the position of each component in the grid according to the new column width definition, achieving real-time layout updates.

[0060] The technical advantage of this implementation lies in the fact that, through functional configuration-driven dynamic determination of component types and attributes, the same field can be rendered as different types of components with different attribute configurations in different data rows. Combined with dynamically generated grid column width template strings, flexible and adaptive component layout is achieved. When the field's visibility changes, the component position automatically adjusts, avoiding issues such as layout gaps or compression distortion.

[0061] The linkage event handling module responds to field value change events, updates the element value at the corresponding position in the two-dimensional array to the triggered state, and calls the corresponding change callback function in the field definition; Furthermore, the parameters received by the change callback function include: the field identifier of the currently changed field, the current row data, the current row index, and the complete array of form data.

[0062] Specifically, the event handling module is used to handle the linkage logic and status updates when field values ​​change. This module listens for field value change events in the form interface and executes the corresponding response operations.

[0063] When the value of a field in the form interface changes, the event handling module captures the change event. The module first locates the corresponding position in the two-dimensional array within the two-dimensional state management module based on the row and field indices of the changed field. The module then updates the value of the element at that position to true, marking the cell as entering a triggered state, indicating that the cell needs to undergo validation.

[0064] In one specific embodiment, a user modifies the value of the third field in the second row of a form, triggering a field value change event. The linked event handling module determines that the row index corresponding to this field is 1 and the field index is 2. The module accesses the [1][2] positions of the two-dimensional array and updates the value of the element at that position from false to true.

[0065] After updating the values ​​of the elements in the two-dimensional array, the event handling module retrieves the change callback function for that field from the field definition array. The module calls this change callback function, passing several parameters to the function. These parameters include the field identifier of the currently changed field, the changed field value, the current row data object, the current row index, and the complete form data array.

[0066] The field identifier parameter identifies the field that has changed. The field value parameter is the new value entered or selected by the user. The current row data parameter is the complete row data object containing the field. The current row index parameter is the position index of the row in the form data array. The complete form data array parameter contains data from all rows in the form.

[0067] In one specific implementation, a user changes the category field value of a row from "A" to "B". The linked event handling module calls the category field change callback function, passing in parameters including the field identifier "category", the new value "B", the current row data object, the row index, and the complete data array. After receiving these parameters, the change callback function clears the specification field value in the current row data object, achieving the linked effect of automatically clearing the specification field after the category changes.

[0068] In another specific implementation, a change callback function for a certain field needs to modify data in other rows. For example, when the main product field changes, the prices in all accessory rows need to be updated synchronously. The change callback function, through the received complete form data array parameter, iterates through the other rows in the array and modifies the values ​​of the price fields in those rows, achieving cross-row data linkage.

[0069] In another specific embodiment, a change callback function for a certain field dynamically modifies the visibility or disabled state of other fields based on the changed value. For example, when the payment method field changes, the change callback function modifies a certain identifier attribute in the current row of data based on the payment method value. Since the visibility condition functions or attribute functions of other fields depend on this identifier attribute, the change of this identifier attribute triggers the dynamic layout calculation module to recalculate the set of visible fields, and the rendering output module to regenerate the form interface, thus realizing the dynamic visibility linkage of fields.

[0070] The technical advantage of this implementation lies in that by passing complete context information, including field identifiers, current row data, row indexes, and all data, to the change callback function, the change callback function can implement complex linkage logic. The change callback function can modify the values ​​of other fields in the current row, modify the values ​​of fields in other rows, and modify the identifier attributes that affect the visibility of fields, thereby supporting multi-dimensional linkage control between fields and between rows.

[0071] The verification execution module calls the corresponding verification rule function in the field definition based on the position of the element marked as triggered in the two-dimensional array, and associates the verification result with the corresponding cell.

[0072] Furthermore, the execution process of the verification execution module includes: Traverse the two-dimensional array and filter out the coordinates of the elements whose values ​​are true. Retrieve the corresponding row data based on the row index of the location coordinates, and retrieve the corresponding field definition from the field definition array based on the column index; Pass the row data and row index into the validation rule function in the field definition; The return value of the verification rule function determines whether the verification passes, and the verification result is stored in association with the location coordinates.

[0073] Specifically, the validation execution module performs data validation on the cells that need to be validated and feeds back the validation results to the form interface. This module achieves precise validation control at the cell level based on the trigger states in the two-dimensional state management module.

[0074] The verification execution module traverses the two-dimensional array, filters out the coordinates of the positions where the element value is true, and forms a list of cells to be verified.

[0075] In one specific embodiment, the element values ​​at positions [0][1], [1][2], and [2][0] of the two-dimensional array are true, and the verification execution module selects the cells corresponding to these three position coordinates for verification.

[0076] After obtaining the list of cells to be validated, the validation execution module retrieves the row data object from the form data array based on the row index and the field definition object from the field definition array based on the column index for each position coordinate.

[0077] In one specific embodiment, for the location coordinates [1][2], the verification execution module retrieves the row data with index 1 from the form data array and the field definition with index 2 from the field definition array. The module obtains the complete data context corresponding to the cell.

[0078] The validation execution module extracts validation rule functions from the field definition object. The module passes the row data and row index as parameters to the validation rule function. After execution, the validation rule function returns a validation rule object or an array of validation rule objects. The validation rule object contains the validation function and error messages.

[0079] The module calls the validation function in the validation rule object, passing the current field value of the cell as a parameter. The validation function returns a boolean value after execution. A true return value indicates successful validation; a false return value indicates validation failure. The module determines whether the data in the cell is valid based on the return value of the validation function.

[0080] In one specific implementation, the validation rule function of a cell returns a validation rule object, whose validation function checks whether the field value is empty. When the field value is not empty, the validation function returns true, and the module determines that the validation has passed; when the field value is empty, the validation function returns false, the module determines that the validation has failed, and extracts the error message "This field cannot be empty" from the validation rule object.

[0081] The validation execution module associates and stores the validation results with the cell's position coordinates. For cells that pass validation, the module records their position coordinates and pass status. For cells that fail validation, the module records their position coordinates, failure status, and error message. The module then passes these validation results to the rendering output module.

[0082] The rendering module updates the visual presentation of the form interface based on the validation results. For cells that fail validation, the rendering module adds an error flag style, such as a red border, to the cell's component and displays an error message near the component. For cells that pass validation, the rendering module removes the error flag style.

[0083] In one specific implementation, a user modifies the value of a cell, triggering validation. The validation execution module determines that the cell validation failed and passes the failure status and error message "Please enter the correct email format" to the rendering output module. The rendering output module adds a red border to the input box component of that cell and displays the error message text below the input box.

[0084] In another specific embodiment, when the user submits the entire form, the values ​​of all cells in the two-dimensional array are updated to true in batches. The validation execution module traverses the entire two-dimensional array and performs validation on all cells. The module collects the locations and error information of all cells that failed validation and provides unified feedback to the interface. The user can locate the specific erroneous cell based on the error identifier and make corrections.

[0085] The technical advantage of this implementation lies in its precise control over which cells require validation using a two-dimensional array, avoiding the performance waste of validating all cells with every change. The validation results are precisely correlated with the cell's position coordinates, enabling error messages to accurately pinpoint specific cells, providing users with precise real-time feedback and significantly improving the user experience.

[0086] Example 2: This embodiment provides a cascading form data editing method based on declarative configuration, such as... Figure 2 The example shown illustrates a purchase order entry scenario, demonstrating the complete data editing process.

[0087] The procurement system needs to support dynamically adding multiple rows of procured items. Each row contains five fields: category, specifications, quantity, unit price, and amount. The business rules are as follows: category is a required field; the visibility of the specifications field is controlled by the category value; when the category is empty, the specifications field is hidden, and when the category has a value, the specifications field is displayed as a text input box; the amount is automatically calculated when the quantity or unit price changes.

[0088] Specifically, the system receives form configuration data. For example... Figure 3 As shown, the `formConfig` array contains two field definition objects. The first object defines the category field: its `prop` attribute is set to "category", its `type` attribute is a function that returns "select", its `label` attribute is "type", its `selectOptions` attribute is a function that returns an array of options, its `validator` attribute is a validation function, and its `change` attribute is a change callback function. When the category value changes, this function sets the `detail` field value of the current row to null to achieve a linked clear. The second object defines the specification field: its `prop` attribute is set to "detail", its `type` attribute is a function that returns "input", its `visible` attribute is a function that returns a boolean value based on whether `valueItem.category` is empty. It returns false (hiding the specification field) when the category is empty and true (displaying the specification field) when the category has a value, and its `attrs` attribute is a function that returns the disabled state.

[0089] like Figure 4 As shown, the configuration items include prop data attribute keys, a function for dynamically determining the component type (type), a function for defining custom validation rules (validator), a function for displaying the width of span / width items, a function for controlling the visible layout, a function for dynamic attributes (attrs), a function for dynamic options (selectOptions), and a callback function for change. Each function type configuration item receives parameter input, including the 0th parameter (valueItem) representing the current row data object and the 1st parameter (valueIndex) representing the row index.

[0090] like Figure 5 As shown, the declarative configuration formConfig and the data model array modelValueArray are taken as input. The core processor performs configuration parsing, executes the form configuration function, calculates rules to generate the gridTemplateColumns layout string, manages the validation state to update the triggerList two-dimensional array, and finally outputs to the UI rendering layer to generate a compliant data structure, a dynamic layout interface, and a user-friendly experience.

[0091] Initially, the system has three rows of empty data. The dynamic layout calculation module calls the explicit / implicit condition functions for each field in the first row of data. The visible function of the category field always returns true, while the visible function of the specification field returns false if valueItem.category is empty. The module determines that the set of visible fields in the first row contains four fields: category, quantity, unit price, and amount. It extracts the width values ​​"2fr", "1fr", "1fr", and "1fr" and generates the grid column width template string "2fr 1fr 1fr1fr".

[0092] like Figure 6 As shown, the gridTemplateColumns function receives props.form and valueItem and valueIndex parameters. It uses the filter method to call the visible function of each field to filter visible fields, uses the map method to extract the width value of the filtered results, and uses the join method to concatenate the values ​​with spaces, finally returning a string such as "1fr 2fr".

[0093] The system creates a 3x5 two-dimensional state array, `triggerList`. Figure 7 As shown, the X-axis represents the field index `configIndex` from 0 to n, and the Y-axis represents the data row index `valueIndex` from 0 to m, forming an m×n two-dimensional matrix. A matrix element value of `false` indicates that the corresponding cell does not require validation, while `true` indicates that validation is required. When a cell requires validation, the `triggerList` element value corresponding to its coordinates is marked as `true`.

[0094] like Figure 8 As shown, the first row of the array is [false, false, true], indicating that the third field of the first row of data is marked as needing to be validated. The second row is [true, false, false], and the third row is [false, false, false], forming a complete trigger state matrix.

[0095] The rendering output module iterates through the data rows and field definitions. For the first row, the category field, the module calls the `type` function to obtain "select" and renders the dropdown selection box. The specification field in the first row is not rendered because it is not in the visible field set. Based on the grid column width template string "2fr 1fr 1fr 1fr", the module places the category component in the first column (occupying 2 elastic units), and the quantity, unit price, and amount components are placed in subsequent columns (each occupying 1 elastic unit).

[0096] The user selects "Standard Parts" as the category in the first row. The linked event handling module updates the value of the element at position [0][0] of the two-dimensional array to true, calls the change function of the category field, and executes valueItem.detail = null to clear the specification value.

[0097] The `visible` function of the specification field re-evaluates `valueItem.category` to ensure it's not empty and returns true. The dynamic layout calculation module recalculates and generates a new grid column width template string "2fr 2fr 1fr 1fr 1fr". The `type` function of the specification field returns "input". The rendering module renders the text input box in the second column.

[0098] like Figure 9 As shown, the change function receives three parameters: valueItem (current row data), valueIndex (row index), and exposeObject (exposed object). Inside the function, all field data of the current row can be accessed and linked operations can be performed.

[0099] The user clicks the submit button. The system calls the batch trigger interface to update all element values ​​in the two-dimensional array to true. The validation execution module traverses the array and filters for positions where the element value is true. For position [0][0], the module retrieves the validator function of the category field. This function checks if !valueItem.category returns false and prompts "Please select a type". The category value is "Standard Parts", so the validation passes. For position [0][1], the specification field value is empty, so the validation fails. The module associates the validation result with the position coordinates and stores it.

[0100] like Figure 10 As shown, the `initState` function initializes the `triggerList` array based on the `trigger` parameter. The `cellTrigger` function receives the parameters `configItem`, `configIndex`, `valueItem`, and `valueIndex`, calls the `validatorCellMessage` function to perform validation, assigns the `hasError` result to `triggerList.value[valueIndex][configIndex]`, and updates the trigger state at the corresponding position.

[0101] The rendering output module adds a red border to the first specification input box and displays an error message "This field cannot be empty" below the component. After the user fills in the specification input box, the linked event handling module updates the value of the element at position [0][1] to true, the validation execution module re-executes the validation and passes, and the rendering module removes the error marker.

[0102] like Figure 11 As shown, the form contains multiple rows of data, with the visibility of the specifications field controlled by the category value in each row. When the category is empty, the specifications field is hidden, and the layout automatically adjusts to four columns; when the category has a value, the specifications field is displayed, and the layout adjusts to five columns. Cells that fail validation display a red border and error message, providing users with precise cell-level visual feedback. When the quantity and unit price change, the amount field automatically updates the calculation result.

[0103] This embodiment verifies the ability of the method of the present invention to achieve dynamic component type switching, conditional display and hiding, automatic linkage calculation and precise cell-level validation through declarative configuration, and demonstrates the complete data flow process from configuration input to UI rendering.

[0104] Finally, it should be noted that the above descriptions are merely preferred embodiments of the present invention and are not intended to limit the present invention. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions described in the foregoing embodiments or make equivalent substitutions for some of the technical features. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the protection scope of the present invention.

Claims

1. A cascading form data editing system based on declarative configuration, characterized in that, include: The declarative configuration management module receives form configuration data, which includes an array of field definitions. Each field definition contains a function for the field type, explicit / implicit conditions, validation rules, and change callbacks. The function receives the current row data and the row index as parameters. The dynamic layout calculation module calls the explicit / implicit condition function in the field definition for each row of data to obtain the set of visible fields for the current row, and generates a grid column width template string based on the width value of each field in the set of visible fields; The two-dimensional state management module includes a row and column two-dimensional array. The first dimension of the two-dimensional array corresponds to the data row index, and the second dimension corresponds to the field index in the field definition array. The element value of the two-dimensional array records the verification trigger status of the corresponding cell. The rendering output module calls the field type function in the field definition to determine the component type and attribute value of each cell, and generates a form interface by combining the grid column width template string; The linkage event handling module responds to field value change events, updates the element value at the corresponding position in the two-dimensional array to the triggered state, and calls the corresponding change callback function in the field definition; The verification execution module calls the corresponding verification rule function in the field definition based on the position of the element marked as triggered in the two-dimensional array, and associates the verification result with the corresponding cell.

2. The cascading form data editing system based on declarative configuration according to claim 1, characterized in that, The template string for generating grid column widths includes: Extract the width value of each field in the set of visible fields; The width values ​​are concatenated with spaces in the order of the fields in the set of visible fields to form the grid column width template string.

3. The cascading form data editing system based on declarative configuration according to claim 1, characterized in that, The dynamic layout calculation module responds to data changes. When the number of data rows changes or the visibility status of fields changes, it re-executes the calculation of the set of visible fields and the generation of the grid column width template string.

4. The cascading form data editing system based on declarative configuration according to claim 1, characterized in that, The two-dimensional state management module also includes a batch trigger interface, including: The row-level trigger interface receives the row index parameter and updates the element values ​​of all fields corresponding to that row in the two-dimensional array to true in batches. The column-level trigger interface receives a field index parameter, iterates through all rows of the two-dimensional array, and updates the value of the element at the index position of the field in each row to true.

5. A cascading form data editing system based on declarative configuration according to claim 1, characterized in that, The elements of the two-dimensional array are of boolean type. Initially, all elements are false. When the linkage event handling module detects a change in the field value of the corresponding cell, it updates the element value of the corresponding cell to true.

6. The cascading form data editing system based on declarative configuration according to claim 1, characterized in that, In the rendering output module, determining the component type and attribute values ​​includes: Iterate through the field definition array and data rows, passing the current row data and row index to the field type function; The type of component to be rendered in the corresponding cell is determined based on the function's return value; Pass the current row data and row index to other function properties in the field definition to obtain the component's configuration property value; Assign the position of each component in the grid according to the column width defined in the grid column width template string.

7. A cascading form data editing system based on declarative configuration according to claim 1, characterized in that, The parameters received by the change callback function include: the field identifier of the currently changed field, the current row data, the current row index, and the complete form data array.

8. A cascading form data editing system based on declarative configuration according to claim 1, characterized in that, The execution process of the verification execution module includes: Traverse the two-dimensional array and filter out the coordinates of the elements whose values ​​are true. Retrieve the corresponding row data based on the row index of the location coordinates, and retrieve the corresponding field definition from the field definition array based on the column index; Pass the row data and row index into the validation rule function in the field definition; The return value of the verification rule function determines whether the verification passes, and the verification result is stored in association with the location coordinates.

9. A method for editing cascading form data based on declarative configuration, characterized in that, include: Receive form configuration data, which includes an array of field definitions. Each field definition contains a function for its field type, display / hidden conditions, validation rules, and change callback. The function receives the current row data and the row index as parameters. For each row of data, the explicit / implicit condition function in the field definition is called to obtain the set of visible fields for the current row, and a grid column width template string is generated based on the width value of each field in the set of visible fields; Create a two-dimensional array with rows and columns. The first dimension of the two-dimensional array corresponds to the data row index, and the second dimension corresponds to the field index in the field definition array. The element value of the two-dimensional array records the validation trigger status of the corresponding cell. The field type function in the field definition is called to determine the component type and attribute value of each cell, and the form interface is generated by combining the grid column width template string; When a change in a field value is detected, the element value at the corresponding position in the two-dimensional array is updated to the trigger state, and the corresponding change callback function in the field definition is called; Based on the position of the element marked as triggered in the two-dimensional array, the corresponding validation rule function in the field definition is called, and the validation result is associated with the corresponding cell.

Images