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