利用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 相关文章推荐
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
浅析javascript函数表达式
Feb 10 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
用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
PHP中构造函数和析构函数解析
2014/10/10 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
Python中input和raw_input的一点区别
2014/10/21 Python
Python创建模块及模块导入的方法
2015/05/27 Python
python占位符输入方式实例
2019/05/27 Python
Python自定义一个异常类的方法
2019/06/27 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
如何提高SQL Server的安全性
2016/07/25 面试题
工厂会计员职责
2014/02/06 职场文书
个人实习生的自我评价
2014/02/16 职场文书
学前班评语大全
2014/05/04 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
Selenium浏览器自动化如何上传文件
2022/04/06 Python