利用Ext Js生成动态树实例代码


Posted in Javascript onSeptember 08, 2008

一. 需求

要求生成一颗部门树,初始只列出根部门
当点击一个部门节点时,动态载入该部门下的直属子部门,并展开该部门节点
部门节点要求支持右键单击事件,当点击右键时,列出相关操作菜单
二. 关键类

这里主要涉及Ext JS的两个类:

Ext.tree.TreeNode
Ext.menu.Menu
相关API可以参考:http://extjs.com/deploy/ext/docs/

三. 代码示例

1. 先看一下测试页面

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Reorder TreePanel</title> 
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> 
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="../../ext-all.js"></script> 
<script type="text/javascript" src="reorder.js"></script> 
<!-- Common Styles for the examples --> 
<link rel="stylesheet" type="text/css" href="../shared/examples.css" /> 
<link rel="stylesheet" type="text/css" href="../shared/lib.css" /> 

<script type="text/javascript"> 
/************** 
onload事件 
***************/ 
window.onload=function(){ 
createTree(3); 
} 
</script> 

</head> 
<body> 
<script type="text/javascript" src="../shared/examples.js"></script> 
<h1>现在要生成一颗动态树</h1> 
<div id="container"> 
</div> 
</body> 
</html>

2. 再看一下生成树的函数
/*********************************** 
创建树 
by chb 
************************************/ 
function createTree(n){ 
Ext.QuickTips.init(); 
var mytree=new Ext.tree.TreePanel({ 
el:"container", 
animate:true, 
title:"Extjs动态树", 
collapsible:true, 
enableDD:true, 
enableDrag:true, 
rootVisible:true, 
autoScroll:true, 
autoHeight:true, 
width:"30%", 
lines:true 
}); 
//根节点 
var root=new Ext.tree.TreeNode({ 
id:"root", 
text:"集团公司", 
expanded:true 
}); 

for(var i=0;i<n;i++){ 
var sub1=new Ext.tree.TreeNode({ 
id:i+1, 
text:"子公司"+(i+1), 
singleClickExpand:true, 
listeners:{ 
//监听单击事件 
"click":function(node){ 
myExpand(node); 
}, 
//监听右键 
"contextmenu":function(node,e){ 
//列出右键菜单 
menu=new Ext.menu.Menu([ 
{ 
text:"打开当前节点", 
icon:"list.gif", 
handler:function(){ 
myExpand(node); 
} 
}, 
{ 
text:"编辑当前节点", 
icon:"list.gif", 
handler:function(){ 
alert(node.id); 
} 
}, 
{ 
text:"删除当前节点", 
icon:"list.gif", 
handler:function(){ 
alert(node.id); 
} 
}]); 
//显示在当前位置 
menu.showAt(e.getPoint()); 
} 
} 
}); 
root.appendChild(sub1); 
} 
mytree.setRootNode(root);//设置根节点 
mytree.render();//不要忘记render()下,不然不显示哦 
}

3. 展开子节点的代码
/****************************************** 
展开节点 
******************************************/ 
function myExpand(node){ 
if(node.id=='1'){ 
if(node.item(0)==undefined){ 
node.appendChild(new Ext.tree.TreeNode({ 
id:node.id+'1', 
text:node.text+"的第一个儿子", 
hrefTarget:"mainFrame", 
listeners:{//监听 
"click":function(node,e){ 
expand2(node) 
} 
} 
})); 
} 
node.expand(); 

}else if(node.id=='2'){ 
node.appendChild(new Ext.tree.TreeNode({ 
id:node.id+'2', 
text:node.text+"的第一个儿子", 
hrefTarget:"mainFrame", 
listeners:{//监听 
"click":function(node){ 
expand2(node) 
} 
} 
})); 
}else{ 
alert(node.id+"没有子部门了"); 
} 
}

读者可以自己运行一下如上代码,会发现如下现象:无论点击“子公司1”多少次,只会列出“子公司1的第一个儿子”一个节点,而每点击一次“子公司2”,就会多出一个“子公司2的第一个儿子”节点,这是为什么呢?

因为每次点击都会激发myExpand函数,而“子公司1”上加了node.item(0)==undefined的判断,这里明白了?
即:如果该部门下没有子部门,则载入子部门,否则只展开,不重新载入。

好了,就到这里吧,困了,就不详细解释了o(∩_∩)o...哈哈

Javascript 相关文章推荐
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
javascript 写类方式之五
Jul 05 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
js+css实现红包雨效果
Jul 12 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 #Javascript
Javascript条件判断使用小技巧总结
Sep 08 #Javascript
SyntaxHighlighter代码加色使用方法
Sep 07 #Javascript
很多人都是用下面的js刷新站IP和PV
Sep 05 #Javascript
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 #Javascript
IE浏览器PNG图片透明效果代码
Sep 02 #Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 #Javascript
You might like
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
Vue中computed与methods的区别详解
2018/03/24 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
python列表的常用操作方法小结
2016/05/21 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
python实现指定ip端口扫描方式
2019/12/17 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
机械设计专业应届生求职信
2013/11/21 职场文书
无房证明范本
2014/09/17 职场文书
求职信范文怎么写
2015/03/19 职场文书
教师调动申请报告
2015/05/18 职场文书
赢在执行观后感
2015/06/16 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android