jquery递归遍历xml文件,形成ul-li序列,生成树结构(使用了treeview插件)
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插件)的更多相关文章
- 问题:jQuery中遍历XML文件时候,获取子节点children不支持的情况(已解决)
问题描述: 今天在写一个基于 jquery 的读取xml文件的程序时候,需要遍历xml的节点. 代码片段如下: function parse_xml_node(parent,result){ // r ...
- 递归遍历XML节点属性和属性值
public static XmlDocument FileMergedIntoXML(string strXmlPathPublic) { string strXmlPathPublic = str ...
- C#遍历XML文件动态加载菜单
通过遍历XML文件动态加载菜单,顺便利用WebBrowser控件实现一个简单的桌面浏览器 效果如下: 代码如下: XMLFile1.xml <?xml version="1.0&quo ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery ajax解析xml文件demo
解析xml文件,然后将城市列表还原到下拉列表框中:当选择下拉列表框时,在对应的文本框中显示该城市信息. 前端代码: <!doctype html> <html> <hea ...
- 【转】循环递归遍历XML文档或按某要求遍历XML文档
<?xml version="1.0" encoding="UTF-8"?> <catalog> <cd> <titl ...
- [java开发篇][dom4j模块] 遍历xml文件
http://blog.csdn.net/chenleixing/article/details/44353491 在android studio 导入dom4j库(build-gradle(Moud ...
- 递归遍历XML所有节点
package xml; import org.dom4j.Document; import org.dom4j.DocumentHelper; import org.dom4j.DocumentEx ...
- Ant中批量调用TestNG的XML文件,并调用TestNgXlst生成漂亮的html测试报告
from:http://blog.csdn.net/bwgang/article/details/7865184 1.在Ant中设置如下: <target name="run_test ...
随机推荐
- 黄聪:如何开启IIS7以上的“IIS6管理兼容性”
护卫神PHP套件的安装,需要开启“IIS6管理兼容性”, 那么,如何开启IIS7.IIS7.5.IIS8.0的IIS6兼容模式呢? 设置的时候,请参照如下截图:
- 黄聪:WordPress 多站点建站教程(七):多站点函数
1.get_blog_details(获取子站点信息) 返回多站点博客信息即wp_blogs表. //显示站点名称 $blog_details = get_blog_details(1); echo ...
- BIP_开发案例09_结合JavaCP通过BIP API输出报表dataprocess / rtfprocess / foprocess(案例)
20150814 Created By BaoXinjian
- NeHe OpenGL教程 第三十二课:拾取游戏
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- DrawTools(画图工具)原始版本
上一篇文章一个优秀的C#开源绘图软件 DrawTools中详细的介绍了DrawTools的几种演化的较高版本的软件的特色与功能. 这篇文章,将介绍一下这款软件的成名版本, 下载地址DrawTool_O ...
- python (16) 如何在linux下安装lxml(pip安装,ubuntu下,centos下)
首先需要明白lxml包依赖其他包,必须先安装其他包然后再安装lxml 安装python-pip:方便安装python的第三方包 [root@******/]# wget https://bootstr ...
- redis info命令详解
以一种易于解释(parse)且易于阅读的格式,返回关于 Redis 服务器的各种信息和统计数值. 通过给定可选的参数 section ,可以让命令只返回某一部分的信息: server : 一般 Red ...
- IT项目管理
IT项目管理是项目管理在IT领域的应用,结合IT行业特点运用项目管理技术.理念和方法,包括9大知识领域(项目综合.范围.时间.成本.质量.人力资源.沟通.风险和采购管理)以及启动.计划.实施.控制和收 ...
- Jmeter+jenkins接口性能测试平台实践整理(一)
最近两周在研究jmeter+Jenkin的性能测试平台测试dubbo接口,分别尝试使用maven,ant和Shell进行构建,jmeter相关设置略. 一.Jmeter+jenkins+Shell+t ...
- 最大公约数Greatest Common Divisor(GCD)
一 暴力枚举法 原理:试图寻找一个合适的整数i,看看这个整数能否被两个整形参数numberA和numberB同时整除.这个整数i从2开始循环累加,一直累加到numberA和numberB中较小参数的一 ...