• 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);
         }
  • 相关阅读:
    michael的沟通秘籍
    panels能否包含views_block ////// panels -- content pane 参数传递
    Unity动画
    DoTween动画插件学习
    C#委托的进一步学习
    阶段学习总结-坦克大战(2D)案例
    学习总结
    阶段学习总结-见缝插针案例
    阶段学习总结-坦克大战案例
    碰撞检测和触发检测
  • 原文地址:https://www.cnblogs.com/Kingram/p/10384211.html
Copyright © 2020-2023  润新知