前端樹形結構外掛 zTree 使用入門總結
zTree是一款依靠Jquery實現的多功能的“數外掛”，優異的效能、靈活的配置、多種功能的組合是它最大的優點。
zTree v3.0 將核心程式碼按照功能進行了分割，不需要的程式碼可以不用載入；
採用了 延遲載入 技術，上萬節點輕鬆載入，即使在 IE6 下也能基本做到秒殺；
相容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器；
支援 JSON 資料；
支援靜態 和 Ajax 非同步載入節點資料；
支援任意更換面板 / 自定義圖示（依靠css）；
支援極其靈活的 checkbox 或 radio 選擇功能；
提供多種事件響應回撥；
靈活的編輯（增/刪/改/查）功能，可隨意拖拽節點，還可以多節點拖拽喲；
在一個頁面內可同時生成多個 Tree 例項；
簡單的引數配置實現 靈活多變的功能。
1.匯入zTree JS檔案
（Jquery檔案必須匯入）
<link rel="stylesheet" href="....s/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="..../ztree/js/jquery.ztree.all.min.js"></script>
2.簡單樹構建
建立一個jsp頁面：
<body>
<div id="tree" class="ztree"></div>
</body>
（注意：class必須為ztree）
建立js檔案：
var $zTree;
var Nodes = {name:"根節點",open:true,isParent:true,children:{name:"子節點"}}；
var setting ={}；
$zTree = $.fn.zTree.init($("#tree"),setting ,Nodes);
或者
$.fn.zTree.init($("#tree"),setting ,Nodes);
$zTree = $.fn.zTree.getZTreeObj("tree");
到此一顆簡單的樹建立完成。
3.setting配置詳解
var setting = {
/**
*以下兩個引數不必初始化或修改，屬於內部引數。
*treeId：zTree的唯一標識，初始化後，等於使用者定義的zTree容器的id屬性值。
*treeObj：zTree的Jquery物件
*/
treeId："",
treeObj:null,
async：{
//非同步載入時需要自動提交父節點屬性的引數。[setting.async.enable = true 時生效]
autoParam:[],
//Ajax 提交引數的資料型別。[setting.async.enable = true //時生效]預設值："application/x-www-form-urlencoded"
contentType:"application...",
//用於對 Ajax 返回資料進行預處理的函式。[setting.async.enable = true 時生效]
dataFilter:null,
//Ajax 獲取的資料型別。[setting.async.enable = true 時生效]
dataType:"text",
//設定 zTree 是否開啟非同步載入模式
enable:false,
//Ajax 請求提交的靜態引數鍵值對。[setting.async.enable = true 時生效]
otherParam:[],
//Ajax 的 http 請求模式。[setting.async.enable = true 時生效]
type:"post",
//[setting.async.enable = true 時生效]
headers:{},
//[setting.async.enable = true 時生效]
xhrFields:{},
//Ajax 獲取資料的 URL 地址。[setting.async.enable = true 時生效]
url:""
},
check:{
//設定自動關聯勾選時是否觸發beforeCheck、onCheck事件回撥函式。
autoCheckTrigger:true,
//勾選CheckBox對於父子節點的關聯關係，p:影響父級節點;s:影響子級節點
chkboxType:{"Y":"ps","N":"ps"},
//勾選框型別checkbox或radio
chkStyle:"checkbox",
//設定zTree節點上是否顯示checkbox/radio
enable:true,
//當父結點設定nocheck=true時，設定子節點是否自動繼承nocheck=true
oncheckInherit:false,
//當父結點設定chkDisabled=true時，設定子節點是否自動繼承chkDisabled=true.
chkDisabledInherit:false,
//radio分組範圍
radioType:"level"
},
data:{
keep:{
//zTree 的節點葉子節點屬性鎖，是否始終保持 isParent = false
leaf:false,
//zTree 的節點父節點屬性鎖，是否始終保持 isParent = true
parent:false,
}
key:{
//zTree 節點資料中儲存 check 狀態的屬性名稱
checked:"checked",
//zTree 節點資料中儲存子節點資料的屬性名稱。
children:"children",
//zTree 節點資料儲存節點是否為父節點的屬性名稱
isParent:"isParent",
//zTree 節點資料儲存節點是否隱藏的屬性名稱。
isHidden:"isHidden",
//zTree 節點資料儲存節點提示資訊的屬性名稱。[setting.view.showTitle = true 時生效]
//如果設定為 "" ，則自動與 setting.data.key.name 保持一致，避免使用者反覆設定
title:"",
//zTree 節點資料儲存節點名稱的屬性名稱。
name:"name",
//zTree 節點資料儲存節點連結的目標 URL 的屬性名稱。
//特殊用途：當後臺資料只能生成 url //屬性，又不想實現點選節點跳轉的功能時，可以直接修改此屬性為其他不存在的屬性名稱
url:"url"
}
simpleData:{
//確定 zTree 初始化時的節點資料、非同步載入時的節點資料、或 addNodes 方法中輸入的 newNodes //資料是否採用簡單資料模式 (Array)不需要使用者再把資料庫中取出的 List 強行轉換為複雜的 JSON //巢狀格式
enable:false,
//節點資料中儲存唯一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效]
idKey:"id",
//節點資料中儲存其父節點唯一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效]
pIdKey:"pId",
//用於修正根節點父節點資料，即 pIdKey 指定的屬性值。[setting.data.simpleData.enable = true //時生效]
rootPId:null,
}
},
edit:{
drag:{
//拖拽時父節點自動展開是否觸發 onExpand 事件回撥函式。[setting.edit.enable = true 時生效]
autoExpandTrigger:true,
/**
*拖拽時, 設定是否允許複製節點。[setting.edit.enable = true 時生效]
*isCopy = true; isMove = true 時，拖拽節點按下 Ctrl 或 Cmd 鍵表示 copy; 否則為 move
*isCopy = true; isMove = false 時，所有拖拽操作都是 copy
*isCopy = false; isMove = true 時，所有拖拽操作都是 move
*isCopy = false; isMove = false 時，禁止拖拽操作
*/
isCopy:false,
//拖拽時, 設定是否允許移動節點。[setting.edit.enable = true 時生效]
isMove:true,
/**
*pre：拖拽到目標節點時，設定是否允許移動到目標節點前面的操作。[setting.edit.enable = true 時生效]
*next:拖拽到目標節點時，設定是否允許移動到目標節點後面的操作。[setting.edit.enable = true 時生效]
*inner:拖拽到目標節點時，設定是否允許成為目標節點的子節點。[setting.edit.enable = true 時生效]
*拖拽目標是 根 的時候，不觸發 prev 和 next，只會觸發 inner
*此功能主要作用是對拖拽進行適當限制（輔助箭頭），需要結合 prev、next 一起使用，才能實現完整功能。
*/
pre:true,
next:true,
inner:true,
//拖拽節點成為根節點時的 Tree 內邊界範圍 (單位：px)。[setting.edit.enable = true 時生效]
borderMax:10,
//拖拽節點成為根節點時的 Tree 外邊界範圍 (單位：px)。[setting.edit.enable = true 時生效]
borderMin:5,
判定是否拖拽操作的最小位移值 (單位：px)。[setting.edit.enable = true 時生效]
mionMoveSize:5,
//拖拽多個兄弟節點時，浮動圖層中顯示的最大節點數。 多餘的節點用...代替。[setting.edit.enable = true 時生效]
maxShowNodeNum:5,
//拖拽時父節點自動展開的延時間隔。 (單位：ms)[setting.edit.enable = true 時生效]
autoOpenTime:500
},
//節點編輯名稱 input 初次顯示時,設定 txt 內容是否為全選狀態。 [setting.edit.enable = true 時生效]
editNameSelectAll:true,
//設定 zTree 是否處於編輯狀態
enable:true,
//刪除按鈕的 Title 輔助資訊。[setting.edit.enable = true & setting.edit.showRemoveBtn = true 時生效]
removeTitle:"刪除節點",
//編輯名稱按鈕的 Title 輔助資訊。[setting.edit.enable = true & setting.edit.showRenameBtn = true 時生效]
renameTitle:"重新命名",
/*
*設定是否顯示刪除按鈕。[setting.edit.enable = true 時生效]
當點選某節點的刪除按鈕時：
首先觸發 setting.callback.beforeRemove 回撥函式，使用者可判定是否進行刪除操作。
如果未設定 beforeRemove 或 beforeRemove 返回 true，則刪除節點並觸發 setting.callback.onRemove 回撥函式。
/*
showRemoveBtn:true,
//設定是否顯示編輯名稱按鈕
showRenameBtn:true,
},
view:{
//用於在節點上固定顯示使用者自定義控制元件
addDiyDom：null，
//用於當滑鼠移動到節點上時，顯示使用者自定義控制元件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕
addHoverDom：null，
//點選節點時，按下 Ctrl 或 Cmd 鍵是否允許取消選擇操作。
autoCancelSelected：true,
//雙擊節點時，是否自動展開父節點的標識
dblClickExpand:true,
//zTree 節點展開、摺疊時的動畫速度，設定方法同 JQuery 動畫效果中 speed 引數。
expandSpeed:true，
//個性化文字樣式，只針對 zTree 在節點上顯示的<A>物件。
fontCss：{}，
//設定 name 屬性是否支援 HTML 指令碼
nameIsHTML：false,
//用於當滑鼠移出節點時，隱藏使用者自定義控制元件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕
removeHoverDom:false,
//設定是否允許同時選中多個節點。
selectedMulti:true,
showTitle:true,
showIcon:true，
showTitle:true,
//設定 zTree 是否允許可以選擇 zTree DOM 內的文字
txtSelectEnable:false,
},
/**
*回撥函式，on-為實際觸發執行的操作，before-為觸發之前的詢問。
/*
callback:{
onClick:treeonclick,
beforeCheck:treebeforecheck,
onCheck:treeoncheck,
beforeAsync:treebeforeAsync,
beforeClick:treebeforeClick,
beforeCollapse:treebeforeCollapse,
beforeDblClick:treebeforeDbclick,
beforeDrag:treebeforeDrag,
beforeDragOpen:treebeforeDragOpen,
beforeDrop:treebeforeDrop,
beforeEditName:treebeforeEditName,
beforeExpand:treebeforeExpand,
beforeMouseDown:treebeforeMouseDown,
beforeMouseUp:treebeforeMouseUp,
beforeRemove:treebeforeRemove,
beforeRename:treebeforeRename,
beforeRightClick:treebeforeRightClick,
onAsynError:treeonAsyncError,
onAsyncSuccess:treeonAsyncSuccess,
onCollapse:treeonCollapse,
onDblClick:treeonDbClick,
onDrag:treeonDrag,
onDragMove:treeonDragMove,
onDrop:treeonDrop,
onExpand:treeonExpand,
onMouseDown:treeonMouseDown,
onMouseUp:treeonMouseUp,
onNodeCreated:treeonNodeCreated,
onRemove:treeonRemove,
onRename:treeonRename,
onRightClick:treeonRightClick,
}
};
後續會有treeNode和treeObj的總結，如有錯誤請糾正。