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

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.