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

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

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

效果如下图:

代码如下:

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->varcurrentRootNode=null;//当前选择的根节点
functionNodeClass()
{
//定义一个节点类
varnodeValue=null;
varnextNode=null;//下一个节点
}

functionInitQueue(queue)
{
//初始化一个队列
queue=newNodeClass();//头节点为空
returnqueue;
}

functionEmpty(queue)
{
//判断一个队列为空
varreturnValue=false;
if(queue.nextNode==null)
{
returnValue
=true;
}
returnreturnValue;
}

functionEnQueue(queue,x)
{
//入队操作
varreturnValue=queue;
varcurrentNode=queue;//头节点
while(currentNode.nextNode!=null)
{
//current一直到来到最后一个元素
currentNode=currentNode.nextNode;//
}
vartempNode=newNodeClass();//生成一个新的元素,并且值为X
tempNode.nodeValue=x;
currentNode.nextNode
=tempNode;//插入到最后
returnreturnValue;
}

functionDeQueue(queue)
{
//出队操作
varreturnValue=null;
if(queue.nextNode!=null)
{
//如果队列非空
if(queue.nextNode.nextNode==null)
{
//如果是最后一个元素(即使队头又是队尾,只有一个元素)
returnValue=queue.nextNode.nodeValue;//取得该元素的值
queue.nextNode=null;//将头指针的queue的nextNode设置为NULL
}
else
{
returnValue
=queue.nextNode.nodeValue;//取得该元素的值
queue.nextNode=queue.nextNode.nextNode;//将第二个元素的指针赋给queue的nextNode,相当于删除了第一个元素
}
}
returnreturnValue;//返回被删除的第一个元素的值
}

functionGetHead(queue)
{
//获得队头元素的值
returnqueue.nextNode.nodeValue;
}

functionClear(queue)
{
//清空一个队列
queue.nextNode=null;
queue.nodeValue
=null;
}

functionCurrent_Size(queue)
{
//获得当前队列的大小
varreturnValue=0;
varcurrentNode=queue.nextNode;//头结点
while(currentNode!=null)
{
//从头往尾计算
returnValue++;
currentNode
=currentNode.nextNode;//指向下一个元素
}
returnreturnValue;//返回大小
}

functionfindFirstCheafNode()
{
varchildNodes=null;
vartargetNode=null;//待查找的目标叶子节点
varqueue=null;//辅助队列
queue=InitQueue(queue);//初始化队列
queue=EnQueue(queue,currentRootNode);//根节点入队列

while(!Empty(queue))
{
//只要队列不空
node=DeQueue(queue);//出队列
if(node.hasChildNodes())
{
//非叶子节点
childNodes=node.childNodes;
//其孩子节点从左到右依次入队列
for(vari=0,len=childNodes.length;i<len;++i)
{
queue
=EnQueue(queue,childNodes[i]);
}
}
else
{
//找到第一个叶子节点
returnnode;
}
}
}

Ext.onReady(
function()
{
vartree=newExt.tree.TreePanel({
el:
'treeDiv',
useArrows:
true,
autoScroll:
true,
animate:
true,
enableDD:
true,
containerScroll:
true,
border:
false,
//autocreateTreeLoader
loader:newExt.tree.TreeLoader({dataUrl:'Level1.txt'})
});
varrootID='0';
varrootnode=newExt.tree.AsyncTreeNode({
id:rootID,
text:
'铁道部',
draggable:
false,//根节点不容许拖动
expanded:false
});
//为tree设置根节点
tree.setRootNode(rootnode);
tree.render();
tree.on(
'click',function(node,event)
{
//查询树的第一个叶子节点
currentRootNode=node;
vartargetNode=findFirstCheafNode();
Ext.MessageBox.alert(
"info","当前根节点是:"+currentRootNode.text+"它下面的第一个叶子节点是:"+targetNode.text);
});
});
varchildNodes=null;
vartargetNode=null;//待查找的目标叶子节点
varqueue=null;//辅助队列
queue=InitQueue(queue);//初始化队列
queue=EnQueue(queue,currentRootNode);//根节点入队列

while(!Empty(queue))
{
//只要队列不空
node=DeQueue(queue);//出队列
if(node.hasChildNodes())
{
//非叶子节点
childNodes=node.childNodes;
//其孩子节点从左到右依次入队列
for(vari=0,len=childNodes.length;i<len;++i)
{
queue
=EnQueue(queue,childNodes[i]);
}
}
else
{
//找到第一个叶子节点
returnnode;
}
}
}
Ext.onReady(
function()
{
vartree=newExt.tree.TreePanel({
el:
'treeDiv',
useArrows:
true,
autoScroll:
true,
animate:
true,
enableDD:
true,
containerScroll:
true,
border:
false,
//autocreateTreeLoader
loader:newExt.tree.TreeLoader({dataUrl:'Level1.txt'})
});
varrootID='0';
varrootnode=newExt.tree.AsyncTreeNode({
id:rootID,
text:
'铁道部',
draggable:
false,//根节点不容许拖动
expanded:false
});
//为tree设置根节点
tree.setRootNode(rootnode);
tree.render();
tree.on(
'click',function(node,event)
{
//查询树的第一个叶子节点
currentRootNode=node;
vartargetNode=findFirstCheafNode();
alert(
"当前根节点是:"+currentRootNode.text+"它下面的第一个叶子节点是:"+targetNode.text);
});
});

阅读更多
换一批

没有更多推荐了,返回首页