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. 黄聪:如何开启IIS7以上的“IIS6管理兼容性”

    护卫神PHP套件的安装,需要开启“IIS6管理兼容性”, 那么,如何开启IIS7.IIS7.5.IIS8.0的IIS6兼容模式呢? 设置的时候,请参照如下截图:

  2. 黄聪:WordPress 多站点建站教程(七):多站点函数

    1.get_blog_details(获取子站点信息) 返回多站点博客信息即wp_blogs表. //显示站点名称 $blog_details = get_blog_details(1); echo ...

  3. BIP_开发案例09_结合JavaCP通过BIP API输出报表dataprocess / rtfprocess / foprocess(案例)

    20150814 Created By BaoXinjian

  4. NeHe OpenGL教程 第三十二课:拾取游戏

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  5. DrawTools(画图工具)原始版本

    上一篇文章一个优秀的C#开源绘图软件 DrawTools中详细的介绍了DrawTools的几种演化的较高版本的软件的特色与功能. 这篇文章,将介绍一下这款软件的成名版本, 下载地址DrawTool_O ...

  6. python (16) 如何在linux下安装lxml(pip安装,ubuntu下,centos下)

    首先需要明白lxml包依赖其他包,必须先安装其他包然后再安装lxml 安装python-pip:方便安装python的第三方包 [root@******/]# wget https://bootstr ...

  7. redis info命令详解

    以一种易于解释(parse)且易于阅读的格式,返回关于 Redis 服务器的各种信息和统计数值. 通过给定可选的参数 section ,可以让命令只返回某一部分的信息: server : 一般 Red ...

  8. IT项目管理

    IT项目管理是项目管理在IT领域的应用,结合IT行业特点运用项目管理技术.理念和方法,包括9大知识领域(项目综合.范围.时间.成本.质量.人力资源.沟通.风险和采购管理)以及启动.计划.实施.控制和收 ...

  9. Jmeter+jenkins接口性能测试平台实践整理(一)

    最近两周在研究jmeter+Jenkin的性能测试平台测试dubbo接口,分别尝试使用maven,ant和Shell进行构建,jmeter相关设置略. 一.Jmeter+jenkins+Shell+t ...

  10. 最大公约数Greatest Common Divisor(GCD)

    一 暴力枚举法 原理:试图寻找一个合适的整数i,看看这个整数能否被两个整形参数numberA和numberB同时整除.这个整数i从2开始循环累加,一直累加到numberA和numberB中较小参数的一 ...