zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大長處。

——zTree官網

• zTree v3.0 將核心代碼依照功能進行了切割，不須要的代碼能夠不用載入
• 採用了 延遲載入 技術，上萬節點輕松載入，即使在 IE6 下也能基本做到秒殺
• 兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
• 支持 JSON 數據
• 支持靜態 和 Ajax 異步載入節點數據
• 支持隨意更換皮膚 / 自己定義圖標（依靠css）
• 支持極其靈活的 checkbox 或 radio 選擇功能
• 提供多種事件響應回調
• 靈活的編輯（增/刪/改/查）功能，可隨意拖拽節點。還能夠多節點拖拽喲
• 在一個頁面內可同一時候生成多個 Tree 實例
• 簡單的參數配置實現 靈活多變的功能

以上特點，也是來自官網。

因為項目須要，開始接觸zTree。個人感覺。事實上它最大的長處：zTree是中國人寫的，有著很很具體的中文API。像我這樣的菜鳥，看看API。大概就知道怎麽弄了。

zTree分為三大塊：setting 配置。zTree 方法。treeNode 節點數據。見名知義，不多說了。主要說說他的核心部分。

核心：zTree(setting, [zTreeNodes])
這個函數接受一個JSON格式的數據對象setting和一個JSON格式的數據對象zTreeNodes。從而建立 Tree。

核心參數：setting
zTree 的參數配置都在這裏完畢。簡單的說：樹的樣式、事件、訪問路徑等都在這裏配置
setting 舉例:

var setting = { 
    showLine: true, 
    checkable: true 
}; 

核心參數：zTreeNodes

①帶有父子關系的標準 zTreeNodes 舉例:

var zTreeNodes = [ 
    {"id":1, "name":"test1", "nodes":[ 
      {"id":11, "name":"test11", "nodes":[ 
        {"id":111, "name":"test111"} 
      ]}, 
      {"id":12, "name":"test12"} 
    ]}, 
    ...... 
]; 

var treeNodes = [                                                                       
    {"id":1, "pId":0, "name":"test1"}, 
    {"id":11, "pId":1, "name":"test11"}, 
    {"id":12, "pId":1, "name":"test12"}, 
    {"id":111, "pId":11, "name":"test111"}, 
    ...... 
]; 

光說不練嘴把式，來看一個簡單的小demo:

①在頁面引用zTree的js和css：

<!-- ZTree樹形插件 -->
<link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css" type="text/css">
<!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css">  -->
<script type="text/javascript" src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>

var setting = {
		isSimpleData : true,              //數據是否採用簡單 Array 格式，默認false
		treeNodeKey : "id",               //在isSimpleData格式下，當前節點id屬性
		treeNodeParentKey : "pId",        //在isSimpleData格式下，當前節點的父節點id屬性
		showLine : true,                  //是否顯示節點間的連線
		checkable : true                  //每一個節點上是否顯示 CheckBox
	};

var treeNodes = [ 
    {"id":1, "pId":0, "name":"test1"}, 
    {"id":11, "pId":1, "name":"test11"}, 
    {"id":12, "pId":1, "name":"test12"}, 
    {"id":111, "pId":11, "name":"test111"}, 
]; 

$(function() {
	zTree = $("#tree").zTree(setting, treeNodes);
 });

總

僅僅要弄清了zTree的核心部分。是如此so easy的。

後緒將進一步深入。從後臺獲取簡單格式Json數據，異步載入……

zTree初體驗（一）——小試牛刀