JavaScript Tree directory for XML

Javascript|xml

Many places will use the tree directory, such as CSDN forum list, such code also has a lot, but a lot of people are copycat, do not do a do-it-yourself, below I will share with you how to do an XML to do the data source of the Treemenu. From there you will see a lot of useful JS scripts and page elements that are important but often overlooked by our attribute usage.

Step1, what's the treemenu look like when you finish it?

JS script dynamically generated HTML outline, this is dynamically generated, the page source code does not

<div id= "mydiv" > <span class= "Hasitems" id= "Csxmltree" style= "margin-left:0px" text= "root directory" expanding= "true" target treeid> root directory </span><br> <span style= "Display:none"><span class=" Hasitems "id=" Csxmltree "style=" margin-left:16px "text=" Directory 1 "expanding=" false "target treeId=" 1000 "> Directory 1</span><br> <span class= "Items" id= "Csxmltree" style= "margin-left:32px" text= "Directory 1.1" expanding= "false" target Treeid= "2000" Href= "Javascript:alert (this.innerhtml);" > Directory 1.1</span><br> <span class= "Items" id= "Csxmltree" style= "margin-left:32px" text= "Directory 1.2" expanding= "false" target= "_blank" treeId= "2001" href= "1.htm" > Directory 1.2</span><br> <span class= "Hasitems" id= "Csxmltree" style= "margin-left:16px" text= "Directory 2" expanding= "false" target Treeid= "3000" > Directory 2</span><br> <span class= "Items" id= "Csxmltree" style= "margin-left:32px" text= "Directory 2.1" expanding= "false" target treeid= "3001" > Directory 2.1</span><br> <span class= "Items" id= "Csxmltree" style= "margin-left:32px" text= "Directory 2.2" expanding= "false" target treeid= "3002" > Directory 2.2</span><br> <span class= "Items" id= "Csxmltree" style= "margin-left:32px" text= "directory 2.3" expanding= "false" target treeid= "3003" > Directory 2.3</span><br> <span class= "Items" id= "Csxmltree" style= "margin-left:32px" text= "directory 2.3" expanding= "false" target treeid= "3004" > Directory 2.3</span><br> <span class= "Hasitems" id= "Csxmltree" style= "margin-left:16px" text= "Directory 3" expanding= "false" target treeid= "4000" > Directory 3</span><br> <span class= "Items" id= "Csxmltree" style= "margin-left:32px" text= "directory 3.1" expanding= "false" target treeid= "4001" > Directory 3.1</span><br> <span class= "Items" id= "Csxmltree" style= "margin-left:16px" text= "Directory 4" expanding= "false" target Treeid= "5000" > Directory 4</span><br> </span> </div>

Does the code above look messy? In fact, you can see the structure by pasting it into the code of a visual tool such as FP. In fact, is very simple, is the span Web page tag to generate a nested structure. The main purpose of the JS script we're going to write is to read the XML file and build this structure. So this is the key, you must understand. You may want to save it as a Web page to see the effect (note that the copy is intact, you can only display the "root" one, you need to change the blue place, remove none), in addition to the Red Div Other are JS script dynamically generated. Class= "Items" and class= "Hasitems" are style forms similar to this one:

. Hasitems {font-weight:bold;height:20px;padding:3 6 0 6;margin:2px;cursor:hand;color: #555555; border:1px solid #fffffa;} . Items{height:20px;padding:3 6 0 6;margin:1px;cursor:hand;color: #555555; border:1px solid #fffffa;}

Looking at the yellow part of the style sheet, you can see that the tree structure is based on this definition of the left margin to achieve the effect, by tightening the different amounts, so that it will be very clear to construct the trees.

The next script to write is to construct the HTML code for the above mentioned points in a certain way. Let's get to the bottom of this, we'll start!!!