jstree官网地址：https://www.jstree.com/
入门实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- jstree css样式 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> </head> <body> <!-- 设置容器元素 --> <div id="jstree"> <!-- 在本例中，树是从内联HTML填充的 --> <ul> <li>Root node 1 <ul> <li id="child_node_1">Child node 1</li> <li>Child node 2</li> </ul> </li> <li>Root node 2</li> </ul> </div> <!-- jquery.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <!-- jstree js核心文件 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> <script type="text/javascript"> $(function(){ //当DOM准备好时创建一个jstree实例 $('#jstree').jstree(); }); </script> </body> </html>
效果图
