一种基于React框架处理表格交互的方法及装置制造方法及图纸

本发明专利技术公开了一种基于React框架处理表格交互的方法，所述方法包括：获取用户触发的针对表格数据操作的第一指令；基于所述第一指令调用自定义hooks函数，所述自定义hooks函数根据所述第一指令执行对应的操作步骤，所述自定义hooks函数通过调用useTable方法初始化hooks函数获得，其中，初始化所述自定义hooks函数需要传递的参数包括表格数据需要的服务端接口方法、表格的查询参数、控制表格数据的关键字段、表格是否可以多选以及表格翻页信息，所述查询参数为自定义的Object数据格式类型，且为service方法的参数，所述表格翻页信息包括pageSize和current。包括pageSize和current。包括pageSize和current。

【技术实现步骤摘要】
一种基于React框架处理表格交互的方法及装置


[0001]本申请涉及表格组件领域，尤其涉及一种基于React框架处理表格交互的方法及装置。

技术介绍

[0002]在使用React框架编写antd组件库中的Table表格组件的时候，没有一种好的方式，可以将Table的ui和逻辑代码分离的方式，可以统一处理表格数据查询，更新，翻页，多选，删除等用户前端交互行为，并且让Table组件可以高效的复用，而且没办法做到自动解析浏览器web url的search 参数，检索用户所需要的table内容。
[0003]当前端向后端快速快速发起查询接口的时候，实际上我们只需要最后的一次查询数据，如果不对查询做防抖处理，会产生无效的服务接口调用，会导致服务端接口压力大，接口的异步调用会产生一个竟态问题，即不能保证最后查询的服务端接口是最后返回的。

技术实现思路

[0004]本申请实施例要解决的技术问题，在于提供一种基于React框架处理表格交互的方法及装置，以解决现有使用React框架编写antd组件库中的Table表格组件的时候，可以统一本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于React框架处理表格交互的方法，其特征是，所述方法包括：获取用户触发的针对表格数据操作的第一指令；基于所述第一指令调用自定义hooks函数，所述自定义hooks函数根据所述第一指令执行对应的操作步骤，所述自定义hooks函数通过调用useTable方法初始化hooks函数获得，其中，初始化所述自定义hooks函数需要传递的参数包括表格数据需要的服务端接口方法、表格的查询参数、控制表格数据的关键字段、表格是否可以多选以及表格翻页信息，所述查询参数为自定义的Object 数据格式类型，且为 service 方法的参数，所述表格翻页信息包括pageSize和current。2.根据权利要求1所述的一种基于React框架处理表格交互的方法，其特征是，所述自定义hooks函数根据所述第一指令执行对应的操作步骤包括：当所述第一指令为查询指令时，所述自定义hooks函数调用lodaData方法更新表格查询数据，其中，所述表格查询数据为tableProps 中 dataSource 的值；当所述第一指令为分页指令时，所述自定义hooks函数调用paginatio中的onChange方法，获取表格的翻页后查询到的表格数据；当所述第一指令为删除指令时，所述自定义hooks函数调用lodaData方法更新删除数据后的表格数据；当所述第一指令为刷新指令时，所述自定义hooks函数解析URL中包含表格查询对象的变化值并查询表格接口数据。3.根据权利要求2所述的一种基于React框架处理表格交互的方法，其特征是，所述自定义hooks函数获取表格查询对象的变化值后，触发调用useTable中传入的服务端接口方法，得到所述表格查询数据。4.根据权利要求3所述的一种基于React框架处理表格交互的方法，其特征是，所述自定义hooks函数使用防抖限制调用useTable中传入的服务端接口方法频率。5.根据权利要求2
‑
4任一项所述的一种基于React框架处理表格交互的方法，其特征是，所述表格查询数据更新后，antd Table将所述表格查询数据渲染出最新的视图。6.根据权利要求1所述的一种基于React框架处理表格交互的方法，其特征是，调用useTa...

【专利技术属性】
技术研发人员：范端端，
申请(专利权)人：浙江百应科技有限公司，
类型：发明
国别省市：