A table loading method, device and equipment

Abstract

This application relates to a table loading method, apparatus, and device to solve the problems of cumbersome data loading and delayed form validation feedback in the prior art. The method includes: in response to a user's operation to load a target table on a webpage, acquiring the data of the target table based on a data loading component and displaying it in a first display area of ​​the webpage; in response to a user's editing operation on a first form item in the target table, calling a validation component to display an input box in a first sub-area and displaying at least one validation rule in a second sub-area; when the character input by the user passes validation based on the at least one validation rule, displaying the target table data, including the edited first form item, in the first display area of ​​the webpage based on the data loading component.

Description

Technical Field

[0001] This application relates to the field of interface display technology, and in particular to a table loading method, apparatus and device. Background Technology

[0002] With the rapid development of network technology, users' requirements for web applications have far exceeded static page display and simple interaction. To meet the increasingly complex web development needs, front-end frameworks have emerged. Front-end frameworks improve efficiency through component-based development models, define unified development standards, provide functions and tools to quickly build complex web applications, and improve performance by optimizing Document Object Model (DOM) operations and data-driven rendering. React, due to its high performance, ease of learning, rich user interface, component-based development, virtual DOM technology, rich ecosystem, and community support, has become the first choice for many technology teams developing large-scale projects. Although antd, as the most widely used React UI component library, has greatly improved development efficiency, the integration of some components is still insufficient. For example, the Table component focuses on data display and does not include data retrieval and management functions, requiring developers to manually write code to retrieve backend data, resulting in a large amount of repetitive code and impacting performance. In addition, during form validation, it is unclear whether the input conforms to the rules; compliance is only known after the form is submitted, causing a delay in form validation feedback. Summary of the Invention

[0003] This application relates to a table loading method, apparatus, and device to solve the problems of cumbersome data loading and delayed form validation feedback in the prior art.

[0004] In a first aspect, embodiments of this application provide a table loading method, including:

[0005] In response to a user's operation of loading a target table on a webpage, the data of the target table is obtained through a data loading component and displayed in the first display area of ​​the webpage;

[0006] In response to a user's editing operation on a first form item in the target table, a validation component is invoked to display an input box in a first sub-area and at least one validation rule in a second sub-area; the first sub-area and the second sub-area are different sub-areas of the first display area;

[0007] When the character input by the user passes the validation based on the at least one validation rule, the target table data, including the edited first form item, is displayed in the first display area of ​​the webpage based on the data loading component.

[0008] Based on the above solution, table data can be automatically loaded from its storage address when loading table data on a webpage, thereby reducing repetitive code writing and improving development efficiency. Furthermore, validation conditions and results can be displayed on the interface, further enhancing form completion efficiency and user experience.

[0009] In one possible implementation, the verification of user input characters based on the at least one verification rule includes:

[0010] For the characters entered by the user in the first sub-region, the verification component displays the verification result of the at least one verification rule in the third sub-region;

[0011] If each validation rule in the third sub-region passes the validation for the input character, then the input character is determined to have passed the validation.

[0012] The above method allows users to determine whether their input characters have passed validation by viewing the results in the third sub-area, enabling them to confirm the correctness of their input in real time.

[0013] In one possible implementation, the step of displaying the verification result of the at least one verification rule in a third sub-region via the verification component for characters entered by the user in the first sub-region includes:

[0014] The characters entered by the user in the first sub-region are used as the characters to be verified;

[0015] The verification component is invoked to perform rule verification on the character to be verified based on each verification rule, and the verification results corresponding to each verification rule are displayed in the third sub-area.

[0016] Based on the above solution, the validation component performs real-time validation of the characters entered by the user and displays the validation results on the display interface. Users do not need to wait to submit the form to know whether the input is valid, thus realizing real-time form validation.

[0017] In one possible implementation, the method further includes:

[0018] In response to the user's selection of an edit component in the second sub-area, at least one validation rule in the second sub-area is modified to an editable state;

[0019] In response to the user's modification of the target validation rule, the modified validation rule is used as the validation rule for the target character.

[0020] Based on the above solution, the form validation rules can be edited after the form is loaded, thereby improving development efficiency.

[0021] In one possible implementation, the method further includes:

[0022] Respond to user modifications to the target validation rules and obtain the configuration information used to validate the rules;

[0023] The modified target verification rules are verified based on the configuration information.

[0024] If the verification fails, a control indicating that the verification rule modification failed will be displayed in the fourth sub-area;

[0025] If the verification passes, a control indicating that the verification rule has been successfully modified will be displayed in the fourth sub-area.

[0026] Based on the above scheme, the validation rules can be verified to ensure their correctness and accuracy, and to prevent incorrect validation rules from affecting users' modification and editing of forms.

[0027] In one possible implementation, the first display area further includes a search component, and the method further includes:

[0028] In response to the user selecting the search component in the first display area of ​​the webpage, a search input box is displayed in the fifth sub-area;

[0029] In response to the user's action of entering target search characters in the search input box, the data loading component calls the useRequest hook to initiate a search request. The search request includes the target search characters and is used to filter the target table data based on the target search characters.

[0030] The filtered results are loaded into the first display area of ​​the webpage via the useRequest hook.

[0031] Based on the above solution, the data loading component realizes the search of table data through the search component, eliminating the need to write code to search table data in the webpage, thus improving development efficiency.

[0032] In one possible implementation, the step of retrieving data from the target table via a data loading component in response to a user's operation of loading the target table on a webpage includes:

[0033] In response to a user's action of loading a target table in a webpage, the storage address of the target table is determined;

[0034] The data of the target table is obtained from the storage address based on the data loading component.

[0035] Based on the above solution, the data loading component in this application can automatically load table data through storage address, avoiding the need for users to obtain table data by editing code, thus improving data acquisition efficiency and enhancing user experience.

[0036] Secondly, embodiments of this application provide a table loading device, including:

[0037] The first determining module is used to respond to the user's operation of loading a target table in the webpage, obtain the data of the target table through the data loading component, and display it in the first display area of ​​the webpage;

[0038] The second determining module is used to respond to the user's editing operation on the first form item in the target table, call the validation component to display an input box in the first sub-area, and display at least one validation rule in the second sub-area; the first sub-area and the second sub-area are different sub-areas of the first display area;

[0039] When the character input by the user passes the validation based on the at least one validation rule, the target table data, including the edited first form item, is displayed in the first display area of ​​the webpage based on the data loading component.

[0040] In one possible implementation, the second determining module, upon passing the character validation based on the at least one validation rule, is specifically configured to:

[0041] For the characters entered by the user in the first sub-region, the verification component displays the verification result of the at least one verification rule in the third sub-region;

[0042] If each validation rule in the third sub-region passes the validation for the input character, then the input character is determined to have passed the validation.

[0043] In one possible implementation, the second determining module, when displaying the verification result of the at least one verification rule in the third sub-region via the verification component for characters input by the user in the first sub-region, is specifically used for:

[0044] The characters entered by the user in the first sub-region are used as the characters to be verified;

[0045] The verification component is invoked to perform rule verification on the character to be verified based on each verification rule, and the verification results corresponding to each verification rule are displayed in the third sub-area.

[0046] In one possible implementation, the apparatus further includes a third determining module, which is further configured to:

[0047] In response to the user's selection of an edit component in the second sub-area, at least one validation rule in the second sub-area is modified to an editable state;

[0048] In response to the user's modification of the target validation rule, the modified validation rule is used as the validation rule for the target character.

[0049] In one possible implementation, the third determining module is further configured to:

[0050] Respond to user modifications to the target validation rules and obtain the configuration information used to validate the rules;

[0051] The modified target verification rules are verified based on the configuration information.

[0052] If the verification fails, a control indicating that the verification rule modification failed will be displayed in the fourth sub-area;

[0053] If the verification passes, a control indicating that the verification rule has been successfully modified will be displayed in the fourth sub-area.

[0054] In one possible implementation, the first display area further includes a search component, and the second determining module is further configured to:

[0055] In response to the user selecting the search component in the first display area of ​​the webpage, a search input box is displayed in the fifth sub-area;

[0056] In response to the user's action of entering target search characters in the search input box, the data loading component calls the useRequest hook to initiate a search request. The search request includes the target search characters and is used to filter the target table data based on the target search characters.

[0057] The filtered results are loaded into the first display area of ​​the webpage via the useRequest hook.

[0058] In one possible implementation, the first determining module, when responding to a user's operation of loading a target table in a webpage and obtaining data from the target table through a data loading component, is specifically used for:

[0059] In response to a user's action of loading a target table in a webpage, the storage address of the target table is determined;

[0060] The data of the target table is obtained from the storage address based on the data loading component.

[0061] Thirdly, embodiments of this application provide an execution device, including:

[0062] Memory, used to store program instructions;

[0063] A processor is configured to acquire program instructions from the memory and execute the method described in the first aspect and different implementations of the first aspect according to the acquired program instructions.

[0064] Fourthly, embodiments of this application provide a computer-readable storage medium including computer instructions that, when executed by a computer, implement the method described in the first aspect and different implementations of the first aspect.

[0065] Furthermore, the technical effects of any of the implementation methods in the second to fourth aspects can be found in the first aspect and the technical effects of different implementation methods of the first aspect, which will not be repeated here. Attached Figure Description

[0066] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0067] Figure 1 This is a functional diagram of a Table component provided in an embodiment of this application;

[0068] Figure 2 A flowchart illustrating a table loading method provided in an embodiment of this application;

[0069] Figure 3 A schematic diagram illustrating a verification rule provided in an embodiment of this application;

[0070] Figure 4 A schematic diagram of a verification result provided in an embodiment of this application;

[0071] Figure 5 A schematic diagram illustrating another verification result provided in an embodiment of this application;

[0072] Figure 6 This is a schematic diagram showing a second sub-region provided in an embodiment of this application;

[0073] Figure 7 A schematic diagram of a display interface for modifying verification rules provided in an embodiment of this application;

[0074] Figure 8 A schematic diagram illustrating the verification result of a verification rule provided in an embodiment of this application;

[0075] Figure 9A schematic diagram of the verification result for another verification rule provided in an embodiment of this application;

[0076] Figure 10 This is a schematic diagram of the structure of a table loading device provided in an embodiment of this application;

[0077] Figure 11 This is a schematic diagram of an execution device provided in an embodiment of this application. Detailed Implementation

[0078] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. The components of the embodiments of this application described and shown in the accompanying drawings can be arranged and designed in various different configurations.

[0079] Therefore, the following detailed description of the embodiments of this application provided in the accompanying drawings is not intended to limit the scope of the claimed application, but merely to illustrate selected embodiments of the application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without inventive effort are within the scope of protection of this application.

[0080] It should be noted that relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0081] React, one of the most popular mainstream frameworks, is developed and maintained by Facebook. Its core features include the Virtual DOM and component-based design, allowing developers to break down applications into independent, reusable components and combine them into larger applications. Due to its high performance, ease of learning, rich user interface, component-based development, Virtual DOM technology, rich ecosystem, and community support, React has become the first choice for many technical teams developing large-scale projects.

[0082] Ant Design (antd) is a UI component library based on React, primarily used in mid-to-back-end systems. It provides a series of pre-packaged components and modules, significantly reducing development time and workload while improving efficiency. Ant Design's advantages include: providing a consistent visual style to ensure application visual consistency; high component quality and reliability; clear code structure for easy maintenance; and providing unified development standards and specifications for the team, promoting collaboration.

[0083] However, in actual business development, the integration level of Ant Design is still insufficient. To further improve development efficiency, ofs-component UI component library was developed based on Ant Design, which further integrates and encapsulates form components, table components, etc. Specific business functions can be implemented through simple attribute configuration or API, greatly improving development efficiency and making the UI style more adaptable to business needs.

[0084] While Ant Design (antd) significantly improves development efficiency as the most widely used React UI component library, the integration of some of its components remains insufficient to adapt to diverse business scenarios, different company UI styles, and the technical requirements of development teams. The main problems are as follows: 1) Delayed form validation feedback: Users can only know whether their input conforms to the specifications after submitting the form, requiring constant trial and error. 2) Unintuitive display of complex validation rules: Because Ant Design's Form component lacks a built-in function to display the status of multiple validation rules, users find it difficult to intuitively understand which rules are not met for form items with multiple validation rules. 3) Cumbersome data loading in the Table component: Since Ant Design's Table component focuses on data display and does not include data acquisition and management functions, using the Table component requires manually writing code to retrieve backend data, handle status management and updates, and perform common functions such as search, refresh, and checkboxes. These problems force developers to write a large amount of repetitive code, increasing project size, impacting performance, and reducing development efficiency and code maintainability.

[0085] To address the aforementioned issues, this application provides a table loading method. The data loading component automatically loads the target table data from its storage address and displays it in the webpage's display area. Furthermore, when editing form items in the table, calling the validation component displays validation rules and real-time validation results for the input characters. Users do not need to wait until submitting the form to know if their input is valid; the intuitive display of validation rules and results improves the error tolerance of form completion. In addition, the data loading component in this application can have search and refresh functions, reducing the need for repetitive manual coding and further improving development efficiency.

[0086] In this application, the data loading component can be a Table component. This application re-encapsulates the original Table component to give it integrated search functionality, automatic data loading, dynamic data updates, automatic refresh, manual refresh, and a rich API. Specifically, the table's search component is implemented using Ant Design's Input, Select, and DatePick components. Simply configure it according to a fixed format to use the corresponding search form, thus realizing the Table component's search functionality. Secondly, based on the configured requestMethod, backend data can be automatically requested during initialization and displayed on the interface to achieve automatic data loading. Alternatively, useQuery can be used to manage data retrieval and status, achieving similar automatic data loading and updating functionality. Next, the useRequest hook from the ahooks library can be used to manage requests, automatically updating data when search, pagination, or sorting parameters change, thus enabling the re-encapsulated Table component to have dynamic data updating capabilities. Furthermore, the useStableInterval method from the ahooks library can be used to automatically refresh the table data, enabling the re-encapsulated Table component to have automatic refresh functionality. Additionally, it offers a manual refresh function to reset search, pagination, and sorting parameters; and provides a series of APIs to facilitate the processing of table data, such as retrieving selected data, etc. Figure 1 As shown in the table below, some of the configuration parameters for the repackaged Table component are listed. Of course, the repackaged Table component can have more configuration parameters, but this application does not specifically limit this.

[0087] Table 1. Configuration Items for the Table Component

[0088]

[0089] In this application, the validation component can be implemented using the CommonValidate component. The CommonValidate component is a wrapper around Ant Design's Form.Item component, and when used with Input, it can achieve real-time validation of input fields and display the results. Furthermore, in this application, the CommonValidate component can be encapsulated within a re-encapsulated Table component, or it can be encapsulated together with the aforementioned re-encapsulated Table component to create a new table component; this application does not impose any specific limitations on this. During form validation, third-party form libraries such as Formic or react-hook-form can also be used, with custom ReactHooks used to handle form states and validation logic; this application does not impose any specific limitations on this either.

[0090] See Figure 2The diagram shown is a flowchart of a table loading method provided in an embodiment of this application. The specific process is as follows:

[0091] S201, in response to the user's operation of loading the target table in the webpage, the data of the target table is obtained through the data loading component and displayed in the first display area of ​​the webpage.

[0092] In some embodiments, the storage address of the target table can be determined in response to a user's operation of loading the target table in a webpage. Specifically, when the target table data is stored, the storage address is either stored in the target table itself or used as a configuration attribute parameter of the target table data. When the user loads the target table in a webpage, the storage address corresponding to the target table can be determined based on the configuration attribute parameter.

[0093] Furthermore, the data loading component can retrieve data from the target table at the storage address. In some scenarios, the `requestMethod` parameter can be configured in the data loading component to automatically request and display backend data during initialization.

[0094] S202, in response to the user's editing operation on the first form item in the target table, the validation component is invoked to display an input box in the first sub-area and at least one validation rule in the second sub-area.

[0095] The first sub-region and the second sub-region are different sub-regions within the first display region.

[0096] Specifically, when a user selects the first form item in the target table within the first display area, the first form item becomes editable. This triggers the validation component to display an input box in sub-display area 1 and validation rules in sub-display area 2. The validation component can be a Common Validate component.

[0097] In some implementations, the validation component can be used in conjunction with the Input when it is displayed. When the Popover component focuses on the Input, the validation rules in the rules attribute are displayed floating below the Input, such as... Figure 3 As shown.

[0098] S203, when the character input by the user passes the validation based on at least one validation rule, the target table data, including the edited first form item, is displayed in the first display area of ​​the webpage based on the data loading component.

[0099] In some embodiments, for characters entered by the user in the first sub-region, the validation component can display the validation results of at least one validation rule in the third sub-region. If each validation rule displayed in the third sub-region validates the entered character, then the entered character is determined to have passed validation.

[0100] In some scenarios, the characters entered by the user in the first sub-area can be used as the characters to be verified; the verification component is called to perform rule verification on the characters to be verified based on each verification rule, and the verification results corresponding to each verification rule are displayed in the third sub-area.

[0101] Specifically, when a user enters information, the onChange method of Input is triggered to perform real-time validation of the validation rules configured in the rule properties and display the validation result corresponding to each validation rule.

[0102] As an example, the second display area shows three validation rules: Rule 1, Rule 2, and Rule 3. After the user enters information, the information is validated for each rule. In one scenario, validation rules can be set to different font colors to indicate success or failure. For example, a successful validation rule can be displayed in gray, while a failed validation rule can be displayed in black. For instance, if Rule 1 and Rule 2 succeed, but Rule 3 fails, the validation result would be as follows: Figure 4 As shown. In other scenarios, different components can be displayed after the validation rules to indicate whether the validation was successful or failed. For example, when a rule validation is successful, a green component can be displayed after the validation rule to indicate success; when a rule validation fails, a red component can be displayed to indicate failure. Alternatively, when a rule validation is successful, a first component can be displayed after the validation rule to indicate success; when a rule validation fails, a second component can be displayed after the validation rule, and the first component is different from the second component. For example, if rules 1 and 2 validate successfully, and rule 3 fails, the validation result would be as follows. Figure 5 As shown. Of course, other verification rules can also be used to distinguish between successful and failed verifications, but this application does not specifically limit this.

[0103] In some embodiments, when the verification result is successful, the table data can be automatically refreshed in response to the user completing the editing operation using the useStableInterval method of the huse library.

[0104] In some embodiments, the data loading component of this application also has search, sort, and pagination functions. The data loading component further includes a search component and a table component. The search component includes input boxes, selectors, and date pickers to implement the table search function; the corresponding search form can be used simply by configuring it according to a fixed format. The table component includes data display, sorting, and pagination components. When the search, pagination, and sorting parameters change, the useRequest hook from the ahooks library can be used to manage the requests to achieve automatic data updates.

[0105] Based on the above solution, the validation component can display the validation results of user input in real time. Users do not need to wait for the form to be submitted to know whether the input is valid. The validation rules and results are displayed intuitively, improving the error tolerance of form filling, thereby improving form filling efficiency and user experience. In addition, the data loading component has common functions such as automatic data loading, searching, sorting, and pagination, which can reduce repetitive code writing and improve development efficiency.

[0106] In some embodiments, in response to a user selecting an edit component in the second sub-region, at least one validation rule in the second sub-region is modified to an editable state. In response to a user's modification of a target validation rule, the modified validation rule is used as the validation rule for the target character.

[0107] As an example, the second sub-region includes three validation rules: Rule 1, Rule 2, and Rule 3, and also includes an editing component, such as... Figure 6 As shown. In response to the user's selection of the edit component, rules 1, 2, and 3 are made editable. Furthermore, after the user modifies the target validation rule, the modified validation rule can be used as the validation rule for the target character entered by the user in the first sub-area. For example, if the target rule is rule 3, and the user edits rule 3 to rule 4, then rules 1, 2, and 4 will be displayed in the second sub-area, as shown. Figure 7 As shown, after the user enters the target character in the first sub-area, the target character can be validated according to rules 1, 2, and 4 respectively, and the validation results corresponding to rules 1, 2, and 4 can be displayed in the second sub-area.

[0108] In some embodiments, in response to a user's modification operation on the target verification rule, configuration information for verifying the verification rule is obtained; the modified target verification rule is then verified based on the configuration information. If the verification fails, a control indicating that the verification rule modification failed is displayed in the fourth sub-area; if the verification passes, a control indicating that the verification rule modification succeeded is displayed in the fourth sub-area.

[0109] Continuing with the example above, when a user modifies rule 3 to rule 4, rule 4 can be validated based on the configuration information used to verify the rules. Specifically, the configuration information used to verify the rules can be common-sense rules to ensure that the modified rule is correct. For example, if the modified rule 4 is A+B≤A, the configuration information used to verify the rules shows that A+B≥A and A+B≥B. Therefore, the modified rule 4 does not meet the requirements, the modification fails, and the component indicating the modification failure is displayed in the fourth sub-area, such as... Figure 8 As shown. If the modified rule 4 is A+B≥A, which conforms to the configuration information used for verifying the rules, then a control indicating successful modification will be displayed in the fourth sub-area, such as... Figure 9 As shown.

[0110] In some embodiments, the first display area further includes a search component. In response to a user selecting the search component in the first display area of ​​the webpage, a search input box is displayed in the fifth sub-area. In response to a user entering target search characters in the search input box, the data loading component calls the useRequest hook to initiate a search request. The search request includes the target search characters and is used to filter target table data based on those characters. The filtered results are then loaded into the first display area of ​​the webpage via the useRequest hook.

[0111] In some embodiments, in response to a user selecting a search component in the first display area of ​​the webpage, a search selection box can also be displayed in a fifth sub-area, which includes multiple search criteria. In response to the user selecting a target search criterion in the search selection box, the data loading component calls the useRequest hook to initiate a search request and loads the filtered results in the first display area of ​​the webpage.

[0112] In some embodiments, in response to a user selecting a search component in the first display area of ​​the webpage, a date selection control may also be displayed in a fifth sub-area, which includes multiple selectable dates. In response to a user selecting a target date in the date selection control, the data loading component invokes the useRequest hook to initiate a search request and loads the filtered results into the first display area of ​​the webpage.

[0113] In this application, in response to a user's operation of loading target table data on a webpage, a data loading component is invoked to retrieve the table data based on the storage address of the target table data and display it in the first display area of ​​the webpage. Since the data loading component also includes pagination functionality, the number of data items that can be displayed in the first display area can be compared with the number of target table data items to perform pagination display, showing the corresponding number of table data items in the first display area. Furthermore, since the data loading component also includes a search function, the search component includes a search input box, a search selection box, and a date selection control. Furthermore, the user can use the search component to search for the target table data. In some scenarios, in response to a user's editing operation on a first form item, an input box is displayed in the first sub-area, and at least one validation rule is displayed in the second sub-area. Furthermore, a validation component is invoked to perform real-time validation of the characters entered by the user using each validation rule and to display the validation results. In response to the user completing the editing operation, the edited table data is displayed in the first display area.

[0114] The following section uses a re-encapsulated Table component as the data loading component and a Common Validate component as the validation component as an example to illustrate the process of the table loading method in this application. The specific steps are as follows:

[0115] Step 1: In response to the user's action of loading the target table in the webpage, determine the storage address of the target table.

[0116] Step 2: Retrieve the target table data from the storage address based on the Table component and display it in the first display area of ​​the webpage.

[0117] Specifically, the system can automatically request backend data during initialization based on the configured requestMethod and display it in the first display area.

[0118] Step 3: In response to the user's editing operation on the first form item in the target table, call the CommonValidate component to display the input box in the first sub-area and display at least one validation rule in the second sub-area.

[0119] Step 4: For the characters entered by the user in the first sub-area, display the validation results of at least one validation rule in the third sub-area using the Common Validate component.

[0120] In some embodiments, the step of modifying the verification rules may also be included:

[0121] Step 5: In response to the user's operation of selecting the edit component in the second sub-area, modify at least one validation rule in the second sub-area to an editable state.

[0122] Step 6: Respond to the user's modification operation on the target validation rule, and use the modified validation rule as the validation rule for the target character.

[0123] In some embodiments, the Table component in this application also integrates a search function. Specifically, the Input, Select, and DatePick components of Ant Design can be used to search the target table. Only the novel parameter configuration is needed to use the corresponding search function to achieve table searching. The specific search process is as follows:

[0124] Step 7: In response to the user's selection of the search component in the first display area of ​​the webpage, display the search input box in the fifth sub-area.

[0125] Step 8: In response to the user's confirmation of the search, the Table component calls the useRequest hook to initiate a search request.

[0126] In some embodiments, when using the Input component to search for data, the user needs to enter the target search character in the search input box. The search request then includes the target search character and is used to filter the target table data based on the target search character.

[0127] In some embodiments, when using the Select component to search for data, the user needs to select the target search criteria in the search selection box, and the search request includes the target search criteria. The search request is used to filter the target table data based on the target search criteria.

[0128] In some embodiments, when using the DatePick component to perform a data search, the user needs to select a target search date based on the date selection control. The search request then includes the target search date and is used to filter the target table data based on the target search date.

[0129] Step 9: Load the filtered results into the first display area of ​​the webpage using the useRequest hook.

[0130] In some embodiments, the Table component in this application can also implement automatic refresh, which can be achieved through the useStableInterval method of the huse library. Furthermore, the Table component in this application can also provide manual refresh functionality, as well as the ability to reset search, pagination, and sorting parameters.

[0131] Based on the same technical concept, see [link / reference] Figure 10As shown, a table loading device 1000 is provided in an embodiment of this application. This device can perform any step of the table loading method described above, and will not be repeated here to avoid repetition. The device includes a first determining module 1001 and a second determining module 1002.

[0132] The first determining module 1001 is used to respond to the user's operation of loading a target table in the webpage, obtain the data of the target table through the data loading component, and display it in the first display area of ​​the webpage;

[0133] The second determining module 1002 is used to respond to the user's editing operation on the first form item in the target table, call the validation component to display an input box in the first sub-area, and display at least one validation rule in the second sub-area; the first sub-area and the second sub-area are different sub-areas of the first display area;

[0134] When the character input by the user passes the validation based on the at least one validation rule, the target table data, including the edited first form item, is displayed in the first display area of ​​the webpage based on the data loading component.

[0135] In one possible implementation, the second determining module 1002, upon passing the character verification of the user input based on the at least one verification rule, is specifically used for:

[0136] For the characters entered by the user in the first sub-region, the verification component displays the verification result of the at least one verification rule in the third sub-region;

[0137] If each validation rule in the third sub-region passes the validation for the input character, then the input character is determined to have passed the validation.

[0138] In one possible implementation, the second determining module 1002, when displaying the verification result of the at least one verification rule in the third sub-region through the verification component for the characters input by the user in the first sub-region, is specifically used for:

[0139] The characters entered by the user in the first sub-region are used as the characters to be verified;

[0140] The verification component is invoked to perform rule verification on the character to be verified based on each verification rule, and the verification results corresponding to each verification rule are displayed in the third sub-area.

[0141] In one possible implementation, the device further includes a third determining module 1003, which is further configured to:

[0142] In response to the user's selection of an edit component in the second sub-area, at least one validation rule in the second sub-area is modified to an editable state;

[0143] In response to the user's modification of the target validation rule, the modified validation rule is used as the validation rule for the target character.

[0144] In one possible implementation, the third determining module 1003 is further configured to:

[0145] Respond to user modifications to the target validation rules and obtain the configuration information used to validate the rules;

[0146] The modified target verification rules are verified based on the configuration information.

[0147] If the verification fails, a control indicating that the verification rule modification failed will be displayed in the fourth sub-area;

[0148] If the verification passes, a control indicating that the verification rule has been successfully modified will be displayed in the fourth sub-area.

[0149] In one possible implementation, the first display area further includes a search component, and the second determining module 1002 is further configured to:

[0150] In response to the user selecting the search component in the first display area of ​​the webpage, a search input box is displayed in the fifth sub-area;

[0151] In response to the user's action of entering target search characters in the search input box, the Table component calls the useRequest hook to initiate a search request. The search request includes the target search characters and is used to filter the target table data based on the target search characters.

[0152] The filtered results are loaded into the first display area of ​​the webpage via the useRequest hook.

[0153] In one possible implementation, the first determining module 1001, when responding to a user's operation of loading a target table in a webpage and obtaining data from the target table through a data loading component, is specifically used for:

[0154] In response to a user's action of loading a target table in a webpage, the storage address of the target table is determined;

[0155] The data of the target table is obtained from the storage address based on the data loading component.

[0156] Based on the same technical concept, see [link / reference] Figure 11As shown, an execution device 1100 is provided in an embodiment of this application. This device 1100 can implement any step of the table loading method discussed above. Please refer to... Figure 11 The device includes a memory 1101 and a processor 1102.

[0157] The memory 1101 is used to store program instructions;

[0158] The processor 1102 is used to call the program instructions stored in the memory and execute the above table loading method according to the obtained program.

[0159] In the embodiments of this application, the processor 1102 may be a general-purpose processor, a digital signal processor, an application-specific integrated circuit, a field-programmable gate array or other programmable logic device, a discrete gate or transistor logic device, or a discrete hardware component, capable of implementing or executing the methods, steps, and logic block diagrams disclosed in the embodiments of this application. The general-purpose processor may be a microprocessor or any conventional processor, etc. The steps of the methods disclosed in the embodiments of this application can be directly manifested as being executed by a hardware processor, or being executed by a combination of hardware and software modules in the processor.

[0160] Memory 1101, as a non-volatile computer-readable storage medium, can be used to store non-volatile software programs, non-volatile computer-executable programs, and modules. Memory 1101 may include at least one type of storage medium, such as flash memory, hard disk, multimedia card, card-type memory, random access memory (RAM), static random access memory (SRAM), programmable read-only memory (PROM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), magnetic memory, magnetic disk, optical disk, etc. Memory 1101 can be any other medium capable of carrying or storing desired program code in the form of instructions or data structures that can be accessed by a computer, but is not limited thereto. In the embodiments of this application, memory 1101 can also be a circuit or any other device capable of implementing storage functions for storing program instructions and / or data.

[0161] Based on the same technical concept, embodiments of this application provide a computer-readable storage medium including computer program instructions. When the computer program instructions are executed on a computer, they cause the computer to perform the table loading method as described above. Since the principle by which the above-described computer-readable storage medium solves the problem is similar to that of the table loading method, the implementation of the above-described computer-readable storage medium can be referred to the implementation of the method, and repeated details will not be repeated.

[0162] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0163] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to this application. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0164] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0165] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0166] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the spirit and scope of this application. Therefore, if such modifications and variations fall within the scope of the claims of this application and their equivalents, this application also intends to include such modifications and variations.

Claims

1. A table loading method, characterized in that, include: In response to a user's operation of loading a target table on a webpage, the data of the target table is obtained through a data loading component and displayed in the first display area of ​​the webpage; In response to a user's editing operation on a first form item in the target table, a validation component is invoked to display an input box in a first sub-area and at least one validation rule in a second sub-area; the first sub-area and the second sub-area are different sub-areas of the first display area; When the character input by the user passes the validation based on the at least one validation rule, the target table data, including the edited first form item, is displayed in the first display area of ​​the webpage based on the data loading component.

2. The method according to claim 1, characterized in that, The verification of user input characters based on the at least one verification rule includes: For the characters entered by the user in the first sub-region, the verification component displays the verification result of the at least one verification rule in the third sub-region; If each validation rule in the third sub-region passes the validation for the input character, then the input character is determined to have passed the validation.

3. The method according to claim 2, characterized in that, The step of displaying the verification result of at least one verification rule in a third sub-region based on the character entered by the user in the first sub-region includes: The characters entered by the user in the first sub-region are used as the characters to be verified; The verification component is invoked to perform rule verification on the character to be verified based on each verification rule, and the verification results corresponding to each verification rule are displayed in the third sub-area.

4. The method according to claim 1, characterized in that, The method further includes: In response to the user's selection of an edit component in the second sub-area, at least one validation rule in the second sub-area is modified to an editable state; In response to the user's modification of the target validation rule, the modified validation rule is used as the validation rule for the target character.

5. The method according to claim 4, characterized in that, The method further includes: Respond to user modifications to the target validation rules and obtain the configuration information used to validate the rules; The modified target verification rules are verified based on the configuration information. If the verification fails, a control indicating that the verification rule modification failed will be displayed in the fourth sub-area; If the verification passes, a control indicating that the verification rule has been successfully modified will be displayed in the fourth sub-area.

6. The method according to claim 1, characterized in that, The first display area further includes a search component, and the method further includes: In response to the user selecting the search component in the first display area of ​​the webpage, a search input box is displayed in the fifth sub-area; In response to the user's action of entering target search characters in the search input box, the data loading component calls the useRequest hook to initiate a search request. The search request includes the target search characters and is used to filter the target table data based on the target search characters. The filtered results are loaded into the first display area of ​​the webpage via the useRequest hook.

7. The method according to any one of claims 1-6, characterized in that, The step of responding to a user's operation of loading a target table on a webpage, and obtaining the data of the target table through a data loading component, includes: In response to a user's action of loading a target table in a webpage, the storage address of the target table is determined; The data of the target table is obtained from the storage address based on the data loading component.

8. A table loading device, characterized in that, include: The first determining module is used to respond to the user's operation of loading a target table in the webpage, obtain the data of the target table through the data loading component, and display it in the first display area of ​​the webpage; The second determining module is used to respond to the user's editing operation on the first form item in the target table, call the validation component to display an input box in the first sub-area, and display at least one validation rule in the second sub-area; the first sub-area and the second sub-area are different sub-areas of the first display area; When the character input by the user passes the validation based on the at least one validation rule, the target table data, including the edited first form item, is displayed in the first display area of ​​the webpage based on the data loading component.

9. An execution device, characterized in that, include: Memory, used to store program instructions; A processor is configured to acquire program instructions from the memory and execute the method according to any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes computer instructions that, when executed by a computer, implement the method as described in any one of claims 1-7.

Images