JavaEE項目實戰（OA系統）之十六_ztree之一
在我們的項目中，有多個地方需要用到樹狀視圖。
經過分析和比較，我們選擇了ztree。ztree是一個功能強大的，基于jquery的樹狀視圖插件，參見：http://www.treejs.cn。
在下載下傳軟體包後，解壓，會發現其中有js和css檔案夾，這就是我們需要的。将js和css檔案夾複制到項目WebRoot下相應位置。
下面是示例代碼：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@ taglib
prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>樹狀視圖控件示例1</title>
<script src="../js/ztree/jquery-1.4.4.min.js"></script>
<script src="../js/ztree/jquery.ztree.core.min.js"></script>
<script src="../js/ztree/jquery.ztree.excheck.min.js"></script>
<link type="text/css" rel="stylesheet"
href="../css/ztree/zTreeStyle.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
<script>
var setting = {
view : {
showLine : true,
showIcon : true
},
check : {
enable : true
},
data : {
simpleData : {
enable : true,
idKey : "id",
pIdKey : "pId"
}
}
};
var treeNodes = [ {
id : 0,
pId : -1,
name : "部門管理",
open: true
}, {
id : 1,
pId : 0,
name : "總公司"
}, {
id : 2,
pId : 0,
name : "泉州分公司"
}, {
id : 3,
pId : 0,
name : "廈門分公司"
}, {
id : 4,
pId : 1,
name : "總經理辦公室"
}, {
id : 5,
pId : 1,
name : "财務部"
}, {
id : 6,
pId : 1,
name : "人力資源部"
}, {
id : 7,
pId : 1,
name : "行政部"
}, {
id : 8,
pId : 1,
name : "業務部"
}, {
id : 9,
pId : 1,
name : "技術部"
}, {
id : 10,
pId : 2,
name : "業務部"
}, {
id : 11,
pId : 3,
name : "業務部"
} ];
$(function() {
$.fn.zTree.init($("#ztreeDemo"), setting, treeNodes);
});
</script>
</head>
<body>
<div id="ztreeDemo" class="ztree"></div>
</body>
</html>
運作效果：
下面逐行分析示例代碼：
<script src="../js/ztree/jquery-1.4.4.min.js"></script>
<script src="../js/ztree/jquery.ztree.core.min.js"></script>
<script src="../js/ztree/jquery.ztree.excheck.min.js"></script>
<link type="text/css" rel="stylesheet"
href="../css/ztree/zTreeStyle.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
這幾行代碼導入javascript和樣式表，由于ztree依賴jquery，是以先要導入jquery，ztree.core是ztree核心庫，ztree.excheck是複選框功能庫。
var setting = {
view : {
showLine : true,
showIcon : true
},
check : {
enable : true
},
data : {
simpleData : {
enable : true,
idKey : "id",
pIdKey : "pId"
}
}
};
這部分定義setting變量，指定ztree的配置資訊。可選的配置資訊很多，參見： http://www.treejs.cn/v3/api.php。
其中view部分是視圖，showLine是否顯示連線，showIcon是否顯示圖示；check部分是複選框，enable是否啟用複選框；data部分是資料，simpleData部分的enable是否使用簡單資料，idKey指定id列的名稱，pIdKey指定父id列的名稱。
ztree的節點資料有兩種格式，一種是簡單資料，另一種是JSON格式。本例使用簡單資料。
var treeNodes = [ {
id : 0,
pId : -1,
name : "部門管理",
open: true
}, {
id : 1,
pId : 0,
name : "總公司"
}, {
id : 2,
pId : 0,
name : "泉州分公司"
}, {
id : 3,
pId : 0,
name : "廈門分公司"
}, {
id : 4,
pId : 1,
name : "總經理辦公室"
}, {
id : 5,
pId : 1,
name : "财務部"
}, {
id : 6,
pId : 1,
name : "人力資源部"
}, {
id : 7,
pId : 1,
name : "行政部"
}, {
id : 8,
pId : 1,
name : "業務部"
}, {
id : 9,
pId : 1,
name : "技術部"
}, {
id : 10,
pId : 2,
name : "業務部"
}, {
id : 11,
pId : 3,
name : "業務部"
} ];
這部分是節點資料，在javascript中使用中括号表示數組，使用大括号表示對象，這裡其實是一組對象。每個節點都至少有id、pId和name三個屬性，還可以有url、target、open（是否展開節點）等屬性，參見： http://www.treejs.cn/v3/api.php。
$(function() {
$.fn.zTree.init($("#ztreeDemo"), setting, treeNodes);
});
這部分調用ztree插件的init方法，init方法有三個參數：第一個參數是樹狀視圖展示的位置，一般是一個div，第二個參數是setting，第三個參數是treeNodes，都定義在前面。
![用jQuery實作一個簡易的聊天框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)