A complex table data management system and method based on React and ahooks

Abstract

The present invention discloses a complex table data management system and method based on React and ahooks, including: a table rendering module, a table data source module, a table data processing module, a Modal pop-up window editing module, and an ahooks table status monitoring module; the table rendering module constructs a table structure and renders table data through the table component of antd; the table data source module is used to provide an API interface; the table data processing module is used to process complex operations of the table and update table data; the Modal pop-up window editing module is used to edit the row record values of the table; the ahooks table status monitoring module is used to monitor whether changes occur in the Modal pop-up window editing module and the table data processing module. If changes occur, it calls the table data source module to update and render the table data in the table rendering module. The present invention improves the complexity of table rendering and realizes the data management of complex tables.

Description

Technical Field

[0001] The present invention relates to the technical field of complex data table processing, and in particular to a complex table data management system and method based on React and ahooks. Background Art

[0002] Complex data tables usually need to implement functions such as adding, deleting, modifying, querying, and batch operations in a single table. Some functions also need to trigger the transfer of table data and data linkage between components. For example, after editing a row of data in the table, the table needs to be automatically refreshed, the table state needs to be maintained after the user refreshes the table on a certain page, the current page number and sorting state need to be maintained after the user's operation, and global state data needs to be merged and updated among various sub-components of the table.

[0003] React native tables traverse the data source through the map function to create table rows. The data type is single, and it lacks the ability to process complex data types. The data of React native tables is passed between parent and child components through props. The failure of data transfer at any node will cause errors in the entire table data. Global data sharing is achieved among components of the table through useContext. The data update granularity is relatively coarse. Any change in the data in the table will cause the table to be re-rendered, and on-demand rendering cannot be achieved. In terms of functions, React native tables lack basic functions such as sorting and pagination. If pagination is required, a third-party react-paginate component needs to be introduced, and in addition, algorithms for implementing sorting and pagination need to be written according to business logic. To sum up, the customization degree of React native tables is relatively low, and the difficulty of developing complex tables is relatively large. The existing technologies cannot implement the functions of the above complex data tables. Summary of the Invention

[0004] Aiming at the problems existing in the prior art, the present invention provides a complex table data management system and method based on React and ahooks, which improves the complexity of table rendering and realizes the data management of complex tables.

[0005] To achieve the above technical objectives, the present invention adopts the following technical solutions: A complex table data management system based on React and ahooks, including: a table rendering module, a table data source module, a table data processing module, a Modal pop-up window editing module, and an ahooks table state monitoring module;

[0006] The table rendering module constructs the table structure and renders the table data through the table component of antd;

[0007] The table data source module is used to provide API interfaces;

[0008] The table data processing module is used to process complex operations of the table and update table data;

[0009] The Modal pop-up window editing module is used to edit the row record values of the table;

[0010] The ahooks table status monitoring module is used to monitor whether changes occur in the Modal pop-up window editing module and the table data processing module. If changes occur, it calls the table data source module to update and render the table data in the table rendering module.

[0011] Further, the table rendering module includes: a table column structure sub-module, a table row structure sub-module, and a table pagination structure sub-module. When dynamically rendering and managing a certain list of table data in the table column structure sub-module through the render function according to the business logic, the current row value text, row record record, or row index index in the table row structure sub-module is used as the input parameter of the render function; the table pagination structure sub-module is constructed through the Pagination component and is set below the table row structure sub-module.

[0012] Further, the construction process of the table column structure sub-module is as follows: Define the column attributes {title:”, dataIndex:”, key:”, sorter:”} of each column of the table through the const function, render the table operation column through the render function, wrap the button component into the table operation column, and define the business logic conditions for rendering the table operation column in the button component; where, title represents the column name; dataIndex represents the row record in the table column structure sub-module; key represents the column number, and the value of key is the same as that of dataIndex; sorter represents the sorting attribute of the column.

[0013] Further, the construction process of the table row structure sub-module is as follows: The interface data source format of the table is in the List list format, where each row of data is an Object object, and the attribute format of each Object object is in the key value format. Specify that the attribute value of each dataIndex in the table column structure sub-module corresponds to the key value of the Object object.

[0014] Further, the specific process of the table data source module for providing the API interface is as follows: Define the global status data initTableData of the table data source module, access the API interface through the useRequest function, inject the returned table interface data into the global status data initTableData of the table data source module, and update and render the table data in the table rendering module.

[0015] Further, the table data processing module includes: a sorting management sub-module, a paging management sub-module, and a batch operation sub-module. The sorting management sub-module is used to perform sorting of the table, the paging management sub-module is used to perform paging management of the table, and the batch operation sub-module is used to perform batch operations on the table.

[0016] Further, the construction process of the sorting management sub-module is as follows:

[0017] Define the global status data sortQuery of the sorting management sub-module to store the sorting string;

[0018] Define the sorting method function of the table. The input parameter of the sorting method function is the sorter column attribute of the table column structure sub-module, and the output of the sorting method function is the sorting string, which is stored in the global status data sortQuery of the sorting management sub-module;

[0019] Take the global status data sortQuery of the sorting management sub-module as a parameter and input it into the table data source module to update the rendered table data.

[0020] Further, the construction process of the paging management sub-module is as follows:

[0021] Define the global status data page and pageSize of the paging management sub-module, where page represents the page number and pageSize represents the number of records per page;

[0022] Define the paging method function of the Pagination component in the paging structure sub-module of the table rendering module in the paging management sub-module, and input page and pageSize into the paging method function for update;

[0023] Take the updated page and pageSize as parameters and input them into the table data source module to update the rendered table data.

[0024] Further, the construction process of the batch operation sub-module is as follows:

[0025] Define the global status data selectedRowKeys of the batch operation sub-module to store the ID values of the table rows selected in batch;

[0026] Define the batch operation method function rowSelection of the table. Trigger the rowSelection function through the row ID value, update the ID values of the rows selected in batch to the global status data selectedRowKeys of the batch operation sub-module, and take the updated selectedRowKeys as a parameter and input it into the table data source module to update the rendered table data.

[0027] Furthermore, the construction process of the Modal pop-up window editing module is as follows:

[0028] A. Define the global status data modalVisible of the Modal pop-up window editing module to control the pop-up window status;

[0029] B. Define the global status component form to wrap the attribute values of the object to be edited; define the global status data initEditRecord of the global status component form to store the row record record to be edited;

[0030] C. Set the pop-up window status to open through the business logic conditions for rendering the operation columns of the table;

[0031] D. Pass the table row record record brought in by the business logic conditions, use record.id as a parameter to input the table data source module, and inject the returned edited Object object into the global status data initEditRecord of the global status component form;

[0032] E. After the editing is completed, set the pop-up window status to closed, access the table data source module, and update the rendered table data.

[0033] Furthermore, the present invention also provides a management method for the complex table data management system based on React and ahooks, specifically including the following steps:

[0034] The ahooks table status monitoring module listens to the global status data initEditRecord of the global status component form in the Modal pop-up window editing module through the useEffect hook function. When there is data in initEditRecord, use each attribute value in initEditRecord to fill each editing item of the editing form;

[0035] The ahooks table status monitoring module listens to the global status data modalVisible of the Modal pop-up window editing module through the useEffect hook function. When modalVisible changes, access the API interface in the table data source module through the useRequest function, update the global status data in the table data source module, and update and render the table data of the table rendering module through the table component of antd;

[0036] The ahooks table status monitoring module is used to monitor the global status data page, pageSize, and sortQuery in the table data processing module through the useUpdateEffect hook function. When any one of page, pageSize, and sortQuery changes, the API interface in the table data source module is accessed through the useRequest function to update the global status data in the table data source module, and the table data in the table rendering module is updated and rendered through the table component of antd.

[0037] Compared with the prior art, the present invention has the following beneficial effects: In the construction of the table interface of the complex table data management system and method based on React and ahooks of the present invention, the table rendering module constructs the table UI by introducing the table component of antd, realizing the decoupling of data and UI; in the management of table data, complex functions such as addition, deletion, modification, query, sorting, and paging of the table are realized by defining the global status data of the table initTableData, initEditRecord, Modal, page, pageSize, and sortQuery, realizing the unified management of table data; in data update, the global status data of the table is hooked through the useEffect and useUpdateEffect hook functions of ahooks, and any change in the global status data will trigger corresponding data updates, realizing the dynamic on-demand update of table data; in the data status, through the hook functions of ahooks, after complex paging, sorting, and editing, the operation status of the table can still be remembered, realizing the maintenance of the table status. The present invention renders the table data through the update of the global status data of the table, improving the flexibility and complexity of table data processing. Brief Description of the Drawings

[0038] Figure 1 It is a framework diagram of the complex table data management system based on React and ahooks of the present invention. Detailed Embodiments

[0039] The technical solutions of the present invention will be further explained and illustrated below with reference to the accompanying drawings.

[0040] Such as Figure 1This is the framework diagram of a complex table data management system based on React and ahooks. This complex table data management system includes: a table rendering module, a table data source module, a table data processing module, a Modal pop-up window editing module, and an ahooks table status monitoring module; the table rendering module constructs the table structure and renders the table data through the table component of antd; the table data source module is used to provide API interfaces; the table data processing module is used to process complex operations of the table and update the table data; the Modal pop-up window editing module is used to edit the row record values of the table; the ahooks table status monitoring module is used to monitor whether changes occur in the Modal pop-up window editing module and the table data processing module. If changes occur, it calls the table data source module to update and render the table data in the table rendering module. Through the monitoring of the ahooks table status monitoring module, the present invention can conveniently transfer data flexibly within each component of the table, across hierarchical components, or between external components, realize the update of table rendering, and improve the flexibility and complexity of table data processing.

[0041] The table rendering module constructs the table UI by introducing the table component of antd, realizing the decoupling of data and UI. This table rendering module includes: a table column structure sub-module, a table row structure sub-module, and a table pagination structure sub-module. When dynamically rendering and managing a certain list of table data in the table column structure sub-module according to the business logic through the render function, the current row value text, row record record, or row index index in the table row structure sub-module is used as the entry parameter of the render function; the table pagination structure sub-module is constructed through the Pagination component and is set below the table row structure sub-module.

[0042] The construction process of the table column structure sub-module is as follows: the column attributes of each column of the table are defined through the const function {title:", dataIndex:", key:", sorter:"}, and the table operation column is rendered through the render function. The button component is wrapped into the table operation column, and the business logic conditions for rendering the table operation column are defined in the button component; among them, title represents the column name; dataIndex represents the row record in the table column structure sub-module; key represents the column number, and the value of key is the same as that of dataIndex; sorter represents the sorting attribute of the column.

[0043] The construction process of the table row structure sub-module is as follows: the interface data source format of the table is in the List list format, where each row of data is an Object object, and the attribute format of each Object object is in the key value format. It is specified that the attribute value of each dataIndex in the table column structure sub-module corresponds to the key value of the Object object.

[0044] The specific process for the table data source module to provide an API interface is as follows: Define the global status data initTableData of the table data source module, access the API interface through the useRequest function, inject the returned table interface data into the global status data initTableData of the table data source module, update the table data in the table rendering module, and the data flow from the API interface data to the global status data initTableData of the table data source module is unidirectional. Providing an API interface through the table data source module can, on the one hand, achieve the front-back separation design and development of the table, and only render and update the parts of the table that have changed; on the other hand, it can also conveniently switch the application scenarios of the table, such as implementing functions such as user management, system management, and order management, increasing the complexity of the table functions.

[0045] Operations such as adding, deleting, modifying, querying, paging, and sorting of table data are common complex functions of the table. In terms of implementation methods, they are usually fragmented and there is no unified implementation method. In the present invention, each sub-module for complex table operations is defined in the table processing module, including: a sorting management sub-module, a paging management sub-module, and a batch operation sub-module. The sorting management sub-module is used for sorting the table, the paging management sub-module is used for paging management of the table, and the batch operation sub-module is used for batch operations of the table, thereby unifying the implementation methods of complex table functions from a global perspective and in the order of implementation according to the global status data of each table operation.

[0046] The construction process of the sorting management sub-module is as follows:

[0047] Define the global status data sortQuery of the sorting management sub-module, with the data format being character type, used to store the sorting string;

[0048] Define the sorting method function of the table. The input parameters of the sorting method function are the sorter column attributes of the table column structure sub-module, including two parameters, field and sorter, representing the sorting field and the ascending / descending order of the field respectively. The output of the sorting method function is the sorting string, which is stored in the global status data sortQuery of the sorting management sub-module;

[0049] Take the global status data sortQuery of the sorting management sub-module as a parameter and input it into the table data source module. Access the API interface through the useRequest function, inject the returned table interface data into the global status data initTableData of the table data source module, and update the table data in the table rendering module.

[0050] The construction process of the paging management sub-module is as follows:

[0051] Define the global status data page and pageSize of the paging management sub-module, with the data format being integer. Among them, page represents the page number, and pageSize represents the number of records per page;

[0052] Define the paging method function of the Pagination component in the paging structure sub-module of the table rendering module in the paging management sub-module, and input page and pageSize into the paging method function for update;

[0053] Take the updated page and pageSize as parameters and input them into the table data source module. Access the API interface through the useRequest function, and inject the returned table interface data into the global status data initTableData of the table data source module to update the table data rendered in the table rendering module.

[0054] The construction process of the batch operation sub-module is as follows:

[0055] Define the global status data selectedRowKeys of the batch operation sub-module, with the data format being an array, which is used to store the ID values of the table rows selected in batch;

[0056] Define the batch operation method function rowSelection of the table. Trigger the rowSelection function through the row ID value, update the ID values of the rows selected in batch to the global status data selectedRowKeys of the batch operation sub-module, take the updated selectedRowKeys as parameters and input them into the table data source module. Access the API interface through the useRequest function, and inject the returned table interface data into the global status data initTableData of the table data source module to update the table data rendered in the table rendering module.

[0057] The construction process of the Modal pop-up window editing module is as follows:

[0058] A. Define the global status data modalVisible of the Modal pop-up window editing module, with the data structure being boolean, which is used to control the pop-up window status;

[0059] B. Define the global status component form, which is used to wrap the attribute values of the object to be edited; define the global status data initEditRecord of the global status component form, with the data structure being an Object object, which is used to store the row record record to be edited;

[0060] C. Set the pop-up window status to open through the business logic conditions rendered by the table operation column;

[0061] D. The table row record record is brought in through the business logic condition, record.id is input as a parameter into the table data source module, and the returned edited Object object is injected into the global state data initEditRecord of the global state component form;

[0062] E. After editing is completed, set the pop-up window status to closed, access the table data source module, access the API interface through the useRequest function, inject the returned table interface data into the global status data initTableData of the table data source module, and update the table data in the table rendering module.

[0063] The Modal pop-up editing module is used to edit the row data in the table. The row data in the Modal pop-up editing module is closely connected with the table data. Through the global state data initEditRecord, the row data in the pop-up editing module is linked to refresh the table data after editing is completed.

[0064] The present invention also provides a management method for a complex table data management system based on React and ahooks, which specifically includes the following steps:

[0065] The ahooks form status monitoring module monitors the global status data initEditRecord of the global status component form in the Modal pop-up editing module through the useEffect hook function. When there is data in initEditRecord, the attribute values ​​in initEditRecord are used to fill in the editing items of the editing form.

[0066] The ahooks table status monitoring module monitors the global status data modalVisible of the Modal pop-up editing module through the useEffect hook function. When modalVisible changes, the form data is reset, the API interface in the table data source module is accessed through the useRequest function, the global status data initTableData in the table data source module is updated, and the table data of the table rendering module is updated and rendered through the antd table component;

[0067] The ahooks table status monitoring module is used to monitor the global status data page, pageSize, and sortQuery in the table data processing module through the useUpdateEffect hook function. When any of page, pageSize, and sortQuery changes, the API interface in the table data source module is accessed through the useRequest function to update the global status data initTableData in the table data source module, and the table data in the table rendering module is updated and rendered through the table component of antd.

[0068] Through the useEffect and useUpdateEffect hook functions of ahooks in the present invention, the global status data of the table is hooked, and any change in the global status data will trigger corresponding data updates, realizing dynamic on-demand updates of table data; moreover, through the hook functions of ahooks, after complex paging, sorting, and editing, the operation status of the table can still be remembered, realizing the retention of the table status.

[0069] Embodiment 1

[0070] Using the existing user ID, user name userName, true name userTrueName, gender, and creation time createTime, a table is created using the complex table data management system and method based on React and ahooks of the present invention, and table data management is performed, which can support operations such as table paging, sorting, multi-selection, and editing.

[0071] Step 1: Define the table rendering module

[0072] Step 1.1: Define the table column structure sub-module

[0073] In this embodiment, the table column structure sub-module is defined as 6 columns using the table component of antd, namely: user ID, user name, true name, gender, and creation time. The column attributes of the table are defined in React as: {title: "ID", dataIndex: "id"}, {title: "User name", dataIndex: "userName"}, {title: "True name", dataIndex: "userTrueName"}, {title: "Gender", dataIndex: "gender"}, {title: "Creation time", dataIndex: "createTime"}, {title: 'Operation', dataIndex: render: ()}, where the operation column wraps the button component into the operation column through the render function. <button onclick＝{()＝>{edit Handler(record)}}>Edit< / button>. Pass the row record record as a parameter to the button component, write the editHandler method function, and open the pop-up editing interface. The editHandler method contains two operations:

[0074] 1. Run initEditRecord.run(record.id) with record.id as the parameter, update the global state data initEditRecord defined in step 4.1, and get the edited row object;

[0075] 2. Update the global state data modalVisible defined in step 4.1 through the useState state update method, use the setModalVisible method to update the value of the global state data modalVisible to true, and open the pop-up window.

[0076] Step 1.2: Define the table row structure submodule

[0077] The table data is in List format, the row data is in Object format, and each attribute format of the Object object is in key value format, such as: {userName:"zhangsan",userTrueName:"张三",gender:"男",age:"28",createTime:"2024-03-2315:10:43"}. The table data source format is matched to the row record set by matching the key attribute value of the Object object with the dataIndex attribute value defined in the column structure in step 1.1.

[0078] In the scenario where a table displays complex data formats, it is often necessary to process the original data of the table accordingly. For example, the date field in the table of this embodiment can be rendered into the date format required by the business logic through the render function of the table. The render function can use the three attributes of the row record, text, record, and index as input parameters. In the date rendering, the current row value text is used as the input parameter to bring into the function: render: (text: any) = > {return moment (text). format ('YYYY-MM-DD HH: mm')}. The render function can be used to easily convert various data types.

[0079] Step 1.3: Define the table paging structure submodule

[0080] Introduce the Pagination component of antd and place the pagination component layout below the table row structure submodule.

[0081] Step 2: Define the table data source module

[0082] Use the useRequest function to access the API data interface, and configure the access method as GET. At this time, there are no parameters in the url (url: ' / api / user / getUsers') of the interface address accessed by the useRequest function, and the interface returns all the unprocessed data. Subsequently, after defining the paging and sorting method functions in Step 3, the parameters of complex table operations will be gradually brought in. Define the global state data initTableData, inject the returned table interface data into initTableData, and use this global state data to define the table data source in the table component of ant d, dataSource = {initTableData}.

[0083] Step 3: Define the table data processing module

[0084] Step 3.1: Build the paging management sub-module

[0085] Define the global state data page and pageSize, with the data format being integer, representing the page number and the number of records per page respectively. The default initial page number for table initialization is 1, and the default number of records per page is 10.

[0086]

[0087] Define the paging method function of the Pagination component in the paging structure sub-module of the table rendering module. The input parameters are page and pageSize, and this function is triggered after operating on the paging component:

[0088]

[0089] Bring the updated page and pageSize into the url of the interface address accessed by the useRequest function in Step 2, url: ' / api / user / getUsers?page=${page}&pageSize=${pageSize}'. At this time, the table already has the basic paging function, but does not have the function of remembering the table state after paging. The function of maintaining the table state after paging will be added in the ahooks table state monitoring module in Step 5 later. After the table has the paging function, the global state data initTableData only loads the data of the current page number, realizing the on-demand loading of table data, avoiding the re-rendering of table data, and greatly improving the loading efficiency of the table.

[0090] Step 3.2: Build the sorting management sub-module

[0091] Define the global state data `sortQuery`, `const [sortQuery, setSortQuery] = useState("")`. The data format is string type and is used to store the sorting string. Define the sorting method function `tableChangeHandler` of the table, which is triggered after the table sorting operation. The input parameter is the sorter column property of the table. The sorter column property of the table contains two parameters, `field` and `sorter`, representing the sorting field and the ascending / descending order of the field respectively. The `tableChangeHandler` sorting method is as follows:

[0092] 1. When the sorting field is triggered, obtain the sorted field value `sorter.field` through the `sorter` property of the table, and inject the sorted field value `sorter.field` into the global state data `sortQuery`;

[0093] 2. When the ascending / descending order of the sorting field is triggered, obtain the ascending / descending order value `sorter.order` of the sorting field through the `sorter` property of the table, and splice and inject the ascending / descending order value `sorter.order` of the sorting field into the global state data `sortQuery`;

[0094] 3. Through the `useState` state update method, use the `setSortQuery(`&sort=${sorter.field}&order=${orderBy}`)` method to update the complete global state data `sortQuery`.

[0095] Bring the updated `sortQuery` into the `url` of the interface address accessed by the `useRequest` function in step 2, `url: ' / api / user / getUsers?page=${page}&pageSize=${pageSize}${sortQuery}'`. At this time, the table already has the basic sorting function, but does not have the function of remembering the table state after sorting. The function of maintaining the table state after sorting will be added in the `ahooks` table state monitoring module in the subsequent step 5. After the table has the pagination function, the global state data `initTableData` only loads the data of the current page number, and the sorting is also only performed on the data of the current page number, avoiding sorting all the data of the table and solving the problem of data disorder when paginating and sorting at the same time.

[0096] Step 3.3: Build the batch operation sub-module

[0097] Define the global state data `selectedRowKeys` with an array data format to store the ID values of the batch-selected table rows. `const [selectedRowKeys, setSelectedRowKeys] = useState([])`. Define the batch operation method function `rowSelection` for the table. Trigger the `rowSelection` function through the ID field of the table, and update the ID field values of the batch-selected table rows to the `selectedRowKeys` array in the global state data through the `setSelectedRowKeys` state update method. In the method of using the `useRequest` function to access the interface in step 2, add: `onSuccess: () => {setSelectedRowKeys([])}`, that is, each time the table component reloads the API interface data, clear the multi-selection list to prevent data pollution.

[0098] Step 4: Build the Modal pop-up window editing module

[0099] Step 4.1: Define the global state data `modalVisible`, `const [modalVisible, setModalVisible] = useState(false)`, with a boolean data structure to control the pop-up window state, and the pop-up window is in the default closed state; define the global state component `form`, `const [form] = Form.useForm()`, to wrap the property values of the object to be edited, and define the global state data `initEditRecord`, with an Object data structure to store the row record to be edited;

[0100] Step 4.2: Set the pop-up window state to open through the event trigger function created in the table operation column in step 1;

[0101] Step 4.3: Pass the `record.id` of the row record as a parameter into the `editHandler` method function of the Button in step 1. Use the `useRequest` function to access the API data interface, `url: ' / api / user / getUserById?id=${record.id}'`, to re-obtain the object to be edited with complete properties, and inject this object into the global state data `initEditRecord` through the `editHandler` method function of the Button in step 1. During the access process of the API interface, if the object to be edited fails to be obtained, call the `setModalVisible` method to update the value of the global state data `modalVisible` to false and close the pop-up window;

[0102] Step 4.4: According to the initEditRecord data injected into the form through the useEffect hook function in Step 5, the user can edit each data item. After the editing is completed, the save user API interface is called through the useRequest function, with the url: ' / api / user / updateUser'. After the editing is completed, the setModalVisible method is called to update the value of the global status data modalVisible to false and close the pop-up window. Repeat Step 2 to update the global status data initTableData and update the rendered table data.

[0103] Step 5: Define the ahooks table status monitoring module

[0104] This module is the core module of this embodiment. Through the table status monitoring module, any changes in the table data, operations, internal components, and external components can be monitored globally, thereby triggering corresponding method functions for the on-demand update and merged update of the data within the table component and between the table and external components. This module can adapt to any complex table. The table status monitoring module is built through ahooks, and the global status data is monitored through the useEffect hook function and the useUpdateEffect hook function.

[0105] The useUpdateEffect function monitors the three global status data of the table global status data page, pageSize, and sortQuery. Whenever any status data changes, repeat Step 2 to update the global status data initTableData and update the rendered table data.

[0106]

[0107] The useEffect function monitors the global status data initEditRecord. When there is data in initEditRecord, each property value in initEditRecord is used to fill each edit item of the edit form. The update of the initEditRecord global status data in Step 4.4 is injected through the useEffect function. The method for the useEffect function to monitor the status change of the global status data initEditRecord is as follows:

[0108]

[0109] The useEffect function monitors the pop-up window global status data modalVisible. When modalVisible changes, it means that the pop-up window editing is completed. The form is cleared to prevent data pollution during subsequent editing operations. Step 2 is repeated to update the global status data initTableData, update the table data after rendering, and restore the table status according to the page number and sorting status during editing.

[0110]

[0111] Example 2: Editing complex table data

[0112] The table data is in List format, the row data is in Object format, and each attribute format of the Object object is in key value format, such as: {userName:"zhangsan",userTrueName:"张三",gender:"男",age:"28",createTime:"2024-03-2315:10:43"}. Now you need to edit a piece of data through the edit button in the operation column.

[0113] Based on step 1 of Example 1, add an edit button to the table operation column. Wrap the Button component into the edit column through the render function. <button onclick＝{()＝>{editHandler(record)}}>Edit< / button> . Pass the row data record as a parameter to the Button component, write the editHandler method function, and open the pop-up editing interface. The editHandler method contains two operations:

[0114] 1. Run initEditRecord.run(record.id) with record.id as the parameter, update the global state data initEditRecord defined in step 4.1, and get the edited row object.

[0115] 2. Update the global state data modalVisible defined in step 4.1 through the useState state update method, use the setModalVisible method to update the value of the global state data modalVisible to true, and open the pop-up window.

[0116] The above are only preferred embodiments of the present invention, and the protection scope of the present invention is not limited to the above embodiments. All technical solutions under the concept of the present invention belong to the protection scope of the present invention. It should be pointed out that for ordinary technicians in this technical field, some improvements and modifications without departing from the principle of the present invention should be regarded as the protection scope of the present invention.

Claims

1. A complex table data management system based on React and ahooks, characterized by: include: Table rendering module, table data source module, table data processing module, Modal pop-up editing module and ahooks table status monitoring module; The table rendering module constructs the table structure and table data rendering through the table component of antd; The table data source module is used to provide an API interface; The table data processing module is used to process complex operations of the table and update the table data; The Modal pop-up editing module is used to edit the row record value of the table; The ahooks table status monitoring module is used to monitor whether the Modal pop-up window editing module and the table data processing module have changed. If there is a change, the table data source module is called to update the table data in the rendering table rendering module; The management method of the complex table data management system based on React and ahooks specifically includes the following steps: The ahooks form status monitoring module monitors the global status data initEditRecord of the global status component form in the Modal pop-up editing module through the useEffect hook function. When there is data in initEditRecord, each attribute value in initEditRecord is used to fill each edit item of the edit form; The ahooks table status monitoring module monitors the global status data modalVisible of the Modal pop-up editing module through the useEffect hook function. When modalVisible changes, the API interface in the table data source module is accessed through the useRequest function to update the global status data in the table data source module, and the table data of the table rendering module is updated through the antd table component. The ahooks table status monitoring module is used to monitor the global status data page, pageSize, sortQuery in the table data processing module through the useUpdateEffect hook function. When any of page, pageSize, sortQuery changes, the API interface in the table data source module is accessed through the useRequest function to update the global status data in the table data source module, and the table data of the table rendering module is updated and rendered through the antd table component; The table rendering module includes: a table column structure submodule, a table row structure submodule and a table paging structure submodule. When dynamically rendering and managing a column of table data in the table column structure submodule through a render function according to business logic, the current row value text, row record record or row index index in the table row structure submodule is used as an entry parameter of the render function; the table paging structure submodule is constructed through a Pagination component and is set below the table row structure submodule; The construction process of the table column structure submodule is as follows: define the column attributes of each table column {title: ", dataIndex: ", key: ", sorter: "} through the const function, render the table operation column through the render function, wrap the button component into the table operation column, and define the business logic conditions for rendering the table operation column in the button component; wherein, title represents the column name; dataIndex represents the row record in the table column structure submodule; key represents the number of columns, and the value of key is consistent with dataIndex; sorter represents the sorting attribute of the column; The construction process of the table row structure submodule is as follows: the table interface data source format is List list format, where each row of data is an Object object, and the attribute format of each Object object is keyvalue format, and the attribute value of each column dataIndex in the table column structure submodule is specified to correspond to the key value of the Object object; The construction process of the Modal pop-up window editing module is as follows: A. Define the global state data modalVisible of the Modal pop-up window editing module to control the pop-up window state; B. Define the global state component form, which is used to wrap the attribute value of the edited object; define the global state data initEditRecord of the global state component form, which is used to store the edited row record record; C. Set the pop-up window status to open through the business logic conditions rendered by the table operation column; D. The table row record record is brought in through the business logic condition, record.id is input as a parameter into the table data source module, and the returned edited Object object is injected into the global state data initEditRecord of the global state component form; E. After editing is completed, set the pop-up window status to closed, access the table data source module, and update the rendered table data; The specific process of the table data source module for providing the API interface is: define the global state data initTableData of the table data source module, access the API interface through the useRequest function, inject the returned table interface data into the global state data initTableData of the table data source module, and update the table data in the rendering table rendering module; The table data processing module includes: a paging management submodule, which is used to perform paging management of the table. The construction process of the paging management submodule is as follows: Define the global status data page and pageSize of the paging management submodule, where page represents the page number and pageSize represents the number of records per page; In the paging management submodule, define the paging method function of the Pagination component of the paging structure submodule in the table rendering module, and input page and pageSize into the paging method function for update; Input the updated page and pageSize as parameters into the table data source module to update the rendered table data.

2. According to claim 1, a complex table data management system based on React and ahooks is characterized in that: The table data processing module further includes: a sorting management submodule and a batch operation submodule. The sorting management submodule is used to sort the table, and the batch operation submodule is used to perform batch operations on the table.

3. According to claim 2, a complex table data management system based on React and ahooks is characterized in that: The construction process of the sorting management submodule is as follows: Define the global state data sortQuery of the sort management submodule, which is used to store the sort string; Define a sorting method function for the table, the input parameter of the sorting method function is the sorter column attribute of the table column structure submodule, and the output of the sorting method function is a sorting string, which is stored in the global state data sortQuery of the sorting management submodule; The global status data sortQuery of the sort management submodule is input as a parameter into the table data source module to update the rendering table data.

4. A complex table data management system based on React and ahooks according to claim 3, characterized in that: The construction process of the batch operation submodule is as follows: Define the global state data selectedRowKeys of the batch operation submodule, which is used to store the ID values ​​of the table rows selected in batches; Define the batch operation method function rowSelection of the table, trigger the rowSelection function through the row ID value, update the batch selected row ID value to the global state data selectedRowKeys of the batch operation submodule, input the updated selectedRowKeys as a parameter into the table data source module, and update the rendered table data.

Images