搜尋
首頁web前端js教程利用Ext Js生成动态树实例代码_javascript技巧

一. 需求

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

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

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

三. 代码示例

1. 先看一下测试页面

复制代码 代码如下:




Reorder TreePanel

















现在要生成一颗动态树







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;ivar 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...哈哈

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
深入探讨Linux ext2文件系统的物理存储结构深入探讨Linux ext2文件系统的物理存储结构Mar 14, 2024 pm 09:06 PM

Linuxext2文件系统是一种在大部分Linux操作系统上使用的文件系统,它采用了一种高效的磁盘存储结构来管理文件和目录的存储。在深入探讨Linuxext2文件系统的物理存储结构之前,我们首先需要了解一些基本概念。在ext2文件系统中,数据存储在数据块(block)中,数据块是文件系统中最小的可分配单位。每个数据块有固定的大小,通常为1KB、2KB或4

js字符串转数组js字符串转数组Aug 03, 2023 pm 01:34 PM

js字符串转数组的方法:1、使用“split()”方法,可以根据指定的分隔符将字符串分割成数组元素;2、使用“Array.from()”方法,可以将可迭代对象或类数组对象转换成真正的数组;3、使用for循环遍历,将每个字符依次添加到数组中;4、使用“Array.split()”方法,通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。

js中new操作符做了哪些事情js中new操作符做了哪些事情Nov 13, 2023 pm 04:05 PM

js中new操作符做了:1、创建一个空对象,这个新对象将成为函数的实例;2、将新对象的原型链接到构造函数的原型对象,这样新对象就可以访问构造函数原型对象中定义的属性和方法;3、将构造函数的作用域赋给新对象,这样新对象就可以通过this关键字来引用构造函数中的属性和方法;4、执行构造函数中的代码,构造函数中的代码将用于初始化新对象的属性和方法;5、如果构造函数中没有返回等等。

用JavaScript模拟实现打字小游戏!用JavaScript模拟实现打字小游戏!Aug 07, 2022 am 10:34 AM

这篇文章主要为大家详细介绍了js实现打字小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

php可以读js内部的数组吗php可以读js内部的数组吗Jul 12, 2023 pm 03:41 PM

php在特定情况下可以读js内部的数组。其方法是:1、在JavaScript中,创建一个包含需要传递给PHP的数组的变量;2、使用Ajax技术将该数组发送给PHP脚本。可以使用原生的JavaScript代码或者使用基于Ajax的JavaScript库如jQuery等;3、在PHP脚本中,接收传递过来的数组数据,并进行相应的处理即可。

js是什么编程语言?js是什么编程语言?May 05, 2019 am 10:22 AM

js全称JavaScript,是一种具有函数优先的轻量级,直译式、解释型或即时编译型的高级编程语言,是一种属于网络的高级脚本语言;JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式,如函数式编程。

js原生选择器有哪些js原生选择器有哪些Oct 16, 2023 pm 03:42 PM

js原生选择器有getElementById()、getElementsByClassName()、getElementsByTagName()、querySelector()和querySelectorAll()等。详细介绍:1、getElementById()通过元素的唯一标识符来选择元素,它返回具有指定ID的元素作为结果等等。

分析Linux ext2文件系统的物理组织方式分析Linux ext2文件系统的物理组织方式Mar 15, 2024 am 09:24 AM

Linuxext2文件系统是Linux操作系统中常用的文件系统之一,具有较好的性能和稳定性。本文将会详细分析ext2文件系统的物理组织方式,并提供一些具体的代码示例来帮助读者更好地理解。一、ext2文件系统概述ext2文件系统是Linux系统上最早期的第二代扩展文件系统,它在文件系统的性能、可靠性和稳定性上做了一定的改进。它主要由超级块、组描

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!