層序遍歷在ExtJs的TreePanel中的應(yīng)用
原理非常簡(jiǎn)單,就是樹的層序遍歷,在遍歷過程中遇到第一個(gè)葉子節(jié)點(diǎn)即完成工作。
效果如下圖:
代碼如下:
var currentRootNode = null;//當(dāng)前選擇的根節(jié)點(diǎn)
function NodeClass()
{ //定義一個(gè)節(jié)點(diǎn)類
var nodeValue = null;
var nextNode = null;//下一個(gè)節(jié)點(diǎn)
}
function InitQueue(queue)
{ //初始化一個(gè)隊(duì)列
queue = new NodeClass();//頭節(jié)點(diǎn)為空
return queue;
}
function Empty(queue)
{ //判斷一個(gè)隊(duì)列為空
var returnValue = false;
if(queue.nextNode == null)
{
returnValue = true;
}
return returnValue;
}
function EnQueue(queue,x)
{ //入隊(duì)操作
var returnValue = queue;
var currentNode = queue;//頭節(jié)點(diǎn)
while(currentNode.nextNode != null)
{//current 一直到來到最后一個(gè)元素
currentNode = currentNode.nextNode; //
}
var tempNode = new NodeClass(); //生成一個(gè)新的元素,并且值為X
tempNode.nodeValue = x;
currentNode.nextNode = tempNode; //插入到最后
return returnValue;
}
function DeQueue(queue)
{ //出隊(duì)操作
var returnValue = null;
if(queue.nextNode != null)
{ //如果隊(duì)列非空
if(queue.nextNode.nextNode == null)
{ //如果是最后一個(gè)元素(即使隊(duì)頭又是隊(duì)尾,只有一個(gè)元素)
returnValue = queue.nextNode.nodeValue; //取得該元素的值
queue.nextNode = null;//將頭指針的queue的nextNode設(shè)置為NULL
}
else
{
returnValue = queue.nextNode.nodeValue; //取得該元素的值
queue.nextNode = queue.nextNode.nextNode; //將第二個(gè)元素的指針賦給queue的nextNode,相當(dāng)于刪除了第一個(gè)元素
}
}
return returnValue; //返回被刪除的第一個(gè)元素的值
}
function GetHead(queue)
{ //獲得隊(duì)頭元素的值
return queue.nextNode.nodeValue;
}
function Clear(queue)
{ //清空一個(gè)隊(duì)列
queue.nextNode = null;
queue.nodeValue = null;
}
function Current_Size(queue)
{ //獲得當(dāng)前隊(duì)列的大小
var returnValue = 0;
var currentNode = queue.nextNode;//頭結(jié)點(diǎn)
while(currentNode != null)
{ //從頭往尾計(jì)算
returnValue++;
currentNode = currentNode.nextNode; //指向下一個(gè)元素
}
return returnValue; //返回大小
}
function findFirstCheafNode()
{
var childNodes = null;
var targetNode = null;//待查找的目標(biāo)葉子節(jié)點(diǎn)
var queue = null;//輔助隊(duì)列
queue = InitQueue(queue);//初始化隊(duì)列
queue = EnQueue(queue,currentRootNode);//根節(jié)點(diǎn)入隊(duì)列
while (!Empty(queue))
{//只要隊(duì)列不空
node = DeQueue(queue);//出隊(duì)列
if (node.hasChildNodes())
{//非葉子節(jié)點(diǎn)
childNodes = node.childNodes;
//其孩子節(jié)點(diǎn)從左到右依次入隊(duì)列
for (var i = 0,len = childNodes.length; i < len ; ++i)
{
queue = EnQueue(queue,childNodes[i]);
}
}
else
{//找到第一個(gè)葉子節(jié)點(diǎn)
return node;
}
}
}
Ext.onReady(function()
{
var tree = new Ext.tree.TreePanel({
el: 'treeDiv',
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
// auto create TreeLoader
loader: new Ext.tree.TreeLoader({dataUrl:'Level1.txt'})
});
var rootID = '0';
var rootnode = new Ext.tree.AsyncTreeNode({
id : rootID,
text : '鐵道部',
draggable : false,// 根節(jié)點(diǎn)不容許拖動(dòng)
expanded : false
});
// 為tree設(shè)置根節(jié)點(diǎn)
tree.setRootNode(rootnode);
tree.render();
tree.on('click',function(node,event)
{//查詢樹的第一個(gè)葉子節(jié)點(diǎn)
currentRootNode = node;
var targetNode = findFirstCheafNode();
Ext.MessageBox.alert("info","當(dāng)前根節(jié)點(diǎn)是: "+currentRootNode.text + " 它下面的第一個(gè)葉子節(jié)點(diǎn)是: " + targetNode.text);
});
}); var childNodes = null;
var targetNode = null;//待查找的目標(biāo)葉子節(jié)點(diǎn)
var queue = null;//輔助隊(duì)列
queue = InitQueue(queue);//初始化隊(duì)列
queue = EnQueue(queue,currentRootNode);//根節(jié)點(diǎn)入隊(duì)列
while (!Empty(queue))
{//只要隊(duì)列不空
node = DeQueue(queue);//出隊(duì)列
if (node.hasChildNodes())
{//非葉子節(jié)點(diǎn)
childNodes = node.childNodes;
//其孩子節(jié)點(diǎn)從左到右依次入隊(duì)列
for (var i = 0,len = childNodes.length; i < len ; ++i)
{
queue = EnQueue(queue,childNodes[i]);
}
}
else
{//找到第一個(gè)葉子節(jié)點(diǎn)
return node;
}
}
}
Ext.onReady(function()
{
var tree = new Ext.tree.TreePanel({
el: 'treeDiv',
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
// auto create TreeLoader
loader: new Ext.tree.TreeLoader({dataUrl:'Level1.txt'})
});
var rootID = '0';
var rootnode = new Ext.tree.AsyncTreeNode({
id : rootID,
text : '鐵道部',
draggable : false,// 根節(jié)點(diǎn)不容許拖動(dòng)
expanded : false
});
// 為tree設(shè)置根節(jié)點(diǎn)
tree.setRootNode(rootnode);
tree.render();
tree.on('click',function(node,event)
{//查詢樹的第一個(gè)葉子節(jié)點(diǎn)
currentRootNode = node;
var targetNode = findFirstCheafNode();
alert("當(dāng)前根節(jié)點(diǎn)是: "+currentRootNode.text + " 它下面的第一個(gè)葉子節(jié)點(diǎn)是: " + targetNode.text);
});
});
相關(guān)文章
ExtJS4利根據(jù)登錄后不同的角色分配不同的樹形菜單
這篇文章主要介紹了ExtJS4利根據(jù)登錄后不同的角色分配不同的樹形菜單,需要的朋友可以參考下2014-05-05
JavaScript的ExtJS框架中數(shù)面板TreePanel的使用實(shí)例解析
TreePanel為ExtJS提供了一個(gè)方便的樹結(jié)構(gòu)數(shù)據(jù)展示,尤其是在處理JSON格式數(shù)據(jù)時(shí)十分常用,接下來我們就來看兩則JavaScript的ExtJS框架中數(shù)面板TreePanel的使用實(shí)例解析2016-05-05
extJs 文本框后面加上說明文字+下拉列表選中值后觸發(fā)事件
在用extjs做參數(shù)設(shè)置的時(shí)候,想在文本框后加入說明子,在網(wǎng)站上走了一大圈還是沒能找到合適的,小花用了一個(gè)下午的上班時(shí)間終于將這個(gè)頁面與我想要的功能做出,頁面很好看與自然,希望網(wǎng)友在用extjs做項(xiàng)目的時(shí)候用的著.2009-11-11
extjs表格文本啟用選擇復(fù)制功能具體實(shí)現(xiàn)
extjs提供了方便的表格組件grid供使用,但是默認(rèn)情況下表格中的文本是不能被選中的,自然也是無法復(fù)制的,下面就為大家介紹下選擇復(fù)制功能如何啟用,感興趣的朋友可以了解下2013-10-10
基于ExtJs在頁面上window再調(diào)用Window的事件處理方法
下面小編就為大家?guī)硪黄贓xtJs在頁面上window再調(diào)用Window的事件處理方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
使用ExtJS技術(shù)實(shí)現(xiàn)的拖動(dòng)樹結(jié)點(diǎn)
在本文將介紹TreePanel組件非常有意思的一個(gè)功能:結(jié)點(diǎn)拖放。要使TreePanel組件的結(jié)點(diǎn)可以拖放非常簡(jiǎn)單,只需要將TreePanel類的enableDD選項(xiàng)參數(shù)設(shè)為true即可。當(dāng)然,要想實(shí)現(xiàn)更復(fù)雜的功能,還需要配合其他的參數(shù)和事件。2010-08-08
Extjs列表詳細(xì)信息窗口新建后自動(dòng)加載解決方法
有時(shí)候我們?cè)谛陆斜碇械囊豁?xiàng)后需要進(jìn)入立刻進(jìn)入詳細(xì)信息的編輯頁面,為了使得操作簡(jiǎn)便,一般設(shè)定自動(dòng)導(dǎo)向。2010-04-04
extjs3 combobox取value和text案例詳解
使用combobox時(shí),它有一個(gè)hiddenName的屬性,專門用于提交combobox中value的值,接下來介紹extjs3 combobox如何取value和text值,感興趣的朋友可以不要錯(cuò)過了啊2013-02-02

