源代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery Treeview 插件 - 可编辑的树</title> <link rel="stylesheet" href="http://jquery.bassistance.de/treeview/jquery.treeview.css" /> <link rel="stylesheet" href="http://jquery.bassistance.de/treeview/demo/screen.css" /> <script src="http://jquery.bassistance.de/treeview/lib/jquery.js" type="text/javascript"></script> <script src="http://jquery.bassistance.de/treeview/lib/jquery.cookie.js" type="text/javascript"></script> <script src="http://jquery.bassistance.de/treeview/jquery.treeview.js" type="text/javascript"></script> <script src="http://jquery.bassistance.de/treeview/jquery.treeview.edit.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#browser").treeview(); $("#add").click(function() { var branches = $("<li><span class='folder'>New Sublist</span><ul>" + "<li><span class='file'>Item1</span></li>" + "<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser"); $("#browser").treeview({ add: branches }); branches = $("<li class='closed'><span class='folder'>New Sublist</span><ul><li><span class='file'>Item1</span></li><li><span class='file'>Item2</span></li></ul></li>").prependTo("#folder21"); $("#browser").treeview({ add: branches }); }); $("#browser").bind("contextmenu", function(event) { if ($(event.target).is("li") || $(event.target).parents("li").length) { $("#browser").treeview({ remove: $(event.target).parents("li").filter(":first") }); return false; } }); }) </script> </head> <body> <h1 id="banner">jQuery Treeview 插件 - 可编辑的树</h1> <div id="main"> <h4>默认的，右击移除项目</h4> <button id="add">添加！</button> <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> <li class="closed"><span class="folder">Folder 3（开始时是关闭的）</span> <ul> <li><span class="file">File 3.1</span></li> </ul> </li> <li><span class="file">File 4</span></li> </ul> </div> </body> </html>
运行结果：