zTree 實際執行畫面

利用 jQuery 框架完成大部分常用的 Tree 功能，相容於 IE7、FireFox、Chrome 等近代的瀏覽器。一個頁面可同時生成多個 Tree 支援 JSON 的資料和一次性靜態生成和 AJAX 異步加載兩總方式，支援 Tree 的節點移動還有可以使用 CSS 更換樣式，還可以極其靈活的使用 Checkbox 的選擇功能還可自訂圖標間單的參數配置靈活多變的功能。

使用方法：
第一步 先載入程式所需要的檔案
//zTree 的基本 CSS 樣式設計
<link rel="stylesheet" href="/css/zTreeStyle/zTreeStyle.css" type="text/css">
//使用Google ajax API 直接連結 jQuery 1.8.2的min版本
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
//zTree 的主程式碼
<script type="text/javascript" src="/js/jquery.ztree.core-3.4.js"></script>

第二步 寫入這一個範例的 CSS 設計樣式
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}
body {color: #2f332a;font: 15px/21px Arial, Helvetica, simsun, sans-serif;background: #f0f6e4 \9;}
h1, h2, h3, h4, h5, h6 {color: #2f332a;font-weight: bold;font-family: Helvetica, Arial, sans-serif;padding-bottom: 5px;}
h1 {font-size: 24px;line-height: 34px;text-align: center;}
h2 {font-size: 14px;line-height: 24px;padding-top: 5px;}
h6 {font-weight: normal;font-size: 12px;letter-spacing: 1px;line-height: 24px;text-align: center;}
a {color:#3C6E31;text-decoration: underline;}
a:hover {background-color:#3C6E31;color:white;}
input.radio {margin: 0 2px 0 8px;}
input.radio.first {margin-left:0;}
input.empty {color: lightgray;}
code {color: #2f332a;}
.highlight_red {color:#A60000;}
.highlight_green {color:#A7F43D;}
li {list-style: circle;font-size: 12px;}
li.title {list-style: none;}
ul.list {margin-left: 17px;}
div.content_wrap {width: 600px;height:380px;}
div.content_wrap div.left{float: left;width: 250px;}
div.content_wrap div.right{float: right;width: 340px;}
div.zTreeDemoBackground {width:250px;height:362px;text-align:left;}
ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
ul.log {border: 1px solid #617775;background: #f0f6e4;width:300px;height:170px;overflow: hidden;}
ul.log.small {height:45px;}
ul.log li {color: #666666;list-style: none;padding-left: 10px;}
ul.log li.dark {background-color: #E3E3E3;}
/* ruler */
div.ruler {height:20px; width:220px; background-color:#f0f6e4;border: 1px solid #333; margin-bottom: 5px; cursor: pointer}
div.ruler div.cursor {height:20px; width:30px; background-color:#3C6E31; color:white; text-align: right; padding-right: 5px; cursor: pointer}

第三步 HTML 部分寫一個位置要放 Tree 選單的部分
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>

第四步 JavaScript 寫入 Tree 選單的內容及建立
var setting = { };
var zNodes =[
{ name:"父節點1 - 展開", open:true,
        children: [
            { name:"父節點11 - 摺疊",
        children: [
            { name:"子節點111"},
            { name:"子節點112"},
            { name:"子節點113"},
            { name:"子節點114"}
        ]},
{ name:"父節點12 - 摺疊",
        children: [
            { name:"子節點121"},
            { name:"子節點122"},
            { name:"子節點123"},
            { name:"子節點124"}
        ]},
            { name:"父節點13 - 没有子節點", isParent:true}
        ]},
            { name:"父節點2 - 摺疊",
        children: [
            { name:"父節點21 - 展開", open:true,
        children: [
            { name:"子節點211"},
            { name:"子節點212"},
            { name:"子節點213"},
            { name:"子節點214"}
        ]},
{ name:"父節點22 - 摺疊",
        children: [
            { name:"子節點221"},
            { name:"子節點222"},
            { name:"子節點223"},
            { name:"子節點224"}
        ]},
{ name:"父節點23 - 摺疊",
        children: [
            { name:"子節點231"},
            { name:"子節點232"},
            { name:"子節點233"},
            { name:"子節點234"}
        ]}
]},
{ name:"父節點3 - 没有子節點", isParent:true}
];
$(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

作者詳細參數與方法請看此連結 
http://www.ztree.me/v3/api.php

作者網站：http://www.ztree.me/
檔案大小：735 KB(包含範例)
檔案下載：http://code.google.com/p/jquerytree/downloads/list
檔案備份：下載