利用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 相关文章推荐
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
js+css实现导航效果实例
Feb 10 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
js观察者模式的弹幕案例
Nov 23 Javascript
用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 二维数组快速排序算法的实现代码
2017/10/17 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
jQuery select的操作实现代码
2009/05/06 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
Javascript函数的参数
2015/07/16 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
通用C#笔试题附答案
2016/11/26 面试题
体育教育个人自荐信范文
2013/12/01 职场文书
社会实践心得体会
2014/01/03 职场文书
粗加工管理制度
2014/02/04 职场文书
工程师岗位职责规定
2014/02/26 职场文书
公证书标准格式
2014/04/10 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
python基础之类属性和实例属性
2021/10/24 Python
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS