碼上歡樂
相關內容    簡體    繁體

zTree v3.4 API 文檔

本文轉載自   查看原文   2016-07-26 12:34   20958    前端工具組件/ 前端

tinyui.huawei.com/ui_widgets/pages/widgetShow/demo/overview.html

tinyui.huawei.com/ui_widgets/pages/widgetShow/demo/overview.html

zTree 是利用 JQuery 的核心代碼，實現一套能完成大部分常用功能的 Tree 插件

  • 兼容 IE、FireFox、Chrome 等瀏覽器
  • 在一個頁面內可同時生成多個 Tree 實例
  • 支持 JSON 數據
  • 支持一次性靜態生成 和 Ajax 異步加載 兩種方式
  • 支持多種事件響應及反饋
  • 支持 Tree 的節點移動、編輯、刪除
  • 支持任意更換皮膚 / 個性化圖標（依靠css）
  • 支持極其靈活的 checkbox 或 radio 選擇功能
  • 簡單的參數配置實現 靈活多變的功能

 

1   zTree 方法詳解

$.fn.zTree : {

init (obj, zSetting, zNodes)

getZTreeObj (treeId)

destroy (treeId)

_z : {tools, view, event, data}

}

 

zTreeObj : {

setting

addNodes (parentNode, newNodes, isSilent)

cancelEditName (newName)

cancelSelectedNode (node)

checkAllNodes (checked)

checkNode (node, checked, checkTypeFlag, callbackFlag)

copyNode (targetNode, node, moveType, isSilent)

destroy ()

editName (node)

expandAll (expandFlag)

expandNode (node, expandFlag, sonSign, focus, callbackFlag)

getChangeCheckedNodes ()

getCheckedNodes (checked)

getNodeByParam (key, value, parentNode)

getNodeByTId (tId)

getNodeIndex (node)

getNodes ()

getNodesByFilter (filter, isSingle, parentNode, invokeParam)

getNodesByParam (key, value, parentNode)

getNodesByParamFuzzy (key, value, parentNode)

getSelectedNodes ()

hideNode (node)

hideNodes (nodes)

moveNode (targetNode, node, moveType, isSilent)

reAsyncChildNodes (parentNode, reloadType, isSilent)

refresh ()

removeChildNodes (parentNode)

removeNode (node, callbackFlag)

selectNode (node, addFlag)

setChkDisabled (node, disabled)

setEditable (editable)

showNode (node)

showNodes (nodes)

transformToArray (nodes)

transformTozTreeNodes (simpleNodes)

updateNode (node, checkTypeFlag)

}

 

1.1   zTree

1.1.1                                      $.fn.zTree.init

概述[ 依賴 jquery.ztree.core 核心 js ]

zTree 初始化方法，創建 zTree 必須使用此方法

1、頁面需要進行 W3C 申明，例如：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">。

2、需要首先加載 jquery-1.4.2.js 或其他更高版本的 jQuery 。

3、需要加載 jquery-ztree.core-3.0.js，如果需要用到 編輯功能 或 checkbox / radio 還需要分別加載 jquery-ztree.exedit-3.0.js 和 jquery-ztree.excheck-3.0.js 。

4、需要加載 zTreeStyle.css 以及 zTreeStyle 目錄下的 img 文件。

5、如果需要使用自定義圖標請參考相應的Demo。

6、請注意設置 zTree 的容器樣式 class="ztree"，其中 "ztree" 這個 className，可以根據需要隨意修改，別忘了修改 css 中對應名字就是了，對於容器如果需要增加其他特殊樣式，可根據自己的需要進行修改。

Function 參數說明

objjQuery Object

用於展現 zTree 的 DOM 容器

zSettingJSON

zTree 的配置數據，具體請參考 “setting 配置詳解”中的各個屬性詳細說明

zNodesArray(JSON) / JSON

zTree 的節點數據，具體請參考 “treeNode 節點數據詳解”中的各個屬性詳細說明

1、v3.x 支持單獨添加一個節點，即如果只新增一個節點，不用必須包在數組中

2、如果需要異步加載根節點，可以設置為 null 或 [ ]

3、使用簡單數據模式，請參考 setting.data.simpleData 內的屬性說明

返回值JSON

zTree 對象，提供操作 zTree 的各種方法，對於通過 js 操作 zTree 來說必須通過此對象

如果不需要自行設定全局變量保存，可以利用 $.fn.zTree.getZTreeObj 方法隨時獲取

setting & function 舉例

1. 簡單創建 zTree 演示

<!DOCTYPE html>

<HTML>

 <HEAD>

  <TITLE> ZTREE DEMO </TITLE>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">

  <script type="text/javascript" src="jquery-1.4.2.js"></script>

  <script type="text/javascript" src="jquery.ztree.core-3.4.js"></script>

<!--

  <script type="text/javascript" src="jquery.ztree.excheck-3.4.js"></script>

  <script type="text/javascript" src="jquery.ztree.exedit-3.4.js"></script>

-->

  <SCRIPT type="text/javascript" >

         var zTreeObj,

         setting = {

                 view: {

                          selectedMulti: false

                 }

         },

         zTreeNodes = [

                 {"name":"網站導航", open:true, children: [

                          { "name":"google", "url":"http://g.cn", "target":"_blank"},

                          { "name":"baidu", "url":"http://baidu.com", "target":"_blank"},

                          { "name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"}

                          ]

                 }

         ];

         $(document).ready(function(){

                 zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);

         });

  </SCRIPT>

 </HEAD>

 

<BODY>

<ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>

 </BODY>

</HTML>

1.1.2                                      $.fn.zTree.getZTreeObj

概述[ 依賴 jquery.ztree.core 核心 js ]

zTree v3.x 專門提供的根據 treeId 獲取 zTree 對象的方法。

必須在初始化 zTree 以后才可以使用此方法。

有了這個方法，用戶不再需要自己設定全局變量來保存 zTree 初始化后得到的對象了，而且在所有回調函數中全都會返回 treeId 屬性，用戶可以隨時使用此方法獲取需要進行操作的 zTree 對象

Function 參數說明

treeIdString

zTree 的 DOM 容器的 id

返回值JSON

zTree 對象，提供操作 zTree 的各種方法，對於通過 js 操作 zTree 來說必須通過此對象

function 舉例

1. 獲取 id 為 tree 的 zTree 對象

var treeObj = $.fn.zTree.getZTreeObj("tree");

1.1.3                                      $.fn.zTree.destroy

概述[ 依賴 jquery.ztree.core 核心 js ]

從 zTree v3.4 開始提供銷毀 zTree 的方法。

1、用此方法可以銷毀指定 treeId 的 zTree，也可以銷毀當前頁面全部的 zTree。

2、銷毀指定 treeId 的 zTree 也可以使用 zTreeObj.destroy() 方法。

3、重新使用已經被銷毀的樹，必須要使用 init 方法進行初始化。

Function 參數說明

treeIdString

zTree 的 DOM 容器的 id

省略 treeId，表示銷毀當前頁面全部的 zTree

返回值無

目前無任何返回值

$.fn.zTree.destroy("treeDemo");

2. 銷毀全部 的 zTree

$.fn.zTree.destroy();

1.1.4                                      $.fn.zTree._z

概述[ 依賴 jquery.ztree.core 核心 js ]

zTree v3.x 內部的全部方法都可以通過 $.fn.zTree._z 進行調用，開放出來是為了更便於大家開發制作自己的 zTree 插件。

如無特殊需求請勿使用此對象，以及修改此對象內部的各個函數。

 

1.2 zTreeObj

1.2.1                                      zTreeObj.setting

概述[ 依賴 jquery.ztree.core 核心 js ]

zTree 對象使用的 setting 配置數據，詳細請參考 “setting 配置詳解”中的各個屬性詳細說明

v3.x 取消了原先操作 setting 的方法，讓用戶可以較自由的修改參數，但請注意，對於 zTree 初始化有影響的參數后期修改是不會起作用的，請對各個屬性有較深入的了解以后再考慮進行修改。

1.2.2                                      zTreeObj.addNodes

概述[ 依賴 jquery.ztree.core 擴展 js ]

添加節點。

v3.x 為了避免原先反復初始化造成的數據重復問題，在 初始化 和 添加節點 時內部進行 clone 操作。如果需要獲取數據在 zTree 內的對象，請獲取此方法的返回值。

請通過 zTree 對象執行此方法。

Function 參數說明

parentNodeJSON

指定的父節點，如果增加根節點，請設置 parentNode 為 null 即可。

請務必保證此節點數據對象 是 zTree 內部的數據對象

newNodesJSON / Array(JSON)

需要增加的節點數據 JSON 對象集合，數據只需要滿足 zTree 的節點數據必需的屬性即可，詳細請參考“treeNode 節點數據詳解”

1、v3.x 支持單獨添加一個節點，即如果只新增一個節點，不用必須包在數組中

2、使用簡單數據模式，請參考 setting.data.simpleData 內的屬性說明

isSilentBoolean

設定增加節點后是否自動展開父節點。

isSilent = true 時，不展開父節點，其他值或缺省狀態都自動展開。

返回值Array(JSON)

返回值是 zTree 最終添加的節點數據集合

如果 newNodes 是單個節點數據 JSON，返回值也是將其包在 Array 內

請務必記住：返回值中的數據對象 是 newNodes 被 clone 后的，所以絕對不相等！

function 舉例

1. 對於 id = "tree" 的 zTree 增加 1 個根節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var newNode = {name:"newNode1"};

newNode = treeObj.addNodes(null, newNode);

2. 對於 id = "tree" 的 zTree 增加 3 個根節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var newNodes = [{name:"newNode1"}, {name:"newNode2"}, {name:"newNode3"}];

newNodes = treeObj.addNodes(null, newNodes);

1.2.3                                      zTreeObj.cancelEditName

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

取消節點的編輯名稱狀態，可以恢復原名稱，也可以強行賦給新的名稱。

請通過 zTree 對象執行此方法。

Function 參數說明

newNameString

重新給定的新名稱。

如果省略此參數，則恢復原名稱。

返回值無

目前無任何返回值

function 舉例

1. 取消 zTree 的編輯名稱狀態，恢復該節點原有名稱

var treeObj = $.fn.zTree.getZTreeObj("tree");

treeObj.cancelEditName();

2. 取消 zTree 的編輯名稱狀態，並且重新設定該節點名稱

var treeObj = $.fn.zTree.getZTreeObj("tree");

treeObj.cancelEditName("test_new_name");

1.2.4                                      zTreeObj.cancelSelectedNode

概述[ 依賴 jquery.ztree.core 核心 js ]

取消節點的選中狀態。

v3.x 支持多點同時選中，因此取消選中狀態可以全部取消，也可以單獨取消某個節點的選中狀態。

請通過 zTree 對象執行此方法。

Function 參數說明

treeNodeJSON

需要取消選中狀態的節點。

請務必保證此節點數據對象 是 zTree 內部的數據對象

如果省略此參數，則將取消全部被選中節點的選中狀態。

返回值無

目前無任何返回值

function 舉例

1. 取消當前所有被選中節點的選中狀態

var treeObj = $.fn.zTree.getZTreeObj("tree");

treeObj.cancelSelectedNode();

2. 取消當前第一個被選中節點的選中狀態

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getSelectedNode();

if (nodes.length>0) {

         treeObj.cancelSelectedNode(nodes[0]);

}

1.2.5                                      zTreeObj.checkAllNodes

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

勾選 或 取消勾選 全部節點。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 時有效]

此方法不會觸發 beforeCheck / onCheck 事件回調函數。

請通過 zTree 對象執行此方法。

Function 參數說明

checkedBoolean

checked = true 表示勾選全部節點

checked = false 表示全部節點取消勾選

不會影響 treeNode.nochecked = true 的節點。

不會影響未加載的節點。

返回值無

目前無任何返回值

function 舉例

1. 勾選全部節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

treeObj.checkAllNodes(true);

1.2.6                                      zTreeObj.copyNode

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

復制節點。

v3.x 復制節點時進行 clone 操作。如果需要獲取數據在 zTree 內的對象，請獲取此方法的返回值。

請通過 zTree 對象執行此方法。

Function 參數說明

targetNodeJSON

要復制到的目標節點 JSON 數據

如果復制成為根節點，請設置 targetNode 為 null 即可

請務必保證此節點數據對象 是 zTree 內部的數據對象

treeNodeJSON

需要被復制的節點數據

請務必保證此節點數據對象 是 zTree 內部的數據對象

moveTypeString

復制到目標節點的相對位置

"inner"：成為子節點，"prev"：成為同級前一個節點，"next"：成為同級后一個節點

isSilentBoolean

設定復制節點后是否自動展開父節點。

isSilent = true 時，不展開父節點，其他值或缺省狀態都自動展開。

返回值JSON

返回值是最終加入到 zTree 內的節點數據

請務必記住：返回值中的數據對象 是 treeNode 被 clone 后的，所以絕對不相等！

function 舉例

1. 將根節點中第二個節點 復制成為 第一個節點的子節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getNodes();

treeObj.copyNode(nodes[0], nodes[1], "inner");

2. 將根節點中第二個節點 復制成為 第一個節點的前一個節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getNodes();

treeObj.copyNode(nodes[0], nodes[1], "before");

1.2.7                                      zTreeObj.destroy

概述[ 依賴 jquery.ztree.core 核心 js ]

從 zTree v3.4 開始提供銷毀 zTree 的方法。

1、用此方法可以銷毀 zTreeObj 代表的 zTree。

2、銷毀當前頁面全部的 zTree，也可以使用 $.fn.zTree.destroy() 方法。

3、重新使用已經被銷毀的樹，必須要使用 init 方法進行初始化。

Function Parameter Descriptions

返回值無

目前無任何返回值

function 舉例

1. 銷毀 id 為 "treeDemo" 的 zTree

var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

zTreeObj.destroy();

1.2.8                                      zTreeObj.editName

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

設置某節點進入編輯名稱狀態。

1、如果需要用 js 取消編輯名稱狀態，請使用 cancelEditName(newName) 方法。

2、可利用此方法讓當前正編輯的節點 input 輸入框獲取焦點。

3、請通過 zTree 對象執行此方法。

Function 參數說明

treeNodeJSON

指定進入編輯名稱狀態的節點 JSON 數據

請務必保證此節點數據對象 是 zTree 內部的數據對象

返回值無

目前無任何返回值

function 舉例

1. 設置根節點第一個節點進入編輯名稱狀態

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getNodes();

treeObj.editName(nodes[0]);

1.2.9                                      zTreeObj.expandAll

概述[ 依賴 jquery.ztree.core 核心 js ]

展開 / 折疊 全部節點

此方法不會觸發 beforeExpand / onExpand 和 beforeCollapse / onCollapse 事件回調函數。

請通過 zTree 對象執行此方法。

Function 參數說明

expandFlagBoolean

expandFlag = true 表示 展開 全部節點

expandFlag = false 表示 折疊 全部節點

返回值Boolean

返回值表示最終實際操作情況

true 表示 展開 全部節點

false 表示 折疊 全部節點

null 表示 不存在任何父節點

function 舉例

1. 展開全部節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

treeObj.expandAll(true);

1.2.10                                 zTreeObj.expandNode

概述[ 依賴 jquery.ztree.core 核心 js ]

展開 / 折疊 指定的節點

v3.x 中執行此方法可以觸發 beforeExpand / onExpand 或 beforeCollapse / onCollapse 事件回調函數。便於減少冗余代碼

請通過 zTree 對象執行此方法。

Function 參數說明

treeNodeJSON

需要 展開 / 折疊 的節點數據

請務必保證此節點數據對象 是 zTree 內部的數據對象

expandFlagBoolean

expandFlag = true 表示 展開 節點

expandFlag = false 表示 折疊 節點

省略此參數，則根據對此節點的展開狀態進行 toggle 切換

sonSignBoolean

sonSign = true 表示 全部子孫節點 進行與 expandFlag 相同的操作

sonSign = false 表示 只影響此節點，對於其 子孫節點無任何影響

sonSign = false 且 treeNode.open = expandFlag 時，不會觸發回調函數，直接返回

省略此參數，等同於 false

focusBoolean

focus = true 表示 展開 / 折疊 操作后，通過設置焦點保證此焦點進入可視區域內

focus = false 表示 展開 / 折疊 操作后，不設置任何焦點

省略此參數，等同於 true

callbackFlagBoolean

callbackFlag = true 表示執行此方法時觸發 beforeExpand / onExpand 或 beforeCollapse / onCollapse 事件回調函數

callbackFlag = false 表示執行此方法時不觸發事件回調函數

省略此參數，等同於 false

返回值Boolean

返回值表示最終實際操作情況

true 表示 展開 節點

false 表示 折疊 節點

null 表示 不是父節點

1.2.11                                 zTreeObj.getChangeCheckedNodes

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

獲取輸入框勾選狀態被改變的節點集合（與原始數據 checkedOld 對比）。[setting.check.enable = true 時有效]

請通過 zTree 對象執行此方法。

Function 參數說明

返回值Array(JSON)

返回全部勾選狀態被改變的節點集合 Array

如果需要獲取每次操作后全部被改變勾選狀態的節點數據，請在每次勾選操作后，遍歷所有被改變勾選狀態的節點數據，讓其 checkedOld = checked 就可以了。

function 舉例

1. 獲取當前勾選狀態被改變的節點集合

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getChangeCheckedNodes();

1.2.12                                 zTreeObj.getCheckedNodes

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

獲取輸入框被勾選 或 未勾選的節點集合。[setting.check.enable = true 時有效]

請通過 zTree 對象執行此方法。

Function 參數說明

checkedBoolean

checked = true 表示獲取 被勾選 的節點集合

checked = false 表示獲取 未勾選 的節點集合

省略此參數，等同於 true。

對於 treeNode.nochecked = true 的節點不進行獲取。

返回值Array(JSON)

返回全部符合要求的節點集合 Array

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getCheckedNodes(true);

1.2.13                                 zTreeObj.getNodeByParam

概述[ 依賴 jquery.ztree.core 核心 js ]

根據節點數據的屬性搜索，獲取條件完全匹配的節點數據 JSON 對象

請通過 zTree 對象執行此方法。

Function 參數說明

keyString

需要精確匹配的屬性名稱

value?

需要精確匹配的屬性值，可以是任何類型，只要保證與 key 指定的屬性值保持一致即可

parentNodeJSON

搜索范圍，指定在某個父節點下的子節點中進行搜索

忽略此參數，表示在全部節點中搜索

返回值JSON

匹配精確搜索的節點數據

1、如無結果，返回 null

2、如有多個節點滿足查詢條件，只返回第一個匹配到的節點

function 舉例

1. 查找 id = 1 的節點數據

var treeObj = $.fn.zTree.getZTreeObj("tree");

var node = treeObj.getNodeByParam("id", 1, null);

1.2.14                                 zTreeObj.getNodeByTId

概述[ 依賴 jquery.ztree.core 核心 js ]

根據 zTree 的唯一標識 tId 快速獲取節點 JSON 數據對象

通過內部的 cache 獲取，不需要遍歷節點。

請通過 zTree 對象執行此方法。

Function 參數說明

tIdString

節點在 zTree 內的唯一標識 tId

返回值JSON

tId 對應的節點 JSON 數據對象

如無結果，返回 null

function 舉例

1. 獲取 tId = "tree_10" 的節點數據

var treeObj = $.fn.zTree.getZTreeObj("tree");

var node = treeObj.getNodeByTId("tree_10");

1.2.15                                 zTreeObj.getNodeIndex

概述[ 依賴 jquery.ztree.core 核心 js ]

獲取某節點在同級節點中的序號（從0開始）

請通過 zTree 對象執行此方法。

Function 參數說明

treeNodeJSON

需要查詢順序的節點 JSON 數據對象

請務必保證此節點數據對象 是 zTree 內部的數據對象

返回值Number

返回值從 0 開始計數

如果不存在該節點數據，返回 -1

function 舉例

1. 獲取當前選中的第一個節點在同級節點中的序號

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getSelectedNodes();

if (nodes.length>0) {

         var index = treeObj.getNodeIndex(nodes[0]);

}

1.2.16                                 zTreeObj.getNodes

概述[ 依賴 jquery.ztree.core 核心 js ]

獲取 zTree 的全部節點數據

請通過 zTree 對象執行此方法。

Function 參數說明

返回值Array(JSON)

全部節點數據

1、Array 僅僅是根節點的集合（默認情況子節點都處於 children 屬性下）；

2、如需遍歷全部節點需要利用遞歸，或利用 transformToArray 方法 將數據變成簡單的 Array 集合

3、對於異步加載模式下，尚未加載的子節點是無法通過此方法獲取的。

function 舉例

1. 獲取全部節點數據

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getNodes();

1.2.17                                 zTreeObj.getNodesByFilter

概述[ 依賴 jquery.ztree.core 核心 js ]

根據自定義規則搜索節點數據 JSON 對象集合 或 單個節點數據

可自定義復雜的搜索規則

請通過 zTree 對象執行此方法。

Function 參數說明

filterFunction

自定義過濾器函數 function filter(node) {...}

filter 參數：node (節點數據 JSON)

filter 返回值：boolean (true 表示符合搜索條件；false 表示不符合搜索條件)

isSingleBoolean

isSingle = true 表示只查找單個節點

isSingle = false 表示查找節點集合

忽略此參數，表示查找節點集合

parentNodeJSON

可以指定在某個父節點下的子節點中搜索

忽略此參數，表示在全部節點中搜索

invokeParam任意類型

用戶自定義的數據對象，用於 filter 中進行計算

返回值Array(JSON) / JSON

isSingle = true 返回 第一個找到的節點數據 JSON，無結果時返回 null

isSingle = false 返回 節點數據集合 Array(JSON)，無結果時返回 [ ]

function 舉例

1. 查找 level = 2 & name 中包含 "test" 的節點數據

function filter(node) {

    return (node.level == 2 && node.name.indexOf("test")>-1);

}

......

var treeObj = $.fn.zTree.getZTreeObj("tree");

var node = treeObj.getNodesByFilter(filter, true); // 僅查找一個節點

var nodes = treeObj.getNodesByFilter(filter); // 查找節點集合

1.2.18                                 zTreeObj.getNodesByParam

概述[ 依賴 jquery.ztree.core 核心 js ]

根據節點數據的屬性搜索，獲取條件完全匹配的節點數據 JSON 對象集合

請通過 zTree 對象執行此方法。

Function 參數說明

keyString

需要精確匹配的屬性名稱

value?

需要精確匹配的屬性值，可以是任何類型，只要保證與 key 指定的屬性值保持一致即可

parentNodeJSON

可以指定在某個父節點下的子節點中搜索

忽略此參數，表示在全部節點中搜索

返回值Array(JSON)

匹配精確搜索的節點數據集合

如無結果，返回 [ ]

function 舉例

1. 查找 name = "test" 的節點數據

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getNodesByParam("name", "test", null);

1.2.19                                 zTreeObj.getNodesByParamFuzzy

概述[ 依賴 jquery.ztree.core 核心 js ]

根據節點數據的屬性搜索，獲取條件模糊匹配的節點數據 JSON 對象集合

請通過 zTree 對象執行此方法。

Function 參數說明

keyString

需要模糊匹配的屬性名稱

valueString

需要模糊匹配的屬性值

模糊匹配只能針對 String 類型的數據

parentNodeJSON

可以指定在某個父節點下的子節點中搜索

忽略此參數，表示在全部節點中搜索

返回值Array(JSON)

匹配模糊搜索的節點數據集合

如無結果，返回 [ ]

function 舉例

1. 查找 name 包含 "test" 的節點數據

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getNodesByParamFuzzy("name", "test", null);

1.2.20                                 zTreeObj.getSelectedNodes

概述[ 依賴 jquery.ztree.core 核心 js ]

獲取 zTree 當前被選中的節點數據集合

請通過 zTree 對象執行此方法。

Function 參數說明

返回值Array(JSON)

當前被選中的節點數據集合

function 舉例

1. 獲取當前被選中的節點數據集合

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getSelectedNodes();

1.2.21                                 zTreeObj.hideNodes

概述[ 依賴 jquery.ztree.exhide 擴展 js ]

隱藏一批節點。

1、此功能不支持 exedit 擴展，因此不要在編輯狀態時使用隱藏節點的方法。

2、隱藏/顯示節點，會影響節點的 isFirstNode 和 isLastNode 屬性。

3、請通過 zTree 對象執行此方法。

Function 參數說明

treeNodesArray(JSON)

指定被隱藏的節點 JSON 數據集合

請務必保證這些節點數據對象 是 zTree 內部的數據對象

返回值無

目前無任何返回值

function 舉例

1. 隱藏根節點第一個節點的子節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getNodes();

treeObj.hideNodes(nodes[0].children);

1.2.22                                 zTreeObj.hideNode

概述[ 依賴 jquery.ztree.exhide 擴展 js ]

隱藏某個節點。

1、此功能不支持 exedit 擴展，因此不要在編輯狀態時使用隱藏節點的方法。

2、隱藏/顯示節點，會影響節點的 isFirstNode 和 isLastNode 屬性。

3、請通過 zTree 對象執行此方法。

Function 參數說明

treeNodeJSON

指定被隱藏的節點 JSON 數據

請務必保證此節點數據對象 是 zTree 內部的數據對象

返回值無

目前無任何返回值

function 舉例

1. 隱藏根節點第一個節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getNodes();

treeObj.hideNode(nodes[0]);

1.2.23                                 zTreeObj.moveNode

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

移動節點。

請通過 zTree 對象執行此方法。

Function 參數說明

targetNodeJSON

要移動到的目標節點 JSON 數據

如果移動成為根節點，請設置 targetNode 為 null 即可

請務必保證此節點數據對象 是 zTree 內部的數據對象

treeNodeJSON

需要被移動的節點數據

請務必保證此節點數據對象 是 zTree 內部的數據對象

moveTypeString

指定移動到目標節點的相對位置

"inner"：成為子節點，"prev"：成為同級前一個節點，"next"：成為同級后一個節點

isSilentBoolean

設定移動節點后是否自動展開父節點。

isSilent = true 時，不展開父節點，其他值或缺省狀態都自動展開。

返回值JSON

返回值是最終被移動的節點數據，正常情況下與 treeNode 參數完全相同

如果 返回值 為 null，說明 移動失敗，主要原因有：
1、targetNode 是 treeNode 父節點，且 moveType = "inner"
2、targetNode 是 treeNode 子孫節點

function 舉例

1. 將根節點中第二個節點 移動成為 第一個節點的子節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getNodes();

treeObj.moveNode(nodes[0], nodes[1], "inner");

2. 將根節點中第二個節點 移動成為 第一個節點的前一個節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getNodes();

treeObj.moveNode(nodes[0], nodes[1], "before");

1.2.24                                 zTreeObj.reAsyncChildNodes

概述[ 依賴 jquery.ztree.core 核心 js ]

強行異步加載父節點的子節點。[setting.async.enable = true 時有效]

已經加載過的父節點可反復使用此方法重新加載。

請通過 zTree 對象執行此方法。

Function 參數說明

parentNodeJSON

指定需要異步加載的父節點 JSON 數據

1、parentNode = null 時，相當於從根節點 Root 進行異步加載

2、parentNode.isParent = false 時，不進行異步加載

3、請務必保證此節點數據對象 是 zTree 內部的數據對象

reloadTypeString

reloadType = "refresh" 表示清空后重新加載。

reloadType != "refresh" 時，表示追加子節點處理。

isSilentBoolean

設定異步加載后是否自動展開父節點。

isSilent = true 時，不展開父節點，其他值或缺省狀態都自動展開。

返回值無

目前無任何返回值

function 舉例

1. 重新異步加載 zTree

var treeObj = $.fn.zTree.getZTreeObj("tree");

treeObj.reAsyncChildNodes(null, "refresh");

2. 重新異步加載當前選中的第一個節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getSelectedNodes();

if (nodes.length>0) {

         treeObj.reAsyncChildNodes(nodes[0], "refresh");

}

1.2.25                                 zTreeObj.refresh

概述[ 依賴 jquery.ztree.core 核心 js ]

刷新 zTree 。

沒有特殊必要，盡量不要使用此方法。單個節點更新請使用 updateNode 方法，異步加載模式下請使用 reAsyncChildNodes 方法。

請通過 zTree 對象執行此方法。

Function 參數說明

返回值無

目前無任何返回值

function 舉例

1. 刷新 zTree

var treeObj = $.fn.zTree.getZTreeObj("tree");

treeObj.refresh();

1.2.26                                 zTreeObj.removeChildNodes

概述[ 依賴 jquery.ztree.core 擴展 js ]

清空某父節點的子節點。

1、清空子節點后，父節點會自動變為葉子節點，如需要父節點保持父節點狀態，請設置 setting.data.keep.parent 屬性。

2、請勿用此方法清空根節點，如果需要清空根節點，直接初始化 zTree，並且設置初始節點為 null 即可。

3、此方法不會觸發任何事件回調函數。

請通過 zTree 對象執行此方法。

Function 參數說明

parentNodeJSON

需要清空子節點的父節點數據

請務必保證此節點數據對象 是 zTree 內部的數據對象

返回值Array(JSON)

將該父節點的子節點數據返回，如果不存在則返回 null

function 舉例

1. 清空選中的第一個節點的子節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getSelectedNodes();

if (nodes && nodes.length>0) {

         treeObj.removeChildNodes(nodes[0]);

}

1.2.27                                 zTreeObj.removeNode

概述[ 依賴 jquery.ztree.core 擴展 js ]

刪除節點。

v3.x 中刪除節點可以觸發 beforeRemove / onRemove 事件回調函數。便於減少冗余代碼

請通過 zTree 對象執行此方法。

Function 參數說明

treeNodeJSON

需要被刪除的節點數據

請務必保證此節點數據對象 是 zTree 內部的數據對象

callbackFlagBoolean

callbackFlag = true 表示執行此方法時觸發 beforeCheck & onCheck 事件回調函數

callbackFlag = false 表示執行此方法時不觸發事件回調函數

省略此參數，等同於 false

返回值無

目前無任何返回值

function 舉例

1. 刪除所有選中的節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getSelectedNodes();

for (var i=0, l=nodes.length; i < l; i++) {

         treeObj.removeNode(nodes[i]);

}

1.2.28                                 zTreeObj.selectNode

概述[ 依賴 jquery.ztree.core 核心 js ]

選中指定節點

v3.x 支持同時選中多個節點。

請通過 zTree 對象執行此方法。

Function 參數說明

treeNodeJSON

需要被選中的節點數據

請務必保證此節點數據對象 是 zTree 內部的數據對象

addFlagBoolean

addFlag = true 表示追加選中，會出現多點同時被選中的情況

addFlag = false 表示單獨選中，原先被選中的節點會被取消選中狀態

setting.view.selectedMulti = false 時，此參數無效，始終進行單獨選中

返回值無

目前無任何返回值

function 舉例

1. 單獨選中根節點中第一個節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getNodes();

if (nodes.length>0) {

         treeObj.selectNode(nodes[0]);

}

1.2.29                                 zTreeObj.setChkDisabled

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

禁用 或 解禁 某個節點的 checkbox / radio [setting.check.enable = true 時有效]

1、節點的 checkbox / radio 被禁用后，無法勾選或取消勾選，但能夠影響父節點的半選狀態

2、請不要直接修改已加載節點的 treeNode.chkDisabled 屬性。

3、請通過 zTree 對象執行此方法。

Function 參數說明

treeNodeJSON

需要禁用 或 解禁 checkbox / radio 的節點數據

請務必保證此節點數據對象 是 zTree 內部的數據對象

disabledBoolean

disabled = true 表示禁用 checkbox / radio

disabled = false 表示解禁 checkbox / radio

省略此參數，等同於 disabled = false

不影響 treeNode.nochecked = true 的節點。

返回值無

目前無任何返回值

function 舉例

1. 禁用當前選中的節點的 checkbox / radio

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getSelectedNodes();

for (var i=0, l=nodes.length; i < l; i++) {

         treeObj.setChkDisabled(nodes[i], true);

}

1.2.30                                 zTreeObj.setEditable

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

設置 zTree 進入 / 取消 編輯狀態。

對於編輯狀態的各種功能需要提前設置對應 setting 中的不同屬性

請通過 zTree 對象執行此方法。

Function 參數說明

editableBoolean

true 表示進入 編輯狀態

false 表示取消 編輯狀態

返回值無

目前無任何返回值

function 舉例

1. 設置 zTree 進入編輯狀態

var treeObj = $.fn.zTree.getZTreeObj("tree");

treeObj.setEditable(true);

1.2.31                                 zTreeObj.showNode

概述[ 依賴 jquery.ztree.exhide 擴展 js ]

顯示某個被隱藏的節點。

1、此功能不支持 exedit 擴展，因此不要在編輯狀態時使用隱藏節點的方法。

2、隱藏/顯示節點，會影響節點的 isFirstNode 和 isLastNode 屬性。

3、請通過 zTree 對象執行此方法。

Function 參數說明

treeNodeJSON

指定被顯示的節點 JSON 數據

請務必保證此節點數據對象 是 zTree 內部的數據對象

返回值無

目前無任何返回值

function 舉例

1. 顯示某個隱藏的節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var node = treeObj.getNodeByParam("isHidden", true);

if (node) {

  treeObj.showNode(node);

}

1.2.32                                 zTreeObj.showNodes

概述[ 依賴 jquery.ztree.exhide 擴展 js ]

顯示一批已經被隱藏的節點。

1、此功能不支持 exedit 擴展，因此不要在編輯狀態時使用隱藏節點的方法。

2、隱藏/顯示節點，會影響節點的 isFirstNode 和 isLastNode 屬性。

3、請通過 zTree 對象執行此方法。

Function 參數說明

treeNodesArray(JSON)

指定被顯示的節點 JSON 數據集合

請務必保證這些節點數據對象 是 zTree 內部的數據對象

返回值無

目前無任何返回值

function 舉例

1. 顯示全部隱藏的節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getNodesByParam("isHidden", true);

treeObj.showNodes(nodes);

1.2.33                                 zTreeObj.transformToArray

概述[ 依賴 jquery.ztree.core 核心 js ]

將 zTree 使用的標准 JSON 嵌套格式的數據轉換為簡單 Array 格式。(免去用戶自行編寫遞歸遍歷全部節點的麻煩)

請通過 zTree 對象執行此方法。

Function 參數說明

treeNodesArray(JSON) / JSON

需要被轉換的 zTree 節點數據對象集合 或 某個單獨節點的數據對象

返回值Array(JSON)

轉換后的簡單 Array 數據格式

function 舉例

1. 將 zTree 節點數據轉換為簡單 Array 格式

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.transformToArray(treeObj.getNodes());

1.2.34                                 zTreeObj.transformTozTreeNodes

概述[ 依賴 jquery.ztree.core 核心 js ]

將簡單 Array 格式數據轉換為 zTree 使用的標准 JSON 嵌套數據格式。

使用此方法，請務必設置節點唯一標識屬性名稱 setting.data.simpleData.idKey 和 父節點唯一標識屬性名稱 setting.data.simpleData.pIdKey，並且讓數據滿足父子關系。

請通過 zTree 對象執行此方法。

Function 參數說明

simpleNodesArray(JSON) / JSON

需要被轉換的簡單 Array 格式數據 或 某個單獨的數據對象

返回值Array(JSON)

zTree 使用的標准數據，子節點都存在於父節點數據的 children 屬性中

如果 simpleNodes 是一個 JSON 對象，則被簡單封裝成長度為 1 的數組。

function 舉例

1. 將簡單 Array 格式轉換為zTree使用的標准格式

var setting = {

         data: {

                 simpleData: {

                          enable: true,

                          idKey: "id",

                          pIdKey: "pId",

                          rootPId: 0,

                 }

         }

};

var simpleNodes = [

    {"id":1, "pId":0, "name":"test1"},

    {"id":11, "pId":1, "name":"test11"},

    {"id":12, "pId":1, "name":"test12"},

    {"id":111, "pId":11, "name":"test111"}

];

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.transformTozTreeNodes(simpleNodes);

1.2.35                                 zTreeObj.updateNode

概述[ 依賴 jquery.ztree.core 核心 js ]

更新某節點數據，主要用於該節點顯示屬性的更新。

1、可針對 name、target、 url、icon、 iconSkin、checked、nocheck 等這幾個用於顯示效果的參數進行更新，其他用於 zTreeNodes 的參數請不要隨意更新，對於展開節點，還請調用 expandNode方法，因此請勿隨意修改 open 屬性。

2、用此方法修改 checked 勾選狀態不會觸發 beforeCheck / onCheck 事件回調函數。

請通過 zTree 對象執行此方法。

Function 參數說明

treeNodeJSON

指定需要更新的節點 JSON 數據

請務必保證此節點數據對象 是 zTree 內部的數據對象

checkTypeFlagBoolean

checkTypeFlag = true 表示按照 setting.check.chkboxType 屬性進行父子節點的勾選聯動操作

checkTypeFlag = false 表示只修改此節點勾選狀態，無任何勾選聯動操作

當 setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 時才有效

不影響父子節點中 treeNode.nochecked = true 的節點。

返回值無

目前無任何返回值

function 舉例

1. 更新根節點中第一個節點的名稱

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getNodes();

if (nodes.length>0) {

         nodes[0].name = "test";

         treeObj.updateNode(nodes[0]);

}

2   treeNode 節點數據詳解

treeNode : {

checked

children

chkDisabled

click

getCheckStatus ()

getNextNode ()

getParentNode ()

getPreNode ()

halfCheck

icon

iconClose

iconOpen

iconSkin

isHidden

isParent

name

nocheck

open

target

url

*DIY*

 

[check_Child_State]

[check_Focus]

[checkedOld]

[editNameFlag]

[isAjaxing]

[isFirstNode]

[isHover]

[isLastNode]

[level]

[parentTId]

[tId]

[zAsync]

}

2.1 treeNode

2.1.1                                      treeNode.checked

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

節點的 checkBox / radio 的 勾選狀態。[setting.check.enable = true & treeNode.nocheck = false 時有效]

1、如果不使用 checked 屬性設置勾選狀態，請修改 setting.data.key.checked

2、建立 treeNode 數據時設置 treeNode.checked = true 可以讓節點的輸入框默認為勾選狀態

3、修改節點勾選狀態，可以使用 treeObj.checkNode / checkAllNodes / updateNode 方法，具體使用哪種請根據自己的需求而定

4、為了解決部分朋友生成 json 數據出現的兼容問題, 支持 "false","true" 字符串格式的數據

默認值：false

Boolean 格式說明

true 表示節點的輸入框被勾選

false 表示節點的輸入框未勾選

treeNode 舉例

1. 初始化的數據設置 默認為勾選狀態

var nodes = [

{ "id":1, "name":"test1", checked:true },

{ "id":2, "name":"test2", checked:true }

]

2. 獲取第一個根節點的勾選狀態

var treeObj = $.fn.zTree.getZTreeObj("tree");

var checked = treeObj.getNodes()[0].checked;

2.1.2                                      treeNode.children

概述[ 依賴 jquery.ztree.core 核心 js ]

節點的子節點數據集合。

1、如果不使用 children 屬性保存子節點數據，請修改 setting.data.key.children

2、異步加載時，對於設置了 isParent = true 的節點，在展開時將進行異步加載

默認值：無

Array(JSON) 格式說明

標准的 JSON 數據對象

treeNode 舉例

1. 初始化的標准嵌套格式的 JSON 數據對象

var nodes = [

{ "id":1, "name":"test1",

         children: [

         { "id":3, "name":"test3"},

         { "id":4, "name":"test4"},

         { "id":5, "name":"test5"}

         ]

},

{ "id":2, "name":"test2"  }

]

2. 獲取第一個根節點的子節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getNodes()[0].children;

2.1.3                                      treeNode.chkDisabled

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

1、設置節點的 checkbox / radio 是否禁用 [setting.check.enable = true 時有效]

2、為了解決部分朋友生成 json 數據出現的兼容問題, 支持 "false","true" 字符串格式的數據

3、請勿對已加載的節點修改此屬性，禁止 或 取消禁止 請使用 setChkDisabled() 方法

默認值：false

Boolean 格式說明

true 表示此節點的 checkbox / radio 被禁用。

false 表示此節點的 checkbox / radio 可以使用。

treeNode 舉例

1. 禁用節點 checkbox / radio

var nodes = [

         { "id":1, "name":"test1", "checked":true, "chkDisabled":true},

         { "id":2, "name":"test2", "chkDisabled":true},

         { "id":3, "name":"test3"}

]

2.1.4                                      treeNode.click

概述[ 依賴 jquery.ztree.core 核心 js ]

最簡單的 click 事件操作。相當於 onclick="..." 的內容。 如果操作較復雜，請使用 onClick 事件回調函數。

由於 IE 對於 onclick 和 click事件共存時的處理與其他瀏覽器不同，所以請不要利用此參數控制是否允許跳轉的操作（例如：treeNode.click = "return false;"）。如有類似需求，請不要使用 url 屬性設置網址，同時利用 onClick 回調函數控制跳轉。

默認值：無

String 格式說明

標准 javascript 語法， 例如：alert("test"); 等

treeNode 舉例

1. 設置某節點點擊時，彈出信息框

var nodes = [

         { "id":1, "name":"Google CN", "url":"http://g.cn", "click":"alert('test');"},

         ......

]

2.1.5                                      treeNode.getCheckStatus

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

獲取節點 checkbox / radio 半勾選狀態。[setting.check.enable = true 時有效]

初始化節點數據時，由 zTree 增加此屬性，請勿提前賦值

Function 參數說明

返回值JSON

{

         checked: true, //等同於 treeNode.checked

         half: true  //規則見下表

}

setting.check.checkType = "checkbox"

treeNode.checked

treeNode.check_Child_State

treeNode.halfCheck

half

-

-

true

true
 

true

-1

false

false

true

0

false

true

true

1

false

true

true

2

false

false
 

false

-1

false

false

false

0

false

false

false

1

false

true

false

2

false

true

 

setting.check.checkType = "radio"

treeNode.checked

treeNode.check_Child_State

treeNode.halfCheck

half

-

-

true

true
 

true

-1

false

false

true

0

false

false

true

2

false

true
 

false

-1

false

false

false

0

false

false

false

2

false

true

treeNode 舉例

1. 獲取第一個根節點的半選狀態

var treeObj = $.fn.zTree.getZTreeObj("tree");

var halfCheck = treeObj.getNodes()[0].getCheckStatus();

2.1.6                                      treeNode.getNextNode

概述[ 依賴 jquery.ztree.core 核心 js ]

獲取與 treeNode 節點相鄰的后一個節點。

初始化節點數據時，由 zTree 增加此屬性，請勿提前賦值

Function 參數說明

返回值JSON

與 treeNode 節點相鄰的后一個節點。

如果 treeNode 是最后一個節點，返回 null 。

treeNode 舉例

1. 獲取當前被選中的節點的下一個節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var sNodes = treeObj.getSelectedNodes();

if (sNodes.length > 0) {

         var node = sNodes[0].getNextNode();

}

2.1.7                                      treeNode.getParentNode

概述[ 依賴 jquery.ztree.core 核心 js ]

獲取 treeNode 節點的父節點。

初始化節點數據時，由 zTree 增加此屬性，請勿提前賦值

Function 參數說明

返回值JSON

treeNode 節點的父節點 JSON 數據對象。

如果 treeNode 是根節點，返回 null 。

treeNode 舉例

1. 獲取當前被選中的節點的父節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var sNodes = treeObj.getSelectedNodes();

if (sNodes.length > 0) {

         var node = sNodes[0].getParentNode();

}

2.1.8                                      treeNode.getPreNode

概述[ 依賴 jquery.ztree.core 核心 js ]

獲取與 treeNode 節點相鄰的前一個節點。

初始化節點數據時，由 zTree 增加此屬性，請勿提前賦值

Function 參數說明

返回值JSON

與 treeNode 節點相鄰的前一個節點。

如果 treeNode 是第一個節點，返回 null 。

treeNode 舉例

1. 獲取當前被選中的節點的前一個節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var sNodes = treeObj.getSelectedNodes();

if (sNodes.length > 0) {

         var node = sNodes[0].getPreNode();

}

2.1.9                                      treeNode.halfCheck

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

強制節點的 checkBox / radio 的 半勾選狀態。[setting.check.enable = true & treeNode.nocheck = false 時有效]

1、強制為半勾選狀態后，不再進行自動計算半勾選狀態

2、設置 treeNode.halfCheck = false 或 null 才能恢復自動計算半勾選狀態

3、為了解決部分朋友生成 json 數據出現的兼容問題, 支持 "false","true" 字符串格式的數據

默認值：false

Boolean 格式說明

true 表示節點的輸入框 強行設置為半勾選

false 表示節點的輸入框 根據 zTree 的規則自動計算半勾選狀態

treeNode 舉例

1. 初始化的數據設置 默認為半勾選狀態

var nodes = [

{ "id":1, "name":"test1", isParent:true, checked:true, halfCheck:true },

{ "id":2, "name":"test2", isParent:true, checked:false, halfCheck:true },

{ "id":3, "name":"test3", isParent:true, checked:true },

{ "id":4, "name":"test4", isParent:true, checked:false }

]

2.1.10                                 treeNode.icon

概述[ 依賴 jquery.ztree.core 核心 js ]

節點自定義圖標的 URL 路徑。

1、父節點如果只設置 icon ，會導致展開、折疊時都使用同一個圖標

2、父節點展開、折疊使用不同的個性化圖標需要同時設置 treeNode.iconOpen / treeNode.iconClose 兩個屬性

3、如果想利用 className 設置個性化圖標，需要設置 treeNode.iconSkin 屬性

默認值：無

String 格式說明

圖標圖片的 url 可以是相對路徑也可以是絕對路徑

設置相對路徑請注意頁面與圖片之間的關系，確保圖片能夠正常加載

treeNode 舉例

1. 設置節點的個性化圖標

var nodes = [

         //父節點展開 折疊時使用相同的圖標

         { name:"父節點1", icon:"/img/parent.gif"},

 

         //父節點展開 折疊時分別使用不同的圖標

         { name:"父節點2", iconOpen:"/img/open.gif", iconClose:"/img/close.gif"},

         //葉子節點個性化圖標

         { name:"葉子節點", icon:"/img/leaf.gif"}

]

2.1.11                                 treeNode.iconClose

概述[ 依賴 jquery.ztree.core 核心 js ]

父節點自定義折疊時圖標的 URL 路徑。

1、此屬性只針對父節點有效

2、此屬性必須與 iconOpen 同時使用

3、如果想利用 className 設置個性化圖標，需要設置 treeNode.iconSkin 屬性

默認值：無

String 格式說明

圖標圖片的 url 可以是相對路徑也可以是絕對路徑

設置相對路徑請注意頁面與圖片之間的關系，確保圖片能夠正常加載

treeNode 舉例

1. 設置節點的個性化圖標

var nodes = [

         //父節點展開 折疊時使用相同的圖標

         { name:"父節點1", icon:"/img/parent.gif"},

 

         //父節點展開 折疊時分別使用不同的圖標

         { name:"父節點2", iconOpen:"/img/open.gif", iconClose:"/img/close.gif"},

 

         //葉子節點個性化圖標

         { name:"葉子節點", icon:"/img/leaf.gif"}

]

2.1.12                                 treeNode.iconOpen

概述[ 依賴 jquery.ztree.core 核心 js ]

父節點自定義展開時圖標的 URL 路徑。

1、此屬性只針對父節點有效

2、此屬性必須與 iconClose 同時使用

3、如果想利用 className 設置個性化圖標，需要設置 treeNode.iconSkin 屬性

默認值：無

String 格式說明

圖標圖片的 url 可以是相對路徑也可以是絕對路徑

設置相對路徑請注意頁面與圖片之間的關系，確保圖片能夠正常加載

treeNode 舉例

1. 設置節點的個性化圖標

var nodes = [

         //父節點展開 折疊時使用相同的圖標

         { name:"父節點1", icon:"/img/parent.gif"},

 

         //父節點展開 折疊時分別使用不同的圖標

         { name:"父節點2", iconOpen:"/img/open.gif", iconClose:"/img/close.gif"},

 

         //葉子節點個性化圖標

         { name:"葉子節點", icon:"/img/leaf.gif"}

]

2.1.13                                 treeNode.iconSkin

概述[ 依賴 jquery.ztree.core 核心 js ]

節點自定義圖標的 className

1、需要修改 css，增加相應 className 的設置

2、css 方式簡單、方便，並且同時支持父節點展開、折疊狀態切換圖片

3、css 建議采用圖片分割渲染的方式以減少反復加載圖片，並且避免圖片閃動

4、zTree v3.x 的 iconSkin 同樣支持 IE6

5、如果想直接使用 圖片的Url路徑 設置節點的個性化圖標，需要設置 treeNode.icon / treeNode.iconOpen / treeNode.iconClose 屬性

默認值：無

String 格式說明

設置個性圖標的 className

css & treeNode 舉例

1. 設置節點的個性化圖標

css 內容：

.ztree li span.button.diy01_ico_open, .ztree li span.button.diy01_ico_close{...}

 

.ztree li span.button.diy02_ico_open{...}

.ztree li span.button.diy02_ico_close{...}

 

.ztree li span.button.diy03_ico_docu{...}

 

js中節點數據：

var nodes = [

         //父節點展開 折疊時使用相同的圖標

         { name:"父節點1", iconSkin:"diy01"},

 

         //父節點展開 折疊時分別使用不同的圖標

         { name:"父節點2", iconSkin:"diy02"},

 

         //葉子節點個性化圖標

         { name:"葉子節點", iconSkin:"diy03"}

]

2.1.14                                 treeNode.isHidden

概述[ 依賴 jquery.ztree.exhide 擴展 js ]

判斷 treeNode 節點是否被隱藏。

1、初始化 zTree 時，如果節點設置 isHidden = true，會被自動隱藏

2、請勿對已加載的節點修改此屬性，隱藏 / 顯示 請使用 hideNode() / hideNodes() / showNode() / showNodes() 方法

Boolean 格式說明

true 表示被隱藏

false 表示被顯示

treeNode 舉例

1. 查看第一個根節點是否被隱藏

var treeObj = $.fn.zTree.getZTreeObj("tree");

var sNodes = treeObj.getNodes();

if (sNodes.length > 0) {

         var isHidden = sNodes[0].isHidden;

}

2.1.15                                 treeNode.isParent

概述[ 依賴 jquery.ztree.core 核心 js ]

記錄 treeNode 節點是否為父節點。

1、初始化節點數據時，根據 treeNode.children 屬性判斷，有子節點則設置為 true，否則為 false

2、初始化節點數據時，如果設定 treeNode.isParent = true，即使無子節點數據，也會設置為父節點

3、為了解決部分朋友生成 json 數據出現的兼容問題, 支持 "false","true" 字符串格式的數據

Boolean 格式說明

true 表示是父節點

false 表示不是父節點

treeNode 舉例

1. 查看當前被選中的節點是否是父節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var sNodes = treeObj.getSelectedNodes();

if (sNodes.length > 0) {

         var isParent = sNodes[0].isParent;

}

2.1.16                                 treeNode.name

概述[ 依賴 jquery.ztree.core 核心 js ]

節點名稱。

1、如果不使用 name 屬性保存節點名稱，請修改 setting.data.key.name

默認值：無

String 格式說明

節點顯示的名稱字符串，標准 String 即可，所有特殊字符都會被自動轉義

treeNode 舉例

1. 設置節點的名稱為 test1、test2、test3

var nodes = [

         { "id":1, "name":"test1"},

         { "id":2, "name":"test2"},

         { "id":3, "name":"test3"}

]

2.1.17                                 treeNode.nocheck

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

1、設置節點是否隱藏 checkbox / radio [setting.check.enable = true 時有效]

2、為了解決部分朋友生成 json 數據出現的兼容問題, 支持 "false","true" 字符串格式的數據

默認值：false

Boolean 格式說明

true 表示此節點不顯示 checkbox / radio，不影響勾選的關聯關系，不影響父節點的半選狀態。

false 表示節點具有正常的勾選功能

treeNode 舉例

1. 不顯示某個節點的 checkbox / radio

var nodes = [

         { "id":1, "name":"test1", "nocheck":true},

         { "id":2, "name":"test2"},

         { "id":3, "name":"test3"}

]

2.1.18                                 treeNode.open

概述[ 依賴 jquery.ztree.core 核心 js ]

記錄 treeNode 節點的 展開 / 折疊 狀態。

1、初始化節點數據時，如果設定 treeNode.open = true，則會直接展開此節點

2、葉子節點 treeNode.open = false

3、為了解決部分朋友生成 json 數據出現的兼容問題, 支持 "false","true" 字符串格式的數據

默認值：false

Boolean 格式說明

true 表示節點為 展開 狀態

false 表示節點為 折疊 狀態

treeNode 舉例

1. 查看當前被選中的節點的 展開 / 折疊 狀態

var treeObj = $.fn.zTree.getZTreeObj("tree");

var sNodes = treeObj.getSelectedNodes();

if (sNodes.length > 0) {

         var isOpen = sNodes[0].open;

}

2.1.19                                 treeNode.target

概述[ 依賴 jquery.ztree.core 核心 js ]

設置點擊節點后在何處打開 url。[treeNode.url 存在時有效]

默認值：無

String 格式說明

同超鏈接 target 屬性: "_blank", "_self" 或 其他指定窗口名稱

省略此屬性，則默認為 "_blank"

treeNode 舉例

1. 設置點擊某節點時，彈出新頁面

var nodes = [

         { "id":1, "name":"test1", "url":"http://myTest.com", "target":"_blank"},

         ......

]

2.1.20                                 treeNode.url

概述[ 依賴 jquery.ztree.core 核心 js ]

節點鏈接的目標 URL

1、編輯模式 (setting.edit.enable = true) 下此屬性功能失效，如果必須使用類似功能，請利用 onClick 事件回調函數自行控制。

2、如果需要在 onClick 事件回調函數中進行跳轉控制，那么請將 URL 地址保存在其他自定義的屬性內，請勿使用 url

默認值：無

String 格式說明

同超鏈接 href 屬性

treeNode 舉例

1. 設置某節點點擊時，跳轉到 g.cn

var nodes = [

         { "id":1, "name":"Google CN", "url":"http://g.cn"},

         ......

]

2.1.21                                 treeNode.* DIY *

概述[ 依賴 jquery.ztree.core 核心 js ]

用於保存節點的其他自定義數據信息，不要與 zTree 使用的屬性相同即可，用戶可隨意設定。

treeNode 舉例

1. 設置節點的備用英文名稱

var node = { "id":1, "name":"test1", "ename":"test eName"};

2.1.22            treeNode.check_Child_State

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

用於設置節點的子節點的 checkBox / radio 的半選狀態。[setting.check.enable = true 時有效]

v3.x 針對節點數據對象提供 treeNode.getCheckStatus() 方法獲取標准的半選狀態

zTree 內部使用，請勿進行初始化 或 隨意修改

默認值：true

Number 格式說明

規則如下：

setting.check.checkType = "checkbox"

treeNode.check_Child_State

勾選狀態說明

    

-1

不存在子節點 或 子節點全部設置為 nocheck = true

    

0

無 子節點被勾選

    

1

部分 子節點被勾選

    

2

全部 子節點被勾選

    

 

setting.check.checkType = "radio"

treeNode.check_Child_State

勾選狀態說明

    

-1

不存在子節點 或 子節點全部設置為 nocheck = true

    

0

無 子節點被勾選

    

2

有 子節點被勾選

    

2.1.23            treeNode.check_Focus

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

用於設置節點的 checkBox / radio 的 focus 狀態。[setting.check.enable = true 時有效]

zTree 內部使用，請勿進行初始化 或 隨意修改

默認值：false

Boolean 格式說明

true 表示當前鼠標移動到輸入框內

false 表示當前鼠標移動到輸入框外

2.1.24            treeNode.checkedOld

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

節點的 checkBox / radio 在初始化時的 勾選狀態。[setting.check.enable = true & treeNode.nocheck = false 時有效]

1、zTree 初始化節點數據時會對此屬性進行賦值，因此請勿對此屬性初始化

2、如需配合 zTreeObj.getChangeCheckedNodes 方法實現特殊功能，可以根據需求在使用中自行修改 checkedOld 數據

默認值：checked的初始化值

Boolean 格式說明

true 表示節點初始化時 輸入框被勾選

false 表示節點初始化時 輸入框未勾選

treeNode 舉例

1. 獲取第一個根節點的初始勾選狀態

var treeObj = $.fn.zTree.getZTreeObj("tree");

var checkedOld = treeObj.getNodes()[0].checkedOld;

2.1.25            treeNode.editNameFlag

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

用於記錄節點是否處於編輯名稱狀態。[setting.edit.enable = true 時有效]

zTree 內部使用，請勿進行初始化 或 隨意修改

默認值：false

Boolean 格式說明

true 表示節點處於編輯名稱狀態

false 表示節點未處於編輯名稱狀態

2.1.26            treeNode.isAjaxing

概述[ 依賴 jquery.ztree.core 核心 js ]

記錄 treeNode 節點是否正在進行異步加載。

初始化節點數據時，由 zTree 增加此屬性，請勿提前賦值

Boolean 格式說明

true 表示節點正在進行異步加載

false 表示節點沒有進行異步加載

treeNode 舉例

1. 查看當前被選中的節點是否節點正在進行異步加載

var treeObj = $.fn.zTree.getZTreeObj("tree");

var sNodes = treeObj.getSelectedNodes();

if (sNodes.length > 0) {

         var isAjaxing = sNodes[0].isAjaxing;

}

2.1.27            treeNode.isFirstNode

概述[ 依賴 jquery.ztree.core 核心 js ]

記錄 treeNode 節點是否為同級節點中的第一個節點。

使用 exhide 擴展后，只針對顯示的節點設置此屬性

初始化節點數據時，由 zTree 增加此屬性，請勿提前賦值

Boolean 格式說明

true 表示是同級節點中的第一個節點

false 表示不是同級節點中的第一個節點

節點被隱藏后，isFirstNode = false

treeNode 舉例

1. 查看當前被選中的節點是否是同級節點中的第一個節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var sNodes = treeObj.getSelectedNodes();

if (sNodes.length > 0) {

         var isFirstNode = sNodes[0].isFirstNode;

}

2.1.28            treeNode.isHover

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

記錄節點 的 hover 狀態，主要用於 setting.view.addHoverDom / removeHoverDom 。

zTree 內部使用，請勿進行初始化 或 隨意修改

默認值：false

Boolean 格式說明

true 表示節點處於 hover 狀態

false 表示節點未處於 hover 狀態

2.1.29            treeNode.isLastNode

概述[ 依賴 jquery.ztree.core 核心 js ]

記錄 treeNode 節點是否為同級節點中的最后一個節點。

使用 exhide 擴展后，只針對顯示的節點設置此屬性

初始化節點數據時，由 zTree 增加此屬性，請勿提前賦值

Boolean 格式說明

true 表示是同級節點中的最后一個節點

false 表示不是同級節點中的最后一個節點

節點被隱藏后，isLastNode = false

treeNode 舉例

1. 查看當前被選中的節點是否是同級節點中的最后一個節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var sNodes = treeObj.getSelectedNodes();

if (sNodes.length > 0) {

         var isLastNode = sNodes[0].isLastNode;

}

2.1.30            treeNode.level

概述[ 依賴 jquery.ztree.core 核心 js ]

記錄節點的層級

初始化節點數據時，由 zTree 增加此屬性，請勿提前賦值

Number 格式說明

根節點 level = 0，依次遞增

treeNode 舉例

1. 查看當前被選中的節點的級數

var treeObj = $.fn.zTree.getZTreeObj("tree");

var sNodes = treeObj.getSelectedNodes();

if (sNodes.length > 0) {

         var level = sNodes[0].level;

}

2.1.31            treeNode.parentTId

概述[ 依賴 jquery.ztree.core 核心 js ]

treeNode 節點的父節點唯一標識 tId。

1、v3.x 用 parentTId 替換了原先的 parentNode 屬性，同時增加了 getParentNode 方法，以避免原先 parentNode 造成的 clone 死循環

2、初始化節點數據時，由 zTree 增加此屬性，請勿提前賦值

String 格式說明

zTree 內部生成的節點唯一標識，請參考 treeNode.tId 的說明

如果 treeNode 是根節點，則 parentTId = null

treeNode 舉例

1. 查看當前被選中的節點的父節點 tId

var treeObj = $.fn.zTree.getZTreeObj("tree");

var sNodes = treeObj.getSelectedNodes();

if (sNodes.length > 0) {

         var parentTId = sNodes[0].parentTId;

}

2.1.32            treeNode.tId

概述[ 依賴 jquery.ztree.core 核心 js ]

treeNode 節點的唯一標識 tId。

初始化節點數據時，由 zTree 增加此屬性，請勿提前賦值

String 格式說明

生成規則：setting.treeId + "_" + 內部計數

treeNode 舉例

1. 查看當前被選中的節點的 tId

var treeObj = $.fn.zTree.getZTreeObj("tree");

var sNodes = treeObj.getSelectedNodes();

if (sNodes.length > 0) {

         var tId = sNodes[0].tId;

}

2.1.33            treeNode.zAsync

概述[ 依賴 jquery.ztree.core 核心 js ]

記錄 treeNode 節點是否已經進行過異步加載，避免父節點反復異步加載數據。

初始化節點數據時，由 zTree 增加此屬性，請勿提前賦值

默認值：false （無子節點的父節點）； true （有子節點的父節點 & 葉子節點）

Boolean 格式說明

true 表示父節點展開時不需要自動異步加載

false 表示父節點展開時需要自動異步加載

此參數不會對 reAsyncChildNodes 方法造成任何影響

treeNode 舉例

1. 查看當前被選中的節點是否節點是否需要自動異步加載

var treeObj = $.fn.zTree.getZTreeObj("tree");

var sNodes = treeObj.getSelectedNodes();

if (sNodes.length > 0) {

         var zAsync = sNodes[0].zAsync;

}

3   setting 配置詳解

var setting = {

treeId : "",

treeObj : null,

 

async : {

autoParam : [],

contentType : "application...",

dataFilter : null,

dataType : "text",

enable : false,

otherParam : [],

type : "post",

url : ""

},

 

callback : {

beforeAsync : null,

beforeCheck : null,

beforeClick : null,

beforeCollapse : null,

beforeDblClick : null,

beforeDrag : null,

beforeDragOpen : null,

beforeDrop : null,

beforeEditName : null,

beforeExpand : null,

beforeMouseDown : null,

beforeMouseUp : null,

beforeRemove : null,

beforeRename : null,

beforeRightClick : null,

 

onAsyncError : null,

onAsyncSuccess : null,

onCheck : null,

onClick : null,

onCollapse : null,

onDblClick : null,

onDrag : null,

onDrop : null,

onExpand : null,

onMouseDown : null,

onMouseUp : null,

onNodeCreated : null,

onRemove : null,

onRename : null,

onRightClick : null

},

 

check : {

autoCheckTrigger : false,

chkboxType : {"Y": "ps", "N": "ps"},

chkStyle : "checkbox",

enable : false,

nocheckInherit : false

radioType : "level"

},

 

data : {

keep : {

leaf : false,

parent : false

},

key : {

checked : "checked",

children : "children",

name : "name",

title : ""

url : "url"

},

simpleData : {

enable : false,

idKey : "id",

pIdKey : "pId",

rootPId : null

}

},

 

edit : {

drag : {

autoExpandTrigger : true,

isCopy : true,

isMove : true,

prev : true,

next : true,

inner : true,

borderMax : 10,

borderMin : -5,

minMoveSize : 5,

maxShowNodeNum : 5,

autoOpenTime : 500

},

editNameSelectAll : false,

enable : false,

removeTitle : "remove",

renameTitle : "rename",

showRemoveBtn : true,

showRenameBtn : true

},

 

view : {

addDiyDom : null,

addHoverDom : null,

autoCancelSelected : true,

dblClickExpand : true,

expandSpeed : "fast",

fontCss : {},

nameIsHTML : false,

removeHoverDom : null,

selectedMulti : true,

showIcon : true,

showLine : true,

showTitle : true

}

}

 

3.1    setting

 

3.1.1                 setting.treeId

概述[ 依賴 jquery.ztree.core 核心 js ]

zTree 的唯一標識，初始化后，等於 用戶定義的 zTree 容器的 id 屬性值。

請勿進行初始化 或 修改，屬於內部參數。

3.1.2                 setting.treeObj

概述[ 依賴 jquery.ztree.core 核心 js ]

zTree 容器的 jQuery 對象，主要功能：便於操作。

請勿進行初始化 或 修改，屬於內部參數。

3.2 setting.async

3.2.1                 setting.async.autoParam

概述[ 依賴 jquery.ztree.core 核心 js ]

異步加載時需要自動提交父節點屬性的參數。[setting.async.enable = true 時生效]

默認值：[ ]

Array(String) 格式說明

1、將需要作為參數提交的屬性名稱，制作成 Array 即可，例如：["id", "name"]

2、可以設置提交時的參數名稱，例如 server 只接受 zId : ["id=zId"]

setting 舉例

1. 設置 id 屬性為自動提交的參數

var setting = {

         async: {

                 enable: true,

                 url: "http://host/getNode.php",

                 autoParam: ["id"]

         }

};

假設 異步加載 父節點(node = {id:1, name:"test"}) 的子節點時，將提交參數 id=1

......

2. 設置 id 屬性作為 zId 成為自動提交的參數

var setting = {

         async: {

                 enable: true,

                 url: "http://host/getNode.php",

                 autoParam: ["id=zId"]

         }

};

假設 對父節點 node = {id:1, name:"test"}，進行異步加載時，將提交參數 zId=1

......

3.2.2                 setting.async.contentType

概述[ 依賴 jquery.ztree.core 核心 js ]

Ajax 提交參數的數據類型。[setting.async.enable = true 時生效]

默認值："application/x-www-form-urlencoded"

String 格式說明

contentType = "application/x-www-form-urlencoded" 可以滿足絕大部分請求，按照標准的 Form 格式提交參數

contentType = "application/json" 可以滿足 .Net 的編程需要，按照 JSON 格式提交參數

setting 舉例

1. 設置 Ajax 提交參數的數據類型為 JSON 格式

var setting = {

         async: {

                 enable: true,

                 contentType: "application/json",

                 url: "http://host/getNode.php",

                 autoParam: ["id", "name"]

         }

};

......

3.2.3                 setting.async.dataFilter

概述[ 依賴 jquery.ztree.core 核心 js ]

用於對 Ajax 返回數據進行預處理的函數。[setting.async.enable = true 時生效]

默認值：null

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

parentNodeJSON

進行異步加載的父節點 JSON 數據對象

對根進行異步加載時，parentNode = null

childNodesArray(JSON) / JSON / String

異步加載獲取到的數據轉換后的 Array(JSON) / JSON / String 數據對象

v3.4開始 支持 XML 數據格式的 String

返回值Array(JSON) / JSON

返回值是 zTree 支持的JSON 數據結構即可。

v3.x 支持單個 JSON 節點數據進行加載

setting & function 舉例

1. 修改異步獲取到的節點name屬性

function ajaxDataFilter(treeId, parentNode, childNodes) {

    if (childNodes) {

      for(var i =0; i < childNodes.length; i++) {

        childNodes[i].name += "_filter";

      }

    }

    return childNodes;

};

var setting = {

         async: {

                 enable: true,

                 url: "http://host/getNode.php",

                 dataFilter: ajaxDataFilter

         }

};

......

3.2.4                 setting.async.dataType

概述[ 依賴 jquery.ztree.core 核心 js ]

Ajax 獲取的數據類型。[setting.async.enable = true 時生效]

默認值："text"

String 格式說明

dataType = "text" 可以滿足絕大部分請求

其余 dataType 類型請參考 jQuery ajax 中的 dataType 參數

setting 舉例

1. 設置 Ajax 獲取的數據類型為 純文本

var setting = {

         async: {

                 enable: true,

                 dataType: "text",

                 url: "http://host/getNode.php",

                 autoParam: ["id", "name"]

         }

};

......

3.2.5                 setting.async.enable

概述[ 依賴 jquery.ztree.core 核心 js ]

設置 zTree 是否開啟異步加載模式

默認值：false

Boolean 格式說明

true 表示 開啟 異步加載模式

false 表示 關閉 異步加載模式

如果設置為 true，請務必設置 setting.async 內的其它參數。

如果需要根節點也異步加載，初始化時 treeNodes 參數設置為 null 即可。

setting 舉例

1. 需要開啟異步加載模式

var setting = {

         async: {

                 enable: true,

                 url: "http://host/getNode.php",

                 autoParam: ["id", "name"]

         }

};

......

3.2.6                 setting.async.otherParam

概述[ 依賴 jquery.ztree.core 核心 js ]

Ajax 請求提交的靜態參數鍵值對。[setting.async.enable = true 時生效]

默認值：[ ]

Array(String) 格式說明

可以為空[ ]，如果有 key，則必須存在 value。 例如：[key, value]

JSON 格式說明

直接用 JSON 格式制作鍵值對，例如：{ key1:value1, key2:value2 }

setting 舉例

1. 設置 Array(String) 格式的參數

var setting = {

         async: {

                 enable: true,

                 url: "http://host/getNode.php",

                 otherParam: ["id", "1", "name", "test"]

         }

};

進行異步加載時，將提交參數 id=1&name=test

2. 設置 JSON 格式的參數

var setting = {

         async: {

                 enable: true,

                 url: "http://host/getNode.php",

                 otherParam: { "id":"1", "name":"test"}

         }

};

進行異步加載時，將提交參數 id=1&name=test

3.2.7                 setting.async.type

概述[ 依賴 jquery.ztree.core 核心 js ]

Ajax 的 http 請求模式。[setting.async.enable = true 時生效]

默認值："post"

String 格式說明

type = "post" 表示異步加載采用 post 方法請求

type = "get" 表示異步加載采用 get 方法請求

對應於 jQuery ajax 中的 type 參數

setting 舉例

1. 設置使用 get 方式請求數據

var setting = {

         async: {

                 enable: true,

                 type: "get",

                 url: "http://host/getNode.php",

                 autoParam: ["id", "name"]

         }

};

......

3.2.8                 setting.async.url

概述[ 依賴 jquery.ztree.core 核心 js ]

Ajax 獲取數據的 URL 地址。[setting.async.enable = true 時生效]

默認值：""

String 格式說明

設置固定的異步加載 url 字符串，請注意地址的路徑，確保頁面能正常加載

url 內也可以帶參數，這些參數就只能是通過 get 方式提交了，並且請注意進行轉碼

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

需要異步加載子節點的的父節點 JSON 數據對象

針對根進行異步加載時，treeNode = null

返回值String

返回值同 String 格式的數據

setting & function 舉例

1. 設置異步獲取節點的 URL 為 nodes.php

var setting = {

         async: {

                 enable: true,

                 url: "nodes.php",

                 autoParam: ["id", "name"]

         }

};

......

2. 設置異步獲取節點的 URL 為 function 動態獲取

function getAsyncUrl(treeId, treeNode) {

    return treeNode.isParent ? "nodes1.php" : "nodes2.php";

};

var setting = {

         async: {

                 enable: true,

                 url: getAsyncUrl,

                 autoParam: ["id", "name"]

         }

};

......

3.3 setting.callback

3.3.1                 setting.callback.beforeAsync

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲異步加載之前的事件回調函數，zTree 根據返回值確定是否允許進行異步加載

默認值：null

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

進行異步加載的父節點 JSON 數據對象

針對根進行異步加載時，treeNode = null

返回值Boolean

返回值是 true / false

如果返回 false，zTree 將不進行異步加載，也無法觸發 onAsyncSuccess / onAsyncError 事件回調函數

setting & function 舉例

1. 禁止 id 為 1 的父節點進行異步加載操作

function zTreeBeforeAsync(treeId, treeNode) {

    return (treeNode.id !== 1);

};

var setting = {

         callback: {

                 beforeAsync: zTreeBeforeAsync

         }

};

......

3.3.2                 setting.callback.beforeCheck

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

用於捕獲 勾選 或 取消勾選 之前的事件回調函數，並且根據返回值確定是否允許 勾選 或 取消勾選

默認值：null

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

進行 勾選 或 取消勾選 的節點 JSON 數據對象

返回值Boolean

返回值是 true / false

如果返回 false，將不會改變勾選狀態，並且無法觸發 onCheck 事件回調函數

setting & function 舉例

1. 禁止所有勾選操作，保持初始化的勾選狀態

function zTreeBeforeCheck(treeId, treeNode) {

    return false;

};

var setting = {

         callback: {

                 beforeCheck: zTreeBeforeCheck

         }

};

......

3.3.3                 setting.callback.beforeClick

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲單擊節點之前的事件回調函數，並且根據返回值確定是否允許單擊操作

默認值：null

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

被單擊的節點 JSON 數據對象

clickFlagNumber

節點被點擊后的選中操作類型，詳細看下表

clickFlag

selectedMulti

autoCancelSelected
&&
event.ctrlKey

isSelected

選中操作

1

true

false

false

普通選中

1

true

false

true

普通選中

2

true

true

false

追加選中

0

true

true

true

取消選中

1

false

false

false

普通選中

1

false

false

true

普通選中

1

false

true

false

普通選中

0

false

true

true

取消選中

返回值Boolean

返回值是 true / false

如果返回 false，zTree 將不會選中節點，也無法觸發 onClick 事件回調函數

setting & function 舉例

1. 禁止節點被選中

function zTreeBeforeClick(treeId, treeNode, clickFlag) {

    return (treeNode.id !== 1);

};

var setting = {

         callback: {

                 beforeClick: zTreeBeforeClick

         }

};

......

3.3.4                 setting.callback.beforeCollapse

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲父節點折疊之前的事件回調函數，並且根據返回值確定是否允許折疊操作

默認值：null

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

要折疊的父節點 JSON 數據對象

返回值Boolean

返回值是 true / false

如果返回 false，zTree 將不會折疊節點，也無法觸發 onCollapse 事件回調函數

setting & function 舉例

1. 禁止所有已展開的父節點折疊

function zTreeBeforeCollapse(treeId, treeNode) {

    return false;

};

var setting = {

         callback: {

                 beforeCollapse: zTreeBeforeCollapse

         }

};

......

3.3.5                 setting.callback.beforeDblClick

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲 zTree 上鼠標雙擊之前的事件回調函數，並且根據返回值確定觸發 onDblClick 事件回調函數

默認值：null

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

鼠標雙擊時所在節點的 JSON 數據對象

如果不在節點上，則返回 null

返回值Boolean

返回值是 true / false

如果返回 false，將僅僅無法觸發 onDblClick 事件回調函數，對其他操作無任何影響

此事件回調函數對雙擊節點展開功能無任何影響，如果需要設置請參考 setting.view.dblClickExpand 屬性

setting & function 舉例

1. 禁止 onDblClick 事件

function zTreeBeforeDblClick(treeId, treeNode) {

    return false;

};

var setting = {

         callback: {

                 beforeDblClick: zTreeBeforeDblClick

         }

};

......

3.3.6                 setting.callback.beforeDrag

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

用於捕獲節點被拖拽之前的事件回調函數，並且根據返回值確定是否允許開啟拖拽操作

默認值：null

Function 參數說明

treeIdString

被拖拽的節點 treeNodes 所在 zTree 的 treeId，便於用戶操控

treeNodesArray(JSON)

要被拖拽的節點 JSON 數據集合

v3.x 允許多個同級節點同時被拖拽，因此將此參數修改為 Array(JSON)

如果拖拽時多個被選擇的節點不是同級關系，則只能拖拽鼠標當前所在位置的節點

返回值Boolean

返回值是 true / false

如果返回 false，zTree 將終止拖拽，也無法觸發 onDrag / beforeDrop / onDrop 事件回調函數

setting & function 舉例

1. 禁止全部拖拽操作

function zTreeBeforeDrag(treeId, treeNodes) {

    return false;

};

var setting = {

         edit: {

                 enable: true

         },

         callback: {

                 beforeDrag: zTreeBeforeDrag

         }

};

......

3.3.7                 setting.callback.beforeDragOpen

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

用於捕獲拖拽節點移動到折疊狀態的父節點后，即將自動展開該父節點之前的事件回調函數，並且根據返回值確定是否允許自動展開操作

默認值：null

Function 參數說明

treeIdString

需要被展開的父節點 treeNode 所在 zTree 的 treeId，便於用戶操控

treeNodeJSON

要被自動展開的父節點 JSON 數據對象

返回值Boolean

返回值是 true / false

如果返回 false，zTree 將無法進行自動展開操作

setting & function 舉例

1. 禁止全部拖拽時的自動展開操作

function zTreeBeforeDragOpen(treeId, treeNode) {

    return false;

};

var setting = {

         edit: {

                 enable: true

         },

         callback: {

                 beforeDragOpen: zTreeBeforeDragOpen

         }

};

......

3.3.8                 setting.callback.beforeDrop

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

用於捕獲節點拖拽操作結束之前的事件回調函數，並且根據返回值確定是否允許此拖拽操作

默認值：null

如未拖拽到有效位置，則不觸發此回調函數，直接將節點恢復原位置

Function 參數說明

treeIdString

目標節點 targetNode 所在 zTree 的 treeId，便於用戶操控

treeNodesArray(JSON)

被拖拽的節點 JSON 數據集合

無論拖拽操作為 復制 還是 移動，treeNodes 都是當前被拖拽節點的數據集合。

targetNodeJSON

treeNodes 被拖拽放開的目標節點 JSON 數據對象。

如果拖拽成為根節點，則 targetNode = null

moveTypeString

指定移動到目標節點的相對位置

"inner"：成為子節點，"prev"：成為同級前一個節點，"next"：成為同級后一個節點

isCopyBoolean

拖拽節點操作是 復制 或 移動

true：復制；false：移動

返回值Boolean

返回值是 true / false

如果返回 false，zTree 將恢復被拖拽的節點，也無法觸發 onDrop 事件回調函數

setting & function 舉例

1. 禁止將節點拖拽成為根節點

function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {

    return !(targetNode == null || (moveType != "inner" && !targetNode.parentTId));

};

var setting = {

         edit: {

                 enable: true

         },

         callback: {

                 beforeDrop: zTreeBeforeDrop

         }

};

......

3.3.9                 setting.callback.beforeEditName

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

用於捕獲節點編輯按鈕的 click 事件，並且根據返回值確定是否允許進入名稱編輯狀態

此事件回調函數最主要是用於捕獲編輯按鈕的點擊事件，然后觸發自定義的編輯界面操作。

默認值：null

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

將要進入編輯名稱狀態的節點 JSON 數據對象

返回值Boolean

返回值是 true / false

如果返回 false，節點將無法進入 zTree 默認的編輯名稱狀態

setting & function 舉例

1. 禁止修改父節點的名稱

function zTreeBeforeEditName(treeId, treeNode) {

         return !treeNode.isParent;

}

var setting = {

         edit: {

                 enable: true

         },

         callback: {

                 beforeEditName: zTreeBeforeEditName

         }

};

......

3.3.10            setting.callback.beforeExpand

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲父節點展開之前的事件回調函數，並且根據返回值確定是否允許展開操作

默認值：null

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

要展開的父節點 JSON 數據對象

返回值Boolean

返回值是 true / false

如果返回 false，zTree 將不會展開節點，也無法觸發 onExpand 事件回調函數

setting & function 舉例

1. 禁止所有已折疊的父節點展開

function zTreeBeforeExpand(treeId, treeNode) {

    return false;

};

var setting = {

         callback: {

                 beforeExpand: zTreeBeforeExpand

         }

};

......

function zTreeBeforeMouseDown(treeId, treeNode) {

    return false;

};

var setting = {

         callback: {

                 beforeMouseDown: zTreeBeforeMouseDown

         }

};

......

3.3.11            setting.callback.beforeMouseDown

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲 zTree 上鼠標按鍵按下之前的事件回調函數，並且根據返回值確定觸發 onMouseDown 事件回調函數

默認值：null

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

鼠標按鍵按下時所在節點的 JSON 數據對象

如果不在節點上，則返回 null

返回值Boolean

返回值是 true / false

如果返回 false，將僅僅無法觸發 onMouseDown 事件回調函數，對其他操作無任何影響

setting & function 舉例

1. 禁止 onMouseDown 事件

function zTreeBeforeMouseDown(treeId, treeNode) {

    return false;

};

var setting = {

         callback: {

                 beforeMouseDown: zTreeBeforeMouseDown

         }

};

......

3.3.12            setting.callback.beforeMouseUp

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲 zTree 上鼠標按鍵松開之前的事件回調函數，並且根據返回值確定觸發 onMouseUp 事件回調函數

默認值：null

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

鼠標按鍵松開時所在節點的 JSON 數據對象

如果不在節點上，則返回 null

返回值Boolean

返回值是 true / false

如果返回 false，將僅僅無法觸發 onMouseUp 事件回調函數，對其他操作無任何影響

setting & function 舉例

1. 禁止 onMouseUp 事件

function zTreeBeforeMouseUp(treeId, treeNode) {

    return false;

};

var setting = {

         callback: {

                 beforeMouseUp: zTreeBeforeMouseUp

         }

};

......

3.3.13            setting.callback.beforeRemove

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

用於捕獲節點被刪除之前的事件回調函數，並且根據返回值確定是否允許刪除操作

默認值：null

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

將要刪除的節點 JSON 數據對象

返回值Boolean

返回值是 true / false

如果返回 false，zTree 將不刪除節點，也無法觸發 onRemove 事件回調函數

setting & function 舉例

1. 禁止全部刪除操作

function zTreeBeforeRemove(treeId, treeNode) {

         return false;

}

var setting = {

         edit: {

                 enable: true

         },

         callback: {

                 beforeRemove: zTreeBeforeRemove

         }

};

......

3.3.14            setting.callback.beforeRename

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

用於捕獲節點編輯名稱結束（Input 失去焦點 或 按下 Enter 鍵）之后，更新節點名稱數據之前的事件回調函數，並且根據返回值確定是否允許更改名稱的操作

節點進入編輯名稱狀態后，按 ESC 鍵可以放棄當前修改，恢復原名稱，取消編輯名稱狀態

默認值：null

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

將要更改名稱的節點 JSON 數據對象

newNameString

修改后的新名稱

返回值Boolean

返回值是 true / false

如果返回 false，zTree 將保持名稱編輯狀態，無法觸發 onRename 事件回調函數，並且會導致屏蔽其它事件，直到修改名稱使得 beforeRename 返回 true

如果返回 false，不會讓 input 輸入框獲取焦點，避免由於警告信息而導致反復觸發 beforeRename。 請在關閉提示警告信息后，利用 editName 方法讓 input 重新獲取焦點。

setting & function 舉例

1. 禁止修改的名稱的長度小於 5

function zTreeBeforeRename(treeId, treeNode, newName) {

         return newName.length > 5;

}

var setting = {

         edit: {

                 enable: true

         },

         callback: {

                 beforeRename: zTreeBeforeRename

         }

};

......

3.3.15            setting.callback.beforeRightClick

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲 zTree 上鼠標右鍵點擊之前的事件回調函數，並且根據返回值確定觸發 onRightClick 事件回調函數

默認值：null

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

鼠標右鍵點擊時所在節點的 JSON 數據對象

如果不在節點上，則返回 null

返回值Boolean

返回值是 true / false

如果返回 false，將僅僅無法觸發 onRightClick 事件回調函數，對其他操作無任何影響

setting & function 舉例

1. 禁止 onRightClick 事件

function zTreeBeforeRightClick(treeId, treeNode) {

    return false;

};

var setting = {

         callback: {

                 beforeRightClick: zTreeBeforeRightClick

         }

};

......

3.3.16            setting.callback.onAsyncError

Function(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown)

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲異步加載出現異常錯誤的事件回調函數

如果設置了 setting.callback.beforeAsync 方法，且返回 false，將無法觸發 onAsyncSuccess / onAsyncError 事件回調函數。

默認值：null

Function 參數說明

eventjs event 對象

標准的 js event 對象

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

進行異步加載的父節點 JSON 數據對象

針對根進行異步加載時，treeNode = null

XMLHttpRequestString

標准 XMLHttpRequest 對象，請參考 JQuery API 文檔。

textStatusString

請求狀態：success，error，請參考 JQuery API 文檔。

errorThrownString

errorThrown 只有當異常發生時才會被傳遞，請參考 JQuery API 文檔。

setting & function 舉例

1. 異步加載出現異常后，彈出錯誤信息

function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {

    alert(XMLHttpRequest);

};

var setting = {

         callback: {

                 onAsyncError: zTreeOnAsyncError

         }

};

......

3.3.17            setting.callback.onAsyncSuccess

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲異步加載正常結束的事件回調函數

如果設置了 setting.callback.beforeAsync 方法，且返回 false，將無法觸發 onAsyncSuccess / onAsyncError 事件回調函數。

默認值：null

Function 參數說明

eventjs event 對象

標准的 js event 對象

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

進行異步加載的父節點 JSON 數據對象

針對根進行異步加載時，treeNode = null

msgString / Object

異步獲取的節點數據字符串，主要便於用戶調試使用。

實際數據類型會受 setting.async.dataType 的設置影響，請參考 JQuery API 文檔。

setting & function 舉例

1. 異步加載成功后，彈出提示信息

function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {

    alert(msg);

};

var setting = {

         callback: {

                 onAsyncSuccess: zTreeOnAsyncSuccess

         }

};

......

3.3.18            setting.callback.onCheck

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

用於捕獲 checkbox / radio 被勾選 或 取消勾選的事件回調函數

如果設置了 setting.callback.beforeCheck 方法，且返回 false，將無法觸發 onCheck 事件回調函數。

默認值：null

Function 參數說明

eventjs event 對象

標准的 js event 對象

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

被勾選 或 取消勾選的節點 JSON 數據對象

setting & function 舉例

1. 每次點擊 checkbox 或 radio 后， 彈出該節點的 tId、name 以及當前勾選狀態的信息

function zTreeOnCheck(event, treeId, treeNode) {

    alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);

};

var setting = {

         callback: {

                 onCheck: zTreeOnCheck

         }

};

......

3.3.19            setting.callback.onClick

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲節點被點擊的事件回調函數

如果設置了 setting.callback.beforeClick 方法，且返回 false，將無法觸發 onClick 事件回調函數。

默認值：null

Function 參數說明

eventjs event 對象

標准的 js event 對象

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

被點擊的節點 JSON 數據對象

clickFlagNumber

節點被點擊后的選中操作類型，詳細看下表

clickFlag

selectedMulti

autoCancelSelected
&&
event.ctrlKey

isSelected

選中操作

1

true

false

false

普通選中

1

true

false

true

普通選中

2

true

true

false

追加選中

0

true

true

true

取消選中

1

false

false

false

普通選中

1

false

false

true

普通選中

1

false

true

false

普通選中

0

false

true

true

取消選中

setting & function 舉例

1. 每次點擊節點后， 彈出該節點的 tId、name 的信息

function zTreeOnClick(event, treeId, treeNode) {

    alert(treeNode.tId + ", " + treeNode.name);

};

var setting = {

         callback: {

                 onClick: zTreeOnClick

         }

};

......

3.3.20            setting.callback.onCollapse

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲節點被折疊的事件回調函數

如果設置了 setting.callback.beforeCollapse 方法，且返回 false，將無法觸發 onCollapse 事件回調函數。

默認值：null

Function 參數說明

eventjs event 對象

標准的 js event 對象

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

被折疊的節點 JSON 數據對象

setting & function 舉例

1. 每次折疊節點后， 彈出該節點的 tId、name 的信息

function zTreeOnCollapse(event, treeId, treeNode) {

    alert(treeNode.tId + ", " + treeNode.name);

};

var setting = {

         callback: {

                 onCollapse: zTreeOnCollapse

         }

};

......

3.3.21            setting.callback.onDblClick

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲 zTree 上鼠標雙擊之后的事件回調函數

如果設置了 setting.callback.beforeDblClick 方法，且返回 false，將無法觸發 onDblClick 事件回調函數。

默認值：null

Function 參數說明

eventjs event 對象

標准的 js event 對象

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

鼠標雙擊時所在節點的 JSON 數據對象

如果不在節點上，則返回 null

setting & function 舉例

1. 每次鼠標雙擊后， 彈出鼠標所在節點的 tId、name 的信息

function zTreeOnDblClick(event, treeId, treeNode) {

    alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");

};

var setting = {

         callback: {

                 onDblClick: zTreeOnDblClick

         }

};

......

3.3.22            setting.callback.onDrag

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

用於捕獲節點被拖拽的事件回調函數

如果設置了 setting.callback.beforeDrag 方法，且返回 false，將無法觸發 onDrag 事件回調函數。

默認值：null

Function 參數說明

eventjs event 對象

標准的 js event 對象

treeIdString

被拖拽的節點 treeNodes 所在 zTree 的 treeId，便於用戶操控

treeNodesArray(JSON)

要被拖拽的節點 JSON 數據集合

setting & function 舉例

1. 每次開始進行拖拽節點后， 彈出被拖拽節點的個數信息

function zTreeOnDrag(event, treeId, treeNodes) {

    alert(treeNodes.length);

};

var setting = {

         callback: {

                 onDrag: zTreeOnDrag

         }

};

......

3.3.23            setting.callback.onDrop

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

用於捕獲節點拖拽操作結束的事件回調函數

如果設置了 setting.callback.beforeDrop 方法，且返回 false，將無法觸發 onDrop 事件回調函數。

默認值：null

Function 參數說明

eventjs event 對象

標准的 js event 對象

treeIdString

目標節點 targetNode 所在 zTree 的 treeId，便於用戶操控

treeNodesArray(JSON)

被拖拽的節點 JSON 數據集合

如果拖拽操作為 移動，treeNodes 是當前被拖拽節點的數據集合。

如果拖拽操作為 復制，treeNodes 是復制后 clone 得到的新節點數據。

targetNodeJSON

成為 treeNodes 拖拽結束的目標節點 JSON 數據對象。

如果拖拽成為根節點，則 targetNode = null

moveTypeString

指定移動到目標節點的相對位置

"inner"：成為子節點，"prev"：成為同級前一個節點，"next"：成為同級后一個節點

如果 moveType = null，表明拖拽無效

isCopyBoolean

拖拽節點操作是 復制 或 移動

true：復制；false：移動

setting & function 舉例

1. 每次拖拽操作結束后， 彈出該被拖拽節點的個數以及目標節點的 tId、name 的信息

function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {

    alert(treeNodes.length + "," + (targetNode ? (targetNode.tId + ", " + targetNode.name) : "isRoot" ));

};

var setting = {

         callback: {

                 onDrop: zTreeOnDrop

         }

};

......

3.3.24            setting.callback.onExpand

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲節點被展開的事件回調函數

如果設置了 setting.callback.beforeExpand 方法，且返回 false，將無法觸發 onExpand 事件回調函數。

默認值：null

Function 參數說明

eventjs event 對象

標准的 js event 對象

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

被展開的節點 JSON 數據對象

setting & function 舉例

1. 每次展開節點后， 彈出該節點的 tId、name 的信息

function zTreeOnExpand(event, treeId, treeNode) {

    alert(treeNode.tId + ", " + treeNode.name);

};

var setting = {

         callback: {

                 onExpand: zTreeOnExpand

         }

};

......

3.3.25            setting.callback.onMouseDown

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲 zTree 上鼠標按鍵按下后的事件回調函數

如果設置了 setting.callback.beforeMouseDown 方法，且返回 false，將無法觸發 onMouseDown 事件回調函數。

默認值：null

Function 參數說明

eventjs event 對象

標准的 js event 對象

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

鼠標按鍵按下時所在節點的 JSON 數據對象

如果不在節點上，則返回 null

setting & function 舉例

1. 每次鼠標按鍵按下后， 彈出鼠標所在節點的 tId、name 的信息

function zTreeOnMouseDown(event, treeId, treeNode) {

    alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");

};

var setting = {

         callback: {

                 onMouseDown: zTreeOnMouseDown

         }

};

......

3.3.26            setting.callback.onMouseUp

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲 zTree 上鼠標按鍵松開后的事件回調函數

如果設置了 setting.callback.beforeMouseUp 方法，且返回 false，將無法觸發 onMouseUp 事件回調函數。

默認值：null

Function 參數說明

eventjs event 對象

標准的 js event 對象

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

鼠標按鍵松開時所在節點的 JSON 數據對象

如果不在節點上，則返回 null

setting & function 舉例

1. 每次鼠標按鍵松開后， 彈出鼠標所在節點的 tId、name 的信息

function zTreeOnMouseUp(event, treeId, treeNode) {

    alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");

};

var setting = {

         callback: {

                 onMouseUp: zTreeOnMouseUp

         }

};

......

3.3.27            setting.callback.onNodeCreated

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲節點生成 DOM 后的事件回調函數

v3.x 采用了延遲加載技術，因此對於父節點未展開的子節點來說，初始化后是不會觸發此回調函數，直到其父節點被展開

大數據量的節點加載請注意：不設置 onNodeCreated，可以提升一部分初始化性能

默認值：null

Function 參數說明

eventjs event 對象

標准的 js event 對象

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

生成 DOM 完畢的節點的 JSON 數據對象

setting & function 舉例

1. 創建節點 DOM 后， 彈出該節點的 tId、name 的信息

function zTreeOnNodeCreated(event, treeId, treeNode) {

    alert(treeNode.tId + ", " + treeNode.name);

};

var setting = {

         callback: {

                 onNodeCreated: zTreeOnNodeCreated

         }

};

......

3.3.28            setting.callback.onRemove

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

用於捕獲刪除節點之后的事件回調函數。

如果用戶設置了 beforeRemove 回調函數，並返回 false，將無法觸發 onRemove 事件回調函數。

默認值：null

Function 參數說明

eventjs event 對象

標准的 js event 對象

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

將要刪除的節點 JSON 數據對象

setting & function 舉例

1. 刪除節點時，彈出被刪除的節點的 tId 以及 name 信息

function zTreeOnRemove(event, treeId, treeNode) {

         alert(treeNode.tId + ", " + treeNode.name);

}

var setting = {

         callback: {

                 onRemove: zTreeOnRemove

         }

};

......

3.3.29            setting.callback.onRename

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

用於捕獲節點編輯名稱結束之后的事件回調函數。

1、節點進入編輯名稱狀態，並且修改節點名稱后觸發此回調函數。如果用戶設置了 beforeRename 回調函數，並返回 false，將無法觸發 onRename 事件回調函數。

2、如果通過直接修改 treeNode 的數據，並且利用 updateNode 方法更新，是不會觸發此回調函數的。

默認值：null

Function 參數說明

eventjs event 對象

標准的 js event 對象

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

被修改名稱的節點 JSON 數據對象

setting & function 舉例

1. 修改名稱后，彈出被修改名稱的節點的 tId 以及 name 信息

function zTreeOnRename(event, treeId, treeNode) {

         alert(treeNode.tId + ", " + treeNode.name);

}

var setting = {

         callback: {

                 onRename: zTreeOnRename

         }

};

......

3.3.30            setting.callback.onRightClick

概述[ 依賴 jquery.ztree.core 核心 js ]

用於捕獲 zTree 上鼠標右鍵點擊之后的事件回調函數

1、如果設置了 setting.callback.beforeRightClick 方法，且返回 false，將無法觸發 onRightClick 事件回調函數。

2、只要將 function 的引用賦給 onRightClick 屬性，則右鍵點擊 zTree 時，將屏蔽瀏覽器的右鍵菜單。

默認值：null

Function 參數說明

eventjs event 對象

標准的 js event 對象

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

鼠標右鍵點擊時所在節點的 JSON 數據對象

如果不在節點上，則返回 null

setting & function 舉例

1. 每次鼠標右鍵點擊后， 彈出鼠標所在節點的 tId、name 的信息

function zTreeOnRightClick(event, treeId, treeNode) {

    alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");

};

var setting = {

         callback: {

                 onRightClick: zTreeOnRightClick

         }

};

......

3.4 setting.check

3.4.1                 setting.check.autoCheckTrigger

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

設置自動關聯勾選時是否觸發 beforeCheck / onCheck 事件回調函數。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 時生效]

1、如果設置 setting.check.chkboxType = { "Y": "", "N": "" }，將不會有任何自動關聯勾選的操作。

2、如果開啟觸發，對於節點較多的樹將會影響性能，因為所有被聯動勾選的操作都會觸發事件回調函數，請根據需要決定是否使用此功能。

默認值: false

Boolean 格式說明

true / false 分別表示 觸發 / 不觸發 事件回調函數

setting 舉例

1. 需要觸發自動關聯勾選操作

var setting = {

         check: {

                 enable: true,

                 autoCheckTrigger: true

         }

};

......

3.4.2                 setting.check.chkboxType

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

勾選 checkbox 對於父子節點的關聯關系。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 時生效]

默認值：{ "Y": "ps", "N": "ps" }

JSON 格式說明

Y 屬性定義 checkbox 被勾選后的情況；
N 屬性定義 checkbox 取消勾選后的情況；
"p" 表示操作會影響父級節點；
"s" 表示操作會影響子級節點。

請注意大小寫，不要改變

setting 舉例

1. checkbox 勾選操作，只影響父級節點；取消勾選操作，只影響子級節點

var setting = {

         check: {

                 enable: true,

                 chkStyle: "checkbox",

                 chkboxType: { "Y": "p", "N": "s" }

         }

};

......

3.4.3                 setting.check.chkStyle

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

勾選框類型(checkbox 或 radio）[setting.check.enable = true 時生效]

默認值："checkbox"

String 格式說明

chkStyle = "checkbox" 時，顯示 checkbox 選擇框，setting.check.chkboxType 屬性有效。
chkStyle = "radio" 時，顯示 radio 選擇框， setting.check.radioType 屬性有效。

請注意大小寫，不要改變

checkbox 狀態說明

未勾選；如果是父節點，則無子節點被勾選。鼠標移到該節點上顯示為：

未勾選；（只有父節點存在此狀態）存在被勾選的子節點。鼠標移到該節點上顯示為：

被勾選；如果是父節點，則全部子節點都被勾選。鼠標移到該節點上顯示為：

被勾選；（只有父節點存在此狀態）且部分或無子節點被勾選。鼠標移到該節點上顯示為：

radio 狀態說明

未勾選；如果是父節點，則沒有子節點被勾選。鼠標移到該節點上顯示為：

未勾選；（只有父節點存在此狀態）且存在被勾選的子節點。鼠標移到該節點上顯示為：

被勾選；如果是父節點，則沒有子節點被勾選。鼠標移到該節點上顯示為：

被勾選；（只有父節點存在此狀態）且存在被勾選的子節點。鼠標移到該節點上顯示為：

setting 舉例

1. 設置選擇框為 radio

var setting = {

         check: {

                 enable: true,

                 chkStyle: "radio"

         }

};

......

3.4.4                 setting.check.enable

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

設置 zTree 的節點上是否顯示 checkbox / radio

默認值: false

Boolean 格式說明

true / false 分別表示 顯示 / 不顯示 復選框或單選框

setting 舉例

1. 需要顯示 checkbox

var setting = {

         check: {

                 enable: true

         }

};

......

3.4.5                 setting.check.nocheckInherit

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

當父節點設置 nocheck = true 時，設置子節點是否自動繼承 nocheck = true 。[setting.check.enable = true 時生效]

1、只使用於初始化節點時，便於批量操作。 對於已存在的節點請利用 updateNode 方法單個節點設置。

默認值: false

Boolean 格式說明

true 表示 新加入子節點時，自動繼承父節點 nocheck = true 的屬性。

false 表示 新加入子節點時，不繼承父節點 nocheck 的屬性。

setting 舉例

1. 需要子節點自動繼承 nocheck = true

var setting = {

         check: {

                 enable: true,

                 nocheckInherit: true

         }

};

......

3.4.6                 setting.check.radioType

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

radio 的分組范圍。[setting.check.enable = true 且 setting.check.chkStyle = "radio" 時生效]

默認值："level"

String 格式說明

radioType = "level" 時，在每一級節點范圍內當做一個分組。
radioType = "all" 時，在整棵樹范圍內當做一個分組。

請注意大小寫，不要改變

setting 舉例

1. 設置 radio 的判別規則為整棵樹內

var setting = {

         check: {

                 enable: true,

                 chkStyle: "radio",

                 radioType: "all"

         }

};

......

3.5 setting.data

3.5.1                 setting.data.keep.leaf

概述[ 依賴 jquery.ztree.core 核心 js ]

zTree 的節點葉子節點屬性鎖，是否始終保持 isParent = false

默認值：false

Boolean 格式說明

true / false 分別表示 鎖定 / 不鎖定 葉子節點屬性

如果設置為 true，則所有 isParent = false 的節點，都無法添加子節點。

setting 舉例

1. 需要鎖定葉子節點狀態

var setting = {

         data: {

                 keep: {

                          leaf: true

                 }

         }

};

......

3.5.2                 setting.data.keep.parent

概述[ 依賴 jquery.ztree.core 核心 js ]

zTree 的節點父節點屬性鎖，是否始終保持 isParent = true

默認值：false

Boolean 格式說明

true / false 分別表示 鎖定 / 不鎖定 父節點屬性

如果設置為 true，則所有 isParent = true 的節點，即使該節點的子節點被全部刪除或移走，依舊保持父節點狀態。

setting 舉例

1. 需要鎖定父節點狀態

var setting = {

         data: {

                 keep: {

                          parent: true

                 }

         }

};

......

3.5.3                 setting.data.key.checked

概述[ 依賴 jquery.ztree.excheck 擴展 js ]

zTree 節點數據中保存 check 狀態的屬性名稱。

默認值："checked"

請勿與 zTree 節點數據的其他參數沖突，例如：checkedOld

setting 舉例

1. 設置 zTree 顯示節點時，將 treeNode 的 isChecked 屬性當做節點名稱

var setting = {

         data: {

                 key: {

                          checked: "isChecked"

                 }

         }

};

......

3.5.4                 setting.data.key.children

概述[ 依賴 jquery.ztree.core 核心 js ]

zTree 節點數據中保存子節點數據的屬性名稱。

默認值："children"

setting 舉例

1. 設置 zTree 顯示節點時，將 treeNode 的 nodes 屬性當做節點名稱

var setting = {

         data: {

                 key: {

                          children: "nodes"

                 }

         }

};

......

3.5.5                 setting.data.key.name

概述[ 依賴 jquery.ztree.core 核心 js ]

zTree 節點數據保存節點名稱的屬性名稱。

默認值："name"

setting 舉例

1. 設置 zTree 顯示節點時，將 treeNode 的 ename 屬性當做節點名稱

var setting = {

         data: {

                 key: {

                          name: "ename"

                 }

         }

};

......

3.5.6                 setting.data.key.title

概述[ 依賴 jquery.ztree.core 核心 js ]

zTree 節點數據保存節點提示信息的屬性名稱。[setting.view.showTitle = true 時生效]

如果設置為 "" ，則自動與 setting.data.key.name 保持一致，避免用戶反復設置

默認值：""

setting 舉例

1. 設置 zTree 顯示節點時，將 treeNode 的 fullName 屬性當做節點名稱

var setting = {

         data: {

                 key: {

                          title: "fullName"

                 }

         }

};

......

3.5.7                 setting.data.key.url

概述[ 依賴 jquery.ztree.core 核心 js ]

zTree 節點數據保存節點鏈接的目標 URL 的屬性名稱。

特殊用途：當后台數據只能生成 url 屬性，又不想實現點擊節點跳轉的功能時，可以直接修改此屬性為其他不存在的屬性名稱

默認值："url"

setting 舉例

1. 設置 zTree 顯示節點時，將 treeNode 的 xUrl 屬性當做節點鏈接的目標 URL

var setting = {

         data: {

                 key: {

                          url: "xUrl"

                 }

         }

};

......

3.5.8                 setting.data.simpleData.enable

概述[ 依賴 jquery.ztree.core 核心 js ]

確定 zTree 初始化時的節點數據、異步加載時的節點數據、或 addNodes 方法中輸入的 newNodes 數據是否采用簡單數據模式 (Array)

不需要用戶再把數據庫中取出的 List 強行轉換為復雜的 JSON 嵌套格式

默認值：false

Boolean 格式說明

true / false 分別表示 使用 / 不使用 簡單數據模式

如果設置為 true，請務必設置 setting.data.simpleData 內的其他參數: idKey / pIdKey / rootPId，並且讓數據滿足父子關系。

setting 舉例

1. 使用簡單 Array 格式的數據

var setting = {

         data: {

                 simpleData: {

                          enable: true,

                          idKey: "id",

                          pIdKey: "pId",

                          rootPId: 0,

                 }

         }

};

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"}

];

......

3.5.9                 setting.data.simpleData.idKey

概述[ 依賴 jquery.ztree.core 核心 js ]

節點數據中保存唯一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效]

默認值："id"

setting 舉例

1. 使用簡單 Array 格式的數據

var setting = {

         data: {

                 simpleData: {

                          enable: true,

                          idKey: "id",

                          pIdKey: "pId",

                          rootPId: 0,

                 }

         }

};

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"}

];

......

3.5.10            setting.data.simpleData.pIdKey

概述[ 依賴 jquery.ztree.core 核心 js ]

節點數據中保存其父節點唯一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效]

默認值："pId"

setting 舉例

1. 使用簡單 Array 格式的數據

var setting = {

         data: {

                 simpleData: {

                          enable: true,

                          idKey: "id",

                          pIdKey: "pId",

                          rootPId: 0

                 }

         }

};

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"}

];

......

3.5.11            setting.data.simpleData.rootPId

概述[ 依賴 jquery.ztree.core 核心 js ]

用於修正根節點父節點數據，即 pIdKey 指定的屬性值。[setting.data.simpleData.enable = true 時生效]

默認值：null

setting 舉例

1. 使用簡單 Array 格式的數據

var setting = {

         data: {

                 simpleData: {

                          enable: true,

                          idKey: "id",

                          pIdKey: "pId",

                          rootPId: 0

                 }

         }

};

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"}

];

......

3.6 setting.edit

3.6.1                 setting.edit.drag.autoExpandTrigger

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

拖拽時父節點自動展開是否觸發 onExpand 事件回調函數。[setting.edit.enable = true 時生效]

默認值：false

Boolean 格式說明

true / false 分別表示 觸發 / 不觸發 onExpand 事件回調函數。

setting 舉例

1. 設置拖拽時父節點自動展開觸發 onExpand 事件回調函數

var setting = {

         edit: {

                 enable: true,

                 drag: {

                          autoExpandTrigger: true

                 }

         }

};

......

3.6.2                 setting.edit.drag.isCopy

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

拖拽時, 設置是否允許復制節點。[setting.edit.enable = true 時生效]

默認值：true

規則說明

1、isCopy = true; isMove = true 時，拖拽節點按下 Ctrl 鍵表示 copy; 否則為 move

2、isCopy = true; isMove = false 時，所有拖拽操作都是 copy

3、isCopy = false; isMove = true 時，所有拖拽操作都是 move

4、isCopy = false; isMove = false 時，禁止拖拽操作

setting 舉例

1. 設置所有拖拽操作都是 copy

var setting = {

         edit: {

                 enable: true,

                 drag: {

                          isCopy: true,

                          isMove: false

                 }

         }

};

......

3.6.3                 setting.edit.drag.isMove

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

拖拽時, 設置是否允許移動節點。[setting.edit.enable = true 時生效]

默認值：true

規則說明

1、isCopy = true; isMove = true 時，拖拽節點按下 Ctrl 鍵表示 copy; 否則為 move

2、isCopy = true; isMove = false 時，所有拖拽操作都是 copy

3、isCopy = false; isMove = true 時，所有拖拽操作都是 move

4、isCopy = false; isMove = false 時，禁止拖拽操作

setting 舉例

1. 設置所有拖拽操作都是 move

var setting = {

         edit: {

                 enable: true,

                 drag: {

                          isCopy: false,

                          isMove: true

                 }

         }

};

......

3.6.4                 setting.edit.drag.prev

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

拖拽到目標節點時，設置是否允許移動到目標節點前面的操作。[setting.edit.enable = true 時生效]

拖拽目標是 根 的時候，不觸發 prev 和 next，只會觸發 inner

此功能主要作用是對拖拽進行適當限制（輔助箭頭），需要結合 next、inner 一起使用，才能實現完整功能。

默認值：true

Boolean 格式說明

true / false 分別表示 允許 / 不允許 移動到目標節點前面

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控（多棵樹拖拽時，是目標節點所在樹的 treeId）

treeNodesArray(JSON)

被拖拽的節點 JSON 數據集合

targetNodeJSON

拖拽時的目標節點 JSON 數據對象

返回值Boolean

返回值同 Boolean 格式的數據

setting & function 舉例

1. 禁止拖拽到節點前面的操作

var setting = {

         edit: {

                 enable: true,

                 drag: {

                          prev: false,

                          next: true,

                          inner: true

                 }

         }

};

......

3.6.5                 setting.edit.drag.next

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

拖拽到目標節點時，設置是否允許移動到目標節點后面的操作。[setting.edit.enable = true 時生效]

拖拽目標是 根 的時候，不觸發 prev 和 next，只會觸發 inner

此功能主要作用是對拖拽進行適當限制（輔助箭頭），需要結合 prev、inner 一起使用，才能實現完整功能。

默認值：true

Boolean 格式說明

true / false 分別表示 允許 / 不允許 移動到目標節點后面

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控（多棵樹拖拽時，是目標節點所在樹的 treeId）

treeNodesArray(JSON)

被拖拽的節點 JSON 數據集合

targetNodeJSON

拖拽時的目標節點 JSON 數據對象

返回值Boolean

返回值同 Boolean 格式的數據

setting & function 舉例

1. 禁止拖拽到節點后面的操作

var setting = {

         edit: {

                 enable: true,

                 drag: {

                          prev: true,

                          next: false,

                          inner: true

                 }

         }

};

......

3.6.6                 setting.edit.drag.inner

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

拖拽到目標節點時，設置是否允許成為目標節點的子節點。[setting.edit.enable = true 時生效]

拖拽目標是 根 的時候，不觸發 prev 和 next，只會觸發 inner

此功能主要作用是對拖拽進行適當限制（輔助箭頭），需要結合 prev、next 一起使用，才能實現完整功能。

默認值：true

Boolean 格式說明

true / false 分別表示 允許 / 不允許 成為目標節點的子節點

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控（多棵樹拖拽時，是目標節點所在樹的 treeId）

treeNodesArray(JSON)

被拖拽的節點 JSON 數據集合

targetNodeJSON

拖拽時的目標節點 JSON 數據對象

如果拖拽的節點要成為根節點，則 targetNode = null

返回值Boolean

返回值同 Boolean 格式的數據

setting & function 舉例

1. 禁止拖拽成為目標節點的子節點

var setting = {

         edit: {

                 enable: true,

                 drag: {

                          prev: true,

                          next: true,

                          inner: false

                 }

         }

};

......

3.6.7                 setting.edit.drag.borderMax

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

拖拽節點成為根節點時的 Tree 內邊界范圍 (單位：px)。[setting.edit.enable = true 時生效]

默認值：10

請根據自己的需求適當調整此值

setting 舉例

1. 更改拖拽操作節點成為根節點時的 Tree 內邊界范圍為20px

var setting = {

         edit: {

                 enable: true,

                 drag: {

                          borderMax: 20

                 }

         }

};

......

3.6.8                 setting.edit.drag.borderMin

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

拖拽節點成為根節點時的 Tree 外邊界范圍 (單位：px)。[setting.edit.enable = true 時生效]

默認值：-5

請根據自己的需求適當調整此值

setting 舉例

1. 更改拖拽操作節點成為根節點時的 Tree 外邊界范圍為10px

var setting = {

         edit: {

                 enable: true,

                 drag: {

                          borderMin: -10

                 }

         }

};

......

3.6.9                 setting.edit.drag.minMoveSize

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

判定是否拖拽操作的最小位移值 (單位：px)。[setting.edit.enable = true 時生效]

根據自己的需求可適當調整此值，如果太小容易導致點擊鼠標時誤操作進行拖拽

默認值：5

setting 舉例

1. 更改拖拽操作啟動位移值為10px

var setting = {

         edit: {

                 enable: true,

                 drag: {

                          minMoveSize: 10

                 }

         }

};

......

3.6.10            setting.edit.drag.maxShowNodeNum

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

拖拽多個兄弟節點時，浮動圖層中顯示的最大節點數。 多余的節點用...代替。[setting.edit.enable = true 時生效]

默認值：5

請根據自己的需求適當調整此值

setting 舉例

1. 設置拖拽時最多可顯示10個節點

var setting = {

         edit: {

                 enable: true,

                 drag: {

                          maxShowNodeNum: 10

                 }

         }

};

......

3.6.11            setting.edit.drag.autoOpenTime

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

拖拽時父節點自動展開的延時間隔。 (單位：ms)[setting.edit.enable = true 時生效]

默認值：500

請根據自己的需求適當調整此值

setting 舉例

1. 設置拖拽到父節點上立刻自動展開

var setting = {

         edit: {

                 enable: true,

                 drag: {

                          autoOpenTime: 0

                 }

         }

};

......

3.6.12            setting.edit.editNameSelectAll

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

節點編輯名稱 input 初次顯示時,設置 txt 內容是否為全選狀態。 [setting.edit.enable = true 時生效]

默認值: false

Boolean 格式說明

true 表示 全選狀態

false 表示 不是全選狀態，光標默認在最后

setting 舉例

1. 設置節點編輯名稱 input 初次顯示時，txt內容為全選狀態

var setting = {

         edit: {

                 enable: true,

                 editNameSelectAll: true

         }

};

......

3.6.13            setting.edit.enable

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

設置 zTree 是否處於編輯狀態

請在初始化之前設置，初始化后需要改變編輯狀態請使用 zTreeObj.setEditable() 方法

默認值: false

Boolean 格式說明

true / false 分別表示 可以 / 不可以 編輯

編輯狀態規則說明

1、點擊節點時，不會打開 node.url 指定的 URL。
2、全面支持 編輯 與 異步加載 狀態共存。
3、可以對節點進行拖拽，且支持多棵樹之間進行拖拽。
4、支持拖拽時 復制/移動 節點。（參考: setting.edit.drag.isCopy / setting.edit.drag.isMove）
5、可以通過編輯按鈕修改 name 屬性。
6、可以通過刪除按鈕刪除節點。

請注意大小寫，不要改變

setting 舉例

1. 設置 zTree 進入編輯狀態

var setting = {

         edit: {

                 enable: true

         }

};

......

3.6.14            setting.edit.removeTitle

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

刪除按鈕的 Title 輔助信息。[setting.edit.enable = true & setting.edit.showRemoveBtn = true 時生效]

默認值："remove"

String 格式說明

鼠標移動到 刪除按鈕 上時，瀏覽器自動彈出的輔助信息內容，可根據用戶需要自行修改

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

需要設置刪除按鈕 Title 信息的節點 JSON 數據對象

返回值String

返回值同 String 格式的數據

setting & function 舉例

1. 設置刪除按鈕的 Title 輔助信息為: "刪除節點"

var setting = {

         edit: {

                 enable: true,

                 showRemoveBtn: true,

                 removeTitle: "刪除節點"

         }

};

......

2. 設置父節點刪除按鈕的 Title 輔助信息為: "刪除父節點"

function setRemoveTitle(treeId, treeNode) {

         return treeNode.isParent ? "刪除父節點":"刪除葉子節點";

}

var setting = {

         edit: {

                 enable: true,

                 showRemoveBtn: true,

                 removeTitle: setRemoveTitle

         }

};

......

3.6.15            setting.edit.renameTitle

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

編輯名稱按鈕的 Title 輔助信息。[setting.edit.enable = true & setting.edit.showRenameBtn = true 時生效]

默認值："rename"

String 格式說明

設置鼠標移動到 編輯名稱按鈕 上時，瀏覽器自動彈出的輔助信息內容，可根據用戶需要自行修改

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

需要設置編輯名稱按鈕 Title 信息的節點 JSON 數據對象

返回值String

返回值同 String 格式的數據

setting & function 舉例

1. 設置編輯名稱按鈕的 Title 輔助信息為: "編輯節點名稱"

var setting = {

         edit: {

                 enable: true,

                 showRenameBtn: true,

                 renameTitle: "編輯節點名稱"

         }

};

......

2. 設置父節點編輯名稱按鈕的 Title 輔助信息為: "編輯父節點名稱"

function setRenameTitle(treeId, treeNode) {

         return treeNode.isParent ? "編輯父節點名稱":"編輯葉子節點名稱";

}

var setting = {

         edit: {

                 enable: true,

                 showRenameBtn: true,

                 renameTitle: setRenameTitle

         }

};

......

3.6.16            setting.edit.showRemoveBtn

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

設置是否顯示刪除按鈕。[setting.edit.enable = true 時生效]

當點擊某節點的刪除按鈕時：

1、首先觸發 setting.callback.beforeRemove 回調函數，用戶可判定是否進行刪除操作。

2、如果未設置 beforeRemove 或 beforeRemove 返回 true，則刪除節點並觸發 setting.callback.onRemove 回調函數。

默認值：true

Boolean 格式說明

true / false 分別表示 顯示 / 隱藏 刪除按鈕

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

需要設置是否顯示刪除按鈕的節點 JSON 數據對象

返回值Boolean

返回值同 Boolean 格式的數據

setting & function 舉例

1. 不顯示刪除按鈕

var setting = {

         edit: {

                 enable: true,

                 showRemoveBtn: false

         }

};

......

2. 設置所有的父節點不顯示刪除按鈕

function setRemoveBtn(treeId, treeNode) {

         return !treeNode.isParent;

}

var setting = {

         edit: {

                 enable: true,

                 showRemoveBtn: setRemoveBtn

         }

};

......

3.6.17            setting.edit.showRenameBtn

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

設置是否顯示編輯名稱按鈕。[setting.edit.enable = true 時生效]

當點擊某節點的編輯名稱按鈕時：

1、進入節點編輯名稱狀態。

2、編輯名稱完畢（Input 失去焦點 或 按下 Enter 鍵），會觸發 setting.callback.beforeRename 回調函數，用戶可根據自己的規則判定是否允許修改名稱。

3、如果 beforeRename 返回 false，則繼續保持編輯名稱狀態，直到名稱符合規則位置 （按下 ESC 鍵可取消編輯名稱狀態，恢復原名稱）。

4、如果未設置 beforeRename 或 beforeRename 返回 true，則結束節點編輯名稱狀態，更新節點名稱，並觸發 setting.callback.onRename 回調函數。

默認值：true

Boolean 格式說明

true / false 分別表示 顯示 / 隱藏 編輯名稱按鈕

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

需要設置是否顯示編輯名稱按鈕的節點 JSON 數據對象

返回值Boolean

返回值同 Boolean 格式的數據

setting & function 舉例

1. 不顯示編輯名稱按鈕

var setting = {

         edit: {

                 enable: true,

                 showRenameBtn: false

         }

};

......

2. 設置所有的父節點不顯示編輯名稱按鈕

function setRenameBtn(treeId, treeNode) {

         return !treeNode.isParent;

}

var setting = {

         edit: {

                 enable: true,

                 showRenameBtn: setRenameBtn

         }

};

......

3.7 setting.view

3.7.1                 setting.view.addDiyDom

概述[ 依賴 jquery.ztree.core 核心 js ]

用於在節點上固定顯示用戶自定義控件

1. 大數據量的節點加載請注意：在 addDiyDom 中針對每個節點 查找 DOM 對象並且添加新 DOM 控件，肯定會影響初始化性能；如果不是必須使用，建議不使用此功能

2. 屬於高級應用，使用時請確保對 zTree 比較了解。

默認值：null

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

需要顯示自定義控件的節點 JSON 數據對象

setting & function 舉例

1. 設置節點后面顯示一個按鈕

var setting = {

         view: {

                 addDiyDom: addDiyDom

         }

};

function addDiyDom(treeId, treeNode) {

         var aObj = $("#" + treeNode.tId + "_a");

         if ($("#diyBtn_"+treeNode.id).length>0) return;

         var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' > </span>"

                 + "<button type='button' class='diyBtn1' id='diyBtn_" + treeNode.id

                 + "' title='"+treeNode.name+"' onfocus='this.blur();'></button>";

         aObj.append(editStr);

         var btn = $("#diyBtn_"+treeNode.id);

         if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});

};

......

3.7.2                 setting.view.addHoverDom

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

用於當鼠標移動到節點上時，顯示用戶自定義控件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕

請務必與 setting.view.removeHoverDom 同時使用；屬於高級應用，使用時請確保對 zTree 比較了解。

默認值：null

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

需要顯示自定義控件的節點 JSON 數據對象

setting & function 舉例

1. 設置鼠標移到節點上，在后面顯示一個按鈕

var setting = {

         view: {

                 addHoverDom: addHoverDom,

                 removeHoverDom: removeHoverDom,

                 ......

         }

};

function addHoverDom(treeId, treeNode) {

         var aObj = $("#" + treeNode.tId + "_a");

         if ($("#diyBtn_"+treeNode.id).length>0) return;

         var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' > </span>"

                 + "<button type='button' class='diyBtn1' id='diyBtn_" + treeNode.id

                 + "' title='"+treeNode.name+"' onfocus='this.blur();'></button>";

         aObj.append(editStr);

         var btn = $("#diyBtn_"+treeNode.id);

         if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});

};

function removeHoverDom(treeId, treeNode) {

         $("#diyBtn_"+treeNode.id).unbind().remove();

         $("#diyBtn_space_" +treeNode.id).unbind().remove();

};

......

3.7.3                 setting.view.autoCancelSelected

概述[ 依賴 jquery.ztree.core 核心 js ]

點擊節點時，按下 Ctrl 鍵是否允許取消選擇操作。

如果不需要此功能，請設置為 false。

默認值: true

Boolean 格式說明

true / false 分別表示 支持 / 不支持 配合 Ctrl 鍵進行取消節點選擇的操作

setting 舉例

1. 禁止配合 Ctrl 鍵進行取消節點選擇的操作

var setting = {

         view: {

                 autoCancelSelected: false

         }

};

......

3.7.4                 setting.view.dblClickExpand

概述[ 依賴 jquery.ztree.core 核心 js ]

雙擊節點時，是否自動展開父節點的標識

默認值: true

Boolean 格式說明

true / false 分別表示雙擊節點 切換 / 不切換 展開狀態

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

需要設置是否雙擊切換展開狀態的節點 JSON 數據對象

返回值Boolean

返回值同 Boolean 格式的數據

setting 舉例

1. 取消默認雙擊展開父節點的功能

var setting = {

         view: {

                 dblClickExpand: false

         }

};

......

2. 設置 zTree 僅僅 level=0 的父節點取消雙擊展開的功能

function dblClickExpand(treeId, treeNode) {

         return treeNode.level > 0;

};

var setting = {

         view: {

                 dblClickExpand: dblClickExpand

         }

};

......

3.7.5                 setting.view.expandSpeed

概述[ 依賴 jquery.ztree.core 核心 js ]

zTree 節點展開、折疊時的動畫速度，設置方法同 JQuery 動畫效果中 speed 參數。

IE6 下會自動關閉動畫效果，以保證 zTree 的操作速度

默認值："fast"

String 格式說明

三種預定速度之一的字符串("slow", "normal", or "fast")

設置為 "" 時，不顯示動畫效果

Number 格式說明

表示動畫時長的毫秒數值 (如：1000)

setting 舉例

1. 設置為慢速顯示動畫效果

var setting = {

         view: {

                 expandSpeed: "slow"

         }

};

......

3.7.6                 setting.view.fontCss

概述[ 依賴 jquery.ztree.core 核心 js ]

個性化文字樣式，只針對 zTree 在節點上顯示的<A>對象。

默認值：{}

JSON 格式說明

JSON 格式為 JQuery css方法中的 JSON 對象格式，例如：{color:"#ff0011", background:"blue"}

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

需要設置自定義樣式的節點 JSON 數據對象

返回值JSON

返回值同 JSON 格式的數據，例如：{color:"#ff0011", background:"blue"}

setting & function 舉例

1. 不修改CSS，設置全部節點 name 顯示為紅色

var setting = {

         view: {

                 fontCss : {color:"red"}

         }

};

2. 設置 level=0 的節點 name 顯示為紅色

function setFontCss(treeId, treeNode) {

         return treeNode.level == 0 ? {color:"red"} : {};

};

var setting = {

         view: {

                 fontCss: setFontCss

         }

};

3.7.7                 setting.view.nameIsHTML

概述[ 依賴 jquery.ztree.core 核心 js ]

設置 name 屬性是否支持 HTML 腳本

如果允許 HTML 腳本，請根據自己的需求做校驗，避免出現 js 注入等安全問題。

默認值: false

Boolean 格式說明

true / false 分別表示 支持 / 不支持 HTML 腳本

setting 舉例

1. 設置 name 屬性支持 HTML 腳本

var setting = {

         view: {

                 nameIsHTML: true

         }

};

var node = {"name":"<font color='red'>test</font>"};

......

3.7.8                 setting.view.removeHoverDom

概述[ 依賴 jquery.ztree.exedit 擴展 js ]

用於當鼠標移出節點時，隱藏用戶自定義控件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕

請務必與 addHoverDom 同時使用；屬於高級應用，使用時請確保對 zTree 比較了解。

默認值：null

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

需要隱藏自定義控件的節點 JSON 數據對象

setting & function 舉例

1. 設置鼠標移到節點上，在后面顯示一個按鈕

var setting = {

         view: {

                 addHoverDom: addHoverDom,

                 removeHoverDom: removeHoverDom,

                 ......

         }

};

function addHoverDom(treeId, treeNode) {

         var aObj = $("#" + treeNode.tId + "_a");

         if ($("#diyBtn_"+treeNode.id).length>0) return;

         var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' > </span>"

                 + "<button type='button' class='diyBtn1' id='diyBtn_" + treeNode.id

                 + "' title='"+treeNode.name+"' onfocus='this.blur();'></button>";

         aObj.append(editStr);

         var btn = $("#diyBtn_"+treeNode.id);

         if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});

};

function removeHoverDom(treeId, treeNode) {

         $("#diyBtn_"+treeNode.id).unbind().remove();

         $("#diyBtn_space_" +treeNode.id).unbind().remove();

};

......

3.7.9                 setting.view.selectedMulti

概述[ 依賴 jquery.ztree.core 核心 js ]

設置是否允許同時選中多個節點。

默認值: true

Boolean 格式說明

true / false 分別表示 支持 / 不支持 同時選中多個節點

1、設置為 true時，按下 Ctrl 鍵可以選中多個節點

2、設置為 true / false 都不影響按下 Ctrl 鍵可以讓已選中的節點取消選中狀態（ 取消選中狀態可以參考 setting.view.autoCancelSelected ）

setting 舉例

1. 禁止多點同時選中的功能

var setting = {

         view: {

                 selectedMulti: false

         }

};

......

3.7.10            setting.view.showIcon

概述[ 依賴 jquery.ztree.core 核心 js ]

設置 zTree 是否顯示節點的圖標。

默認值：true

Boolean 格式說明

true / false 分別表示 顯示 / 隱藏 圖標

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

需要設置是否顯示圖標的節點 JSON 數據對象

返回值Boolean

返回值同 Boolean 格式的數據

setting & function 舉例

1. 設置 zTree 不顯示圖標

var setting = {

         view: {

                 showIcon: false

         }

};

......

2. 設置 zTree 僅僅 level=2 的節點不顯示圖標

function showIconForTree(treeId, treeNode) {

         return treeNode.level != 2;

};

var setting = {

         view: {

                 showIcon: showIconForTree

         }

};

......

3.7.11            setting.view.showLine

概述[ 依賴 jquery.ztree.core 核心 js ]

設置 zTree 是否顯示節點之間的連線。

默認值：true

Boolean 格式說明

true / false 分別表示 顯示 / 不顯示 連線

setting 舉例

1. 設置 zTree 不顯示節點之間的連線

var setting = {

         view: {

                 showLine: false

         }

};

......

3.7.12            setting.view.showTitle

概述[ 依賴 jquery.ztree.core 核心 js ]

設置 zTree 是否顯示節點的 title 提示信息(即節點 DOM 的 title 屬性)。

請務必與 setting.data.key.title 同時使用。

默認值：true

Boolean 格式說明

true / false 分別表示 顯示 / 隱藏 提示信息

如果 setting.view.showTitle = true & setting.data.key.title = ''，zTree 會自動使用 setting.data.key.name 指定的節點名稱當做 title

Function 參數說明

treeIdString

對應 zTree 的 treeId，便於用戶操控

treeNodeJSON

需要設置是否顯示提示信息的節點 JSON 數據對象

返回值Boolean

返回值同 Boolean 格式的數據

setting & function 舉例

1. 設置 zTree 不顯示提示信息

var setting = {

         view: {

                 showTitle: false

         }

};

......

2. 設置 zTree 僅僅 level=2 的節點不顯示提示信息

function showTitleForTree(treeId, treeNode) {

         return treeNode.level != 2;

};

var setting = {

         view: {

                 showTitle: showTitleForTree

         }

};

......

 

4   zTree v3.x 常見問題

4.1 zTree 對 jQuery 的版本有要求嗎?

  • 基本來說沒有要求，zTree 在開發中使用 jQuery 1.4.4；目前簡單測試過 jQuery 1.3 ~ 1.6.1 應該都能正常使用，如果發現和 jQuery 的兼容問題，還請及時 Email: hunter.z@263.net 通知我。
  • 如果希望有更好的動畫效果，更高的運行效率，可以選擇 jQuery 1.6.x；如果希望能有減少 js 代碼，使用基本功能，那么可以選擇 mini 版較低版本的jQuery，大家就各取所需吧。
  • zTree 中提供的是未經壓縮的 jQuery 1.4.4，主要是開發時便於調試。
    * 如需自行下載 jQuery，請訪問：http://docs.jquery.com/Downloading_jQuery

4.2 zTree v3.x 入門指南

考慮到還是會有第一次使用 zTree 的朋友，因此入門指南不能少，至少讓大家快速明白如何開始制作一棵屬於自己的樹。

步驟 1、文件准備

將需要使用的 zTree v3.x 相關的 js、css、img 文件分別放置到相應目錄，並且保證相對路徑正確

步驟 2、編寫 html 頁面

按照以下代碼，制作 html 頁面，訪問試試看吧，注意：
1) "<!DOCTYPE html>" 是必需的！
2) zTree 的容器 className 別忘了設置為 "ztree"
3) 入門成功后，就可以按照順序去看 Demo 了，直接看看源碼，應該能看懂的

4.3 關於異步加載

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);

 

4.4 css 樣式異常怎么辦?

產生樣式沖突的可能性很多，在這次 v3.0 的制作過程中，又更加深入了這方面的了解，大概總結如下：

1、異常原因：

頁面上自定義的 css 與 zTree 的 css 產生沖突

頁面上使用其他插件的 css 與 zTree 的 css 產生沖突

修改 zTree 的 css 錯誤影響了 zTree

2、解決方案：
由於 css 沖突的可能性太多，與其說是解決方案，不如說是處理建議。

A、避免針對 id 進行樣式設定，盡量采用 class 設置。 因為針對 id 設定的樣式等級太高，zTree 的樣式肯定會被覆蓋。

B、zTree 默認的樣式不可能將全部 css 定義都重新設置一遍，所以難免有遺漏，如果被遺漏的樣式影響了效果，那么請在 zTreeStyle 內增加上對應的設置內容，而且一旦出現這種情況，也希望你能通知我，謝謝。

C、如果以上都不能解決，那么再看看是否有命名規則沖突，導致了樣式沖突

D、最后再看看是否自己修改的 zTree 樣式出現了錯誤

E、以上答案均無效，那么就請與我聯系吧。

4.5 如何將 節點數據提交給 Server 端

你可以利用 Form 或 Ajax 提交數據。

把 JSON 數據轉化為參數是比較麻煩的。在今后，我會逐漸提供一些工具包便於大家生成各種格式的數據。

制作提交數據的基本方法：拼字符串

拼接成什么格式的字符串？ 是 url? xml? 還是 json？ 這就要根據后台解析數據的方法來決定了。

4.6 請區分 JSON 字符串 / 對象

  • 有不少朋友由於沒有分清楚這兩者的關系，導致使用 zTree 出現了錯誤，這里專門講解一下：
  • （1）JSON 對象是滿足 JSON 數據格式的 JS 對象
    例如： {name:"abc"}
    最正規的 JSON 數據是連屬性名稱都要被包括起來的
    例如： {"name":"abc"}
  • （2）JSON 格式的字符串的關鍵問題-- 它僅僅是一個字符串，只不過滿足了 JSON 的數據格式
    例如：'{"name":"abc"}'
  • 看到兩個例子的對比了嗎？顯而易見，關鍵問題就出在這個雙引號上。
  • 所以在生成 zTree 的數據時，請不要在數據外面再增加那兩個雙引號了！

4.7 zTree v3.x 使用注意事項

目前的常見問題是通過原先 v2.6 的常見問題整理、提取過來的，還不夠全面，在今后會逐步完善常見問題里面的內容。

4.7.1                 js 核心文件

zTree v3.x 有 3 個 js 文件，一個 核心包 ( jquery.ztree.core-3.x.js )，兩個擴展包 -- 復選框功能包 ( jquery.ztree.excheck-3.x.js ) & 編輯功能包 ( jquery.ztree.exedit-3.x.js )

使用 zTree v3.x 時，核心包必須加載，擴展包根據需要進行加載；這種結構有利於今后不斷開發 zTree 的各種輔助功能或工具，而不影響基本功能。

在實際使用中，建議將使用的擴展包 與 核心包 代碼合並為一個 js 文件，以節省網絡資源，合並時一定要將核心包的代碼放在最前面.

4.7.2                 css 文件

zTree v3.x 只使用一個 zTreeStyle.css 文件，為了盡量避免樣式沖突，將 zTree 容器的 className 設置為 'ztree'

v3.x 中對於主要 DOM ( li、ul、+/-圖標、a ) 的 className 增加了 level 輸出，可以針對不同等級的節點設定獨立的樣式

4.7.3                 img 圖片

zTree v3.x 將主要圖標都合並為一個圖片，利用圖片切割方式顯示圖標

為了避免原先節點連線之間 1 像素間隔的問題，在 v3.x 中 +/-圖標 繼續保留 18*18 的尺寸，其余圖標全部修改為 16*16，請升級的朋友務必注意修正原先使用的圖標大小

在 v3.x Demo 中 自定義圖標都是獨立的圖片文件，實際開發中建議也都采用圖片切割的方式

4.7.4                 zTree 數據

zTree 使用 JSON 數據，關於數據部分請認真查看 API 文檔 "treeNode 節點數據詳解" 中的內容，並且在 Demo 中也都可以看到 treeNode 的定義

4.7.5                 調試代碼

進行程序開發時，建議首先使用 chrome 或 firefox 進行調試工作 -- 普通 js 調試，ajax 獲取數據時網絡情況的跟蹤都很容易。 個人推薦：chrome 的開發人員工具或 firefox 的 firebug 插件。

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 zTree v3.5.17 API 文檔 nat檢測NatTypeTester v3.4 和v5.0版本 痞子衡嵌入式：MCUBootUtility v3.4發布，支持串行NAND iNeuOS工業互聯平台，發布：消息管理、子用戶權限管理、元件移動事件、聯動控制和油表餅狀圖，v3.4版本 可在廣域網部署運行的QQ高仿版 -- GG嘰嘰V3.4，增加系統設置、最近聯系人、群功能（源碼） Github API v3 介紹文檔 zabbix文檔3.4-7配置 [原創]Zabbix3.4_API的python示例 zTree PhysX3.4文檔(6) -- Rigid Body Dynamics
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM