zTree外掛setting配置詳解
阿新 • • 發佈：2019-01-28
一. 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 引數說明
引數資料型別說明
eventjs 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 引數說明
引數資料型別說明
eventjs 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 內的文字。
}
}
詳情參見 http://www.treejs.cn/v3/api.php