Ztree勾选节点后取消勾选其父子节点

前言：

Ztree官方给的API可以设置勾选一个节点的同时勾选子节点或者父节点，也可以设置不影响父子节点，即将chkboxType设置为{"Y":"","N":""}，而有时我们希望实现这样的功能，点击一个节点判断他所有的父节点和子节点，如果有选中的话就取消勾选，这样的话官方貌似没有给出有效的解决方案，这篇文章记录一下我是怎么解决这个问题的。

需求：

点击一个节点，判断他所有的父节点和子节点，如果有选中的节点，则取消选中。

实现步骤：

首先看下官方给的API

这里给个传送门：点击这里

可以看到其实官方给的是这样的逻辑：
假设有这样一组数据：

江苏、南京、XX区域、XX街道、XX小区

那么在勾选南京的时候其实要么选中所有子节点、要么选中所有父节点。或者不影响父子节点。

而要实现上面的需求肯定是要先设置为不影响父子节点，如下所示效果：

然后循环遍历其父节点和子节点，设置checked属性为false即可;

几点需要注意的：

1.这里子节点是一个递归操作，子节点的子节点也应该被取消选中。

2.treeNode.getPath();可以获取当前节点的所有父节点，包括他自己，所以要把自身排除。

3.每次设置完checked属性为false之后，应该更新一下节点，否则没有直接效果，鼠标滑过才会有效果。

示例代码如下：

     function customBeforeCheck(event, treeId,  treeNode,treeObj) {var childNodes = treeNode.children;for(var i=0;i<childNodes.length;i++) {recursion(childNodes[i],treeObj);}var parenNodes = treeNode.getPath();for(var i=0;i<parenNodes.length;i++) {if(parenNodes[i] != null && parenNodes[i].id !=  treeNode.id) {parenNodes[i].checked = false;treeObj.updateNode(parenNodes[i]);}}}function recursion(node,treeObj) {if(node.children && node.children.length >0) {node.checked = false;for(var i=0;i<node.children.length;i++) {recursion(node.children[i],treeObj);}}else{node.checked = false;}treeObj.updateNode(node);}

转载于:https://www.cnblogs.com/Kingram/p/10384211.html

Ztree勾选节点后取消勾选其父子节点相关推荐

element tree 父级勾选子级也勾选,子级勾选默认父级也勾选, 子级取消勾选不影响父级勾选(前端)
在做菜单和菜单按钮权限配置这块,用element-UI中的tree组件来做.想选中单个页面,或者单个页面的某个具体按钮,就能把所有上级的父级菜单也勾选上,而且取消菜单按钮的时候还不影响父级菜单的勾选. ...
fabric.js 多选中后取消多选框的控制点
可以通过在 canvas 上调用 discardActiveObject() 来取消多选框的控制点. 例如: canvas.discardActiveObject(); canvas.renderAl ...
element表格取消全选_ElementUi 表格取消全选框，用文字表示
Echarts ElementUi 表格取消全选框,用文字表示 1.先看看实现的图一. 添加添加复选框列二.给方法(这个方法主要就是给表格所需要的列添加类名.)具体可以看ElementUi的表格 ...
Ztree加载完成后显示勾选节点
①前言:这个在度娘上没有搜到解决的办法,于是自己查看了ztree的API,发现其实还是比较简单的.做个笔记以备不时之需. ②需求: 像下图一样,在加载完成之后就显示需要勾选的项. ③解决方案: 首先页 ...
ElementUI-table切页保存已勾选和被取消勾选（附默认选中）
文章目录期待实现效果实现方法后端返回数据格式,其中``checkkeys``表示被选中列表项的``id集``, 代码期待实现效果后端返回数据中带被选中列表项的id集,在此id集的默认选中: ...
TreeList自带勾选框实现批量勾选
现在有这么一个常见的功能需求:树形控件需要批量勾选,且勾选父节点默认将子节点全部勾上:当子节点全部取消勾选后,父节点的勾选也取消掉:勾选一个子节点,默认就把父节点也置于勾选状态. 最常见的案例就是wi ...
在项目中学习.NET的JQuery CheckBox方法(全选、取消全选、其他）
一.在项目中遇到的CheckBox的全选和取消全选以及其他等解决方案如下: // 对全选和取消全选的事件 $("#CheckAll").click(function () { ...
react实现全选、取消全选和个别选择
react里面实现全选和取消全选,个别选择等操作,效果如下代码: import React, {Component} from 'react' export default class Demo e ...
react 全选_react实现全选、取消全选和个别选择
react里面实现全选和取消全选,个别选择等操作,效果如下代码: import React, {Component} from 'react' export default class Demo e ...

Ztree勾选节点后取消勾选其父子节点

Ztree勾选节点后取消勾选其父子节点相关推荐

最新文章

热门文章