一. zTree的 setting 配置詳解
//請勿進行初始化 或 修改，屬於內部參數。
treeObj : null, //zTree 容器的 jQuery 對象，主要功能：便於操作。
//請勿進行初始化 或 修改，屬於內部參數。
async : { // 是否異步加載 相當於ajax
autoParam : [], //可以設置提交時的參數名稱，例如 server 只接受 zId : ["id=zId"] ; 默認值空
contentType : "application...",
dataFilter : null,
dataType : "text",
enable : false,//設置 zTree 是否開啓異步加載模式
//默認值：false
otherParam : [],//其他參數 ;直接用 JSON 格式製作鍵值對，例如：{ key1:value1, key2:value2 }
type : "post", //請求方式
url : "" //路徑
},
callback : { //返回函數; 根據需求選擇合適的監聽事件 //以下事件默認權威null 事件例子參見第83行
beforeAsync : null,//異步加載之前的事件回調函數，zTree 根據返回值確定是否允許進行異步加載
beforeCheck : null,//勾選 或 取消勾選 之前的事件回調函數，並且根據返回值確定是否允許 勾選 或 取消勾選
beforeClick : null,//單擊節點之前的事件回調函數，並且根據返回值確定是否允許單擊操作
beforeCollapse : null,//父節點摺疊之前的事件回調函數，並且根據返回值確定是否允許摺疊操作
beforeDblClick : null,// zTree 上鼠標雙擊之前的事件回調函數，並且根據返回值確定觸發 onDblClick 事件回調函數
beforeDrag : null,//節點被拖拽之前的事件回調函數，並且根據返回值確定是否允許開啓拖拽操作
beforeDragOpen : null,//拖拽節點移動到摺疊狀態的父節點後，即將自動展開該父節點之前的事件回調函數，並且根據返回值確定是否允許自動展開操作
beforeDrop : null,//節點拖拽操作結束之前的事件回調函數，並且根據返回值確定是否允許此拖拽操作
beforeEditName : null,//節點編輯按鈕的 click 事件，並且根據返回值確定是否允許進入名稱編輯狀態
beforeExpand : null,//父節點展開之前的事件回調函數，並且根據返回值確定是否允許展開操作
beforeMouseDown : null,// zTree 上鼠標按鍵按下之前的事件回調函數，並且根據返回值確定觸發 onMouseDown 事件回調函數
beforeMouseUp : null,//zTree 上鼠標按鍵鬆開之前的事件回調函數，並且根據返回值確定觸發 onMouseUp 事件回調函數
beforeRemove : null,//節點被刪除之前的事件回調函數，並且根據返回值確定是否允許刪除操作
beforeRename : null,//節點編輯名稱結束（Input 失去焦點 或 按下 Enter 鍵）之後，更新節點名稱數據之前的事件回調函數，並且根據返回值確定是否允許更改名稱的操作
beforeRightClick : null,// zTree 上鼠標右鍵點擊之前的事件回調函數，並且根據返回值確定觸發 onRightClick 事件回調函數
onAsyncError : null,//異步加載出現異常錯誤的事件回調函數
onAsyncSuccess : null,//異步加載正常結束的事件回調函數
onCheck : null,// checkbox / radio 被勾選 或 取消勾選的事件回調函數
onClick : null,//節點被點擊的事件回調函數
onCollapse : null,//節點被摺疊的事件回調函數
onDblClick : null,// zTree 上鼠標雙擊之後的事件回調函數
onDrag : null,//節點被拖拽的事件回調函數
onDragMove : null,//節點被拖拽過程中移動的事件回調函數
onDrop : null,//節點拖拽操作結束的事件回調函數
onExpand : null,//節點被展開的事件回調函數
onMouseDown : null,// zTree 上鼠標按鍵按下後的事件回調函數
onMouseUp : null,// zTree 上鼠標按鍵鬆開後的事件回調函數
onNodeCreated : null,//節點生成 DOM 後的事件回調函數
onRemove : null,//刪除節點之後的事件回調函數。
onRename : null,//節點編輯名稱結束之後的事件回調函數。
onRightClick : null// zTree 上鼠標右鍵點擊之後的事件回調函數
},
例. 節點勾選或取消事件
function zTreeOnCheck(event, treeId, treeNode) {
alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
};
var setting = {
callback: {
onCheck: zTreeOnCheck
}
};
Function 參數說明
參數 數據類型說明
event js event 對象標準的 js event 對象
treeId String 對應 zTree 的 treeId，便於用戶操控
treeNode JSON 被勾選 或 取消勾選的節點 JSON 數據對象
setting參數配置講解繼續...
check : { //設置zTree是否可以被勾選,及勾選的參數配置
autoCheckTrigger : false,//設置自動關聯勾選時是否觸發 beforeCheck / onCheck 事件回調函數。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 時生效]
chkboxType : {"Y": "ps", "N": "ps"},//勾選 checkbox 對於父子節點的關聯關係。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 時生效]
chkStyle : "checkbox",//勾選框類型(checkbox 或 radio）[setting.check.enable = true 時生效]
enable : false,//設置 zTree 的節點上是否顯示 checkbox / radio
//默認值: false
nocheckInherit : false//當父節點設置 nocheck = true 時，設置子節點是否自動繼承 nocheck = true 。[setting.check.enable = true 時生效]
chkDisabledInherit : false//當父節點設置 chkDisabled = true 時，設置子節點是否自動繼承 chkDisabled = true 。[setting.check.enable = true 時生效]
radioType : "level"//radio 的分組範圍。[setting.check.enable = true 且 setting.check.chkStyle = "radio" 時生效]
},
data : { //非常重要
keep : { //子節點和父節點屬性設置 默認值都爲false
leaf : false,//zTree 的節點葉子節點屬性鎖，是否始終保持 isParent = false
parent : false//zTree 的節點父節點屬性鎖，是否始終保持 isParent = true
},
key : { //節點數據
checked : "checked",//zTree 節點數據中保存 check 狀態的屬性名稱。
children : "children",//zTree 節點數據中保存子節點數據的屬性名稱。
name : "name",//zTree 節點數據保存節點名稱的屬性名稱。
title : "" //zTree 節點數據保存節點提示信息的屬性名稱。[setting.view.showTitle = true 時生效]
url : "url" //設置 zTree 顯示節點時，將 treeNode 的 xUrl 屬性當做節點鏈接的目標 URL
},
simpleData : {
enable : false,//確定 zTree 初始化時的節點數據、異步加載時的節點數據、或 addNodes 方法中輸入的 newNodes 數據是否採用簡單數據模式 (Array)
idKey : "id",//節點數據中保存唯一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效]
pIdKey : "pId",//節點數據中保存其父節點唯一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效]
rootPId : null//用於修正根節點父節點數據，即 pIdKey 指定的屬性值。[setting.data.simpleData.enable = true 時生效]
}
},
edit : { //可以編輯節點 : 增 刪 改
drag : {
autoExpandTrigger : true,//拖拽時父節點自動展開是否觸發 onExpand 事件回調函數。[setting.edit.enable = true 時生效]
isCopy : true,//拖拽時, 設置是否允許複製節點。[setting.edit.enable = true 時生效]
isMove : true,//拖拽時, 設置是否允許移動節點。[setting.edit.enable = true 時生效]
prev : true, //拖拽到目標節點時，設置是否允許移動到目標節點前面的操作。[setting.edit.enable = true 時生效]
next : true, //拖拽到目標節點時，設置是否允許移動到目標節點後面的操作。[setting.edit.enable = true 時生效]
inner : true, //拖拽到目標節點時，設置是否允許成爲目標節點的子節點。[setting.edit.enable = true 時生效]
borderMax : 10,//拖拽節點成爲根節點時的 Tree 內邊界範圍 (單位：px)。[setting.edit.enable = true 時生效]
borderMin : -5,//拖拽節點成爲根節點時的 Tree 外邊界範圍 (單位：px)。[setting.edit.enable = true 時生效]
minMoveSize : 5,//判定是否拖拽操作的最小位移值 (單位：px)。[setting.edit.enable = true 時生效]
maxShowNodeNum : 5,//拖拽多個兄弟節點時，浮動圖層中顯示的最大節點數。 多餘的節點用...代替。[setting.edit.enable = true 時生效]
autoOpenTime : 500//拖拽時父節點自動展開的延時間隔。 (單位：ms)[setting.edit.enable = true 時生效]
},
editNameSelectAll : false,
enable : false,//設置 zTree 是否處於編輯狀態,true / false 分別表示 可以 / 不可以 編輯
removeTitle : "remove",//刪除按鈕的 Title 輔助信息。[setting.edit.enable = true & setting.edit.showRemoveBtn = true 時生效]
renameTitle : "rename",//編輯名稱按鈕的 Title 輔助信息。[setting.edit.enable = true & setting.edit.showRenameBtn = true 時生效]
showRemoveBtn : true,//設置是否顯示刪除按鈕。[setting.edit.enable = true 時生效]
showRenameBtn : true//設置是否顯示編輯名稱按鈕。[setting.edit.enable = true 時生效]
},
view : {
addDiyDom : null,//用於在節點上固定顯示用戶自定義控件
addHoverDom : null,//用於當鼠標移動到節點上時，顯示用戶自定義控件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕
autoCancelSelected : true,//點擊節點時，按下 Ctrl 或 Cmd 鍵是否允許取消選擇操作。
dblClickExpand : true,//雙擊節點時，是否自動展開父節點的標識
expandSpeed : "fast",//zTree 節點展開、摺疊時的動畫速度，設置方法同 JQuery 動畫效果中 speed 參數。
fontCss : {}, //個性化文字樣式，只針對 zTree 在節點上顯示的<A>對象。
nameIsHTML : false,//設置 name 屬性是否支持 HTML 腳本
removeHoverDom : null,//用於當鼠標移出節點時，隱藏用戶自定義控件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕
selectedMulti : true,//設置是否允許同時選中多個節點。
showIcon : true,//設置 zTree 是否顯示節點的圖標。
showLine : true,//設置 zTree 是否顯示節點之間的連線。
showTitle : true,//設置 zTree 是否顯示節點的 title 提示信息(即節點 DOM 的 title 屬性)。
txtSelectedEnable : false//設置 zTree 是否允許可以選擇 zTree DOM 內的文本。
}
var setting = {
treeId : "", //zTree 的唯一標識，初始化後，等於 用戶定義的 zTree 容器的 id 屬性值。//請勿進行初始化 或 修改，屬於內部參數。
treeObj : null, //zTree 容器的 jQuery 對象，主要功能：便於操作。
//請勿進行初始化 或 修改，屬於內部參數。
async : { // 是否異步加載 相當於ajax
autoParam : [], //可以設置提交時的參數名稱，例如 server 只接受 zId : ["id=zId"] ; 默認值空
contentType : "application...",
dataFilter : null,
dataType : "text",
enable : false,//設置 zTree 是否開啓異步加載模式
//默認值：false
otherParam : [],//其他參數 ;直接用 JSON 格式製作鍵值對，例如：{ key1:value1, key2:value2 }
type : "post", //請求方式
url : "" //路徑
},
callback : { //返回函數; 根據需求選擇合適的監聽事件 //以下事件默認權威null 事件例子參見第83行
beforeAsync : null,//異步加載之前的事件回調函數，zTree 根據返回值確定是否允許進行異步加載
beforeCheck : null,//勾選 或 取消勾選 之前的事件回調函數，並且根據返回值確定是否允許 勾選 或 取消勾選
beforeClick : null,//單擊節點之前的事件回調函數，並且根據返回值確定是否允許單擊操作
beforeCollapse : null,//父節點摺疊之前的事件回調函數，並且根據返回值確定是否允許摺疊操作
beforeDblClick : null,// zTree 上鼠標雙擊之前的事件回調函數，並且根據返回值確定觸發 onDblClick 事件回調函數
beforeDrag : null,//節點被拖拽之前的事件回調函數，並且根據返回值確定是否允許開啓拖拽操作
beforeDragOpen : null,//拖拽節點移動到摺疊狀態的父節點後，即將自動展開該父節點之前的事件回調函數，並且根據返回值確定是否允許自動展開操作
beforeDrop : null,//節點拖拽操作結束之前的事件回調函數，並且根據返回值確定是否允許此拖拽操作
beforeEditName : null,//節點編輯按鈕的 click 事件，並且根據返回值確定是否允許進入名稱編輯狀態
beforeExpand : null,//父節點展開之前的事件回調函數，並且根據返回值確定是否允許展開操作
beforeMouseDown : null,// zTree 上鼠標按鍵按下之前的事件回調函數，並且根據返回值確定觸發 onMouseDown 事件回調函數
beforeMouseUp : null,//zTree 上鼠標按鍵鬆開之前的事件回調函數，並且根據返回值確定觸發 onMouseUp 事件回調函數
beforeRemove : null,//節點被刪除之前的事件回調函數，並且根據返回值確定是否允許刪除操作
beforeRename : null,//節點編輯名稱結束（Input 失去焦點 或 按下 Enter 鍵）之後，更新節點名稱數據之前的事件回調函數，並且根據返回值確定是否允許更改名稱的操作
beforeRightClick : null,// zTree 上鼠標右鍵點擊之前的事件回調函數，並且根據返回值確定觸發 onRightClick 事件回調函數
onAsyncError : null,//異步加載出現異常錯誤的事件回調函數
onAsyncSuccess : null,//異步加載正常結束的事件回調函數
onCheck : null,// checkbox / radio 被勾選 或 取消勾選的事件回調函數
onClick : null,//節點被點擊的事件回調函數
onCollapse : null,//節點被摺疊的事件回調函數
onDblClick : null,// zTree 上鼠標雙擊之後的事件回調函數
onDrag : null,//節點被拖拽的事件回調函數
onDragMove : null,//節點被拖拽過程中移動的事件回調函數
onDrop : null,//節點拖拽操作結束的事件回調函數
onExpand : null,//節點被展開的事件回調函數
onMouseDown : null,// zTree 上鼠標按鍵按下後的事件回調函數
onMouseUp : null,// zTree 上鼠標按鍵鬆開後的事件回調函數
onNodeCreated : null,//節點生成 DOM 後的事件回調函數
onRemove : null,//刪除節點之後的事件回調函數。
onRename : null,//節點編輯名稱結束之後的事件回調函數。
onRightClick : null// zTree 上鼠標右鍵點擊之後的事件回調函數
},
例. 節點勾選或取消事件
function zTreeOnCheck(event, treeId, treeNode) {
alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
};
var setting = {
callback: {
onCheck: zTreeOnCheck
}
};
Function 參數說明
參數 數據類型說明
event js event 對象標準的 js event 對象
treeId String 對應 zTree 的 treeId，便於用戶操控
treeNode JSON 被勾選 或 取消勾選的節點 JSON 數據對象
setting參數配置講解繼續...
check : { //設置zTree是否可以被勾選,及勾選的參數配置
autoCheckTrigger : false,//設置自動關聯勾選時是否觸發 beforeCheck / onCheck 事件回調函數。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 時生效]
chkboxType : {"Y": "ps", "N": "ps"},//勾選 checkbox 對於父子節點的關聯關係。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 時生效]
chkStyle : "checkbox",//勾選框類型(checkbox 或 radio）[setting.check.enable = true 時生效]
enable : false,//設置 zTree 的節點上是否顯示 checkbox / radio
//默認值: false
nocheckInherit : false//當父節點設置 nocheck = true 時，設置子節點是否自動繼承 nocheck = true 。[setting.check.enable = true 時生效]
chkDisabledInherit : false//當父節點設置 chkDisabled = true 時，設置子節點是否自動繼承 chkDisabled = true 。[setting.check.enable = true 時生效]
radioType : "level"//radio 的分組範圍。[setting.check.enable = true 且 setting.check.chkStyle = "radio" 時生效]
},
data : { //非常重要
keep : { //子節點和父節點屬性設置 默認值都爲false
leaf : false,//zTree 的節點葉子節點屬性鎖，是否始終保持 isParent = false
parent : false//zTree 的節點父節點屬性鎖，是否始終保持 isParent = true
},
key : { //節點數據
checked : "checked",//zTree 節點數據中保存 check 狀態的屬性名稱。
children : "children",//zTree 節點數據中保存子節點數據的屬性名稱。
name : "name",//zTree 節點數據保存節點名稱的屬性名稱。
title : "" //zTree 節點數據保存節點提示信息的屬性名稱。[setting.view.showTitle = true 時生效]
url : "url" //設置 zTree 顯示節點時，將 treeNode 的 xUrl 屬性當做節點鏈接的目標 URL
},
simpleData : {
enable : false,//確定 zTree 初始化時的節點數據、異步加載時的節點數據、或 addNodes 方法中輸入的 newNodes 數據是否採用簡單數據模式 (Array)
idKey : "id",//節點數據中保存唯一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效]
pIdKey : "pId",//節點數據中保存其父節點唯一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效]
rootPId : null//用於修正根節點父節點數據，即 pIdKey 指定的屬性值。[setting.data.simpleData.enable = true 時生效]
}
},
edit : { //可以編輯節點 : 增 刪 改
drag : {
autoExpandTrigger : true,//拖拽時父節點自動展開是否觸發 onExpand 事件回調函數。[setting.edit.enable = true 時生效]
isCopy : true,//拖拽時, 設置是否允許複製節點。[setting.edit.enable = true 時生效]
isMove : true,//拖拽時, 設置是否允許移動節點。[setting.edit.enable = true 時生效]
prev : true, //拖拽到目標節點時，設置是否允許移動到目標節點前面的操作。[setting.edit.enable = true 時生效]
next : true, //拖拽到目標節點時，設置是否允許移動到目標節點後面的操作。[setting.edit.enable = true 時生效]
inner : true, //拖拽到目標節點時，設置是否允許成爲目標節點的子節點。[setting.edit.enable = true 時生效]
borderMax : 10,//拖拽節點成爲根節點時的 Tree 內邊界範圍 (單位：px)。[setting.edit.enable = true 時生效]
borderMin : -5,//拖拽節點成爲根節點時的 Tree 外邊界範圍 (單位：px)。[setting.edit.enable = true 時生效]
minMoveSize : 5,//判定是否拖拽操作的最小位移值 (單位：px)。[setting.edit.enable = true 時生效]
maxShowNodeNum : 5,//拖拽多個兄弟節點時，浮動圖層中顯示的最大節點數。 多餘的節點用...代替。[setting.edit.enable = true 時生效]
autoOpenTime : 500//拖拽時父節點自動展開的延時間隔。 (單位：ms)[setting.edit.enable = true 時生效]
},
editNameSelectAll : false,
enable : false,//設置 zTree 是否處於編輯狀態,true / false 分別表示 可以 / 不可以 編輯
removeTitle : "remove",//刪除按鈕的 Title 輔助信息。[setting.edit.enable = true & setting.edit.showRemoveBtn = true 時生效]
renameTitle : "rename",//編輯名稱按鈕的 Title 輔助信息。[setting.edit.enable = true & setting.edit.showRenameBtn = true 時生效]
showRemoveBtn : true,//設置是否顯示刪除按鈕。[setting.edit.enable = true 時生效]
showRenameBtn : true//設置是否顯示編輯名稱按鈕。[setting.edit.enable = true 時生效]
},
view : {
addDiyDom : null,//用於在節點上固定顯示用戶自定義控件
addHoverDom : null,//用於當鼠標移動到節點上時，顯示用戶自定義控件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕
autoCancelSelected : true,//點擊節點時，按下 Ctrl 或 Cmd 鍵是否允許取消選擇操作。
dblClickExpand : true,//雙擊節點時，是否自動展開父節點的標識
expandSpeed : "fast",//zTree 節點展開、摺疊時的動畫速度，設置方法同 JQuery 動畫效果中 speed 參數。
fontCss : {}, //個性化文字樣式，只針對 zTree 在節點上顯示的<A>對象。
nameIsHTML : false,//設置 name 屬性是否支持 HTML 腳本
removeHoverDom : null,//用於當鼠標移出節點時，隱藏用戶自定義控件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕
selectedMulti : true,//設置是否允許同時選中多個節點。
showIcon : true,//設置 zTree 是否顯示節點的圖標。
showLine : true,//設置 zTree 是否顯示節點之間的連線。
showTitle : true,//設置 zTree 是否顯示節點的 title 提示信息(即節點 DOM 的 title 屬性)。
txtSelectedEnable : false//設置 zTree 是否允許可以選擇 zTree DOM 內的文本。
}
}
