Tip: you can modify some code before running
<htm><head></head><body><div id="treeArea"></div><script language="javascript">Function Node (parentId, id, openStatus, text, url, color) {this. parentId = parentId; // idthis of the parent node. id = id; // its own idthis. href = url; this. color = color; this. openStatus = openStatus; // The current open status this. haveChild = false; // this attribute is added to determine whether a node has a subnode. this is not displayed by default. text = text; // displayed text information} // defines an array to save all nodes, including the root Node ), you can also use other methods to save var arrTree = new Array (); // to make it easier to create a node, define the following function: function createNode (p ArentId, id, openStatus, text, url, color) {// check whether the input parentId exists. If the input parentId does not exist, an error is displayed. // checkParent (parentId ); // check whether the input id already exists. If yes, I will not write it here // checkId (id ); // Set the parentId to have a subnode if (parentId>-1) {if (! ArrTree [parentId]. hasChild) arrTree [parentId]. hasChild = true;} var node = new Node (parentId, id, openStatus, text, url, color); arrTree [arrTree. length] = node;}/*-1 is defined as the parent node of the root node, and such a node does not exist. Therefore, when the parent node of the node is-1, when the current node is identified, the parent node */createNode (-1/* comment above */, 0/* node id */, true/* Close */, "ExtJs2.02 instance tutorial", '', 'green'); createNode (0, 1, true," 1. extJs introduction "); createNode (0, 2, true," 2. grid (Grids) "); createNode (0, 3, true," 3. tag (tabs) "); cr EateNode (0, 4, true, "4. form (Windows) "); createNode (0, 5, true," 5. tree (Trees) "); createNode (0, 6, true," 6. layout Manager "); createNode (0, 7, true," 7. comboBox "); createNode (0, 8, true," 8. form (Forms) "); createNode (0, 9, true," 9. toolbar and menu "); createNode (0, 10, true," 10. other categories "); createNode (1, 11, false," 1.1 ExtJs Introduction "," http://onlyaa.com/html/project/extjs/200805/21-2146.html "," blue "); createNode (1, 12, false," 1.2 Ext Js entry "); createNode (2, 21, false," 2.1 Basic Array Grid "); createNode (2, 22, false, "2.2 XML Grid"); createNode (2, 23, false, "2.3 JSON Grid (JSON Grid)"); createNode (2, 24, false, "2.4 Editable Grid)"); createNode (2, 25, false, "2.5 Paging"); createNode (2, 26, false, "2.6 Grouping"); createNode (2, 27, false, "2.7 Live Group Summary"); createNode (2, 28, false, "2.8 customization: Grid insertion Mizing: Grid Plugins "); createNode (3, 31, false," 3.1 Basic Tabs "); createNode (3, 32, false, "3.2 real-time Tag"); createNode (4, 41, false, "4.1 Hello World"); createNode (4, 42, false, "4.2 dialog box (MessageBox )"); createNode (4, 43, false, "4.3 Layout Window"); createNode (5, 51, false, "5.1 Drag and Drop Reordering )"); createNode (5, 52, false, "5.2 Multi-tree (Multiple trees)"); createNode (5, 53, false, "5.3 Customization: Column Tree"); createNode (6, 61, false, "6.1 region Layout (Border Layout)"); createNode (6, 62, false, "6.2 Fixed Layout (Anchor Layout)"); createNode (6, 63, false, "6.3 customization: Portal website (portmizing: Portals)"); createNode (7, 71, false, "7.1 Basic ComboBox"); createNode (7, 72, false, "7.2 customization: ComboBox template (commizing: ComboBox Templates )"); createNode (8, 81, false, "8.1 Dynamic Forms (Dynamic Forms)"); createNode (8, 82, false, "8.2 XML Forms generated by AJAX (Ajax with XML Forms)"); createNode (8, 83, false, "8.3 customization: Search box (Customizing: Search Field) "); createNode (9, 91, false," 9.1 Basic Toolbar "); createNode (9, 92, false," 9.2 Ext action (Ext Actions) "); createNode (10,101, false," 10.1 Data View (DataView) "); createNode (10,102, false," 10.2 Data View (Advanced DataView) "); createNode (10,103, false, "Progress Bar 10.3"); createNode (10, 104, false, "10.4 template (Templates)"); createNode (10,105, false, "10.5 panel (Panels)"); createNode (10,106, false, "10.6 Resizable");/* a tree is created but not displayed. The following shows how to display the tree: the method may be clumsy, don't be surprised .... Display Tree // this idea is easy to understand, that is, starting from the root node, find the child node of the root node in the arrTree array and display it, here we use a recursive method to traverse each tree. Because of the simple structure, the algorithm efficiency is not considered. */function doRender () {var r = appendNode (0) treeArea. appendChild (r);} // AppendNode (node), which loads the child node of the node into the container, that is, the div object function appendNode (id) {node = arrTree [id] var id = node. id; var area = document. createElement ("div"); var expand = document. createElement ("span"); var textNode = document. createElement ("span"); var subarea = document. createElement ("div"); var str = ''if (node. href) {str + = ''+ node. text + '';} else {if (node. color) str + ='<font color="'+node.color+'">'+ Node. text +'</font>'; Elsestr = node. text;} textNode. innerHTML = str; expand. style. fontFamily = 'fixedsys '; expand. style. cursor = 'hand'; expand. style. color = 'red'; expand. style. padding = '5px '; expand. innerText = '-'; subarea. style. paddingLeft = '30px '; subarea. style. lineHeight = '2'; if (! Node. openStatus) {subarea. style. display = 'none';} area. style. padding = '4px '; area. appendChild (expand); area. appendChild (textNode); area. appendChild (subarea); if (node. hasChild) {expand. innerText = '+'; if (node. openStatus) {expand. innerText = '-';} expand. onclick = function () {if (subarea. style. display = '') {node. openStatus = false; this. innerHTML = '+'; subarea. style. display = 'none';} else {node. openStatus = true; this. innerHTML = '-'; subarea. style. display = '';} for (var I = 1/* because the root node is at 0, search for */; I <arrTree. length; I ++) {if (arrTree [I]. parentId = id) {var c = appendNode (I); subarea. appendChild (c) ;}}return area; // returns the div object, which contains the subtree information} doRender ();</script></body></html>
Tip: you can modify some code before running
