层序遍历在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 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
围观tangram js库
Dec 28 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
js保留两位小数方法总结
Jan 31 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
node中IO以及定时器优先级详解
May 10 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
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
php使用APC实现实时上传进度条功能
2015/10/26 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
9个JavaScript评级/投票插件
2010/01/18 Javascript
layui文件上传实现代码
2017/05/20 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
angularJS开发注意事项
2018/05/26 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
python操作MySQL数据库的方法分享
2012/05/29 Python
Python 字典(Dictionary)操作详解
2014/03/11 Python
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
决策树的python实现方法
2014/11/18 Python
Python通过select实现异步IO的方法
2015/06/04 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
Python join()函数原理及使用方法
2020/11/14 Python
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
C#怎么让一个窗口居中显示?
2015/10/20 面试题
教育专业个人求职信
2013/12/02 职场文书
投标保密承诺书
2014/05/19 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
寒山寺导游词
2015/02/03 职场文书
运动与健康自我评价
2015/03/09 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers