| New file |
| | |
|---|
| | | <!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>保持展开单一路径</h1> |
|---|
| | | <h6>[ 文件路径: 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>实现方法说明</h2> |
|---|
| | | <ul class="list"> |
|---|
| | | <li>此 Demo 是在 "单击展开/折叠节点" 基础上改造而来，树节点保持始终只展开一条路径。</li> |
|---|
| | | <li class="highlight_red">利用 setting.callback.beforeExpand / onExpand 事件回调函数实现展开规则</li> |
|---|
| | | </ul> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </BODY> |
|---|
| | | </HTML> |
|---|
