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


Posted in Javascript onOctober 16, 2009

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

效果如下图:
层序遍历在ExtJs的TreePanel中的应用
代码如下:

var currentRootNode = null;//当前选择的根节点 
function NodeClass() 
{ //定义一个节点类 
var nodeValue = null; 
var nextNode = null;//下一个节点 
} 
function InitQueue(queue) 
{ //初始化一个队列 
queue = new NodeClass();//头节点为空 
return queue; 
} 
function Empty(queue) 
{ //判断一个队列为空 
var returnValue = false; 
if(queue.nextNode == null) 
{ 
returnValue = true; 
} 
return returnValue; 
} 
function EnQueue(queue,x) 
{ //入队操作 
var returnValue = queue; 
var currentNode = queue;//头节点 
while(currentNode.nextNode != null) 
{//current 一直到来到最后一个元素 
currentNode = currentNode.nextNode; // 
} 
var tempNode = new NodeClass(); //生成一个新的元素,并且值为X 
tempNode.nodeValue = x; 
currentNode.nextNode = tempNode; //插入到最后 
return returnValue; 
} 
function DeQueue(queue) 
{ //出队操作 
var returnValue = 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,相当于删除了第一个元素 
} 
} 
return returnValue; //返回被删除的第一个元素的值 
} 
function GetHead(queue) 
{ //获得队头元素的值 
return queue.nextNode.nodeValue; 
} 
function Clear(queue) 
{ //清空一个队列 
queue.nextNode = null; 
queue.nodeValue = null; 
} 
function Current_Size(queue) 
{ //获得当前队列的大小 
var returnValue = 0; 
var currentNode = queue.nextNode;//头结点 
while(currentNode != null) 
{ //从头往尾计算 
returnValue++; 
currentNode = currentNode.nextNode; //指向下一个元素 
} 
return returnValue; //返回大小 
} 
function findFirstCheafNode() 
{ 
var childNodes = null; 
var targetNode = null;//待查找的目标叶子节点 
var queue = null;//辅助队列 
queue = InitQueue(queue);//初始化队列 
queue = EnQueue(queue,currentRootNode);//根节点入队列 
while (!Empty(queue)) 
{//只要队列不空 
node = DeQueue(queue);//出队列 
if (node.hasChildNodes()) 
{//非叶子节点 
childNodes = node.childNodes; 
//其孩子节点从左到右依次入队列 
for (var i = 0,len = childNodes.length; i < len ; ++i) 
{ 
queue = EnQueue(queue,childNodes[i]); 
} 
} 
else 
{//找到第一个叶子节点 
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,// 根节点不容许拖动 
expanded : false 
}); 
// 为tree设置根节点 
tree.setRootNode(rootnode); 
tree.render(); 
tree.on('click',function(node,event) 
{//查询树的第一个叶子节点 
currentRootNode = node; 
var targetNode = findFirstCheafNode(); 
Ext.MessageBox.alert("info","当前根节点是: "+currentRootNode.text + " 它下面的第一个叶子节点是: " + targetNode.text); 
}); 
}); var childNodes = null; 
var targetNode = null;//待查找的目标叶子节点 
var queue = null;//辅助队列 
queue = InitQueue(queue);//初始化队列 
queue = EnQueue(queue,currentRootNode);//根节点入队列 
while (!Empty(queue)) 
{//只要队列不空 
node = DeQueue(queue);//出队列 
if (node.hasChildNodes()) 
{//非叶子节点 
childNodes = node.childNodes; 
//其孩子节点从左到右依次入队列 
for (var i = 0,len = childNodes.length; i < len ; ++i) 
{ 
queue = EnQueue(queue,childNodes[i]); 
} 
} 
else 
{//找到第一个叶子节点 
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,// 根节点不容许拖动 
expanded : false 
}); 
// 为tree设置根节点 
tree.setRootNode(rootnode); 
tree.render(); 
tree.on('click',function(node,event) 
{//查询树的第一个叶子节点 
currentRootNode = node; 
var targetNode = findFirstCheafNode(); 
alert("当前根节点是: "+currentRootNode.text + " 它下面的第一个叶子节点是: " + targetNode.text); 
}); 
});
Javascript 相关文章推荐
简明json介绍
Sep 28 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
javascript的数组和常用函数详解
May 09 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
JavaScript实现消消乐的源代码
Jan 12 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
浅谈JavaScript浅拷贝和深拷贝
Nov 07 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 Javascript
JavaScript 基于原型的对象(创建、调用)
Oct 16 #Javascript
JavaScript 定义function的三种方式小结
Oct 16 #Javascript
JavaScript 函数式编程的原理
Oct 16 #Javascript
实现JavaScript中继承的三种方式
Oct 16 #Javascript
显示js对象所有属性和方法的函数
Oct 16 #Javascript
半角全角相互转换的js函数
Oct 16 #Javascript
JavaScript 三种创建对象的方法
Oct 16 #Javascript
You might like
农民C键的运用技巧
2020/03/04 星际争霸
用文本作数据处理
2006/10/09 PHP
深入了解php4(1)--回到未来
2006/10/09 PHP
介绍php设计模式中的工厂模式
2008/06/12 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python创建和使用字典实例详解
2013/11/01 Python
自己使用总结Python程序代码片段
2015/06/02 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Python如何快速实现分布式任务
2017/07/06 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python numpy元素的区间查找方法
2018/11/14 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
中文专业毕业生自荐书范文
2014/01/04 职场文书
给女儿的表扬信
2014/01/18 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
环境卫生倡议书
2014/08/29 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫