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. 关于mac mini组装普液晶显示器

    申请了好久的mac mini,部门终于给买下来了.没想到,买回来之后的组装还是折腾了我们一把.  因为先前没用过mac mini,以为它和普通的台式机一样,买回来就能直接到显示器上用了.结果买回来ma ...

  2. Oracle远程数据库一直连接不上的原因:多了个空格

  3. opencv,关于物体检测

    关于物体检测 环境:opencv 2.4.11+vs2013 参考: http://www.cnblogs.com/tornadomeet/archive/2012/06/02/2531705.htm ...

  4. poj 3040 Allowance

    Allowance Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 1842   Accepted: 763 Descript ...

  5. andriod_入门一

    [小技巧] 1.背景图片文件名不能以数字开头,必须以字母开头. 2.如果按钮被背景图被遮住,可以在relativelayout里拖动控件,把背景拖到最上方: [异常] 1. 在用LinearLayou ...

  6. jdk与jre的区别

    很多程序员已经干了一段时间java了依然不明白jdk与jre的区别.JDK就是Java Development Kit.简单的说JDK是面向开发人员使用的SDK,它提供了Java的开发环境和运行环境. ...

  7. 控制WIFI状态

    1.控制WIFI public class MainActivity extends Activity { private Button startButton = null; private But ...

  8. 在Virtual Box虚拟机中安装MS DOS!

    原文地址:https://mylinuxramblings.wordpress.com/2010/12/05/linux-mint-debian-edition-lmde-first-impressi ...

  9. windows service的继承类ServiceBase

    https://msdn.microsoft.com/zh-cn/library/system.serviceprocess.servicebase.exitcode(v=vs.80).aspx 在停 ...

  10. db link的查看创建与删除

    1.查看dblink select owner,object_name from dba_objects where object_type='DATABASE LINK'; 或者 select * ...