jquery recursively iterates through XML files, forming Ul-li sequences, spanning tree structures (using the TreeView plugin)

The TreeView plug-in is obtained from here, the downloaded file has the demo, see the Demo folder inside the index.html file is almost know how to use the control, in my project to use the part of the Code as follows (refer to the following JS file before referring to the jquery file):

<DivID= "Project_list1">                        <ulID= "Browser"class= "Filetree">                            <Li><spanclass= "folder">Folder 1</span>                                <ul>                                    <Li><spanclass= "File">Item 1.1</span></Li>                                </ul>                            </Li>                            <Li><spanclass= "folder">Folder 2</span>                                <ul>                                    <Li><spanclass= "folder">Subfolder 2.1</span>                                        <ulID= "Folder21">                                            <Li><spanclass= "File">File 2.1.1</span></Li>                                            <Li><spanclass= "File">File 2.1.2</span></Li>                                        </ul>                                    </Li>                                    <Li><spanclass= "File">File 2.2</span></Li>                                </ul>                            </Li>                        </ul>                          </Div>

Remember to set the style to "Project_list1".

Then use jquery to get data,data as an XML file from the server using $.post:

First get the child node unit from data with jquery, because the data I want to work with is the child node of the unit, and the resulting XML file ensures that there is only one unit node, first adding a node with content of Project_Name, and then starting to add additional files based on this node. Refrest_project_item is the core content of this secondary talk:

functionRefresh_project_item (parent,p_div) {$ (parent). Children (). each (function(n,value) {varUL = $ ("<ul></ul>");        $ (P_div). APPEND (UL); //if the label is <dir name= "* * *" ></dir>        if( This. TagName = = "Dir"){            varLi = $ ("<li></li>"); $ (LI). Append ("<span class=\" Folder\ ">" +$ ( This). attr ("name") + "</span>"). APPENDTO (UL); Refresh_project_item ( This, Li); }Else{//labeled <file name= "* * *"/>,file must be a leaf node            varLi = $ ("<li></li>"); $ (LI). Append ("<span class=\" file\ ">" +$ ( This). attr ("name") + "</span>"). APPENDTO (UL);        }    }); }

Finally, a tree is formed, but remember to add the following to the function that calls Refrest_project_item :

// a TreeView control is required to process a new list            $ ("#browser"). TreeView ();

This is the same as the JS code in the first diagram. If not processed, the result is inconsistent with expectations.

Finally, attach part of the server-side XML file (related to the content of this secondary processing):

<Unit>            <dirname= "Dir1">                <dirname= "Dir2">                    <dirname= "Dir3"/>                </dir>                <dirname= "DIR4">                    <filename= "File1"/>                </dir>            </dir>            <filename= "File2"/>        </Unit>    

The final result diagram is as follows:

References are: http://www.verydemo.com/demo_c110_i4405.html and http://www.cnblogs.com/akingyao/archive/2013/01/16/2862553.html

jquery recursively iterates through XML files, forming Ul-li sequences, spanning tree structures (using the TreeView plugin)