jquery遞歸遍歷xml文件，形成ul-li序列，生成樹結構(使用了treeview插件)

treeview插件從這里獲得，下載的文件中有demo，看demo文件夾里面的index.html文件就差不多知道如何使用該控件了，在我做的項目里用到的部分代碼截圖如下(在引用下面的js文件前要先引用jquery文件）：

 

<div id="project_list1">
                        <ul id="browser" class="filetree">
                            <li><span class="folder">Folder 1</span>
                                <ul>
                                    <li><span class="file">Item 1.1</span></li>
                                </ul>
                            </li>
                            <li><span class="folder">Folder 2</span>
                                <ul>
                                    <li><span class="folder">Subfolder 2.1</span>
                                        <ul id="folder21">
                                            <li><span class="file">File 2.1.1</span></li>
                                            <li><span class="file">File 2.1.2</span></li>
                                        </ul>
                                    </li>
                                    <li><span class="file">File 2.2</span></li>
                                </ul>
                            </li>
                        </ul>          
                </div>

記得給“project_list1“設置樣式.

接着使用jquery通過$.post從服務器獲得data,data為xml文件：

首先用jquery從data中獲得子節點unit，因為我要處理的數據是unit的子節點，得到的xml文件是確保了只有一個unit節點；首先添加了內容為project_name的節點，然后開始根據此節點來添加其他文件，refrest_project_item為本次要說的核心內容：

function refresh_project_item(parent,p_div){
    $(parent).children().each( function(n,value){
        var ul = $("<ul></ul>");
        $(p_div).append(ul);
        //如果標簽為<dir name="***"></dir>
        if(this.tagName == "dir"){
            var li = $("<li></li>");
            $(li).append("<span class=\"folder\">"+$(this).attr("name") + "</span>")
            .appendTo(ul);
            refresh_project_item(this,li);
        }else{//標簽為<file name="***"/>，file一定是葉子節點
            var li = $("<li></li>");
            $(li).append("<span class=\"file\">"+$(this).attr("name") + "</span>")
            .appendTo(ul);
        }
    });
        
}

最后就形成了一棵樹，但是要記得在調用refrest_project_item的函數后面加上這樣一句:

//需要treeview控件處理一下新的列表
            $("#browser").treeview();

這個與第一個圖中的js代碼是一樣的。如果不處理，結果與預期不一致。

最后附上服務器端的xml文件的部分內容（與本次要處理的內容相關的）：

<unit>
            <dir name="dir1">
                <dir name="dir2">
                    <dir name="dir3"/>
                </dir>
                <dir name="dir4">
                    <file name="file1"/>
                </dir>
            </dir>
            <file name="file2"/>
        </unit>    

最后的結果圖如下：

 

參考資料為：http://www.verydemo.com/demo_c110_i4405.html 和 http://www.cnblogs.com/akingyao/archive/2013/01/16/2862553.html