在做网页项目作业的过程中，使用了 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) {//结点不存在时，创建一个新的结点放入容器中，每个结点下有两个ul 43 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 : root 90 });
使用的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"}
]}
