簡易樹狀目錄網頁

引用jsTree套件,製作樹狀目錄效果

引用 -->資料 -->事件,簡單易用

<html>
  <head>
  <title>jsTree Test</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <!-- 引用JS & CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

  </head>
  <body>
  <div id="jstree_demo_div"></div>

  <script type="text/javascript">
    //資料
    $('#jstree_demo_div').jstree({ 'core' : {
      'data' : [
          { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
          { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
          { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
          { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
        ]
    } });
    
    //事件
    $('#jstree_demo_div').on("changed.jstree", function (e, data) {
      console.log(data.selected);
    });
  </script>
  </body>
</html>