<script type="text/javascript">Ext.onReady(function(){//樹形結構//建立一棵樹：var tree = new Ext.tree.TreePanel({el:'tree'}//表示渲染的DOM的id.介面中有<div id = "tree"></div>相對應最後這棵樹就出現在這個div位置上);//建立根節點：var root = new Ext.tree.TreeNode({text:'山東'});tree.setRootNode(root);//把根節點添加到樹中tree.render();//對樹進行渲染 //添加枝葉var node1 = new Ext.tree.TreeNode({text:'濟南'});var node11 = new Ext.tree.TreeNode({text:'市中區'});var node12 = new Ext.tree.TreeNode({text:'章丘市'});var node2 = new Ext.tree.TreeNode({text:'青島'});var node21 = new Ext.tree.TreeNode({text:'黃島區'});var node22 = new Ext.tree.TreeNode({text:'城陽區'});var node3 = new Ext.tree.TreeNode({text:'淄博'});var node31 = new Ext.tree.TreeNode({text:'沂源'});var node32 = new Ext.tree.TreeNode({text:'張店'});var node33 = new Ext.tree.TreeNode({text:'博山'});root.appendChild(node1);root.appendChild(node2);root.appendChild(node3);node1.appendChild(node11);node1.appendChild(node12);node2.appendChild(node21);node2.appendChild(node22);node3.appendChild(node31);node3.appendChild(node32);node3.appendChild(node33);root.expand(true,true);//載入後立即展開樹});</script>
<2>使用TreeLoader載入資料：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312"> <title>Tree</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="localXHR.js"></script> <script type="text/javascript">Ext.onReady(function(){var tree = new Ext.tree.TreePanel({el: 'tree',//TreeLoader完成資料轉換和裝配節點的功能loader: new Ext.tree.TreeLoader({dataUrl: '03-03.txt'})});//Ext.tree.TreeNode換成Ext.tree.AsyncTreeNode實現非同步載入效果var root = new Ext.tree.AsyncTreeNode({text:'CHINA'}); tree.setRootNode(root);tree.render();//只展開第一層節點root.expand();//展開全部節點//root.expand(true,true);}); </script> </head> <body> <script type="text/javascript" src="../shared/examples.js"></script> <div id="tree" style="height:300px;"></div> </body></html>
03-03.txt
[ {text:'SHANDONG',children:[{text:'QINGDAO',leaf:true},{text:'ZIBO',children:[{text:'ZHANGDIAN',leaf:true},{text:'YIYUAN',leaf:true}]},{text:'JINAN',leaf:true}]}, {text:'BEIJING',leaf:true}]
注意：<script type="text/javascript" src="localXHR.js"></script>
下載localXHR.js：點擊開啟連結
<3>樹的事件
//添加事件監聽機制tree.on("expandnode",function(node){Ext.Msg.alert(node + "展開了");});tree.on("collapsenode",function(node){Ext.Msg.alert(node + "摺疊了");});tree.on("click",function(node){Ext.Msg.alert("你單擊了" + node);});tree.on("dblclick",function(node){Ext.Msg.alert("你雙擊了" + node);});
alert() 無法觸發雙擊事件。
<4>右鍵菜單
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Ext Buttons</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="../examples.js"></script><script type="text/javascript">Ext.onReady(function(){//樹形結構//建立一棵樹：var tree = new Ext.tree.TreePanel({el:'tree'}//表示渲染的DOM的id.介面中有<div id = "tree"></div>相對應最後這棵樹就出現在這個div位置上);//建立根節點：var root = new Ext.tree.TreeNode({text:'山東'});tree.setRootNode(root);//把根節點添加到樹中tree.render();//對樹進行渲染 //添加枝葉var node1 = new Ext.tree.TreeNode({text:'濟南'});var node11 = new Ext.tree.TreeNode({text:'市中區'});var node12 = new Ext.tree.TreeNode({text:'章丘市'});var node2 = new Ext.tree.TreeNode({text:'青島'});var node21 = new Ext.tree.TreeNode({text:'黃島區'});var node22 = new Ext.tree.TreeNode({text:'城陽區'});var node3 = new Ext.tree.TreeNode({text:'淄博'});var node31 = new Ext.tree.TreeNode({text:'沂源'});var node32 = new Ext.tree.TreeNode({text:'張店'});var node33 = new Ext.tree.TreeNode({text:'博山'});root.appendChild(node1);root.appendChild(node2);root.appendChild(node3);node1.appendChild(node11);node1.appendChild(node12);node2.appendChild(node21);node2.appendChild(node22);node3.appendChild(node31);node3.appendChild(node32);node3.appendChild(node33);//<1>製作自訂菜單var contextmenu = new Ext.menu.Menu({id:'theContextMenu',items:[{text:'添加',handler:function(){alert("還未實現添加功能");}},{text:'刪除',handler:function(){alert("還未實現刪除功能");}},{text:'修改',handler:function(){alert("還未實現修改功能");}}]});//<2>綁定contextMenu事件tree.on('contextMenu',function(node,e){//防止瀏覽器彈出他預設的功能菜單e.preventDefault();//選中當前節點node.select();//在點擊的位置快顯功能表contextmenu.showAt(e.getXY());});});</script></head><body><div id = "tree"></div></body></html>
<5>修改節點的預設表徵圖
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Ext Buttons</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="../examples.js"></script><style type="text/css">.x-tree-node-leaf .icon-male {background-image: url(user_male.png)} </style><script type="text/javascript">/*每個樹形結點都有icon和iconCls屬性，他們負責指定結點的表徵圖。<1>使用icon屬性：var node = new Ext.tree.TreeNode({text:'淄博',icon:'user_female.png'});<2>使用iconCls屬性，我們還需要在HTML中添加對應的CSS定義。var node = new Ext.tree.TreeNode({text:'淄博',iconCls:'icon-male'});<style type="text/css">.x-tree-node-leaf .icon-male {background-image: url(user_male.png)}注意：x-tree-node-leaf .icon-male和代碼中iconCls:'icon-male'相對應。 </style>*/Ext.onReady(function(){//樹形結構//建立一棵樹：var tree = new Ext.tree.TreePanel({el:'tree'}//表示渲染的DOM的id.介面中有<div id = "tree"></div>相對應最後這棵樹就出現在這個div位置上);//建立根節點：var root = new Ext.tree.TreeNode({text:'山東',icon:'user_male.png'});tree.setRootNode(root);//把根節點添加到樹中tree.render();//對樹進行渲染 //添加枝葉var node3 = new Ext.tree.TreeNode({text:'淄博',icon:'user_female.png'});var node31 = new Ext.tree.TreeNode({text:'沂源',icon:'user_female.png'});var node32 = new Ext.tree.TreeNode({text:'張店',icon:'user_female.png'});var node33 = new Ext.tree.TreeNode({text:'博山',iconCls:'icon-male'});root.appendChild(node3);node3.appendChild(node31);node3.appendChild(node32);node3.appendChild(node33);});</script></head><body><div id = "tree"></div></body></html>
<6>從節點彈出對話方塊
tree.on('click',function(node){Ext.Msg.show({title:'提示',msg:'你點擊了'+node,animEl:node.ui.textNode});});
<7>節點提示資訊
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Ext Buttons</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="../examples.js"></script><script type="text/javascript">/*為每個節點添加qtip:'xxxx'屬性。在JavaScript中對Ext的提示功能進行初始化。Ext.QuickTips.init();*/Ext.onReady(function(){Ext.QuickTips.init();//樹形結構//建立一棵樹：var tree = new Ext.tree.TreePanel({el:'tree'}//表示渲染的DOM的id.介面中有<div id = "tree"></div>相對應最後這棵樹就出現在這個div位置上);//建立根節點：var root = new Ext.tree.TreeNode({text:'山東'});tree.setRootNode(root);//把根節點添加到樹中tree.render();//對樹進行渲染 //添加枝葉var node3 = new Ext.tree.TreeNode({text:'淄博',qtip:'中國歷史文化名城，國家園林城市，中國瓷都。曆史文化源遠流長，曾作為山東政治中心近兩千年，有“齊國故都”之稱'});var node31 = new Ext.tree.TreeNode({text:'沂源',qtip:'沂源縣是山東古人類發源地、山東屋脊生態高地、中國北方溶洞之鄉和牛郎織女之鄉'});var node32 = new Ext.tree.TreeNode({text:'張店'});var node33 = new Ext.tree.TreeNode({text:'博山'});root.appendChild(node3);node3.appendChild(node31);node3.appendChild(node32);node3.appendChild(node33);});</script></head><body><div id = "tree"></div></body></html>
<8>為節點設定超連結
var node32 = new Ext.tree.TreeNode({text:'張店',href:'tree事件監聽.html',hrefTarget:'_blank'});
<9>直接修改樹節點名稱
//只要建立一個TreeEditor，再把TreePanel放進去就可以了。var treeEditor = new Ext.tree.TreeEditor(tree,{allowBlank:false});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
