zhongrj
2023-06-27 d74b495736f0c04522ec54274b70fed0ded2878d
public/map/lib/zTree_v3/demo/en/super/singlepath.html
New file
@@ -0,0 +1,166 @@
<!DOCTYPE html>
<HTML>
<HEAD>
   <TITLE> ZTREE DEMO - single path</TITLE>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
   <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
   <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
   <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
   <!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
     <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
   <SCRIPT type="text/javascript">
      <!--
      var setting = {
         view: {
            dblClickExpand: false,
            showLine: false
         },
         data: {
            simpleData: {
               enable: true
            }
         },
         callback: {
            beforeExpand: beforeExpand,
            onExpand: onExpand,
            onClick: onClick
         }
      };
            function createNodes(maxNodesNumInLevel, maxLevel, curLevel, curPId) {
         if (maxNodesNumInLevel<5) {
            maxNodesNumInLevel = 5;
         }
         var nodes = [], num = 0;
         while(num<3) {
            num = parseInt(Math.random()*1024)%maxNodesNumInLevel+1;
         }
         for (var i=0; i<num; i++) {
            var id = curPId ? curPId + "-" + i : "" + i, isParent = (parseInt(Math.random()*9999)%3!=0),
            node = {id: id, pId : curPId, name : "N" + id};
            nodes.push(node);
            if (isParent && curLevel<maxLevel) {
               nodes = nodes.concat(createNodes(maxNodesNumInLevel, maxLevel, curLevel+1, id));
            }
         }
         return nodes;
      }
      var zNodes =createNodes(5, 5, 0);
      var curExpandNode = null;
      function beforeExpand(treeId, treeNode) {
         var pNode = curExpandNode ? curExpandNode.getParentNode():null;
         var treeNodeP = treeNode.parentTId ? treeNode.getParentNode():null;
         var zTree = $.fn.zTree.getZTreeObj("treeDemo");
         for(var i=0, l=!treeNodeP ? 0:treeNodeP.children.length; i<l; i++ ) {
            if (treeNode !== treeNodeP.children[i]) {
               zTree.expandNode(treeNodeP.children[i], false);
            }
         }
         while (pNode) {
            if (pNode === treeNode) {
               break;
            }
            pNode = pNode.getParentNode();
         }
         if (!pNode) {
            singlePath(treeNode);
         }
      }
        function singlePath(newNode) {
            if (newNode === curExpandNode) return;
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                    rootNodes, tmpRoot, tmpTId, i, j, n;
            if (!curExpandNode) {
                tmpRoot = newNode;
                while (tmpRoot) {
                    tmpTId = tmpRoot.tId;
                    tmpRoot = tmpRoot.getParentNode();
                }
                rootNodes = zTree.getNodes();
                for (i=0, j=rootNodes.length; i<j; i++) {
                    n = rootNodes[i];
                    if (n.tId != tmpTId) {
                        zTree.expandNode(n, false);
                    }
                }
            } else if (curExpandNode && curExpandNode.open) {
                if (newNode.parentTId === curExpandNode.parentTId) {
                    zTree.expandNode(curExpandNode, false);
                } else {
                    var newParents = [];
                    while (newNode) {
                        newNode = newNode.getParentNode();
                        if (newNode === curExpandNode) {
                            newParents = null;
                            break;
                        } else if (newNode) {
                            newParents.push(newNode);
                        }
                    }
                    if (newParents!=null) {
                        var oldNode = curExpandNode;
                        var oldParents = [];
                        while (oldNode) {
                            oldNode = oldNode.getParentNode();
                            if (oldNode) {
                                oldParents.push(oldNode);
                            }
                        }
                        if (newParents.length>0) {
                            zTree.expandNode(oldParents[Math.abs(oldParents.length-newParents.length)-1], false);
                        } else {
                            zTree.expandNode(oldParents[oldParents.length-1], false);
                        }
                    }
                }
            }
            curExpandNode = newNode;
        }
      function onExpand(event, treeId, treeNode) {
         curExpandNode = treeNode;
      }
      function onClick(e,treeId, treeNode) {
         var zTree = $.fn.zTree.getZTreeObj("treeDemo");
         zTree.expandNode(treeNode, null, null, null, true);
      }
      $(document).ready(function(){
         $.fn.zTree.init($("#treeDemo"), setting, zNodes);
      });
      //-->
   </SCRIPT>
   <style type="text/css">
.ztree li button.switch {visibility:hidden; width:1px;}
.ztree li button.switch.roots_docu {visibility:visible; width:16px;}
.ztree li button.switch.center_docu {visibility:visible; width:16px;}
.ztree li button.switch.bottom_docu {visibility:visible; width:16px;}
   </style>
 </HEAD>
<BODY>
<h1>Keep Single Path</h1>
<h6>[ File Path: super/singlepath.html ]</h6>
<div class="content_wrap">
   <div class="zTreeDemoBackground left">
      <ul id="treeDemo" class="ztree"></ul>
   </div>
   <div class="right">
      <ul class="info">
         <li class="title"><h2>Explanation of implementation method</h2>
            <ul class="list">
            <li>This Demo is the transformation from "Click to Expand Node" demo​​, tree only expand single path.</li>
            <li class="highlight_red">Use 'setting.callback.beforeExpand / onExpand' callback function to achieve rules about expand </li>
            </ul>
         </li>
      </ul>
   </div>
</div>
</BODY>
</HTML>