层序遍历在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 相关文章推荐
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
js实现五星评价功能
Mar 08 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 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遍历文件夹与子目录的函数代码
2011/09/26 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
初识php MVC
2014/09/10 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
Python中Django发送带图片和附件的邮件
2017/03/31 Python
在keras中实现查看其训练loss值
2020/06/16 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
优秀教师获奖感言
2014/01/31 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
2015小学师德工作总结
2015/07/21 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
golang语言指针操作
2022/04/14 Golang