div获取第一个子节点jquery_【antd】Tree组件子节点不完全勾选获取父节点的值
注意⚠️:这篇文章适用于后台返回的树结构比较多的情况下,如果数据比较少的情况下,可以参考我的上一篇文章,操作起来比较简单
我们在实际操作tree组件和后台交互的时候一般都是需要将父节点传过去,如图:点击原子零件和零件加工的时候需要把产品服务的id给后台传过去
在实现之前,需要给大家画出来antd中标出来的相关属性(敲黑板!!)
onCheck勾选方法,其中第二个参数是个事件对象,什么意思捏?打印出来就说是如下:
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了~
div获取第一个子节点jquery_【antd】Tree组件子节点不完全勾选获取父节点的值相关推荐
- tree父节点不被选中和勾选(所以父节点)只选择子节点
tree父节点不被选中和勾选(所以父节点)只选择子节点 t = $.fn.zTree.init(t, setting, result); var zTree = $.fn.zTree.getZTree ...
- jquery获取第一个子元素
如获取id为divId的div下的第一个子div 1 $("#divId").children("div").get(0) 但得到的是一个dom对象,如果要得到 ...
- js 兼容性封装获取第一个子元素,最后一个子元素,下一个兄弟元素,上一个兄弟元素
高级浏览器: chrome firefox ie9及以上符合web标准浏览器. 低版本浏览器: ie6,ie7,ie8. 节点和元素的适用范围:以firstChild和firstElementChil ...
- element tree 父级勾选子级也勾选,子级勾选默认父级也勾选, 子级取消勾选不影响父级勾选(前端)
在做菜单和菜单按钮权限配置这块,用element-UI中的tree组件来做.想选中单个页面,或者单个页面的某个具体按钮,就能把所有上级的父级菜单也勾选上,而且取消菜单按钮的时候还不影响父级菜单的勾选. ...
- element表格勾选获取序号
element表格勾选获取序号 如图,这里有一个需求是勾选某一项为其进行排序,首先需要将原来的序号回显,所以在element的勾选表格的操作中需要获得index值? 查了一下没有在官方文档找到类似于$ ...
- vue element el-table表格勾选求和 el-table 勾选获取表格某几列数据求和
vue element el-table 表格勾选获取几列数据求和 el-table表格勾选求和 先看案例如下图所示:el-table 勾选后求出支付金额数据,计算出总金额数据. 我们来一步步分析方便 ...
- antd Tree组件中,自定义右键菜单
最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component {state = {rightClickNodeTreeIt ...
- 关于antd Tree组件修改图标
vue+antd修改Tree组件图标 修改折叠/展开图标 显示图标-------自定义图标 标题上显示子节点数量 修改折叠/展开图标 <Treeshow-iconshow-linedefault ...
- 利用antd tree组件实现类文件夹树(文件夹图标跟随树展开状态)
需求是用ant-design的组件做出如设计图所示类文件夹树,尝试修改多次样式及功能,最终使用tree组件完成功能,在次共享一下代码,如果有问题或者建议可以评论等探讨, 先上结构题代码,样式随附,主要 ...
最新文章
- 基于模糊聚类的色彩迁移算法
- tomcat 启动项目 页面文字乱码_eclipse启动tomcat项目乱码而终端启动tomcat正常的解决办法...
- Metaspace 引起的 FullGC 问题排查过程及解决方案
- EDITOR-CALL语句的使用:修改abap内表的内容(代码摘抄)
- 【职场经验】算法同学从学校到实习,需要改变什么
- 证件照排版软件_证件照小程序换背景(制作免费版)
- 二叉树遍历的非递归方法
- python元组为什么不可变_为什么python字符串和元组是不可变的?
- (一)选择排序之一:堆排序
- 阅读一定时间后获得实现逻辑_大家都在好奇,18天读18本书的60分钟高效阅读,怎么这么火...
- Hash类的键值对允不允许为空的问题
- java二次方程式答案_二次方程式Java?
- java.lang.UnsatifiedLinkError错误一例:在eclipse中启动应用报错
- 为什么MyBatis配置映射器只有四种
- 最新多种方式, 判断客户端IP是国内还是国外?
- 宝藏又小众的金属板材质贴图素材网站分享
- c语言均衡器,拿什么拯救你的音色——初识均衡器
- psm倾向得分匹配法举例_【计量地图】倾向得分匹配法(PSM)理论、操作与案例...
- 计算机视觉与机械专业相关吗,计算机视觉在早期森林火灾探测中的应用研究-精密仪器及机械专业论文.docx...
- 申宝股票-三大指数震荡下行