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

本发明涉及react表格组件生成，具体地，涉及一种基于react和json的复杂表格组件远程动态生成系统及方法。背景技术：：：1、react表格的构建过程通常分为四个步骤：1、构建表格表头，定义表格表头中列的具体名称和数量；2、定义表格数据源，逐一将表格列中的数据路径和表格数据源匹配，通过表格数据源对表格数据进行渲染；3、定义操作列中按钮的名称和数量；4、编写操作列中每个按钮的业务实现方法。通过该方法生成的react表格，表格的扩展性较差，表格承载的功能单一，无法实现业务的复用。在前后分离开发模式中，如需增加或减少列的数量，需要改动前端react表格的代码，且如需改变表格按钮的操作功能，需在前端react表格代码中逐个修改按钮的实现方法。在前后端代码封闭的场景下，如不允许更改前端react表格代码，需通过后端api中的数据修改现有表格的布局和功能，传统的react表格构建技术已无法实现。在多终端部署场景中，如已在前端部署了大量的react表格，如因功能迭代需要改变前端react表格的功能，需要大量修改终端中已部署的表格代码，费时费力或无法实现。因此迫切需要一种通过后端api接口获取表格数据源，通过接口中的json数据动态生成前端react表格结构、表格数据、表格操作的实现方法。技术实现思路1、针对现有技术中存在的问题，本发明提供了一种基于react和json的复杂表格组件远程动态生成系统及方法。2、为实现上述技术目的，本发明采用如下技术方案：一种基于react和json的复杂表格组件远程动态生成系统，包括：表格数据源模块、表格数据处理模块、表格动态生成模块和表格状态监听模块；3、所述表格数据源模块设置全局状态数据inituserlist，通过访问api接口获取表格数据源，将返回的数据以json格式注入到全局状态数据inituserlist中；4、所述表格数据处理模块用于解析全局状态数据inituserlist；5、所述表格动态生成模块根据解析的全局状态数据inituserlist进行react表格动态生成；6、所述表格状态监听模块用于监听解析的全局状态数据inituserlist，并通过userequest函数重新访问api接口获取react表格数据或刷新react表格数据。7、进一步地，所述表格数据源模块的运行过程具体为：8、i、将api接口中json格式的数据转换成typescript格式的数据，将typescript格式的数据保存为react页面接口文件，在页面接口文件中申明所述api接口的名称，并在所述api接口中设置表格数据源类型的描述；9、ii、通过userequest函数访问所述api接口获取表格数据源，根据所述api接口中设置表格数据源类型的描述确定返回数据的类型，将返回的数据以json格式注入到全局状态数据inituserlist中。10、进一步地，所述表格数据处理模块将全局状态数据inituserlist解析为三层树形结构，所述三层树形结构的第一层包括：success和data属性，所述三层树形结构的第二层为data属性中包含的layout、datasourcelist和meta属性，所述三层树形结构的第三层为layout属性中包含的tablecolumn属性。11、进一步地，所述表格动态生成模块包括：表格表头子模块、表格数据列子模块、表格操作列子模块和表格分页子模块，若解析的全局状态数据inituserlist的三层树形结构为data.layout.tablecolumn，则对react表格的表格表头子模块或表格操作列子模块进行动态渲染；若解析的全局状态数据inituserlist的三层树形结构还包含data.datasourcelist属性，则对react表格的表格数据列子模块进行动态渲染；若解析的全局状态数据inituserlist的三层树形结构为data.meta属性，则通过表格分页子模块进行react表格分页。12、进一步地，所述表格表头子模型进行动态渲染的具体过程为：在react表格中设置columnbuilder方法函数，将含有data.layout.tablecolumn的全局状态数据inituserlist输入columnbuilder方法函数，根据tablecolumn属性中title字段值动态构建react表格表头的列名。13、进一步地，所述表格数据列子模块进行动态渲染的具体过程为：在columnbuilder方法函数中创建recordbuilder子方法函数，在recordbuilder子方法函数中对data.layout.tablecolumn的全局状态数据inituserlist进行遍历，将tablecolumn属性中type字段值为text的列指定为表格数据列，并根据data.datasourcelist属性的全局状态数据inituserlist对react表格数据列进行渲染。14、进一步地，所述表格操作列子模块进行动态渲染的具体过程为：在columnbuilder方法函数中创建actionbuilder子方法函数，在actionbuilder子方法函数中对data.layout.tablecolumn的全局状态数据inituserlist进行遍历，将tablecolumn属性中type字段值为actions的列指定为操作列，将操作列的操作按钮通过return方法渲染到react表格中，使用actionhandler方法触发操作按钮。15、进一步地，通过表格分页子模块进行表格分页的具体过程为：在react表格中引入表格分页组件pagination，将data.meta属性的全局状态数据inituserlist作为react表格分页组件pagination的分页参数。16、进一步地，本发明还提供了一种基于react和json的复杂表格组件远程动态生成方法，采用所述的基于react和json的复杂表格组件远程动态生成系统，具体过程如下：通过表格状态监听模块的useeffect函数监听全局状态数据inituserlist中的success属性，当success属性为true时，react表格数据加载成功；当success属性为false时，表示api接口访问失败，useeffect函数自动运行inituserlist.run()，重新访问api接口并刷新react表格数据。17、进一步地，通过表格状态监听模块的useupdateeffect函数监听全局状态数据inituserlist中的data.meta属性，当meta属性中page、per_page任何数据发生变化后，将page和per_page作为参数带入userequest函数重新访问api接口并刷新react表格数据。18、与现有技术相比，本发明具有如下有益效果：本发明基于react和json的复杂表格组件远程动态生成系统及方法通过在前端react环境中定义表格结构，通过后端api接口中的jso n格式的数据动态生成react表格的表格表头、数据列、操作列和react表格分页，实现了前端react表格和后端api接口数据的完全分离。通过后端api接口中的数据可任意修改前端react表格的结构、数据和功能，实现了react表格在不同应用场景中的复用性和扩展性。当前第1页12当前第1页12