Method for automatically configuring form table based on Antd

Abstract

The invention relates to the technical field of software development, and provides an Antd-based method for automatically configuring a form table, which comprises the following steps of: S1, defining a form Schema which comprises the type of a form item, a key value pair and a custom configuration item attribute and is used for dynamically constructing the form; s2, a table Schema is defined, and the table Schema inherits attributes of the form Schema, contains specific attributes of the table, such as paging logic, high self-adaption and a data interface, and is used for dynamically constructing the table and being linked with the form to achieve data screening; and S3, packaging an AntdFormTable component, and automatically rendering the form and the table by the component according to a preset form Schema and a preset table Schema so as to realize input, verification, screening and display of the data. Through the dynamic rendering technology, a developer does not need to manually write a large number of repeated codes, and therefore the development efficiency is greatly improved.

Description

Technical Field

[0001] The present invention relates to the technical field of software development, and in particular to a method for automatically configuring a form table based on Ant. Background Art

[0002] In modern front-end development, component-based and modular development ideas have become mainstream. In traditional Web application scenarios, forms and tables are usually processed separately. Users enter or modify data in the form, submit the form, and the data is processed and displayed in the table. With the increase in business, many scenarios have such requirements. If we repeatedly write this form validation logic and Table data logic every time, there will be a lot of duplication, and it will also waste the time of developers. This development method is not only inefficient, but also increases maintenance costs. Summary of the invention

[0003] In view of the above problems, the present invention provides a method for automatically configuring a form table based on Ant.

[0004] To solve the above problems, the technical solution adopted by the present invention is:

[0005] A method for automatically configuring a form based on Antd, comprising the following steps:

[0006] S1. Define a form Schema, which includes the type of form items, key-value pairs, and custom configuration item attributes, and is used to dynamically construct a form;

[0007] S2. Define a table schema, which inherits the properties of the form schema and includes table-specific properties, such as paging logic, height adaptability, and data interface, for dynamically building a table and linking with the form to implement data screening;

[0008] S3. Encapsulate the AntdFormTable component, which automatically renders forms and tables according to the preset form Schema and table Schema to achieve data input, verification, screening and display.

[0009] Preferably, in step S3, the AntdFormTable component supports dynamic adjustment of properties such as layout, style, and validation rules of forms and tables through configuration items.

[0010] Preferably, in step S3, the AntdFormTable component has a built-in data validation mechanism to ensure that the data input by the user complies with preset rules and improve data accuracy.

[0011] Preferably, in step S3, the AntdFormTable component supports the function of adaptively adjusting the table height to the container height, and can dynamically adjust the table height according to the container size to improve the user experience.

[0012] Preferably, in step S3, the AntdFormTable component supports a virtual list function, and optimizes table rendering performance in large data volume scenarios by configuring to turn on or off virtual scrolling.

[0013] Preferably, in step S3, the code of AntdFormTable is first compiled and compressed by the rollup packaging tool, and then the code is published online using the npm publish command.

[0014] Preferably, developers use yarn or npm for downloading and uploading operations.

[0015] Preferably, the developer imports the component into the project and uses Import to import the corresponding front-end page. Then, when configuring the component Scahme, the component configuration is saved as a JSON object. If it is saved in the database, it is necessary to call the online interface to obtain the corresponding file, and then render the page according to the configured Scahme, and pass the corresponding configuration to the component to render the page.

[0016] The beneficial effects of the present invention are:

[0017] 1. Improve development efficiency: Through dynamic rendering technology, developers do not need to manually write a large amount of repetitive code, which greatly improves development efficiency.

[0018] 2. Ensure data accuracy: The built-in data validation mechanism can ensure the accuracy of the data entered by the user and reduce problems caused by data errors.

[0019] 3. Improve user experience: The instant feedback system allows users to see the effects immediately when data changes, greatly improving the user experience.

[0020] 4. Flexibility and scalability: The highly customized configuration capability and data storage mechanism enable AntdFormTable to meet various complex business needs and has good flexibility and scalability.

[0021] 5. Reduce maintenance costs: The integration of forms and tables makes data operations more centralized and reduces system maintenance costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] Figure 1 is a flow chart of the present invention;

[0023] Figure 2 It is a diagram of the implementation steps of the present invention;

[0024] Figure 3 It is the main attribute diagram of FormScahem of the present invention;

[0025] Figure 4 This is the main attribute graph of TableScahem of the present invention. DETAILED DESCRIPTION

[0026] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0027] In the description of the present invention, it should be understood that the terms "center", "longitudinal", "lateral", "length", "width", "thickness", "up", "down", "front", "back", "left", "right", "vertical", "horizontal", "top", "bottom", "inside", "outside", "clockwise", "counterclockwise" and the like indicate orientations or positional relationships based on the orientations or positional relationships shown in the accompanying drawings, and are only for the convenience of describing the present invention and simplifying the description, and do not indicate or imply that the referred device or element must have a specific orientation, be constructed and operated in a specific orientation, and therefore should not be understood as limiting the present invention.

[0028] In addition, the terms "first" and "second" are only used for descriptive purposes and cannot be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Therefore, the features defined as "first" and "second" may explicitly or implicitly include one or more of the features. In the description of the present invention, "multiple" means two or more, unless otherwise clearly and specifically defined. In addition, the terms "installed", "connected" and "connected" should be understood in a broad sense, for example, it can be a fixed connection, a detachable connection, or an integral connection; it can be a mechanical connection or an electrical connection; it can be a direct connection, or it can be indirectly connected through an intermediate medium, or it can be the internal connection of two components. For those of ordinary skill in the art, the specific meanings of the above terms in the present invention can be understood according to specific circumstances.

[0029] AntdFormTable: AntdFormTable is a combination of Ant Design's Form and Table components, aiming to provide a more integrated way to handle form data in tables. This combination may make editing data directly in the table easier and more intuitive, while also taking advantage of the rich UI components and interactive effects provided by Ant Design to bring a better experience to users.

[0030] React: is an open source front-end JavaScript library mainly used for building user interfaces, especially single-page applications.

[0031] Ant Design: React component library for building user interfaces. It follows Chinese design specifications and provides a rich set of high-quality React components to create modern web applications quickly and easily.

[0032] Reference Figure 1-2 as well as Figure 3-4 , a method for automatically configuring a form table based on Antd, comprising the following steps:

[0033] S1. Define a form Schema, which includes the type of form items, key-value pairs, and custom configuration item attributes, and is used to dynamically construct a form;

[0034] S2. Define a table schema, which inherits the properties of the form schema and includes table-specific properties, such as paging logic, height adaptability, and data interface, for dynamically building a table and linking with the form to implement data screening;

[0035] S3. Encapsulate the AntdFormTable component, which automatically renders forms and tables according to the preset form Schema and table Schema to achieve data input, verification, screening and display.

[0036] Furthermore, in step S3, the AntdFormTable component supports dynamic adjustment of properties such as layout, style, and validation rules of forms and tables through configuration items.

[0037] Preferably, in step S3, the AntdFormTable component has a built-in data validation mechanism to ensure that the data input by the user complies with preset rules and improve data accuracy.

[0038] Furthermore, in step S3, the AntdFormTable component supports the function of the table height being adaptive to the container height, and can dynamically adjust the table height according to the container size to improve the user experience.

[0039] Furthermore, in step S3, the AntdFormTable component supports a virtual list function, and optimizes table rendering performance in large data volume scenarios by configuring to turn on or off virtual scrolling.

[0040] Furthermore, in step S3, the code of AntdFormTable is first compiled and compressed using the rollup packaging tool, and then published online using the npm publish command.

[0041] Furthermore, developers use yarn or npm to download and upload.

[0042] Furthermore, the developer imports the component into the project and uses Import to import the corresponding front-end page. Then, when configuring the component Scahme, the component configuration is saved as a JSON object. If it is saved in the database, it is necessary to call the online interface to obtain the corresponding file, and then render the page according to the configured Scahme, and pass the corresponding configuration to the component to render the page.

[0043] Based on the above, Figure 3 As shown in the figure, first define the Scahme required by the Form. The UI framework uses the AntForm component to dynamically build the form.

[0044] The core source code of Form rendering is as follows:

[0045] <Form

[0046] className="base-form-wrap"

[0047] {...config}

[0048] form={form}

[0049] layout={formConfig? .layout||'inline'}>

[0050] {searchFormSchema? .map(item=>(

[0051] <Form.Item name={item.key}key={item.key}label={item.label}>

[0052] {getFormItemComponents(item)}

[0053] < / Form.Item>

[0054] ))}

[0055] {formBtn&&(

[0056] <Form.Item{...formBtn?.formBtnItem}>

[0057] <space>

[0058] {formBtn?.showCommit&&(

[0059] <Buttontype="primary"{...formBtn.commitProps}

[0060] htmlType="submit">

[0061] {formBtn.commitTitle||'Query'}

[0062]

[0063] )}

[0064] {formBtn.showReset&&(

[0065] <Button{...formBtn.resetProps}htmlType="reset">

[0066] {formBtn.resetTitle||'Reset'}

[0067]

[0068] )}

[0069] < / space>

[0070] < / Form.Item>

[0071] )}

[0072]

[0073] const getFormItemComponents=(schemaItem:SearchFormSchemaItem)=>{

[0074] let componentProps={

[0075]

[0076] <RangePicker

[0077] {...componentProps}

[0078] onChange={value=>

[0079] handleFormComponentChange? .({schemaItem,value})}

[0080] / >

[0081] )};

[0082] The form rendering of Form in the core code is through the FormScahem list, and then the corresponding built-in components are matched through the type attribute in FormScahem. The above examples are: Input: text input box, InputNumberRange: range number input box, RangePicker time selector, etc.;

[0083] Define the Scahme of Table. The UI framework uses AntT components. The main properties of TableScahem are as follows Figure 4 :

[0084] according to Figure 4The defined Scahme obtains the overall Scahme configuration component required by the component. SearchFormSchema: This property is used to determine whether there is a form linkage. This is used to integrate Form and Table. Through searchFormSchema, the filter items required by Table are traversed to perform the common search linkage logic between Table and Form.

[0085] The core code snippet is as follows:

[0086] useBaseForm({

[0087] searchFormSchema,

[0088] handleFormComponentChange:props? .formChangeReFresh&&

[0089] handleFormComponentChange,

[0090] formConfig:{

[0091] ...formConfig,

[0092] size:props? .size,

[0093] onFinish:values=>{

[0094] setTableParams({...tableParams,...values})

[0095] },

[0096] onReset:()=>{

[0097] setTableParams({...defaultParams})

[0098] }

[0099] }

[0100] });

[0101] The Table component gets the passed in searchFormSchema to render the Form, and setTableParams gets the attribute changes of the Form and links them with the table.

[0102] The built-in Scahme of Table provides the following properties:

[0103] -autoTableHeight: Boolean sets whether the Table needs to adapt to the container height. Pass this field and the Table will calculate the height responsively.

[0104] -virtualTable: Boolean sets whether the Table is virtual scrolling. If set, the Table can be scrolled with a virtual list, optimizing the scene with a large amount of data on a page.

[0105] -list: (arg) => void Table list interface for obtaining data.

[0106] Encapsulate the AntdFormTable component:

[0107] First, use the rollup packaging tool to compile and compress the AntdFormTable code. After the above steps, use the npm publish command to publish this package online. The specific implementation example is attached. Figure 2 :

[0108] S1: Front-end engineering download package

[0109] In this step, developers use yarn or npm to download the uploaded package name.

[0110] S2: Introducing components

[0111] In this step, the developer imports the components into the project: the developer uses Import to import the corresponding front-end page.

[0112] S3: Configuration Component Scahme

[0113] In this step, the component configuration is saved as a JSON object. If it is saved in the database, you need to call the online interface to obtain the corresponding file.

[0114] S4: Render the page according to the configured Scahme

[0115] In this step, the developer gets the corresponding configuration and passes it to the component to render the page.

[0116] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. A method for automatically configuring a form based on Antd, characterized in that: The following steps are involved: S1. Define a form Schema, which includes the type of form items, key-value pairs, and custom configuration item attributes, and is used to dynamically construct a form; S2. Define a table schema, which inherits the properties of the form schema and includes table-specific properties, such as paging logic, height adaptability, and data interface, for dynamically building a table and linking with the form to implement data screening; S3. Encapsulate the AntdFormTable component, which automatically renders forms and tables according to the preset form Schema and table Schema to achieve data input, verification, screening and display.

2. According to claim 1, a method for automatically configuring a form based on Antd is characterized in that: In step S3, the AntdFormTable component supports dynamic adjustment of the layout, style, validation rules and other properties of the form and table through configuration items.

3. According to a method for automatically configuring a form based on Antd in claim 1, it is characterized in that: In step S3, the AntdFormTable component has a built-in data validation mechanism to ensure that the data entered by the user complies with preset rules and improve data accuracy.

4. According to claim 1, a method for automatically configuring a form based on Antd is characterized in that: In step S3, the AntdFormTable component supports the function of adaptively adjusting the table height to the container height, and can dynamically adjust the table height according to the container size to improve the user experience.

5. The method for automatically configuring a form based on Antd according to claim 1, characterized in that: In step S3, the AntdFormTable component supports the virtual list function, and optimizes the table rendering performance in large data volume scenarios by configuring to turn on or off virtual scrolling.

6. The method for automatically configuring a form based on Antd according to claim 1, characterized in that: In step S3, the rollup packaging tool is used to compile and compress the AntdFormTable code, and then the npm publish command is used to publish it online.

7. The method for automatically configuring a form based on Antd according to claim 6, characterized in that: Developers use yarn or npm to download and upload.

8. The method for automatically configuring a form based on Antd according to claim 7, characterized in that: The developer imports the component into the project and uses Import to import the corresponding front-end page. Then, when configuring the component Scahme, the component configuration is saved as a JSON object. If it is saved in the database, it is necessary to call the online interface to obtain the corresponding file, and then render the page according to the configured Scahme, and pass the corresponding configuration to the component to render the page.

Images