<SCRIPT type = "text/JavaScript"> Ext. onready (function () {// tree structure // create a tree: var tree = new Ext. tree. treepanel ({El: 'tree'} // indicates the ID of the rendered Dom. <Div id = "Tree"> </div> corresponds to the last tree in this Div position.) // create the root node: var root = new Ext. tree. treenode ({text: 'shandong '}); tree. setrootnode (Root); // Add the root node to the tree tree. render (); // render the tree // Add branches var node1 = new Ext. tree. treenode ({text: 'jinan '}); var node11 = new Ext. tree. treenode ({text: 'shizugu '}); var node12 = new Ext. tree. treenode ({text: 'zhangqiu City '}); var node2 = new Ext. tree. treenode ({text: 'qingdao '}); var node21 = new Ext. tree. treenode ({text: 'huangdao region'}); var node22 = new Ext. tree. treenode ({text: 'chengyang district '}); var node3 = new Ext. tree. treenode ({text: 'zibo '}); var node31 = new Ext. tree. treenode ({text: 'yiyuan'}); var node32 = new Ext. tree. treenode ({text: 'zhangdian'}); var node33 = new Ext. tree. treenode ({text: 'boshan '}); root. appendchild (node1); root. appendchild (node2); root. appendchild (node3); node1.appendchild (node11); node1.appendchild (node12); node2.appendchild (node21); region (node22); region (node31); node3.appendchild (node32); node3.appendchild (node33 ); root. expand (True, true); // expand the tree immediately after loading}); </SCRIPT>
<2> Use treeloader to load data:
<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}]Note: <SCRIPT type = "text/JavaScript" src = "localxhr. js"> </SCRIPT>
Download localxhr. JS: Click to open the link
<3> tree events
// Add the event listening tree. on ("expandnode", function (node) {Ext. MSG. alert (node + "expanded") ;}); tree. on ("collapsenode", function (node) {Ext. MSG. alert (node + "Collapsed") ;}); tree. on ("click", function (node) {Ext. MSG. alert ("You clicked" + node) ;}); tree. on ("dblclick", function (node) {Ext. MSG. alert ("You double-clicked" + node );});Alert () cannot trigger the double-click event.
<4> right-click a menu
<HTML><5> modify the default icon of a node
<HTML><6> slave node dialog box
Tree. on ('click', function (node) {Ext. MSG. show ({Title: 'hprompt ', MSG:' You clicked '+ node, animel: node. UI. textnode });});<7> node prompt information
<HTML><8> set a hyperlink for a node
VaR node32 = new Ext. Tree. treenode ({text: 'zhangdian', href: 'treeevent monitoring .html ', hreftarget:' _ blank '});<9> directly modify the tree node name
// You only need to create a treeeditor and put treepanel in it. 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
