zTree簡介
樹形控件的使用是應(yīng)用開發(fā)過程中不可少的，zTree是一個依靠jQuery實現(xiàn)的多功能“樹插件”，優(yōu)異的性能，靈活的配置，多功能的組合是zTree最大的優(yōu)點。
zTree的特點
?最新版的zTree將核心代碼按照功能進行了分割，不需要的代碼可以不用加載，如普通使用只需要加載核心的jqurey.ztree.exedit-3.5.min.js
?采用了延遲加載技術(shù)，上萬節(jié)點輕松加載，即使在IE6也能基本做到秒殺
?兼容IE、FireFox、Chrome、Opera、Safai 等瀏覽器
?支持JSON數(shù)據(jù)
?支持靜態(tài)和ajax異步加載節(jié)點數(shù)據(jù)
?支持任意更換皮膚/自定義圖標（依靠css）
?v支持極其靈活的checkbox 或 radio 選擇功能
?提供多種事件響應(yīng)回調(diào)
?靈活的編輯(增/刪/改/查)功能，可隨意拖拽節(jié)點，還可以多節(jié)點拖拽
?在一個頁面內(nèi)同時生成多個 Tree 實例
簡單的參數(shù)配置實現(xiàn)，靈活多變的功能
zTree文件介紹
從zTree官網(wǎng)下載的zTree包括以下組件部分
?metroStyle文件夾：zTree的metro風(fēng)格樣式相關(guān)文件（圖片及css樣式表）。
?zTreeStyle文件夾：zTree的標準風(fēng)格樣式文件夾（圖片及css樣式表）
?js文件：zTree.all.js是完整的js庫，可單純加載此文件實現(xiàn)所有zTree功能，ztree.core、ztree.excheck、ztree.exedit、ztree.exhide是對ztree按照功能進行的分割，分別對應(yīng)基本功能、復(fù)選功能、編輯功能、顯隱功能。
zTree的基本使用
1.0 zTree的創(chuàng)建
在頁面中添加對zTree的js及css引用，由于zTree基于JQuery，JQuery的引用是必須的。
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj;
var setting = {}; // zTree 的參數(shù)配置，后面詳解
var zNodes = [ // zTree 的數(shù)據(jù)屬性，此處使用標準json格式
{
name: "test1", open: true, children: [
{ name: "test1_1" }, { name: "test1_2" }]
},
{
name: "test2", open: true, children: [
{ name: "test2_1" }, { name: "test2_2" }]
} ];
$(document).ready(function () {
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); //初始化zTree，三個參數(shù)一次分別是容器(zTree 的容器 className 別忘了設(shè)置為 "ztree")、參數(shù)配置、數(shù)據(jù)源
});
</SCRIPT>
</HEAD>
<BODY>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>
運行結(jié)果如下
