React-based complex table component low-code implementation system and method
Patent Information
- Application Number
- CN202411572251.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-11-06
- Publication Date
- 2025-02-25
Smart Images
Figure CN119512546A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of table component application technology, and in particular, to a low-code implementation system and method for complex table components based on React. Background Art
[0002] The table component is one of the most commonly used and important components in the application system, and the application scenarios of the table component are very wide, such as personnel systems, financial systems, asset systems and educational systems. Almost all application systems cannot do without a powerful table component. A fully functional table component should have basic functions such as paging, sorting, on-demand loading, and state retention after operation. It should also have data operation functions such as adding, deleting, modifying and checking table data.
[0003] Traditional table components generally use frameworks such as BootStrap and jQuery to build their infrastructure. They manually write methods for obtaining data sources, paging methods, and sorting methods. The code implementation is relatively fragmented and there is no unified standard. At the same time, traditional table components usually use pop-up Modal to add and edit data in the implementation of table data operations, and the amount of code written is large. At the same time, traditional tables have obvious defects in maintaining the status of table data. For example, if a user edits the third page of a table, the table automatically refreshes and returns to the homepage after saving the data, resulting in a poor user experience. In order to provide a better user experience, a large amount of code needs to be written, which in turn causes confusion in asynchronous data management. Summary of the invention
[0004] In response to the problems existing in the prior art, the present invention provides a low-code implementation system and method for complex table components based on React, which quickly generates complex table components in a low-code manner.
[0005] To achieve the above technical objectives, the present invention adopts the following technical solutions: A low-code implementation system for complex table components based on React, comprising: a table data source management module, an API interface module, a table parameter management module and a table operation module;
[0006] The table data source management module is provided with a table API original data source;
[0007] The API interface module is provided with global status data corresponding to the API interface.
[0008] The table parameter management module is provided with a global parameter queue params for driving the operation of global status data;
[0009] The table operation module is provided with a paging submodule, a sorting submodule and a query submodule. The paging submodule is used to implement the table paging operation, the sorting submodule is used to implement the table sorting operation, and the query submodule is used to implement the table data query operation. The global parameter queue params in the table parameter management module is updated according to the table paging operation, sorting operation or query operation, and the global status data in the corresponding API interface is run using the updated global parameter queue params, the API interface corresponding to the global status data is accessed, the table API original data source is obtained, and the low-code rendering of the table data is implemented based on Antd's ProTable table component;
[0010] The table operation module is also provided with an editing submodule, a deleting submodule and an adding submodule. The editing submodule is used to implement table data editing operations, the deleting submodule is used to implement table data deleting operations, and the adding submodule is used to implement table data adding operations; according to the table data editing operation, the table data deleting operation or the table data adding operation, the global status data is run, the API interface corresponding to the running global status data is accessed, the table API original data source is obtained, and the low-code rendering of the table data is implemented based on Antd's ProTable table component.
[0011] Furthermore, the API interface module is provided with a getUsers() API interface, a createUser() API interface, a deleteUser() API interface and an updateUser() API interface. The getUsers() API interface is provided with global state data initTableData and global state data tableData. The getUsers() API interface is used to obtain the table API original data source from the table data source management module, save the returned table API original data source through the global state data initTableData, and save the table data source converted from the table API original data source through the global state data tableData; the createUser() API interface is provided with global state data actionAdd, and the createUser() API interface is accessed according to the global state data actionAdd to implement the addition operation of the table data; the deleteUser() API interface is provided with global state data actionDel, and the deleteUser() API interface is accessed according to the global state data actionDel to implement the deletion operation of the table data; the updateUser() API interface is provided with global state data actionEdit, and the updateUser() API interface is accessed according to the global state data actionEdit to implement the editing operation of the table data.
[0012] Furthermore, the table data source management module includes: a data source request submodule, a data conversion submodule and a data rendering submodule. The data source request submodule is used to access the getUsers() API interface, and save the table API original data source in the data source request submodule to the global state data initTableData; the data conversion submodule is used to convert the table API original data in the global state data initTableData into a table data source in AntdProTable format, and save it to the global state data tableData; the data rendering submodule performs table data rendering on the table data source in Antd ProTable format based on Antd's ProTable table component.
[0013] Furthermore, the specific process of the data rendering sub-module rendering table data for the table data source in the Antd ProTable format based on Antd's ProTable table component is: configuring the data source attribute of the Antd's ProTable table component to the data attribute in the global state data tableData, the data attribute of each column in the Antd's ProTable table component includes {title, dataIndex, sorter, search}, matching the dataIndex of each column with the key value of the object in the data attribute in the global state data tableData, dynamically constructing the table column structure, and traversing the list data corresponding to the data attribute in the global state data tableData, rendering the table data row by row, wherein title represents the table column name in the data attribute, dataIndex represents the data column field index name, sorter represents whether it is used as a sorting parameter, and search represents whether it is used as a query parameter.
[0014] Furthermore, the table parameter management module includes: a static parameter submodule, a dynamic parameter submodule and a global parameter queue params. The static parameter submodule is provided with global state variables page, pageSize, sort and order, and calls the getUsers() API interface according to the changes of the global state variables page, pageSize, sort and order to manage the table paging and sorting in the table operation module; the dynamic parameter submodule is provided with a global state variable dataIndex, and calls the getUsers() API interface through the changes of the global state variable dataIndex to manage the dynamic query data column of the table; the global parameter queue params sets the setParams method to manage the global state variables in the static parameter submodule and the global state variables in the dynamic parameter submodule; wherein, page represents the page number of the table, pageSize represents the number of records per page of the table, sort represents the sorting column of the table, and order represents the ascending and descending order of the table.
[0015] Furthermore, the specific process of the paging submodule for implementing table paging is: configuring the input parameters of the table paging attributes: page, pageSize and total; when the table is paging, calling the global parameter queue params to set the setParams method through the input parameters of the table paging attributes, updating the page and pageSize after the paging operation to the global parameter queue params, adding the updated global parameter queue params to the global state data initTableData, accessing the getUsers() API interface, re-acquiring the table API original data source, and converting the re-acquired table API original data source into the table data source, and re-rendering the table data after the paging operation through the data rendering submodule; wherein, total represents the total number of records in the table.
[0016] Furthermore, the specific process of the sorting submodule for implementing table sorting is: when the table is sorted, the global parameter queue params is called to set the setParams method, the global state variables sort and order after the sorting operation are updated to the global parameter queue params, the updated global parameter queue params is added to the global state data initTableData, the getUsers() API interface is accessed, the table API original data source is re-acquired, and the table data source is converted from the re-acquired table API original data source, and the table data source after the sorting operation is re-rendered through the data rendering submodule.
[0017] Furthermore, the specific process of the query submodule for implementing table data query is: when querying the table, call the global parameter queue params to set the setParams method, append the dataIndex and parameter value with input values in the query table input items to the global parameter queue params, obtain the updated global parameter queue params, add the updated global parameter queue params to the global state data initTableData, access the getUsers() API interface, re-acquire the table API original data source, and convert the re-acquired table API original data source into a table data source, and re-render the table data after the query operation through the data rendering submodule.
[0018] Furthermore, the specific process of the editing submodule for implementing table data editing is as follows: configuring the method for saving the data after table editing in the native method onSave function of the table editing attribute, bringing the native data object of the onSave function as a parameter into the onSave function, the value in the data object is the value of the current row after editing, and after clicking Save, running the global state data actionEdit in the onSave function, accessing the updateUsers() API interface, re-acquiring the table API original data source, and converting the re-acquired table API original data source into a table data source, and re-rendering the table data after the table data editing operation through the data rendering submodule;
[0019] The specific process of the deletion submodule for realizing table data deletion is as follows: configuring the table data deletion method in the native method onDelete function of the table editing attribute, bringing the native rowKey object of the onDelete function as a parameter into the onDelete function, the value in the rowKey object is the id number of the deleted row, after clicking delete, running the global state data actionDel in the onDelete function, accessing the deleteUsers() API interface, re-acquiring the table API original data source, and converting the re-acquired table API original data source into a table data source, and re-rendering the table data after the table data deletion operation through the data rendering submodule;
[0020] The specific process of the addition submodule for realizing the addition of table data is as follows: determining the triggering method of the new button, and determining the method of creating a new blank row of the table in the triggering method, bringing the native rowKey and data object of the onSave function as parameters into the onSave function, the value of the rowKey is the auto-incrementing id field value, and the value of the data object is the value of the new blank row. After clicking Save, the global state data actionAdd is run in the onSave function, the creatUsers() API interface is accessed, the original data source of the table API is re-acquired, and the table data source is converted from the re-acquired original data source of the table API, and the table data after the table data addition operation is re-rendered through the data rendering submodule.
[0021] Furthermore, the present invention also provides a low-code implementation method of a complex table component of the low-code implementation system of a complex table component based on React, which specifically includes the following process:
[0022] Set the global status data in the API interface module and the global parameter queue params in the table parameter management module;
[0023] If the table operation performed in the table operation module is a table paging operation, sorting operation or query operation, update the global parameter queue params, use the updated global parameter queue params to run the corresponding global status data, access the API interface corresponding to the global status data, obtain the table API original data source of the table data source management module, and render the table data under the corresponding table operation based on Antd's ProTable table component;
[0024] If the table operation performed in the table operation module is a table data editing operation, a table data deletion operation, or a table data addition operation, run the global state data, access the API interface corresponding to the global state data, obtain the table API original data source of the table data source management module, and render the table data under the corresponding table operation based on Antd's ProTable table component.
[0025] Compared with the prior art, the present invention has the following beneficial effects:
[0026] (1) The low-code implementation system and method of complex table components based on React of the present invention is based on Antd's ProTable table component. By writing a small amount of code for ProTable, the data columns, operation columns, paging, sorting, and query rendering of the table are realized. Therefore, the present invention converts the table API original data source into a table data source in the AntdProTable format by setting a data conversion submodule in the table data management module, so that the table can adapt to any external data source, thereby increasing the reusability of the table;
[0027] (2) The present invention provides a low-code implementation system and method for complex table components based on React, in which a table parameter management module is provided. In the table parameter management module, a global parameter queue params is used to manage table parameters such as paging, sorting, and query, thereby realizing unified management of table parameters. At the same time, by setting an editing submodule, a deleting submodule, and an adding submodule in the table operation module, it is possible to directly edit, add, and delete data in a table row. Therefore, through the table parameter management module and the table operation module, it is possible to perform all operations on table data in the table without writing other components, thereby greatly reducing the amount of code. BRIEF DESCRIPTION OF THE DRAWINGS
[0028] Figure 1 This is a framework diagram of the low-code implementation system of the complex table component based on React of the present invention. DETAILED DESCRIPTION
[0029] The technical solution of the present invention is further explained below in conjunction with the accompanying drawings.
[0030] like Figure 1This is a framework diagram of the low-code implementation system of a complex table component based on React of the present invention. The low-code implementation system of the complex table component includes: a table data source management module, an API interface module, a table parameter management module and a table operation module; the table data source management module is provided with a table API original data source; the API interface module is provided with global status data corresponding to the API interface, and the table parameter management module is provided with a global parameter queue params for driving the operation of the global status data; the table operation module is provided with a paging submodule, a sorting submodule and a query submodule, the paging submodule is used to implement table paging operations, the sorting submodule is used to implement table sorting operations, and the query submodule is used to implement table data query operations, and the global parameter queue param in the table parameter management module is updated according to the table paging operation, sorting operation or query operation s, use the updated global parameter queue params to run the global status data in the corresponding API interface, access the API interface corresponding to the global status data, obtain the table API original data source, and implement low-code rendering of the table based on Antd's ProTable table component; the table operation module also has an editing submodule, a deleting submodule and an adding submodule. The editing submodule is used to implement table data editing operations, the deleting submodule is used to implement table data deletion operations, and the adding submodule is used to implement table data addition operations; run the global status data according to the table data editing operation, table data deletion operation or table data addition operation, access the API interface corresponding to the global status data, obtain the table API original data source, and implement low-code rendering of the table data based on Antd's ProTable table component. Through the table parameter management module and the table operation module, all operations on the table data are performed in the table without writing other components, which greatly reduces the amount of code. In addition, the present invention is based on the ProTable table component of Antd. By writing a small amount of code for ProTabel, the table API original data source is obtained through the getUsers() API interface in the API interface management module, and all user management functions are implemented in the table. A complex table with complete functions can be quickly generated through low-code within 300 lines, which reduces the amount of code by about 70% compared to the traditional table implementation system that requires more than 1,000 lines of code.
[0031] The API interface module of the present invention is provided with a getUsers() API interface, a createUser() API interface, a deleteUser() API interface and an updateUser() API interface. The getUsers() API interface is provided with global state data initTableData and global state data tableData. The getUsers() API interface is used to obtain a table API original data source from a table data source management module, save the returned table API original data source through the global state data initTableData, and save the table data source converted from the table API original data source through the global state data tableData; the createUser() API interface is provided with global state data actionAdd, and the createUser() API interface is accessed according to the global state data actionAdd to implement the addition operation of the table data; the deleteUser() API interface is provided with global state data actionDel, and the deleteUser() API interface is accessed according to the global state data actionDel to implement the deletion operation of the table data; the updateUser() API interface is provided with global state data actionEdit, and the updateUser() API interface is accessed according to the global state data actionEdit to implement the editing operation of the table data.
[0032] The table data source management module in the present invention includes: a data source request submodule, a data conversion submodule and a data rendering submodule. The data source request submodule accesses the getUsers() API interface through the useRequest function, and saves the table API original data source in the data source request submodule to the global state data initTableData. For example, the table API original data source format returned by the getUsers() API interface is {success:true,message:"success",data:{userList{...}},meta:{page:1,pageSize:10,total:1280}}. However, since the data source format returned by the API interface does not match the standard Ant ProTable's data source format, so it is necessary to convert the table API original data source returned by the API interface. Therefore, by setting the data conversion submodule, the table API original data source in the global state data initTableData is converted into a table data source in the AntdProTable format and saved in the global state data tableData. By converting various types of table API original data sources into the standard AntdProTable data source format, all external API interface data can be used as the data source of the table. Specifically, five same-level attributes of data, page, pageSize, total, and success need to be defined in the global state data tableData to provide a data source with a unified format for the table, and the List list data of different levels and different attribute names in the global state data initTableData are injected into the data attribute of tableData, and the page, pageSize, total, and success attribute values of different levels in initTableData are respectively injected into the page, pageSize, total, and success attributes of tableData; the data rendering submodule is based on Antd's ProTable table component for Antd The table data source in ProTable format is used to render the table component, so that advanced tables with paging, sorting, and state retention can be quickly built in a low-code way.
[0033] The specific process of the data rendering submodule in the present invention for rendering table data in the Antd ProTable format table data source based on Antd's ProTable table component is as follows: the data source dataSource attribute of the Antd ProTable table component is configured as the data attribute in the global state data tableData, the List list data in the data attribute value is used as the table data source, and the data attributes of each column in the Antd ProTable table component are defined in sequence through the const function, including {title, dataIndex, sorter, search}. Since the data attribute value in the global state data tableData is in the List list format, each data in the list is a table row record in the Object object format. Therefore, the dataIndex of each column is matched with the key value of the Object object in the data attribute in the global state data tableData, the table column structure is dynamically constructed, and the list data corresponding to the data attribute in the global state data tableData is traversed, and the table component is rendered row by row, wherein title represents the table column name in the data attribute, dataIndex represents the data column field index name, sorter represents whether it is used as a sorting parameter, and search represents whether it is used as a query parameter.
[0034] The table parameter management module in the present invention includes: a static parameter submodule, a dynamic parameter submodule and a global parameter queue params. The static parameter submodule is provided with global state variables page, pageSize, sort and order, and is brought into the useRequest function according to the changes of the global state variables page, pageSize, sort and order, and the getUsers() API interface is called to manage the table paging and sorting in the table operation module; the dynamic parameter submodule is provided with a global state variable dataIndex, and the getUsers() API interface is called through the change of the global state variable dataIndex to manage the dynamic query data column of the table. Specifically, the value of the column attribute search required to be queried in the table is set to true, and the data column required to be queried is used as the query condition, and the query parameter name is dataIndex; the global parameter queue params sets the setParams method const[params,setParams]=useState({…}) to manage the global state variables in the static parameter submodule and the global state variables in the dynamic parameter submodule; wherein page represents the page number of the table, pageSize represents the number of records per page of the table, sort represents the sorting column of the table, and order represents the ascending and descending order of the table.
[0035] The specific process of the paging submodule in the present invention for realizing table paging is as follows: configuring the input parameters of the table paging attributes: page, pageSize and total, and setting the default values of the paging attributes to tableData.page, tableData.pageSize tableData.total respectively; when the table is paging, calling the global parameter queue params to set the setParams method through the native trigger method onChange function of the table paging attribute, updating the page and pageSize after the paging operation to the global parameter queue params, running initTableData.run(params), adding the updated global parameter queue params to the global state data initTableData, accessing the getUsers() API interface, reacquiring the table API original data source, and converting the reacquired table API original data source into the table data source, and re-rendering the table after the paging operation through the data rendering submodule; wherein, total represents the total number of records in the table.
[0036] The specific process of the sorting submodule in the present invention for realizing table sorting is as follows: define the sorting trigger method handleChange in the table native state change trigger method onChange function, bring the table native sorter sorting object as a parameter into the handleChange method, the sortre object contains two attributes, sort.field and sort.order, and when the table is sorted, call the global parameter queue params to set the setParams method, update the global state variables sort and order after the sorting operation to the global parameter queue params, run initTableData.run(params), add the updated global parameter queue params to the global state data initTableData, access the getUsers() API interface, reacquire the table API original data source, and convert the reacquired table API original data source into the table data source, and re-render the table after the sorting operation through the data rendering submodule. At this time, the table has the advanced function of maintaining the state after paging or sorting, or paging and sorting at the same time.
[0037] Traditional table query requires writing a query form component, defining query elements one by one in the query form, and then writing a form query method, which is relatively cumbersome to implement. However, the query submodule in the present invention is used to implement the table data query function. It only needs to define the search attribute value of each column of the table in the global state data initTableData as true, and a query form with a reset button and a query button can be automatically generated. The input items in the form are generated according to dataIndex. The table data query method of the present invention reduces the amount of code by about 60% compared with the traditional method. The specific process is as follows: define the implementation method of the form query button in the table native submission method onSubmit function beforeSearchSubmit t. When the query button is triggered, the global parameter queue params is called to set the setParams method, and the dataIndex and parameter value with input values in the query table input items are appended to the global parameter queue params to obtain the updated global parameter queue params. The updated global parameter queue params is added to the global status data initTableData, and initTableData.run(params) is run to access the getUsers() API interface, re-acquire the table API original data source, and convert the re-acquired table API original data source into a table data source, and re-render the table after the query operation through the data rendering submodule.
[0038] The traditional editing function requires writing a pop-up Modal component, injecting the row record value to be edited into the pop-up Modal, and then writing a data saving method, which requires at least 200 lines of code; the present invention implements the table data editing operation by setting an editing sub-module. It only needs to configure the number of column field index names dataIndex to "automatically generate" a pop-up window, eliminating the process of writing a pop-up Modal and a Form form, and eliminating the process of writing a Form form assignment. Compared with the traditional editing method, it can reduce the amount of code by about 70%. The specific process of the editing submodule in the present invention for realizing table data editing is as follows: configuring the method for saving the data after table editing in the native method onSave function of the table editing attribute, bringing the native data object of the onSave function as a parameter into the onSave function, the value in the data object is the value of the current row after editing, and after clicking Save, running the global state data actionEdit in the onSave function: actionEdit.run(JSON.stringify(data)), accessing the updateUsers() API interface, re-acquiring the table API original data source, and converting the re-acquired table API original data source into a table data source, and re-rendering the table data after the table data editing operation through the data rendering submodule.
[0039] The specific process of the deletion submodule in the present invention for realizing the deletion of table data is as follows: configuring the deletion method of table data in the native method onDelete function of the table editing attribute, bringing the native rowKey object of the onDelete function as a parameter into the onDelete function, the value in the rowKey object is the id number of the deleted row, after clicking delete, running the global state data actionDel in the onDelete function, accessing the deleteUsers() API interface, re-acquiring the table API original data source, and converting the re-acquired table API original data source into a table data source, and re-rendering the table data after the table data deletion operation through the data rendering submodule;
[0040] The traditional method of adding functions requires writing a pop-up Modal component, defining each attribute of the row object that needs to be added one by one in the pop-up Modal, and then writing the method of adding data. The code needs to be written manually, and the process is extremely cumbersome. In addition, every other page in the table component that needs to use the pop-up Modal editing function needs to be implemented through manual adjustment, which is labor-intensive. The present invention implements the table data addition operation by setting an addition submodule. It only needs to set the actionRef attribute of the table. After clicking the new button, a blank row will be automatically added to the top of the table. Fill in the input items in the blank row to complete the table's new function. Compared with the traditional method of adding functions, it can reduce the amount of code by about 70%. The specific process of adding a submodule in the present invention to realize the addition of table data is: define the actionRef attribute of the table as useRef <actiontype>type, determine that the onClick trigger method of the new button is handleAdd, and determine the method for creating a new empty row in the table in the trigger method: actionRef.current? .addEditRecord. By reusing the save button function, the onSave method of the native save button of the table editable attribute can realize both the editing function and the adding function. Specifically, in the new button trigger method handleAdd, set the id attribute value to the auto-increment id, and bring the native rowKey and data object of the onSave function into the onSave function as parameters. The rowKey value is the auto-increment id field value, and the data object value is the value of the new empty row. After clicking Save, when the onSave method determines that the rowKey is the auto-increment id field, run the global state data actionAdd in the onSave function: actionAdd.run(JSON.stringify(data)), access the creatUsers() API interface, re-acquire the table API original data source, and convert the re-acquired table API original data source into the table data source. Re-render the table data after the table data addition operation through the data rendering submodule.
[0041] The present invention also provides a low-code implementation method of a complex table component of a low-code implementation system based on React, which specifically includes the following processes:
[0042] Step 1: Set the global status data of the API interface in the API interface module to process the interaction between the table front-end data and the back-end interface, including the following sub-steps:
[0043] Step 1.1: Taking the user table as an example, define the getUsers() API interface to obtain the user list. The input parameters are empty or a combination of page, pagesize, sorter, order, and column field index name dataIndex; define the createUser() API interface to create a user. The input parameter is the JSON data of the newly created user; define the deleteUser() API interface to delete a user. The input parameter is the id of the user to be deleted; define the updateUser() API interface to modify a user. The input parameter is the JSON data of the user to be modified;
[0044] Step 1.2: Define the global state data initTableData for accessing the getUsers() API interface, const initTable Data = useRequest<{date:any}>(()=>{return{url:` / api / user / getUsers`,}}); Define the global state data tableData for storing the converted data source, const[tableData,setTableData]=useState({data:”,pageSize:”,total:”,success:”}); Define the global state data actionAdd for accessing the createUser() API interface, const actionAdd=useRequest<{value:any}>((values:any)=>{return{url:' / api / user / addUser',type:JSON}}); Define the global state data actionDel for accessing the deleteUser() API interface, const actionDel=useRequest<{data:any}>((values:any)=>{return{url:` / api / user / deleteUser`,}}); ser? id = ${values}`}}); define global state data actionEdit for accessing updateUser() API interface, const actionEdit = useRequest<{value:any}>((values:any)=>{return{url:' / api / user / updateUser',type:JSON}}).
[0045] Step 2: Define the table data source management module, including the following sub-steps:
[0046] Step 2.1: Define the data source request submodule
[0047] Run the global state data initTableData.run() when the table is initialized. The input parameter is empty and the original data source returned by the API interface is injected into the global state data InitTableData.
[0048] Step 2.2: Define the data conversion submodule
[0049] Convert the data source in the global state data InitTableData into the standard data source format of Antd ProTable through the setTableData state setting method defined in step 1.2, and inject the converted data source into the global state data tableDat a, setTableData({data:InitTableData.data.userList,page:InitTableData.data.meta.page,page Size:InitTableData.data.meta.pageSize,total:InitTableData.data.meta.total,success:InitTableD ata.success,});
[0050] Step 2.3: Define the data rendering submodule
[0051] Import the ProTable table component of Antd, import ProTable from'@ant-design / pro-table', configure the dataSource property of the table component to the data property value in the global state variable tableData, dataSource = {table leData.data}, and use tableData.data as the table data source;
[0052] Define the column properties of each column of the ProTable table component in sequence through the const function, const columns:ProColumns <tablelistitem>[]=[{title:'Username',dataIndex:'userName',key:'userName',sorter:true,sea rch:true},…{…}], this step defines the data column structure of the table;
[0053] The table renders the table data row by row by matching the key value of each row in the tableData.data list data with the dataIndex of the table data column.
[0054] Step 3: Define the table parameter management module, including the following sub-steps:
[0055] Step 3.1: Define global static parameter submodule
[0056] Define global state variables page, pageSize, sort, and order. Set the setParams method in the global queue of step 3.3 to put the global static parameters after initialization into the global parameter queue params. const[params,set Params]=useState({...params,page:1,pageSize:10,sort:'id',order:'asc'});
[0057] Step 3.2: Define the global dynamic parameter submodule
[0058] By setting the column property {search:true} of the table to be queried in step 2.3, the data column to be queried is used as the query condition, and the query parameter name is dataIndex;
[0059] Step 3.3: Define the setParams method for setting the global parameter queue params, const [params, setParams] = useState ({…}), which is used to manage the global parameter queue params.
[0060] Step 4: Define the table operation module, including the following sub-steps:
[0061] Step 4.1: Define the pagination submodule
[0062] Define the input parameters of the table pagination attribute pagination as: page, pageSize, total, and set the default values respectively, {page: tableData.page, pageSize: tableData.pageSize, total: tableData.total}. During the paging operation, call the global parameter queue set setParams method in the onChange function to update the global state data page and pageSize after the paging operation to the global parameter queue params, the method is: setParams({...params,page:page,pageSize:pageSize}); After the paging operation, the onChange function will automatically run initTableData.run(params), repeat step 2.1, and bring the parameter queue params as a parameter into the useRequest function to access the API interface to re-acquire the table data source;
[0063] Step 4.2: Define the sorting submodule
[0064] Define the sorting trigger method handleChange in the table native state change trigger method onChange function, const handleChange=(sorter:any)=>{…}. When the table is sorted, call the global parameter queue setting setParams method through the handleChange method, and update the global state data sort and order after the sorting operation to the global parameter queue params. The method is: setParams({...params,sort:sorter.field,order:sorter.order}); After the sorting operation, the onChange function will automatically run initTableData.run(params), repeat step 2.1, and bring the parameter queue params as a parameter to the useRequest function to access the API interface to re-acquire the table data source;
[0065] Step 4.3: Define the query submodule
[0066] In step 2.3, define the search attribute value of each column of the table as true, automatically generate a query form with a reset button and a query button, and define the implementation method of the form query button beforeSearch Submit in the table's native submission method onSubmit function, function beforeSearchSubmit(params){…}, the form dynamic query parameter params can be one column or multiple columns. When performing a query operation on the table, call the global parameter queue setParams method through the handleChange method, and append the dynamic query parameters after the query operation to the global parameter queue params. The method is: setParams({...params,params}); After the query operation, initTableData.run(params) will automatically run in the onSubmit function, repeat step 2.1, and bring the parameter queue params as a parameter into the useRequest function to access the API interface to re-acquire the table data source;
[0067] Step 4.4: Define the editor submodule
[0068] Define the table editing attribute editable = {{type:'multiple'}} to automatically add an action column, which displays an edit button. After clicking the edit button, the action column of the current row automatically switches to the three buttons of Save, Delete, and Cancel. At the same time, the data column of the current row automatically switches to an editable state. Define the method for saving the edited data in the native method onSave function of the table editable attribute, bring the native data object of the onSave function as a parameter to the onSave function, and run the global state data actionEdit defined in step 1.2 in the onSave function after clicking the Save button. The method is: actionEdit.run(JSON.stringify(data)). After editing, the table will automatically refresh the data.
[0069] Step 4.5: Define and delete submodules
[0070] Define the data deletion method in the native onDelete function of the table editable attribute, bring the native rowKey object of the onDelete function as a parameter to the onDelete function, the value in the rowKey object is the id number of the deleted row, and after clicking the delete button, run the global state data actionDel defined in step 1.2 in the onDelete function. The method is: actionDel.run(rowKey). After the data is deleted, the table will automatically refresh the data;
[0071] Step 4.6: Define and add submodules.
[0072] Define the table's actionRef property as const actionRef = useRef <actiontype>() type, define the table actionRef attribute as actionRef = {actionRef}, define the trigger method handleAdd of the new button onClick, define the method for creating a new empty row in the table in the handleAdd method, the method is: actionRef.current? .addEditRecord; reuse the save button function, so that the onSave method of the native save button of the table editable attribute can realize both the editing function and the adding function. In the new button trigger method handleAdd, set the id attribute value to the auto-increment id. Bring the native rowKey and data object of the onSave method as parameters to the onSave method, the rowKey value is the auto-increment id field value, the data object value is the value of the new row, click the save button, when the onSave method determines that the rowKey is the auto-increment id field, run the global state data actionAdd defined in step 1.2, the method is: actionAdd.run(JSON.stringify(data)), after completing the data addition, the table will automatically refresh.
[0073] This invention is based on the universal and replicable low-code complex table implementation method of AntdProTable. The complex table generated by this low-code method reduces the amount of code by about 70% compared with the traditional table implementation method, which can be used as a reference for React front-end developers.
[0074] 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.< / actiontype> < / tablelistitem> < / actiontype>
Claims
1. A low-code implementation system for complex table components based on React, characterized in that: include: Table data source management module, API interface module, table parameter management module and table operation module; The table data source management module is provided with a table API original data source; The API interface module is provided with global status data corresponding to the API interface. The table parameter management module is provided with a global parameter queue params for driving the operation of global status data; The table operation module is provided with a paging submodule, a sorting submodule and a query submodule. The paging submodule is used to implement the table paging operation, the sorting submodule is used to implement the table sorting operation, and the query submodule is used to implement the table data query operation. The global parameter queue params in the table parameter management module is updated according to the table paging operation, sorting operation or query operation, and the updated global parameter queue params is used to run the global status data in the corresponding API interface, access the API interface corresponding to the global status data, obtain the table API original data source, and implement the table low-code rendering based on Antd's ProTable table component; The table operation module is also provided with an editing submodule, a deleting submodule and an adding submodule. The editing submodule is used to implement table data editing operations, the deleting submodule is used to implement table data deleting operations, and the adding submodule is used to implement table data adding operations; according to the table data editing operation, the table data deleting operation or the table data adding operation, the global status data is run, the API interface corresponding to the running global status data is accessed, the table API original data source is obtained, and the low-code rendering of the table data is implemented based on Antd's ProTable table component.
2. According to a low-code implementation system for complex table components based on React according to claim 1, it is characterized in that: The API interface module is provided with a getUsers() API interface, a createUser() API interface, a deleteUser() API interface and an updateUser() API interface. The getUsers() API interface is provided with global state data initTableData and global state data tableData. The getUsers() API interface is used to obtain the table API original data source from the table data source management module, save the returned table API original data source through the global state data initTableData, and save the table data source converted from the table API original data source through the global state data tableData; the createUser() API interface is provided with global state data actionAdd, and the createUser() API interface is accessed according to the global state data actionAdd to implement the addition operation of the table data; the deleteUser() API interface is provided with global state data actionDel, and the deleteUser() API interface is accessed according to the global state data actionDel to implement the deletion operation of the table data; the updateUser() API interface is provided with global state data actionEdit, and the updateUser() API interface is accessed according to the global state data actionEdit to implement the editing operation of the table data.
3. According to a low-code implementation system for complex table components based on React according to claim 1, it is characterized in that: The table data source management module includes: a data source request submodule, a data conversion submodule and a data rendering submodule. The data source request submodule is used to access the getUsers() API interface and save the table API original data source in the data source request submodule to the global state data initTableData; the data conversion submodule is used to convert the table API original data source in the global state data initTableData into a table data source in Antd ProTable format and save it to the global state data tableData; the data rendering submodule performs table component rendering on the table data source in AntdProTable format based on Antd's ProTable table component.
4. According to a low-code implementation system for complex table components based on React according to claim 3, it is characterized in that: The specific process of the data rendering submodule rendering table data for the table data source in the Antd ProTable format based on Antd's ProTable table component is as follows: the data source attribute of the Antd ProTable table component is configured as the data attribute in the global state data tableData, and the data attribute of each column in the Antd ProTable table component includes {title, dataIndex, sorter, search}, and the dataIndex of each column is matched with the key value of the object in the data attribute in the global state data tableData, and the table column structure is dynamically constructed, and the list data corresponding to the data attribute in the global state data tableData is traversed, and the table component is rendered row by row, wherein title represents the table column name in the data attribute, dataIndex represents the data column field index name, sorter represents whether it is used as a sorting parameter, and search represents whether it is used as a query parameter.
5. According to a low-code implementation system for complex table components based on React according to claim 4, it is characterized in that: The table parameter management module includes: a static parameter submodule, a dynamic parameter submodule and a global parameter queue params. The static parameter submodule is provided with global state variables page, pageSize, sort and order, and calls the getUsers() API interface according to the changes of the global state variables page, pageSize, sort and order to manage the table paging and sorting in the table operation module; the dynamic parameter submodule is provided with a global state variable dataIndex, and calls the getUsers() API interface through the changes of the global state variable dataIndex to manage the dynamic query data column of the table; the global parameter queue params sets the setParams method to manage the global state variables in the static parameter submodule and the global state variables in the dynamic parameter submodule; wherein page represents the page number of the table, pageSize represents the number of records per page of the table, sort represents the sort column of the table, and order represents the ascending and descending order of the table.
6. According to a low-code implementation system for complex table components based on React according to claim 5, it is characterized in that: The specific process of the paging submodule for realizing table paging is as follows: configuring the input parameters of the table paging attributes: page, pageSize and total; when the table is paging, calling the global parameter queue params to set the setParams method through the input parameters of the table paging attributes, updating the page and pageSize after the paging operation to the global parameter queue params, adding the updated global parameter queue params to the global state data initTableData, accessing the getUsers() API interface, reacquiring the table API original data source, and converting the reacquired table API original data source into the table data source, and re-rendering the table after the paging operation through the data rendering submodule; wherein, total represents the total number of records in the table.
7. A low-code implementation system for complex table components based on React according to claim 5 or 6, characterized in that: The specific process of the sorting submodule for implementing table sorting is: when the table is sorted, the global parameter queue params is called to set the setParams method, the global state variables sort and order after the sorting operation are updated to the global parameter queue params, the updated global parameter queue params is added to the global state data initTableData, the getUsers() API interface is accessed, the table API original data source is re-acquired, and the table data source is converted from the re-acquired table API original data source, and the table after the sorting operation is re-rendered through the data rendering submodule.
8. According to a low-code implementation system for complex table components based on React according to claim 5, it is characterized in that: The specific process of the query submodule for implementing table data query is: when querying the table, call the global parameter queue params to set the setParams method, append the dataIndex and parameter value with input values in the query table input items to the global parameter queue params, obtain the updated global parameter queue params, add the updated global parameter queue params to the global state data initTableData, access the getUsers() API interface, re-acquire the table API original data source, and convert the re-acquired table API original data source into a table data source, and re-render the table after the query operation through the data rendering submodule.
9. According to a low-code implementation system for complex table components based on React according to claim 5, it is characterized in that: The specific process of the editing submodule for realizing table data editing is as follows: configuring the method for saving the data after table editing in the native method onSave function of the table editing attribute, bringing the native data object of the onSave function as a parameter into the onSave function, the value in the data object is the value of the current row after editing, and after clicking Save, running the global state data actionEdit in the onSave function, accessing the updateUsers() API interface, re-acquiring the table API original data source, and converting the re-acquired table API original data source into a table data source, and re-rendering the table data after the table data editing operation through the data rendering submodule; The specific process of the deletion submodule for realizing table data deletion is as follows: configuring the table data deletion method in the native method onDelete function of the table editing attribute, bringing the native rowKey object of the onDelete function as a parameter into the onDelete function, the value in the rowKey object is the id number of the deleted row, after clicking delete, running the global state data actionDel in the onDelete function, accessing the deleteUsers() API interface, re-acquiring the table API original data source, and converting the re-acquired table API original data source into a table data source, and re-rendering the table data after the table data deletion operation through the data rendering submodule; The specific process of the addition submodule for realizing the addition of table data is as follows: determining the triggering method of the new button, and determining the method of creating a new blank row of the table in the triggering method, bringing the native rowKey and data object of the onSave function as parameters into the onSave function, the value of the rowKey is the auto-incrementing id field value, and the value of the data object is the value of the new blank row. After clicking Save, the global state data actionAdd is run in the onSave function, the creatUsers() API interface is accessed, the original data source of the table API is re-acquired, and the table data source is converted from the re-acquired original data source of the table API, and the table data after the table data addition operation is re-rendered through the data rendering submodule.
10. A low-code implementation method for complex table components of the low-code implementation system for complex table components based on React as described in any one of claims 1-9, characterized in that: The specific process includes the following: Set the global status data in the API interface module and the global parameter queue params in the table parameter management module; If the table operation performed in the table operation module is a table paging operation, sorting operation or query operation, update the global parameter queue params, use the updated global parameter queue params to run the corresponding global status data, access the API interface corresponding to the global status data, obtain the table API original data source of the table data source management module, and render the table under the corresponding table operation based on Antd's ProTable table component; If the table operation performed in the table operation module is a table data editing operation, a table data deletion operation, or a table data addition operation, run the global state data, access the API interface corresponding to the global state data, obtain the table API original data source of the table data source management module, and render the table data under the corresponding table operation based on Antd's ProTable table component.