利用Ext Js生成動(dòng)態(tài)樹實(shí)例代碼
要求生成一顆部門樹,初始只列出根部門
當(dāng)點(diǎn)擊一個(gè)部門節(jié)點(diǎn)時(shí),動(dòng)態(tài)載入該部門下的直屬子部門,并展開該部門節(jié)點(diǎn)
部門節(jié)點(diǎn)要求支持右鍵單擊事件,當(dāng)點(diǎn)擊右鍵時(shí),列出相關(guān)操作菜單
二. 關(guān)鍵類
這里主要涉及Ext JS的兩個(gè)類:
Ext.tree.TreeNode
Ext.menu.Menu
相關(guān)API可以參考:http://extjs.com/deploy/ext/docs/
三. 代碼示例
1. 先看一下測(cè)試頁(yè)面
<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>現(xiàn)在要生成一顆動(dòng)態(tài)樹</h1>
<div id="container">
</div>
</body>
</html>
2. 再看一下生成樹的函數(shù)
/***********************************
創(chuàng)建樹
by chb
************************************/
function createTree(n){
Ext.QuickTips.init();
var mytree=new Ext.tree.TreePanel({
el:"container",
animate:true,
title:"Extjs動(dòng)態(tài)樹",
collapsible:true,
enableDD:true,
enableDrag:true,
rootVisible:true,
autoScroll:true,
autoHeight:true,
width:"30%",
lines:true
});
//根節(jié)點(diǎn)
var root=new Ext.tree.TreeNode({
id:"root",
text:"集團(tuán)公司",
expanded:true
});
for(var i=0;i<n;i++){
var sub1=new Ext.tree.TreeNode({
id:i+1,
text:"子公司"+(i+1),
singleClickExpand:true,
listeners:{
//監(jiān)聽單擊事件
"click":function(node){
myExpand(node);
},
//監(jiān)聽右鍵
"contextmenu":function(node,e){
//列出右鍵菜單
menu=new Ext.menu.Menu([
{
text:"打開當(dāng)前節(jié)點(diǎn)",
icon:"list.gif",
handler:function(){
myExpand(node);
}
},
{
text:"編輯當(dāng)前節(jié)點(diǎn)",
icon:"list.gif",
handler:function(){
alert(node.id);
}
},
{
text:"刪除當(dāng)前節(jié)點(diǎn)",
icon:"list.gif",
handler:function(){
alert(node.id);
}
}]);
//顯示在當(dāng)前位置
menu.showAt(e.getPoint());
}
}
});
root.appendChild(sub1);
}
mytree.setRootNode(root);//設(shè)置根節(jié)點(diǎn)
mytree.render();//不要忘記render()下,不然不顯示哦
}
3. 展開子節(jié)點(diǎn)的代碼
/******************************************
展開節(jié)點(diǎn)
******************************************/
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+"的第一個(gè)兒子",
hrefTarget:"mainFrame",
listeners:{//監(jiān)聽
"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+"的第一個(gè)兒子",
hrefTarget:"mainFrame",
listeners:{//監(jiān)聽
"click":function(node){
expand2(node)
}
}
}));
}else{
alert(node.id+"沒(méi)有子部門了");
}
}
讀者可以自己運(yùn)行一下如上代碼,會(huì)發(fā)現(xiàn)如下現(xiàn)象:無(wú)論點(diǎn)擊“子公司1”多少次,只會(huì)列出“子公司1的第一個(gè)兒子”一個(gè)節(jié)點(diǎn),而每點(diǎn)擊一次“子公司2”,就會(huì)多出一個(gè)“子公司2的第一個(gè)兒子”節(jié)點(diǎn),這是為什么呢?
因?yàn)槊看吸c(diǎn)擊都會(huì)激發(fā)myExpand函數(shù),而“子公司1”上加了node.item(0)==undefined的判斷,這里明白了?
即:如果該部門下沒(méi)有子部門,則載入子部門,否則只展開,不重新載入。
好了,就到這里吧,困了,就不詳細(xì)解釋了o(∩_∩)o...哈哈
- Div+CSS+JS樹型菜單,可刷新
- 利用Dojo和JSON建立無(wú)限級(jí)AJAX動(dòng)態(tài)加載的功能模塊樹
- js樹形控件腳本代碼
- JSP 動(dòng)態(tài)樹的實(shí)現(xiàn)
- jsTree樹控件(基于jQuery, 超強(qiáng)悍)[推薦]
- 選擇TreeView控件的樹狀數(shù)據(jù)節(jié)點(diǎn)的JS方法(jquery)
- Extjs入門之動(dòng)態(tài)加載樹代碼
- JS無(wú)限樹狀列表實(shí)現(xiàn)代碼
- 一個(gè)簡(jiǎn)單的js樹形菜單
- Extjs中ComboBoxTree實(shí)現(xiàn)的下拉框樹效果(自寫)
- JS無(wú)限極樹形菜單,json格式、數(shù)組格式通用示例
- 用JS做的簡(jiǎn)單的可折疊的兩級(jí)樹形菜單
- 使用js簡(jiǎn)單實(shí)現(xiàn)了tree樹菜單
- 動(dòng)態(tài)加載dtree.js樹treeview(示例代碼)
- JS+CSS實(shí)現(xiàn)TreeMenu二級(jí)樹形菜單完整實(shí)例
- JS+CSS實(shí)現(xiàn)類似QQ好友及黑名單效果的樹型菜單
- js實(shí)現(xiàn)無(wú)限級(jí)樹形導(dǎo)航列表效果代碼
- 純javascript響應(yīng)式樹形菜單效果
相關(guān)文章
JS實(shí)現(xiàn)簡(jiǎn)單加減購(gòu)物車效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單加減購(gòu)物車效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08如何實(shí)現(xiàn)chrome瀏覽器關(guān)閉頁(yè)面時(shí)彈出“確定要離開此面嗎?”
這篇文章主要介紹了如何實(shí)現(xiàn)chrome瀏覽器關(guān)閉頁(yè)面時(shí)彈出“確定要離開此面嗎?”的方法以及相關(guān)資料,需要的朋友可以參考下2015-03-03javascript form 驗(yàn)證函數(shù) 彈出對(duì)話框形式
javascript合法驗(yàn)證 js數(shù)據(jù)驗(yàn)證、js email驗(yàn)證、js url驗(yàn)證、js長(zhǎng)度驗(yàn)證、js數(shù)字驗(yàn)證等(彈出對(duì)話框形式)2009-06-06如何通過(guò)遞歸方法實(shí)現(xiàn)用json-diff渲染json字符串對(duì)比結(jié)果
JsonDiff是一個(gè)高性能json差異發(fā)現(xiàn)工具,它幾乎可以發(fā)現(xiàn)任何JSON結(jié)構(gòu)的差異,并且將錯(cuò)誤信息反饋給用戶,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)遞歸方法實(shí)現(xiàn)用json-diff渲染json字符串對(duì)比結(jié)果的相關(guān)資料,需要的朋友可以參考下2022-12-12cnblogs 代碼高亮顯示后的代碼復(fù)制問(wèn)題解決實(shí)現(xiàn)代碼
cnblogs是比較有名的技術(shù)博客基地,很多技術(shù)達(dá)人都在里面發(fā)布技術(shù)文章, 不過(guò)由于代碼不利于復(fù)制,因?yàn)轫?yè)面里面有pre標(biāo)簽等問(wèn)題2011-12-12在layui框架中select下拉框監(jiān)聽更改事件的例子
今天小編就為大家分享一篇在layui框架中select下拉框監(jiān)聽更改事件的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09javascript中獲取元素標(biāo)簽中間的內(nèi)容的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇javascript中獲取元素標(biāo)簽中間的內(nèi)容的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10原生js實(shí)現(xiàn)查找/添加/刪除/指定元素的class
查找、添加、刪除、指定元素的class使用原生js實(shí)現(xiàn)不可思議吧,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04