标签：
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
jquery递归遍历xml文件，形成ul-li序列，生成树结构(使用了treeview插件)
标签：
原文地址：http://www.cnblogs.com/Shirlies/p/4260725.html
