zoukankan      html  css  js  c++  java
  • 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);
         }
  • 相关阅读:
    [转载]VC补遗之Profile篇
    [原创]百度之星2009初赛第二场第四题解答
    [总结]QT在CODE:BLOCKS中的配置
    [原创]自己写的一个简单的程序日志记录类
    [原创]QT动态加载UI文件注意事项
    window版本信息资源格式
    [原创]滚动条滚动范围的问题总结
    ofstream奇怪问题解决方法
    [转载]最小矩形(rec1)的解题报告
    oracle数据库用户之间授权
  • 原文地址:https://www.cnblogs.com/Kingram/p/10384211.html
Copyright © 2011-2022 走看看