jquery递归遍历xml文件，形成ul-li序列，生成树结构(使用了treeview插件)

浏览数：395 / 时间：2015年06月09日

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>