Ztree樹形選單使用入門
Ztree屬性選單使用入門
ztree簡介
zTree 是一個依靠 jQuery 實現的多功能 “樹外掛”。優異的效能、靈活的配置、多種功能的組合是 zTree 最大優點。
zTree 是開源免費的軟體（MIT 許可證）。如果您對 zTree 感興趣或者願意資助 zTree 繼續發展下去，可以進行捐助。
zTree v3.0 將核心程式碼按照功能進行了分割，不需要的程式碼可以不用載入
採用了 延遲載入 技術，上萬節點輕鬆載入，即使在 IE6 下也能基本做到秒殺
相容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
支援 JSON 資料
支援靜態 和 Ajax 非同步載入節點資料
支援任意更換面板 / 自定義圖示（依靠css）
支援極其靈活的 checkbox 或 radio 選擇功能
提供多種事件響應回撥
靈活的編輯（增/刪/改/查）功能，可隨意拖拽節點，還可以多節點拖拽喲
在一個頁面內可同時生成多個 Tree 例項
簡單的引數配置實現 靈活多變的功能
二、ztree引入
http://www.treejs.cn/v3/main.php#_zTreeInfo
以上為官網連結，免費使用。
注意：使用這個要依賴JQuery，版本要大於等於下載下來的JQuery版本。
步驟 1、檔案準備
將需要使用的 zTree v3.x 相關的 js、css、img 檔案分別放置到相應目錄，並且保證相對路徑正確
步驟 2、編寫 html 頁面
按照以下程式碼，製作 html 頁面，訪問試試看吧，注意：
1) “” 是必需的！
2) zTree 的容器 className 別忘了設定為 “ztree”
<!DOCTYPE html> json物件與json字串的區別
1）JSON 物件是滿足 JSON 資料格式的 JS 物件
例如： {name:”abc”}
最正規的 JSON 資料是連屬性名稱都要被包括起來的
例如： {“name”:”abc”}
（2）JSON 格式的字串的關鍵問題– 它僅僅是一個字串，只不過滿足了 JSON 的資料格式
例如：’{“name”:”abc”}’
看到兩個例子的對比了嗎？顯而易見，關鍵問題就出在外面這兩個單引號上。
關於非同步載入
關於非同步載入
1、什麼是非同步載入？
這個問題與 zTree 無關，但必須要解釋一下，因為很多初學者都在這個問題上犯糊塗。
準確的說應該是：“什麼是 AJAX ?”– AJAX 即“Asynchronous JavaScript and XML”（非同步JavaScript和XML)；AJAX 是一種技術，可以在不影響當前頁面的情況下與後臺服務端進行通訊，獲取相應的資料。更多的解釋大家可以去網上搜索一下。
2、非同步載入的特性
請注意最前面的兩個字 “非同步”，與他類似還有一個詞 “同步”，顧名思義“同步”就是前面的語句不執行完就不會執行後面的語句，“非同步”就不一樣了，發起非同步請求後，不管是否得到結果，都不影響當前程式碼的後續執行。
經常有朋友問：“非同步載入模式下，初始化 zTree 以後為什麼無法得到全部節點資料？”、“非同步載入模式下，初始化 zTree 以後為什麼無法使用 expandAll 方法將全部節點展開 ？”等等類似的問題，看了前面的解釋，應該明白了吧？當你發起非同步請求後，程式碼會立刻去執行 getNodes 方法 或 expandAll 方法，這時候非同步載入的資料還未收到，當然操作就失效了。所以你會發現當你先 alert 一下，會發現又一切正常了– 就是這個原因。
所以，對於非同步載入模式下，需要在獲取節點後處理的事情，儘量利用 onAsyncSuccess / onAsyncError 事件回撥函式去處理，這樣才能保證非同步載入正常完畢後執行你需要的操作。
利用 setTimeout 舉個非同步的例子，對照著執行看看吧：
//No.1
var a = 1;
a++;
var b = a;
alert(b);
//No.2
var a = 1;
setTimeout(function(){a++;}, 500);
var b = a;
alert(b);
2.頁面中引入在tree
<script type="text/javascript" src="../js/ztree/jquery.ztree.all.min.js" ></script>
<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" />
3.通過ztree製作屬性選單
兩種資料格式：
1）
• 標準的 JSON 資料需要巢狀表示節點的父子包含關係
例如：
var nodes = [
{name: "父節點1", children: [
{name: "子節點1"},
{name: "子節點2"}
]}
];
• 預設展開的節點，請設定 treeNode.open 屬性
• 無子節點的父節點，請設定 treeNode.isParent 屬性
• 其他屬性說明請參考 API 文件中 "treeNode 節點資料詳解"
2）簡單的json資料
在每個節點新增id 和pid，id表示當前節點編號，pid表示父節點編號
第一步：在頁面需要顯示選單的位置，需要新增<ul>設定class為ztree
第二步：在script指令碼中設定 、資料和生成
開啟簡單資料格式的支援 enable：true
第三步：編寫ztree屬性選單資料
zNodes是個陣列。
pId為0則表示第一層。
第四部：生成樹形選單