层序遍历在ExtJs的TreePanel中的应用

  
  
  
  
  1. var currentRootNode = null;//当前选择的根节点  
  2.   function NodeClass()  
  3.   {   //定义一个节点类  
  4.       var nodeValue = null;  
  5.         var nextNode = null;//下一个节点  
  6.     }  
  7.  
  8.     function InitQueue(queue)  
  9.     { //初始化一个队列  
  10.         queue = new NodeClass();//头节点为空  
  11.         return queue;  
  12.     }  
  13.  
  14.     function Empty(queue)  
  15.     {      //判断一个队列为空  
  16.         var returnValue = false;  
  17.         if(queue.nextNode == null)  
  18.         {  
  19.             returnValue = true;   
  20.         }  
  21.         return returnValue;  
  22.     }  
  23.  
  24.     function EnQueue(queue,x)  
  25.     {   //入队操作  
  26.         var returnValue = queue;  
  27.         var currentNode = queue;//头节点  
  28.         while(currentNode.nextNode != null)  
  29.         {//current 一直到来到最后一个元素  
  30.             currentNodecurrentNode = currentNode.nextNode; //  
  31.         }  
  32.         var tempNode = new NodeClass(); //生成一个新的元素,并且值为X  
  33.         tempNode.nodeValue = x;   
  34.         currentNode.nextNode = tempNode; //插入到最后  
  35.         return returnValue;  
  36.     }  
  37.  
  38.     function DeQueue(queue)  
  39.     {   //出队操作  
  40.         var returnValue = null;  
  41.         if(queue.nextNode != null)  
  42.         { //如果队列非空  
  43.             if(queue.nextNode.nextNode == null)  
  44.             { //如果是最后一个元素(即使队头又是队尾,只有一个元素)  
  45.                 returnValue = queue.nextNode.nodeValue;   //取得该元素的值  
  46.                 queue.nextNode = null;//将头指针的queue的nextNode设置为NULL  
  47.             }   
  48.             else  
  49.             {  
  50.                 returnValue = queue.nextNode.nodeValue; //取得该元素的值  
  51.                 queuequeue.nextNode = queue.nextNode.nextNode; //将第二个元素的指针赋给queue的nextNode,相当于删除了第一个元素  
  52.             }  
  53.         }  
  54.         return returnValue;   //返回被删除的第一个元素的值  
  55.     }  
  56.  
  57.     function GetHead(queue)  
  58.     {   //获得队头元素的值  
  59.         return queue.nextNode.nodeValue;  
  60.     }  
  61.  
  62.     function Clear(queue)  
  63.     {   //清空一个队列  
  64.         queue.nextNode = null;  
  65.         queue.nodeValue = null;  
  66.     }  
  67.  
  68.     function Current_Size(queue)  
  69.     {    //获得当前队列的大小  
  70.         var returnValue = 0;  
  71.         var currentNode = queue.nextNode;//头结点  
  72.         while(currentNode != null)  
  73.         {   //从头往尾计算  
  74.             returnValue++;  
  75.             currentNodecurrentNode = currentNode.nextNode; //指向下一个元素  
  76.         }  
  77.         return returnValue;          //返回大小  
  78.     }  
  79.  
  80.      function findFirstCheafNode()  
  81.      {   
  82.          var childNodes = null;  
  83.          var targetNode = null;//待查找的目标叶子节点  
  84.         var queue = null;//辅助队列  
  85.         queue = InitQueue(queue);//初始化队列  
  86.         queue = EnQueue(queue,currentRootNode);//根节点入队列  
  87.           
  88.         while (!Empty(queue))  
  89.         {//只要队列不空  
  90.             node = DeQueue(queue);//出队列  
  91.             if (node.hasChildNodes())  
  92.             {//非叶子节点  
  93.                 childNodes = node.childNodes;  
  94.                 //其孩子节点从左到右依次入队列  
  95.                 for (var i = 0,len = childNodes.length; i < len ; ++i)  
  96.                 {  
  97.                     queue = EnQueue(queue,childNodes[i]);  
  98.                 }  
  99.             }  
  100.             else  
  101.             {//找到第一个叶子节点  
  102.                 return node;  
  103.             }  
  104.         }  
  105.      }  
  106.        
  107.     Ext.onReady(function()   
  108.     {  
  109.           var tree = new Ext.tree.TreePanel({  
  110.             el: 'treeDiv',  
  111.             useArrows: true,  
  112.             autoScroll: true,  
  113.             animate: true,  
  114.             enableDD: true,  
  115.             containerScroll: true,  
  116.             border: false,  
  117.             // auto create TreeLoader  
  118.             loader: new Ext.tree.TreeLoader({dataUrl:'Level1.txt'})  
  119.         });  
  120.         var rootID = '0';  
  121.         var rootnode = new Ext.tree.AsyncTreeNode({  
  122.             id : rootID,  
  123.             text : '铁道部',  
  124.             draggable : false,// 根节点不容许拖动  
  125.             expanded : false  
  126.         });  
  127.         // 为tree设置根节点  
  128.         tree.setRootNode(rootnode);  
  129.         tree.render();  
  130.         tree.on('click',function(node,event)  
  131.         {//查询树的第一个叶子节点  
  132.             currentRootNode = node;  
  133.             var targetNode = findFirstCheafNode();  
  134.             Ext.MessageBox.alert("info","当前根节点是: "+currentRootNode.text + " 它下面的第一个叶子节点是: " + targetNode.text);  
  135.         });  
  136.     });         var childNodes = null;  
  137.          var targetNode = null;//待查找的目标叶子节点  
  138.         var queue = null;//辅助队列  
  139.         queue = InitQueue(queue);//初始化队列  
  140.         queue = EnQueue(queue,currentRootNode);//根节点入队列  
  141.           
  142.         while (!Empty(queue))  
  143.         {//只要队列不空  
  144.                 node = DeQueue(queue);//出队列  
  145.                 if (node.hasChildNodes())  
  146.                 {//非叶子节点  
  147.                         childNodes = node.childNodes;  
  148.                         //其孩子节点从左到右依次入队列  
  149.                         for (var i = 0,len = childNodes.length; i < len ; ++i)  
  150.                         {  
  151.                             queue = EnQueue(queue,childNodes[i]);  
  152.                         }  
  153.                 }  
  154.                 else  
  155.                 {//找到第一个叶子节点  
  156.                         return node;  
  157.                 }  
  158.         }  
  159.      }  
  160.     Ext.onReady(function()   
  161.     {  
  162.           var tree = new Ext.tree.TreePanel({  
  163.             el: 'treeDiv',  
  164.             useArrows: true,  
  165.             autoScroll: true,  
  166.             animate: true,  
  167.             enableDD: true,  
  168.             containerScroll: true,  
  169.             border: false,  
  170.             // auto create TreeLoader  
  171.             loader: new Ext.tree.TreeLoader({dataUrl:'Level1.txt'})  
  172.         });  
  173.         var rootID = '0';  
  174.         var rootnode = new Ext.tree.AsyncTreeNode({  
  175.             id : rootID,  
  176.             text : '铁道部',  
  177.             draggable : false,// 根节点不容许拖动  
  178.             expanded : false  
  179.         });  
  180.         // 为tree设置根节点  
  181.         tree.setRootNode(rootnode);  
  182.         tree.render();  
  183.         tree.on('click',function(node,event)  
  184.         {//查询树的第一个叶子节点  
  185.             currentRootNode = node;  
  186.             var targetNode = findFirstCheafNode();  
  187.             alert("当前根节点是: "+currentRootNode.text + " 它下面的第一个叶子节点是: " + targetNode.text);  
  188.         });  
  189.     }); 

今天帮朋友解决了一个问题:使用ExtJsTreePanel控件,如何得到树的第一个叶子节点的信息。

原理非常简单,就是树的层序遍历,在遍历过程中遇到第一个叶子节点即完成工作。

效果如下图:

层序遍历在ExtJs的TreePanel中的应用_第1张图片

代码如下:

你可能感兴趣的:(职场,ExtJs,TreePanel,休闲)