一种基于React和json的复杂表格组件远程动态生成系统及方法

1.一种基于react和json的复杂表格组件远程动态生成系统，其特征在于，包括：表格数据源模块、表格数据处理模块、表格动态生成模块和表格状态监听模块；

2.根据权利要求1所述的一种基于react和json的复杂表格组件远程动态生成系统，其特征在于，所述表格数据源模块的运行过程具体为：

3.根据权利要求2所述的一种基于react和json的复杂表格组件远程动态生成系统，其特征在于，所述表格数据处理模块将全局状态数据inituserlist解析为三层树形结构，所述三层树形结构的第一层包括：success和data属性，所述三层树形结构的第二层为data属性中包含的layout、datasourcelist和meta属性，所述三层树形结构的第三层为layout属性中包含的tablecolumn属性。

4.根据权利要求3所述的一种基于react和json的复杂表格组件远程动态生成系统，其特征在于，所述表格动态生成模块包括：表格表头子模块、表格数据列子模块、表格操作列子模块和表格分页子模块，若解析的全局状态数据inituserlist的三层树形结构为data.layout.tablecolumn，则对react表格的表格表头子模块或表格操作列子模块进行动态渲染；若解析的全局状态数据inituserlist的三层树形结构还包含data.datasourcelist属性，则对react表格的表格数据列子模块进行动态渲染；若解析的全局状态数据inituserlist的三层树形结构为data.meta属性，则通过表格分页子模块进行react表格分页。

5.根据权利要求4所述的一种基于react和json的复杂表格组件远程动态生成系统，其特征在于，所述表格表头子模型进行动态渲染的具体过程为：在react表格中设置columnbuilder方法函数，将含有data.layout.tablecolumn的全局状态数据inituserlist输入columnbuilder方法函数，根据tablecolumn属性中title字段值动态构建react表格表头的列名。

6.根据权利要求5所述的一种基于react和json的复杂表格组件远程动态生成系统，其特征在于，所述表格数据列子模块进行动态渲染的具体过程为：在columnbuilder方法函数中创建recordbuilder子方法函数，在recordbuilder子方法函数中对data.layout.tablecolumn的全局状态数据inituserlist进行遍历，将tablecolumn属性中type字段值为text的列指定为表格数据列，并根据data.datasourcelist属性的全局状态数据inituserlist对react表格数据列进行渲染。

7.根据权利要求6所述的一种基于react和json的复杂表格组件远程动态生成系统，其特征在于，所述表格操作列子模块进行动态渲染的具体过程为：在columnbuilder方法函数中创建actionbuilder子方法函数，在actionbuilder子方法函数中对data.layout.tablecolumn的全局状态数据inituserlist进行遍历，将tablecolumn属性中type字段值为actions的列指定为操作列，将操作列的操作按钮通过return方法渲染到react表格中，使用actionhandler方法触发操作按钮。

8.根据权利要求7所述的一种基于react和json的复杂表格组件远程动态生成系统，其特征在于，通过表格分页子模块进行表格分页的具体过程为：在react表格中引入表格分页组件pagination，将data.meta属性的全局状态数据inituserlist作为react表格分页组件pagination的分页参数。

9.一种基于react和json的复杂表格组件远程动态生成方法，其特征在于，采用权利要求8所述的基于react和json的复杂表格组件远程动态生成系统，具体过程如下：通过表格状态监听模块的useeffect函数监听全局状态数据inituserlist中的success属性，当success属性为true时，react表格数据加载成功；当success属性为false时，表示api接口访问失败，useeffect函数自动运行inituserlist.run()，重新访问api接口并刷新react表格数据。

10.根据权利要求9所述的一种基于react和json的复杂表格组件远程动态生成方法，其特征在于，通过表格状态监听模块的useupdateeffect函数监听全局状态数据inituserlist中的data.meta属性，当meta属性中page、per_page任何数据发生变化后，将page和per_page作为参数带入userequest函数重新访问api接口并刷新react表格数据。