层序遍历在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 相关文章推荐
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
webpack的pitching loader详解
Sep 23 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
vue实现计算器功能
Feb 22 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 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
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
JS实现横向轮播图(初级版)
2020/06/24 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
Mac 上切换Python多版本
2017/06/17 Python
python实现大文本文件分割
2019/07/22 Python
解析python实现Lasso回归
2019/09/11 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
华为python面试题
2016/05/03 面试题
传播学毕业生求职信
2013/10/11 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
环保建议书300字
2014/05/14 职场文书
2014年征兵标语
2014/06/20 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
心灵点滴观后感
2015/06/02 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
MySQL插入数据与查询数据
2022/03/25 MySQL