本章將介紹如何簡單的使用jstree生成樹（生成樹的數據是靜態的），並為樹添加點擊事件。
1. 建一個jsp頁面，引入jquery.js(在其他js前引用)，引入jstree所需的js，css文件（可從官網找）。
2. 在頁面添加一個div，用來在頁面展示樹菜單。
3. 在頁面寫js (js必須寫在頁面最后)。
頁面代碼如下：
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<script src="${ctx}/common/jquery-1.9.1/jquery-1.9.1.js"></script>
<script src="${ctx}/common/dist/jstree.min.js"></script>
<link href="${ctx}/common/dist/themes/default/style.min.css" rel="stylesheet" />
</head>
<body>
<div id='tree1'></div>
<script>
//菜單數據
var data=[{"id":"1","parent":"#","text":"top1"},{"id":"2","parent":"#","text":"top2"},{ "id" : "3", "parent" : "2", "text" : "Child 1"}];
//調取tree方法
tree(data);
function tree(data) {
// var data=eval('(' + data + ')'); //把json字符串轉為json對象
// for(var o in data){ //js遍歷json對象
// alert("id:"+data[o].id+" test:"+data[o].text );
// }
//樹形菜單
$('#tree1')
.on("changed.jstree", function(e, data) {
if (data.selected.length) {alert( data.instance.get_node(data.selected[0]).text);} //輸出點擊的內容
}) //觸發事件
.jstree({'core' : {'data' : data}}); //動態生成tree菜單
}
</script>
</body>
</html>
上篇文章簡單介紹了通過靜態方式生成樹，下面一篇文章將進行動態生成樹。