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 ...
随机推荐
- php获取从百度搜索进入网站的关键词
<?php function search_word_from() { $referer = isset($_SERVER['HTTP_REFERER'])?$_SERVER['HTTP_REF ...
- sql server中的左连接与右连接的简便写法
左连接 *=(左表中的数据全部显示出来,右表中没有相关联的数据显示null) select Users.*,Department.name as DepartmentName from Users,D ...
- java.lang.StackOverflowError: stack size 8MB
java.lang.StackOverflowError: stack size 8MB at android.text.TextUtils.getChars(TextUtils.java:86) a ...
- PLSQL_性能优化系列18_Oracle Explain Plan解析计划通过Baseline绑定
2015-05-28 Created By BaoXinjian
- js方法收藏
1.验证非负数字 //onfocusout="checkQty(this);" function checkQty(obj) { //排除0开头的非法输入 if (obj.valu ...
- Java多线程之后台线程
将线程设置成后台线程Daemons 主线程结果后,后台线程将自动结果. package wzh.test; import java.util.concurrent.TimeUnit; class Si ...
- (Delphi) Windows 32 API程序设计目录
这里所有程序均使用Delphi调用Windows 32 API方式实现,并不是使用VCL已经封装好的类实现的! (一)第一个窗口程序 01 创建第一个窗口.
- 使用Topshelf 5步创建Windows 服务 z
使用Topshelf创建Windows 服务简要的介绍了创建Windows服务的另一种方法,老外的一篇文章Create a .NET Windows Service in 5 steps with T ...
- What is the difference between <%, <%=, <%# and -%> in ERB in Rails?
http://stackoverflow.com/questions/998979/difference-between-and-in-rails/25617607#25617607 http://s ...
- C#下的Redis 学习
Redis作为世界上最快的分布式NoSQL的数据存储,在高性能构架中离不开他的身影 Centos下安装Redis wget http://download.redis.io/redis-stable. ...