页面效果图:
数据操作分析:
在查询表组件的 TableData.js 中操作如下内容:
给每一行绑定一个checkbox,且在点击这个 checkbox 时,触发 action 中的一个方法(formatPostCollectionList),这个方法是用来更新选中的实体数组。formatPostCollectionList为action中的方法,需要export
定义每一行的实体为一个数组,用变量 postCollections 表示
如果选中当前行,则更新实体数组中的数据;如果取消当前行,则删除实体中的数据;
参数为 row ;
点击删除按钮后,使用 componentDitUpdate() 生命周期方法,在组件更新后调用。
如果删除成功,则执行 action 中的方法 clearPostCollection()。这个方法是用来清空当前行实体中的数据;
如果删除成功,最后执行 查询表的刷新重新加载数据的方法
更新实体数据与清空实体数据的方法,在 action 中执行。
代码分析:
表查询操作
1、调查询接口,Api中的方法
searchPostCollectionByActivityId(activityId, callback) { const queryParam = `/tob/post/search?activeId=${activityId}`; //接口,使用``可以在URL中显示查询参数 Config.get(queryParam, callback); }
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前题目:react.jsCMS删除功能的实现方法-创新互联
分享网址:http://tyjierui.cn/article/ppees.html