源代码:
<!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 src="http://jquery.bassistance.de/treeview/jquery.treeview.async.js" type="text/javascript"></script> <script type="text/javascript"> function initTrees() { $("#black").treeview({ url: "http://jquery.bassistance.de/treeview/demo/source.php" }) $("#mixed").treeview({ url: "http://jquery.bassistance.de/treeview/demo/source.php", // 添加一些额外的、动态的数据，并通过 POST 请求 ajax: { data: { "additional": function() { return "yeah: " + new Date; } }, type: "post" } }); } $(document).ready(function(){ initTrees(); $("#refresh").click(function() { $("#black").empty(); $("#mixed").empty(); initTrees(); }); }); </script> </head> <body> <h1 id="banner">jQuery Treeview 插件 - 异步树</h1> <div id="main"> <h4>延迟加载树</h4> <ul id="black"> </ul> <h4>预加载+延迟加载</h4> <ul id="mixed"> <li><span>Item 1</span> <ul> <li><span>Item 1.0</span> <ul> <li><span>Item 1.0.0</span></li> </ul> </li> <li><span>Item 1.1</span></li> </ul> </li> <li id="36" class="hasChildren"> <span>Item 2</span> <ul> <li><span class="placeholder"> </span></li> </ul> </li> <li> <span>Item 3</span> </li> </ul> <button id="refresh">刷新两棵树</button> </div> </body></html>
运行结果：