引用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>