在做网页项目作业的过程中，使用了 treeview.js插件，插件是自己新接触的，现在项目完成了，在这里总结一下插件的用法。
treeview.js是一个根据固定的元素嵌套格式生成树状菜单的插件，而且不会限制嵌套层数，生成的树状菜单可以不断有下层菜单，网上找到的其他插件一般都会有嵌套层数限制。
嵌套格式如下：
1 <ul id="tree" class="filetree"> 2 ?????????<li><span class="folder">文件夹1</span> 3 ?????????????<ul> 4 ?????????????????<li><span class="folder">子文件夹1</span></li> 5 ?????????????????<li><span class="folder">子文件夹2</span> 6 ?????????????????????<ul> 7 ?????????????????????????<li><span class="folder">子文件夹3</span></li> 8 ?????????????????????????<li><span class="file">文件1</span></li> 9 ?????????????????????</ul>10 ?????????????????</li>11 ?????????????</ul>12 ?????????</li>13 </ul>
外层ul 的类为"filetree"，是插件中规定的写法，这样会把ul中的内容转为树状菜单的元素放入原来的ul中。ul中初始元素的写法如以上代码所示，每一级菜单由li
包含span元素，span元素可以分为两种：
一种是floder，表明此级是文件夹，可以在其下面加入ul，在ul元素内写入本级文件夹下的内容，每个菜单下ul元素可以有多个；
另一种是file，表明此级是文件，下面也不能再扩展子结构。
两种转换后在功能上有所不同，folder类可以通过点击打开合并，file没有这种功能。
当所有结构写好后，可以调用以下代码可以将其转换为树状菜单：
1 $("#tree").treeview();上述代码显示结果如下，代码显示结果并不美观，建议自己编写css进行美化，可以保证网站风格一致。
treeview.js也支持通过添加cookie的方法，保持每级菜单的展开状态，但我本身对cookie研究不多，这里只介绍在treeview.js中的应用，先创建一个cookie，然后通过在treeview函数中添加参数的方法使用cookie。
$.cookie(‘usertreeState‘);$("#user_tree").treeview({ ??cookieId : "usertreeState", ??cookieOptions : { ?????path : ‘/‘ ??}});treeview函数中可以添加的参数有很多，在很多大牛的博客中都有详细说明，这里就不做介绍了。
因为treeview.js是根据写好的结构生成的树状结构，所以可以根据一些内容先生成基本结构，再调用函数生成树状菜单，以下是我的项目中根据json字符串生成树状菜单的代码（data为json字符串）：
1 var d = eval("(" + data + ")"); 2 var root = document.createElement("ul"); 3 $(root).attr("id", "user_root"); 4 var container = new Object();//放置结点的容器，便于找到要操作的结点 5 var pathes = d["pathes"]; 6 ???$.each(pathes,function(i, record) { 8 ????????????var path = record["path"]; 9 ????????????var nodes = path.split(‘>‘);10 ????????????var last_node = (nodes[nodes.length - 1].split(‘*‘))[0];11 ????????????var pdf_or_url = (nodes[nodes.length - 1].split(‘*‘))[1];12 ????????????nodes[nodes.length - 1] = last_node;13 ????????????var pre_node_name = "";14 ????????????var cur_node_name = "";15 ????????????for (var j = 0; j < nodes.length; j++) {16 ??????????????if (j == 0) {17 ????????????????cur_node_name = nodes[j];18 ??????????????} else {19 ????????????????cur_node_name = pre_node_name + ">" + nodes[j];20 ??????????????}21 ??????????????if (container[cur_node_name + "folders"] == undefined && j == 0) {//处理第一个结点，而且第一个结点不在容器中的情况，创建结点放入容器中22 ????????????????var li = document.createElement("li");23 ????????????????var span = document.createElement("span");24 ????????????????var text = document.createTextNode(nodes[j]);25 ????????????????container[cur_node_name + "folders"] = document.createElement("ul");27 ????????????????container[cur_node_name + "files"] = document.createElement("ul");29 ????????????????$(container[cur_node_name + "folders"]).attr("id",cur_node_name + "folders");31 ????????????????$(container[cur_node_name + "files"]).attr("id",cur_node_name + "files");33 ????????????????span.appendChild(text);34 ????????????????$(span).attr("class", "folder");35 ????????????????$(span).attr("id", "usertree_folder");36 ????????????????li.appendChild(span);37 ????????????????$(li).attr("class", "closed");38 ????????????????li.appendChild(container[cur_node_name + "folders"]);39 ????????????????li.appendChild(container[cur_node_name + "files"]);40 ????????????????$(root).prepend(li);41 ????????????????pre_node_name = cur_node_name;42 ??????????????} else if (container[cur_node_name + "folders"] == undefined) {//结点不存在时，创建一个新的结点放入容器中，每个结点下有两个ul43 ????????????????var li = document.createElement("li");44 ????????????????var span = document.createElement("span");45 ????????????????var text = document.createTextNode(nodes[j]);46 ????????????????container[cur_node_name + "folders"] = document.createElement("ul");48 ????????????????container[cur_node_name + "files"] = document.createElement("ul");50 ????????????????$(container[cur_node_name + "folders"]).attr("id",cur_node_name + "folders");52 ????????????????$(container[cur_node_name + "files"]).attr("id",cur_node_name + "files");54 ????????????????span.appendChild(text);55 ????????????????$(span).attr("class", "folder");56 ????????????????$(span).attr("id", "usertree_folder");57 ????????????????li.appendChild(span);58 ????????????????$(li).attr("class", "closed");59 ????????????????li.appendChild(container[cur_node_name + "folders"]);60 ????????????????li.appendChild(container[cur_node_name + "files"]);61 ????????????????$(container[pre_node_name + "folders"]).prepend(li);62 ????????????????pre_node_name = cur_node_name;63 ??????????????} else {64 ????????????????pre_node_name = cur_node_name;//更换操作结点65 ??????????????}66 ????????????}67 ????????????if (pdf_or_url != undefined) {68 ??????????????var li = document.createElement("li");69 ??????????????var span = document.createElement("span");70 ??????????????var text = document.createTextNode(pdf_or_url);71 ??????????????span.appendChild(text);72 ??????????????$(span).attr("class", "file");73 ??????????????$(span).attr("id", "usertree_file");74 ??????????????li.appendChild(span);75 ??????????????container[pre_node_name + "files"].appendChild(li);76 ????????????}77 ??????})
79 ??????$(root).appendTo("#user_tree");//将生成元素放入jsp中的对应ul中，调用函数生成菜单
81 ??????$.cookie(‘usertreeState‘);82 ??????$("#user_tree").treeview({83 ????????persist : "cookie",84 ????????cookieId : "usertreeState",85 ????????cookieOptions : {86 ??????????path : ‘/‘87 ????????},88 ????????collapsed : "true",89 ????????add : root90 ??????});使用的json字符串格式如下，">"用来表示文件夹分级结构，"*"用来表示文件。
{"pathes" :[{"path": "opop>oldl>lll"},{"path": "a>b>c>d*1111.pdf"},{"path": "a>b>c>d*2222.pdf"},{"path": "a>y>c>d*1111.pdf"},{"path": "a>y>c>d*2222.pdf"},{"path": "a>b>c>e*eeee.pdf"}, {"path": "a>b>c*cccc.pdf"}, {"path": "a>b*bbbb.pdf"},{"path": "j"},{"path": "j>b*bbbb.pdf"}]}使用treeview.js插件生成树状菜单方法的简单介绍（附通过json字符串生成菜单的代码）
原文地址：http://www.cnblogs.com/nothing970/p/8040252.html