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插件)的更多相关文章

  1. 问题:jQuery中遍历XML文件时候,获取子节点children不支持的情况(已解决)

    问题描述: 今天在写一个基于 jquery 的读取xml文件的程序时候,需要遍历xml的节点. 代码片段如下: function parse_xml_node(parent,result){ // r ...

  2. 递归遍历XML节点属性和属性值

    public static XmlDocument FileMergedIntoXML(string strXmlPathPublic) { string strXmlPathPublic = str ...

  3. C#遍历XML文件动态加载菜单

    通过遍历XML文件动态加载菜单,顺便利用WebBrowser控件实现一个简单的桌面浏览器 效果如下: 代码如下: XMLFile1.xml <?xml version="1.0&quo ...

  4. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery ajax解析xml文件demo

    解析xml文件,然后将城市列表还原到下拉列表框中:当选择下拉列表框时,在对应的文本框中显示该城市信息. 前端代码: <!doctype html> <html> <hea ...

  6. 【转】循环递归遍历XML文档或按某要求遍历XML文档

    <?xml version="1.0" encoding="UTF-8"?> <catalog> <cd> <titl ...

  7. [java开发篇][dom4j模块] 遍历xml文件

    http://blog.csdn.net/chenleixing/article/details/44353491 在android studio 导入dom4j库(build-gradle(Moud ...

  8. 递归遍历XML所有节点

    package xml; import org.dom4j.Document; import org.dom4j.DocumentHelper; import org.dom4j.DocumentEx ...

  9. Ant中批量调用TestNG的XML文件,并调用TestNgXlst生成漂亮的html测试报告

    from:http://blog.csdn.net/bwgang/article/details/7865184 1.在Ant中设置如下: <target name="run_test ...

随机推荐

  1. php获取从百度搜索进入网站的关键词

    <?php function search_word_from() { $referer = isset($_SERVER['HTTP_REFERER'])?$_SERVER['HTTP_REF ...

  2. sql server中的左连接与右连接的简便写法

    左连接 *=(左表中的数据全部显示出来,右表中没有相关联的数据显示null) select Users.*,Department.name as DepartmentName from Users,D ...

  3. java.lang.StackOverflowError: stack size 8MB

    java.lang.StackOverflowError: stack size 8MB at android.text.TextUtils.getChars(TextUtils.java:86) a ...

  4. PLSQL_性能优化系列18_Oracle Explain Plan解析计划通过Baseline绑定

    2015-05-28 Created By BaoXinjian

  5. js方法收藏

    1.验证非负数字 //onfocusout="checkQty(this);" function checkQty(obj) { //排除0开头的非法输入 if (obj.valu ...

  6. Java多线程之后台线程

    将线程设置成后台线程Daemons 主线程结果后,后台线程将自动结果. package wzh.test; import java.util.concurrent.TimeUnit; class Si ...

  7. (Delphi) Windows 32 API程序设计目录

    这里所有程序均使用Delphi调用Windows 32 API方式实现,并不是使用VCL已经封装好的类实现的! (一)第一个窗口程序 01 创建第一个窗口.

  8. 使用Topshelf 5步创建Windows 服务 z

    使用Topshelf创建Windows 服务简要的介绍了创建Windows服务的另一种方法,老外的一篇文章Create a .NET Windows Service in 5 steps with T ...

  9. What is the difference between <%, <%=, <%# and -%> in ERB in Rails?

    http://stackoverflow.com/questions/998979/difference-between-and-in-rails/25617607#25617607 http://s ...

  10. C#下的Redis 学习

    Redis作为世界上最快的分布式NoSQL的数据存储,在高性能构架中离不开他的身影 Centos下安装Redis wget http://download.redis.io/redis-stable. ...