层序遍历在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 相关文章推荐
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
jQuery each()小议
Mar 18 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
JS + HTML 罗盘式时钟的实现
May 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
php调用mysql存储过程
2007/02/14 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
Python 命令行参数sys.argv
2008/09/06 Python
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
Python实现购物车程序
2018/04/16 Python
python3 logging日志封装实例
2020/04/08 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
使用npy转image图像并保存的实例
2020/07/01 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
历史学专业毕业生求职信
2013/09/27 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
会议活动邀请函
2014/01/27 职场文书
大学生应聘求职信
2014/05/26 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
工会积极分子个人总结
2015/03/03 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android