div获取第一个子节点jquery_【antd】Tree组件子节点不完全勾选获取父节点的值

07a69fa7048ddbd38338d7852cb99adb.png

注意⚠️:这篇文章适用于后台返回的树结构比较多的情况下,如果数据比较少的情况下,可以参考我的上一篇文章,操作起来比较简单

我们在实际操作tree组件和后台交互的时候一般都是需要将父节点传过去,如图:点击原子零件和零件加工的时候需要把产品服务的id给后台传过去

313e82be6846ed789d8a9b3f6b6f35ab.png

在实现之前,需要给大家画出来antd中标出来的相关属性(敲黑板!!)

a3e7cca0ecd296174cd1a416701fcd22.png

onCheck勾选方法,其中第二个参数是个事件对象,什么意思捏?打印出来就说是如下:

fae284f46ccc17720c36bceb34120ff9.png

e里面有很多方法和属性,其中包含了一个叫做halfCheckedKeys的数组,这个数组就是不完全勾选中tree的子节点的情况下的父节点,所以我们就这样在勾选的时候就获取到了父节点,然后通过拼接的形式传给后台就可以了~

onCheck = (checkedKeys,e) => {console.log('checkedKeys', checkedKeys, "e",e,);//注意:halfCheckedKeys 是没有全部勾选状态下的父节点let concatTreeData =  checkedKeys.concat(e.halfCheckedKeys)this.setState({ checkedKeys: concatTreeData})}

--------------------------技术分割线(高阶)---------------------------------------------

但是,(又敲黑板!!!)我们给后台传过去了父节点,如果有反显的情况下(如:修改,查看功能),一旦有父节点,子节点又将会全部勾选!!这种情况下又该怎么办呢?

思路如下:
1.循环遍历出最深层子节点,存放在一个数组中
2.将后台返回的含有父节点的数组和第一步骤遍历的数组做比较
3.如果有相同值,将相同值取出来,push到一个新数组中
4.利用这个新的重组的数组给Tree组件selected赋值

代码如下:

 let test = []   //test存放所有子节点的数组
//第一步骤:子节点放在一个数组中requestList = (data)=> {data && data.map(item=>{if(item.nodes && item.nodes.length>0){requestList(item.nodes)}else{test.push(item.menuId)}return null})return test}//第2,3步骤的方法
uniqueTree =(uniqueArr,Arr)=> {let uniqueChild = []for(var i in Arr){for(var k in uniqueArr){if(uniqueArr[k] === Arr[i]){uniqueChild.push(uniqueArr[k])}}}return uniqueChild
}
//调用第2,3步骤的方法getRoleInfo = () => {get_user_info({ id: Id }).then(res => {let data = res.data.responseData;let uniqueChild = this.uniqueTree(data.menuIds,test)this.setState({childNodes: uniqueChild})});};<Treecheckable = {checkable}onCheck={this.onCheck}checkedKeys={this.state.childNodes}
>{this.renderList(treeData,treekey)}</Tree>

这就OK了~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/335128.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

修改value_Python | 快速修改或命名N个文件夹名称,你会吗?

#欢迎交流&#xff1a;shuilinggan163.com#工作中&#xff0c;经常会遇到需要修改或新建很多文件的文件命&#xff0c;是一件重复且头疼的事情&#xff0c;下面一组Python代码&#xff0c;轻松教你快速实现&#xff01;程序一&#xff1a;根据文件(SSSSSS)新建并命名空文件夹im…

簇的局部变量中布尔类型_java基础2(变量、常量、数据类型)

一、注释&#xff08;1&#xff09;什么是注释&#xff1f;解释说明的文字&#xff08;注释的内容不会被编译&#xff09;&#xff08;2&#xff09;注释的作用①对代码的解释说明 ②便于后期维护&#xff08;3&#xff09;注释的分类:①单行注释 //单行注释作用域:只在当前行有…

数位进制转换详解

文章目录进制进制转换二进制和十进制互相转换十进制 → 二进制十进制正整数 → 二进制十进制负整数 → 二进制十进制负小数 → 二进制十进制小数 → 二进制二进制 → 十进制二进制负整数 → 十进制二进制的正整数 → 十进制二进制小数 → 十进制二进制的负小数 → 十进制八进制…

旋转散点图_聚类分析的结果如何用散点图展示出来?

SPSS系统聚类输出的树状图广受用户喜爱&#xff0c;二阶聚类也可以输出一系列美观的可视化图形用来观察聚类效果&#xff0c;但我们发现Kmeans均值聚类没有提供可视化程度高的图形&#xff0c;那怎么办&#xff0c;我们自己来制作。数据小兵推荐使用3D散点图全方位观察K均值聚类…

async 打包异常_重新打包流中的异常

async 打包异常Java 8已有两年历史&#xff0c;但是仍然存在社区尚未为其开发好的解决方案库的用例&#xff0c;甚至边缘用例。 如何处理流管道中的检查异常就是这样一个问题。 Stream操作接受的功能接口不允许实现抛出已检查的异常&#xff0c;但是我们可能要调用许多方法。 显…

补码基础

关于补码&#xff0c;有如下比较有趣的演化过程: 假如计算机中使用 4 位的二进制表示数据&#xff0c;如图-2&#xff0c;最多能表示 0 到 15(10 进制)&#xff0c;之后有牛人做了 一个细微改动&#xff0c;如图-3&#xff0c;将所有二进制以 1 开头的数(大于 7 的数)放到 0 之…

身份验证错误错误指定的句柄无效_基于 Web 端的人脸识别身份验证「实践」

作者&#xff1a;沫沫 政采云前端团队转发链接&#xff1a;https://mp.weixin.qq.com/s/fRDpXixnLIy9c0Uh2tMezQ前言近些年来&#xff0c;随着生物识别技术的逐渐成熟&#xff0c;基于深度学习的人脸识别技术取得了突破性进展&#xff0c;准确率显著提高。现阶段&#xff0c;人…

打开 谷歌浏览器exe_专治各种网银不服:两步开启微软Edge浏览器IE兼容模式

此前微软已经预告过Microsoft Edge将支持IE模式&#xff0c;即可以在该浏览器下使用IE模式加载某些特定的需要的网站。不过在后续更新中微软又突然改口不再面向普通用户提供此功能&#xff0c;而企业级用户若要使用还需要管理员提前配置。现在这款浏览器的正式版已经发布&#…

aspose word 获取标题_Word干货|多级标题的自动编号怎么添加?

在对Word文档进行排版时&#xff0c;大家普遍认为的一个难点就是对多级标题添加自动编号&#xff0c;本期Word妹与大家分享相关技巧的使用。1、添加样式选中文本&#xff0c;点击开始——样式——选择标题1&#xff0c;相同的样式则可以借用F4来实现。PS&#xff1a;以同样方式…

Java集合类梳理

文章目录集合框架CollectionListList常用方法ArrayListArrayList常用方法LinkedListLinkedList常用方法VectorVector 常用方法StackStack 常用方法SetHashSetHashSet 常用方法LinkedHashSetLinkedHashSet 常用方法TreeSetTreeSet常用方法EnumSetEnumSet 常用方法MapHashMapHash…

增加第三方插件_AE插件排行!!

大家好是万能的懒懒酱After effects为视觉效果艺术家和动画设计师带来了大量的效果。然而&#xff0c;第三方开发人员提供了更多独特插件&#xff0c;供After Effects使用。在这里可以帮助你了解哪些插件是最流行的最受欢迎的。第10名&#xff1a;Looks&#xff08;多功能调色插…

mysql 连续签到天数_签到功能实现,没有你想的那么复杂(一)

1 签到定义以及作用签到&#xff0c;指在规定的簿册上签名或写一“到”字&#xff0c;表示本人已经到达。在APP中使用此功能,可以增加用户粘性和活跃度.2 技术选型redis为主写入查询,mysql辅助查询. 传统签到多数都是直接采用mysql为存储DB,在大数据的情况下数据库的压力较大.查…

java包装项目_项目包装组织

java包装项目程序包是Java的基本概念&#xff0c;是您开始用该语言编程时偶然发现的第一件事。 作为一个初学者&#xff0c;您可能不太关注软件包的结构&#xff0c;但是随着您成为经验丰富且成熟的软件开发人员&#xff0c;您开始考虑可以采取哪些措施来提高其效率。 有几个主…

如何开发 Servlet 程序

文章目录如何开发 Servlet步骤 1&#xff1a;写一个类步骤 2&#xff1a;编译步骤 3&#xff1a;打包步骤 4&#xff1a;部署步骤 5&#xff1a;启动服务器步骤 6&#xff1a;访问 servletServlet 开发示例不使用 IDE 开发&#xff08;手动编译和部署&#xff09;步骤 1&#x…

报任安书文言现象_语文老师精心总结【文言文常考点】够你从初一用到初四!...

点击本号菜单栏 免费获取学习资料▼今天给大家整理了初中文言文的一些常用知识点&#xff1a;特殊句式和古今异义&#xff0c;这些只是文言文学习模块中的一部分&#xff0c;除此之外&#xff0c;其他大家需要在平时积累的文言文知识点有下面这些&#xff1a;文言文高频词、古代…

参数化测试 junit_JUnit 5 –参数化测试

参数化测试 junitJUnit 5令人印象深刻&#xff0c;尤其是当您深入研究扩展模型和体系结构时 。 但是从表面上讲&#xff0c;编写测试的地方&#xff0c;开发的过程比革命的过程更具进化性 – JUnit 4上没有杀手级功能吗&#xff1f; 幸运的是&#xff0c;至少有一个&#xff1a…

devexpress textedit调整文字何文本框的间距_手把手教学:用PPT做效果超赞的文字效果...

本文总计&#xff1a;2391 字预计阅读时间&#xff1a;6 分钟昨天文章的头图&#xff0c;貌似反馈还不错&#xff0c;挺多人比较感兴趣。所以&#xff0c;今天就分享一下&#xff0c;这种文字排版效果&#xff0c;是怎么做出来的。而且今天的实现手法与效果&#xff0c;做了一些…

IntelliJ IDEA for Mac 如何取消双击shift键打开全局搜索弹窗

取消双击shift键打开全局搜索弹窗 按ShiftcmdA&#xff0c;打开如下图的搜索框&#xff1a; 输入Registry搜索后打开如下的窗口&#xff1a; 3. 找到“ide.suppress.double.click.handler”&#xff0c;将后面的复选框勾上&#xff0c;勾选上复选框后直接关闭退出&#xff0c;…

vb6 判断打印机是否有效_吊打面试官 | 算法之如何判断括号是否有效?

今天要讲的这道题是 bilibili 今年的笔试真题&#xff0c;也是一道关于栈的经典面试题。经过前面文章的学习&#xff0c;我想很多朋友已经看出来了&#xff0c;我接下来要写的是一个关于「算法图解」的系列文章&#xff0c;中间可能会穿插少量的其他类型的文章&#xff0c;但「…

如何理解字符编码

一直有个困惑&#xff0c;为什么计算机系统搞那么多字符编码&#xff0c;就一个Unicode统一天下不就得了&#xff0c;后来看了篇文章&#xff0c;才多少理解一丁点。 英语的国家&#xff0c;只要一个字节就可以表示全部的字符&#xff0c;一个无符合的字节可以表示256个字符&a…