zTree

https://github.com/ztree/ztree_v3
Admin
jQuery Tree Plugin
Tokens:146,290
Snippets:556
Trust Score:8.8
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### zTree Initialization API

Source: https://github.com/ztree/ztree_v3/blob/master/api/en/fn.zTree.init.html

This section details the initialization of a zTree instance using the $.fn.zTree.init() method.

```APIDOC
## $.fn.zTree.init(obj, zSetting, zNodes)

### Description
This method is used to create a zTree.

### Method
JavaScript Function

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
* **obj** (jQuery Object) - DOM Container for zTree
* **zSetting** (JSON) - zTree's configuration data.
* **zNodes** (Array(JSON) / JSON) - zTree's node data.

### Request Example
```javascript
var zTreeObj, setting = {
    view: {
        selectedMulti: false
    }
}, zTreeNodes = [
    {"name":"Site Map", open:true, children: [
        { "name":"google", "url":"http://www.google.com", "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);
});
```

### Response
#### Success Response (200)
* **zTree object** (JSON) - An object that provides methods to operate the zTree.
```

--------------------------------

### Install zTree v3 using npm

Source: https://github.com/ztree/ztree_v3/blob/master/README.md

This command installs the zTree v3 library using the npm package manager. It is a common way to add front-end libraries to a project for use in web development.

```bash
npm install @ztree/ztree_v3
```

--------------------------------

### zTree onAsyncSuccess Example with Alert

Source: https://github.com/ztree/ztree_v3/blob/master/api/cn/setting.callback.onAsyncSuccess.html

This example demonstrates how to use the onAsyncSuccess callback to display an alert with the message received from the asynchronous data load. It requires the zTree core JavaScript library and jQuery.

```javascript
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
    alert(msg);
};

var setting = {
	callback: {
		onAsyncSuccess: zTreeOnAsyncSuccess
	}
};
......
```

--------------------------------

### zTree onRightClick Callback Example (JavaScript)

Source: https://github.com/ztree/ztree_v3/blob/master/api/cn/setting.callback.onRightClick.html

This example demonstrates how to define and use the zTree onRightClick callback function. It shows how to access node information (tId and name) and trigger an alert. The callback is configured within the zTree settings object.

```javascript
function zTreeOnRightClick(event, treeId, treeNode) {
    alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
};
var setting = {
    callback: {
        onRightClick: zTreeOnRightClick
    }
};
......
```

--------------------------------

### zTree onMouseDown Callback Example

Source: https://github.com/ztree/ztree_v3/blob/master/api/cn/setting.callback.onMouseDown.html

This JavaScript example demonstrates how to define and use the zTree onMouseDown callback function. It shows how to access node information and alerts the tId and name of the clicked node. The callback is registered within the zTree's setting object.

```javascript
function zTreeOnMouseDown(event, treeId, treeNode) {
    alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
};
var setting = {
	callback: {
		onMouseDown: zTreeOnMouseDown
	}
};
......
```

--------------------------------

### ZTREE Reset and Initialization

Source: https://github.com/ztree/ztree_v3/blob/master/demo/en/super/asyncForAll.html

Resets the zTree to its initial state, clearing any asynchronous loading flags and re-initializing the tree with the defined settings. This is useful for starting over or applying changes.

```javascript
function reset() {
  if (!check()) {
    return;
  }
  asyncForAll = false;
  goAsync = false;
  $("#demoMsg").text("");
  $.fn.zTree.init($("#treeDemo"), setting);
}
```

--------------------------------

### zTree onExpand Callback Example with jQuery

Source: https://github.com/ztree/ztree_v3/blob/master/api/cn/setting.callback.onExpand.html

This JavaScript snippet demonstrates how to implement the `onExpand` callback function for zTree. It shows how to define the callback to receive event, treeId, and treeNode arguments, and an example of setting the callback within the zTree configuration. It depends on jQuery and the zTree core JavaScript library.

```javascript
function zTreeOnExpand(event, treeId, treeNode) {
    alert(treeNode.tId + ", " + treeNode.name);
};
var setting = {
	callback: {
		onExpand: zTreeOnExpand
	}
};
......
```

--------------------------------

### Initialize ZTREE with Drag and Drop Enabled (JavaScript)

Source: https://github.com/ztree/ztree_v3/blob/master/demo/en/exedit/drag.html

Initializes the ZTREE component with drag and drop editing enabled. It configures various drag and drop behaviors such as copying, moving, and drop positions, and sets up event listeners for these configurations.

```javascript
var setting = {
    edit: {
        enable: true,
        showRemoveBtn: false,
        showRenameBtn: false
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        beforeDrag: beforeDrag,
        beforeDrop: beforeDrop
    }
};

var zNodes = [
    { id: 1, pId: 0, name: "can drag 1", open: true },
    { id: 11, pId: 1, name: "can drag 1-1" },
    { id: 12, pId: 1, name: "can drag 1-2", open: true },
    { id: 121, pId: 12, name: "can drag 1-2-1" },
    { id: 122, pId: 12, name: "can drag 1-2-2" },
    { id: 123, pId: 12, name: "can drag 1-2-3" },
    { id: 13, pId: 1, name: "can't drag 1-3", open: true, drag: false },
    { id: 131, pId: 13, name: "can't drag 1-3-1", drag: false },
    { id: 132, pId: 13, name: "can't drag 1-3-2", drag: false },
    { id: 133, pId: 13, name: "can drag 1-3-3" },
    { id: 2, pId: 0, name: "can drag 2", open: true },
    { id: 21, pId: 2, name: "can drag 2-1" },
    { id: 22, pId: 2, name: "can't drop 2-2", open: true, drop: false },
    { id: 221, pId: 22, name: "can drag 2-2-1" },
    { id: 222, pId: 22, name: "can drag 2-2-2" },
    { id: 223, pId: 22, name: "can drag 2-2-3" },
    { id: 23, pId: 2, name: "can drag 2-3" }
];

function beforeDrag(treeId, treeNodes) {
    for (var i = 0, l = treeNodes.length; i < l; i++) {
        if (treeNodes[i].drag === false) {
            return false;
        }
    }
    return true;
}

function beforeDrop(treeId, treeNodes, targetNode, moveType) {
    return targetNode ? targetNode.drop !== false : true;
}

function setCheck() {
    var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
        isCopy = $("#copy").attr("checked"),
        isMove = $("#move").attr("checked"),
        prev = $("#prev").attr("checked"),
        inner = $("#inner").attr("checked"),
        next = $("#next").attr("checked");
    zTree.setting.edit.drag.isCopy = isCopy;
    zTree.setting.edit.drag.isMove = isMove;
    showCode(1, ['setting.edit.drag.isCopy = ' + isCopy, 'setting.edit.drag.isMove = ' + isMove]);
    zTree.setting.edit.drag.prev = prev;
    zTree.setting.edit.drag.inner = inner;
    zTree.setting.edit.drag.next = next;
    showCode(2, ['setting.edit.drag.prev = ' + prev, 'setting.edit.drag.inner = ' + inner, 'setting.edit.drag.next = ' + next]);
}

function showCode(id, str) {
    var code = $("#code" + id);
    code.empty();
    for (var i = 0, l = str.length; i < l; i++) {
        code.append("<li>" + str[i] + "</li>");
    }
}

$(document).ready(function() {
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    setCheck();
    $("#copy").bind("change", setCheck);
    $("#move").bind("change", setCheck);
    $("#prev").bind("change", setCheck);
    $("#inner").bind("change", setCheck);
    $("#next").bind("change", setCheck);
});

//-->
```

--------------------------------

### Configure Static Async URL with zTree

Source: https://github.com/ztree/ztree_v3/blob/master/api/cn/setting.async.url.html

Sets a fixed URL for asynchronously fetching tree nodes. This configuration is used when `setting.async.enable` is true. The URL can include parameters that will be submitted via GET. Ensure proper URL encoding for parameters.

```javascript
var setting = {
	async: {
		enable: true,
		url: "nodes.php",
		autoParam: ["id", "name"]
	}
};
......
```

--------------------------------

### Initialize ZTree with Basic Settings

Source: https://github.com/ztree/ztree_v3/blob/master/demo/en/index.html

This snippet demonstrates the initialization of a ZTree instance using basic view and data settings. It configures the tree to use simple data format and enables basic line display. The `beforeClick` callback is set to handle node clicks, expanding parent nodes or loading content for leaf nodes.

```javascript
var zTree;
var demoIframe;
var setting = {
    view: {
        dblClickExpand: false,
        showLine: true,
        selectedMulti: false
    },
    data: {
        simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pId",
            rootPId: ""
        }
    },
    callback: {
        beforeClick: function(treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("tree");
            if (treeNode.isParent) {
                zTree.expandNode(treeNode);
                return false;
            } else {
                demoIframe.attr("src", treeNode.file + ".html");
                return true;
            }
        }
    }
};
```

--------------------------------

### Get Selected Node's Expansion State

Source: https://github.com/ztree/ztree_v3/blob/master/api/cn/treeNode.open.html

This example demonstrates how to retrieve the current expansion state (open or collapsed) of a selected node in a ztree. It depends on the jquery.ztree.core library and assumes a tree with the ID 'tree' exists. The input is the ztree object and selected nodes, and the output is a boolean indicating the node's open state.

```javascript
var treeObj = $.fn.zTree.getZTreeObj("tree");
var sNodes = treeObj.getSelectedNodes();
if (sNodes.length > 0) {
    var isOpen = sNodes[0].open;
    console.log("Node is open: " + isOpen);
}
```

--------------------------------

### zTree v3: Cancel First Selected Node (JavaScript)

Source: https://github.com/ztree/ztree_v3/blob/master/api/cn/zTreeObj.cancelSelectedNode.html

This example shows how to cancel the selection of only the first selected node in a zTree. It first gets the zTree object, then retrieves the array of selected nodes using getSelectedNodes(). If there are any selected nodes, it calls cancelSelectedNode with the first node in the array. This is useful for scenarios where only a single deselection is needed.

```javascript
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();
if (nodes.length>0) {
		treeObj.cancelSelectedNode(nodes[0]);
}
```

--------------------------------

### ZTREE Configuration and Initialization (JavaScript)

Source: https://github.com/ztree/ztree_v3/blob/master/demo/cn/super/asyncForAll.html

Configures ZTree settings for asynchronous loading, including the URL for fetching nodes, parameters for asynchronous requests, and callback functions for handling asynchronous events. It initializes the ZTree with these settings.

```javascript
var demoMsg = {
    async: "正在进行异步加载，请等一会儿再点击...",
    expandAllOver: "全部展开完毕",
    asyncAllOver: "后台异步加载完毕",
    asyncAll: "已经异步加载完毕，不再重新加载",
    expandAll: "已经异步加载完毕，使用 expandAll 方法"
};
var setting = {
    async: {
        enable: true,
        url: "../asyncData/getNodes.php",
        autoParam: ["id", "name=n", "level=lv"],
        otherParam: {"otherParam": "zTreeAsyncTest"},
        dataFilter: filter,
        type: "get"
    },
    callback: {
        beforeAsync: beforeAsync,
        onAsyncSuccess: onAsyncSuccess,
        onAsyncError: onAsyncError
    }
};
function filter(treeId, parentNode, childNodes) {
    if (!childNodes) return null;
    for (var i = 0, l = childNodes.length; i < l; i++) {
        childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
    }
    return childNodes;
}
function beforeAsync() {
    curAsyncCount++;
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
    curAsyncCount--;
    if (curStatus == "expand") {
        expandNodes(treeNode.children);
    } else if (curStatus == "async") {
        asyncNodes(treeNode.children);
    }
    if (curAsyncCount <= 0) {
        if (curStatus != "init" && curStatus != "") {
            $("#demoMsg").text((curStatus == "expand") ? demoMsg.expandAllOver : demoMsg.asyncAllOver);
            asyncForAll = true;
        }
        curStatus = "";
    }
}
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
    curAsyncCount--;
    if (curAsyncCount <= 0) {
        curStatus = "";
        if (treeNode != null) asyncForAll = true;
    }
}
var curStatus = "init", curAsyncCount = 0, asyncForAll = false, goAsync = false;

$(document).ready(function() {
    $.fn.zTree.init($("#treeDemo"), setting);
    $("#expandAllBtn").bind("click", expandAll);
    $("#asyncAllBtn").bind("click", asyncAll);
    $("#resetBtn").bind("click", reset);
});
```

--------------------------------

### Get All zTree Nodes using jQuery

Source: https://github.com/ztree/ztree_v3/blob/master/api/en/zTreeObj.getNodes.html

This snippet demonstrates how to retrieve all nodes from a zTree instance using jQuery. It first gets the zTree object associated with an HTML element and then calls the getNodes() method to fetch all root nodes. Note that for fully traversing all nodes, recursion or the transformToArray() method might be necessary, and asynchronously loaded nodes cannot be retrieved.

```javascript
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodes();
```

--------------------------------

### Get Parent Node of Selected Node using ztree.js and jQuery

Source: https://github.com/ztree/ztree_v3/blob/master/api/en/treeNode.getParentNode.html

This code snippet demonstrates how to get the parent node of the first selected node in a zTree. It first retrieves the zTree object using its ID, then gets the selected nodes. If there are selected nodes, it calls getParentNode() on the first selected node. This function depends on jQuery and the ztree.core.js library.

```javascript
var treeObj = $.fn.zTree.getZTreeObj("tree");
var sNodes = treeObj.getSelectedNodes();
if (sNodes.length > 0) {
	var node = sNodes[0].getParentNode();
}
```

--------------------------------

### Initialize zTree with Basic Settings

Source: https://github.com/ztree/ztree_v3/blob/master/api/en/fn.zTree.init.html

Demonstrates the initialization of a zTree using jQuery. This snippet requires jQuery and the zTree core JavaScript library. It takes a jQuery object representing the DOM container, a settings object, and an array of node data as input to create an interactive tree structure.

```html
<!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.js"></script>
<!--
  <script type="text/javascript" src="jquery.ztree.excheck.js"></script>
  <script type="text/javascript" src="jquery.ztree.exedit.js"></script>
-->
  <SCRIPT type="text/javascript" >
	var zTreeObj,
	setting = {
		view: {
			selectedMulti: false
		}
	},
	zTreeNodes = [
		{"name":"Site Map", open:true, children: [
			{ "name":"google", "url":"http://www.google.com", "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>
```

--------------------------------

### ZTREE Initialization and Event Handling (JavaScript)

Source: https://github.com/ztree/ztree_v3/blob/master/demo/cn/core/click.html

Initializes a zTree with specified settings and nodes, including beforeClick and onClick callback functions. The beforeClick function controls whether a node can be clicked, and onClick logs the click event details. This snippet requires the zTree library and jQuery.

```javascript
var setting = {
    data: {
        key: {
            title: "t"
        },
        simpleData: {
            enable: true
        }
    },
    callback: {
        beforeClick: beforeClick,
        onClick: onClick
    }
};

var zNodes = [
    { id: 1, pId: 0, name: "普通的父节点", t: "我很普通，随便点我吧", open: true },
    { id: 11, pId: 1, name: "叶子节点 - 1", t: "我很普通，随便点我吧" },
    { id: 12, pId: 1, name: "叶子节点 - 2", t: "我很普通，随便点我吧" },
    { id: 13, pId: 1, name: "叶子节点 - 3", t: "我很普通，随便点我吧" },
    { id: 2, pId: 0, name: "NB的父节点", t: "点我可以，但是不能点我的子节点，有本事点一个你试试看？", open: true },
    { id: 21, pId: 2, name: "叶子节点2 - 1", t: "你哪个单位的？敢随便点我？小心点儿..", click: false },
    { id: 22, pId: 2, name: "叶子节点2 - 2", t: "我有老爸罩着呢，点击我的小心点儿..", click: false },
    { id: 23, pId: 2, name: "叶子节点2 - 3", t: "好歹我也是个领导，别普通群众就来点击我..", click: false },
    { id: 3, pId: 0, name: "郁闷的父节点", t: "别点我，我好害怕...我的子节点随便点吧...", open: true, click: false },
    { id: 31, pId: 3, name: "叶子节点3 - 1", t: "唉，随便点我吧" },
    { id: 32, pId: 3, name: "叶子节点3 - 2", t: "唉，随便点我吧" },
    { id: 33, pId: 3, name: "叶子节点3 - 3", t: "唉，随便点我吧" }
];

var log, className = "dark";

function beforeClick(treeId, treeNode, clickFlag) {
    className = (className === "dark" ? "" : "dark");
    showLog("[ " + getTime() + " beforeClick ]&nbsp;&nbsp;" + treeNode.name);
    return (treeNode.click != false);
}

function onClick(event, treeId, treeNode, clickFlag) {
    showLog("[ " + getTime() + " onClick ]&nbsp;&nbsp;clickFlag = " + clickFlag + " (" + (clickFlag === 1 ? "普通选中": (clickFlag === 0 ? "<b>取消选中</b>" : "<b>追加选中</b>")) + ")");
}

function showLog(str) {
    if (!log) log = $("#log");
    log.append("<li class='" + className + "'>" + str + "</li>");
    if (log.children("li").length > 8) {
        log.get(0).removeChild(log.children("li")[0]);
    }
}

function getTime() {
    var now = new Date(), h = now.getHours(), m = now.getMinutes(), s = now.getSeconds();
    return (h + ":" + m + ":" + s);
}

$(document).ready(function() {
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
```

--------------------------------

### zTree onDrop Callback Example in JavaScript

Source: https://github.com/ztree/ztree_v3/blob/master/api/en/setting.callback.onDrop.html

This example demonstrates how to implement the zTree onDrop callback function to display information about the dragged nodes and the target node after a drop event. It requires the jquery.ztree.exedit.js library.

```javascript
function myOnDrop(event, treeId, treeNodes, targetNode, moveType) {
    alert(treeNodes.length + "," + (targetNode ? (targetNode.tId + ", " + targetNode.name) : "isRoot" ));
};
var setting = {
    callback: {
        onDrop: myOnDrop
    }
};
......
```

--------------------------------

### Initialize zTree with Settings and Data

Source: https://github.com/ztree/ztree_v3/blob/master/demo/en/index.html

Initializes the zTree component with specified settings and node data. It also sets up event handlers for iframe loading and selects a specific node after initialization.

```javascript
$(document).ready(function () {
  var t = $("#tree");
  t = $.fn.zTree.init(t, setting, zNodes);
  demoIframe = $("#testIframe");
  demoIframe.bind("load", loadReady);
  var zTree = $.fn.zTree.getZTreeObj("tree");
  zTree.selectNode(zTree.getNodeByParam("id", 101));
});
```

--------------------------------

### ZTREE Initialization and Configuration

Source: https://github.com/ztree/ztree_v3/blob/master/demo/en/super/rightClickMenu.html

Initializes the ZTREE plugin with specified settings and data. The 'setting' object configures view, check, and callback options. 'zNodes' provides the data structure for the tree. The 'ready' function ensures the tree is initialized after the DOM is loaded.

```javascript
var setting = {
  view: {
    dblClickExpand: false
  },
  check: {
    enable: true
  },
  callback: {
    onRightClick: OnRightClick
  }
};

var zNodes = [
  {
    id: 1,
    name: "No right-click menu 1",
    open: true,
    noR: true,
    children: [
      {
        id: 11,
        name: "Leaf Node 1-1",
        noR: true
      },
      {
        id: 12,
        name: "Leaf Node 1-2",
        noR: true
      }
    ]
  },
  {
    id: 2,
    name: "Right-click 2",
    open: true,
    children: [
      {
        id: 21,
        name: "Leaf Node 2-1"
      },
      {
        id: 22,
        name: "Leaf Node 2-2"
      },
      {
        id: 23,
        name: "Leaf Node 2-3"
      },
      {
        id: 24,
        name: "Leaf Node 2-4"
      }
    ]
  },
  {
    id: 3,
    name: "Right-click 3",
    open: true,
    children: [
      {
        id: 31,
        name: "Leaf Node 3-1"
      },
      {
        id: 32,
        name: "Leaf Node 3-2"
      },
      {
        id: 33,
        name: "Leaf Node 3-3"
      },
      {
        id: 34,
        name: "Leaf Node 3-4"
      }
    ]
  }
];

$(document).ready(function() {
  $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  zTree = $.fn.zTree.getZTreeObj("treeDemo");
  rMenu = $("#rMenu");
});
```

--------------------------------

### zTree Checkbox Type Configuration Example

Source: https://github.com/ztree/ztree_v3/blob/master/api/en/setting.check.chkboxType.html

This example demonstrates how to configure zTree to automatically check only parent nodes when a child node is checked, and automatically uncheck only child nodes when a parent node is unchecked. This requires the jquery.ztree.excheck.js plugin.

```javascript
var setting = {
	check: {
		enable: true,
		chklStyle: "checkbox",
		chkboxType: { "Y": "p", "N": "s" }
	}
};
......
```

--------------------------------

### ZTREE Initialization with Async Settings

Source: https://github.com/ztree/ztree_v3/blob/master/demo/en/super/asyncForAll.html

Initializes a zTree with asynchronous loading enabled. It configures the URL for fetching nodes, automatic parameters, and optional data filtering. Callback functions are set for handling asynchronous events like before, success, and error.

```javascript
var setting = {
  async: {
    enable: true,
    url: "../asyncData/getNodes.php",
    autoParam: ["id", "name=n", "level=lv"],
    otherParam: {"otherParam": "zTreeAsyncTest"},
    dataFilter: filter,
    type: "get"
  },
  callback: {
    beforeAsync: beforeAsync,
    onAsyncSuccess: onAsyncSuccess,
    onAsyncError: onAsyncError
  }
};
function filter(treeId, parentNode, childNodes) {
  if (!childNodes) return null;
  for (var i = 0, l = childNodes.length; i < l; i++) {
    childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
  }
  return childNodes;
}
function beforeAsync() {
  curAsyncCount++;
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
  curAsyncCount--;
  if (curStatus == "expand") {
    expandNodes(treeNode.children);
  } else if (curStatus == "async") {
    asyncNodes(treeNode.children);
  }
  if (curAsyncCount <= 0) {
    if (curStatus != "init" && curStatus != "") {
      $("#demoMsg").text((curStatus == "expand") ? demoMsg.expandAllOver : demoMsg.asyncAllOver);
      asyncForAll = true;
    }
    curStatus = "";
  }
}
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
  curAsyncCount--;
  if (curAsyncCount <= 0) {
    curStatus = "";
    if (treeNode != null) asyncForAll = true;
  }
}
```

--------------------------------

### ZTREE: Initialize Tree with Settings and Data

Source: https://github.com/ztree/ztree_v3/blob/master/demo/en/core/searchNodes.html

Initializes a zTree instance with provided settings and node data. The `setting` object configures tree behavior, callbacks, and appearance, while `zNodes` defines the tree's hierarchical structure and node properties. This function assumes the necessary DOM elements and zTree library are available.

```javascript
var setting = {
    callback: {
        onCollapse: clickButton,
        onExpand: clickButton
    },
    data: {
        key: {
            title: "t"
        },
        simpleData: {
            enable: true
        }
    },
    view: {
        fontCss: getFontCss // nodeClasses: getNodeClasses
    }
};
var zNodes = [
    { id: 1, pId: 0, name: "节点搜索演示 1", t: "id=1", open: true },
    { id: 11, pId: 1, name: "关键字可以是名字", t: "id=11" },
    { id: 12, pId: 1, name: "关键字可以是level", t: "id=12" },
    { id: 13, pId: 1, name: "关键字可以是id", t: "id=13" },
    { id: 14, pId: 1, name: "关键字可以是各种属性", t: "id=14" },
    { id: 2, pId: 0, name: "节点搜索演示 2", t: "id=2", open: true },
    { id: 21, pId: 2, name: "可以只搜索一个节点", t: "id=21" },
    { id: 22, pId: 2, name: "可以搜索节点集合", t: "id=22" },
    { id: 23, pId: 2, name: "搜我吧", t: "id=23" },
    { id: 3, pId: 0, name: "节点搜索演示 3", t: "id=3", open: true },
    { id: 31, pId: 3, name: "我的 id 是: 31", t: "id=31" },
    { id: 32, pId: 31, name: "我的 id 是: 32", t: "id=32" },
    { id: 33, pId: 32, name: "我的 id 是: 33", t: "id=33" }
];

$.fn.zTree.init($("#treeDemo"), setting, zNodes);
```

--------------------------------

### Configure zTree Async Request Type to GET

Source: https://github.com/ztree/ztree_v3/blob/master/api/en/setting.async.type.html

This snippet demonstrates how to configure the zTree setting to use the HTTP GET method for asynchronous data requests. It requires the ztree.core.js library and specifies the URL and parameters for the request.

```javascript
var setting = {
	async: {
		enable: true,
		type: "get",
		url: "http://host/getNode.php",
		autoParam: ["id", "name"]
	}
};
......
```

--------------------------------

### Initialize zTree with Simple Data and Configuration (JavaScript)

Source: https://github.com/ztree/ztree_v3/blob/master/demo/en/super/ztree.html

Initializes the zTree with a predefined set of nodes and a configuration object. The configuration enables features like hover effects, checkbox/radio selection, and data editing. It also binds event listeners to update the tree's check style based on user selections.

```javascript
var setting = {
    view: {
        addHoverDom: addHoverDom,
        removeHoverDom: removeHoverDom,
        selectedMulti: false
    },
    check: {
        enable: true,
        chkStyle: 'radio',
        radioType: "level"
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    edit: {
        enable: true
    }
};

var zNodes = [
    { id: 1, pId: 0, name: "pNode 1", open: true },
    { id: 11, pId: 1, name: "pNode 11" },
    { id: 111, pId: 11, name: " sNode 111" },
    { id: 112, pId: 11, name: "sNode 112" },
    { id: 113, pId: 11, name: "sNode 113" },
    { id: 114, pId: 11, name: "sNode 114" },
    { id: 12, pId: 1, name: "pNode 12" },
    { id: 121, pId: 12, name: "sNode 121" },
    { id: 122, pId: 12, name: "sNode 122" },
    { id: 123, pId: 12, name: "sNode 123" },
    { id: 124, pId: 12, name: "sNode 124" },
    { id: 13, pId: 1, name: "pNode 13", isParent: true },
    { id: 2, pId: 0, name: "pNode 2" },
    { id: 21, pId: 2, name: "pNode 21", open: true },
    { id: 211, pId: 21, name: "sNode 211" },
    { id: 212, pId: 21, name: "sNode 212" },
    { id: 213, pId: 21, name: "sNode 213" },
    { id: 214, pId: 21, name: "sNode 214" },
    { id: 22, pId: 2, name: "pNode 22" },
    { id: 221, pId: 22, name: "sNode 221" },
    { id: 222, pId: 22, name: "sNode 222" },
    { id: 223, pId: 22, name: "sNode 223" },
    { id: 224, pId: 22, name: "sNode 224" },
    { id: 23, pId: 2, name: "pNode 23" },
    { id: 231, pId: 23, name: "sNode 231" },
    { id: 232, pId: 23, name: "sNode 232" },
    { id: 233, pId: 23, name: "sNode 233" },
    { id: 234, pId: 23, name: "sNode 234" },
    { id: 3, pId: 0, name: "pNode 3", isParent: true }
];

function setCheck() {
    setting.check.chkStyle = $("#r1").attr("checked") ? "checkbox" : "radio";
    setting.check.enable = (!$("#disablechk").attr("checked"));
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
}

$(document).ready(function() {
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    setCheck();
    $("#r1").bind("change", setCheck);
    $("#r2").bind("change", setCheck);
    $("#disablechk").bind("change", setCheck);
});

var newCount = 1;

function addHoverDom(treeId, treeNode) {
    var sObj = $("#" + treeNode.tId + "_span");
    if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
    var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='add node' onfocus='this.blur();'></span>";
    sObj.after(addStr);
    var btn = $("#addBtn_" + treeNode.tId);
    if (btn) {
        btn.bind("click", function() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.addNodes(treeNode, { id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++) });
            return false;
        });
    }
};

function removeHoverDom(treeId, treeNode) {
    $("#addBtn_" + treeNode.tId).unbind().remove();
};

```

--------------------------------

### Get Half-Checked Status of a ztree Node (jQuery)

Source: https://github.com/ztree/ztree_v3/blob/master/api/cn/treeNode.getCheckStatus.html

This snippet demonstrates how to retrieve the half-checked status of the first root node in a zTree. It utilizes the $.fn.zTree.getZTreeObj method to access the tree object and then calls getCheckStatus() on the node to get its checking state.

```javascript
var treeObj = $.fn.zTree.getZTreeObj("tree");
var halfCheck = treeObj.getNodes()[0].getCheckStatus();
```

--------------------------------

### Initialize ZTREE with Keyboard Navigation (JavaScript)

Source: https://github.com/ztree/ztree_v3/blob/master/demo/cn/super/keyboard_navigation.html

Initializes the ZTREE component with provided settings and nodes, then enables keyboard navigation on the document body. It requires jQuery and the ZTREE library. The output is a ZTREE instance with keyboard navigation enabled.

```javascript
var setting = { data: { simpleData: { enable: true } } };
var zNodes = [
  { id:1, pId:0, name:"Custom Icon 01", open:true, iconSkin:"pIcon01", accesskey: 'c'},
  { id:11, pId:1, name:"leaf node 01", iconSkin:"icon01", accesskey: 'l'},
  { id:12, pId:1, name:"leaf node 02", iconSkin:"icon02"},
  { id:13, pId:1, name:"parent node 03", iconSkin:"pIcon01", accesskey: 'p'},
  { id:131, pId:13, name:"leaf node 01", iconSkin:"icon01"},
  { id:132, pId:13, name:"leaf node 02", iconSkin:"icon02"},
  { id:133, pId:13, name:"leaf node 03", iconSkin:"icon03"},
  { id:2, pId:0, name:"Custom Icon 02", open:true, iconSkin:"pIcon02"},
  { id:21, pId:2, name:"leaf node 01", iconSkin:"icon04"},
  { id:22, pId:2, name:"leaf node 02", iconSkin:"icon05"},
  { id:23, pId:2, name:"leaf node 03", iconSkin:"icon06"},
  { id:3, pId:0, name:"no Custom Icon", open:true, accesskey: 'n' },
  { id:31, pId:3, name:"leaf node 01"},
  { id:32, pId:3, name:"leaf node 02"},
  { id:33, pId:3, name:"leaf node 03"}
];

var $ = jQuery;
$(document).ready(function() {
  var element = "#treeDemo";
  var zTree = $.fn.zTree.init($(element), setting, zNodes);
  // Initialize keyboard navigation
  $.fn.zTreeKeyboardNavigation(zTree, document.body);
});
```

--------------------------------

### ZTREE Initialization on Document Ready

Source: https://github.com/ztree/ztree_v3/blob/master/demo/en/super/asyncForAll.html

Initializes the zTree upon the document's ready state. It binds click events to buttons that trigger 'expandAll', 'asyncAll', and 'reset' functionalities.

```javascript
$(document).ready(function(){
  $.fn.zTree.init($("#treeDemo"), setting);
  $("#expandAllBtn").bind("click", expandAll);
  $("#asyncAllBtn").bind("click", asyncAll);
  $("#resetBtn").bind("click", reset);
});
```

--------------------------------

### Get Selected Node Index with ztree.js

Source: https://github.com/ztree/ztree_v3/blob/master/api/en/treeNode.getIndex.html

This snippet demonstrates how to obtain the index of the first selected node in a zTree. It requires the ztree library and jQuery to be included. The function retrieves the zTree object, gets the selected nodes, and then calls the getIndex() method on the first selected node.

```javascript
var treeObj = $.fn.zTree.getZTreeObj("tree");
var sNodes = treeObj.getSelectedNodes();
if (sNodes.length > 0) {
	var node = sNodes[0].getIndex();
}
```

--------------------------------

### Initialize zTree with Settings and Data

Source: https://github.com/ztree/ztree_v3/blob/master/demo/cn/super/rightClickMenu.html

Initializes the zTree component with specified settings and node data. It utilizes jQuery's zTree plugin. Dependencies include the zTree library and jQuery.

```javascript
var setting = {
    view: {
        dblClickExpand: false
    },
    check: {
        enable: true
    },
    callback: {
        onRightClick: OnRightClick
    }
};

var zNodes = [
    {
        id: 1,
        name: "无右键菜单 1",
        open: true,
        noR: true,
        children: [
            {
                id: 11,
                name: "节点 1-1",
                noR: true
            },
            {
                id: 12,
                name: "节点 1-2",
                noR: true
            }
        ]
    },
    {
        id: 2,
        name: "右键操作 2",
        open: true,
        children: [
            {
                id: 21,
                name: "节点 2-1"
            },
            {
                id: 22,
                name: "节点 2-2"
            },
            {
                id: 23,
                name: "节点 2-3"
            },
            {
                id: 24,
                name: "节点 2-4"
            }
        ]
    },
    {
        id: 3,
        name: "右键操作 3",
        open: true,
        children: [
            {
                id: 31,
                name: "节点 3-1"
            },
            {
                id: 32,
                name: "节点 3-2"
            },
            {
                id: 33,
                name: "节点 3-3"
            },
            {
                id: 34,
                name: "节点 3-4"
            }
        ]
    }
];

$(document).ready(function() {
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    zTree = $.fn.zTree.getZTreeObj("treeDemo");
    rMenu = $("#rMenu");
});
```

--------------------------------

### JavaScript: Initialize zTree with Node Search Settings

Source: https://github.com/ztree/ztree_v3/blob/master/demo/cn/core/searchNodes.html

Initializes a zTree instance with predefined settings and node data. The settings include callback functions for node expansion/collapse and data configuration for simple data format. This setup is essential for enabling the node search functionalities demonstrated on the page.

```javascript
var setting = {
    callback: {
        onCollapse: clickButton,
        onExpand: clickButton
    },
    data: {
        key: {
            title: "t"
        },
        simpleData: {
            enable: true
        }
    },
    view: {
        fontCss: getFontCss,
        // nodeClasses: getNodeClasses
    }
};

var zNodes = [
    { id:1, pId:0, name:"节点搜索演示 1", t:"id=1", open:true},
    { id:11, pId:1, name:"关键字可以是名字", t:"id=11"},
    { id:12, pId:1, name:"关键字可以是level", t:"id=12"},
    { id:13, pId:1, name:"关键字可以是id", t:"id=13"},
    { id:14, pId:1, name:"关键字可以是各种属性", t:"id=14"},
    { id:2, pId:0, name:"节点搜索演示 2", t:"id=2", open:true},
    { id:21, pId:2, name:"可以只搜索一个节点", t:"id=21"},
    { id:22, pId:2, name:"可以搜索节点集合", t:"id=22"},
    { id:23, pId:2, name:"搜我吧", t:"id=23"},
    { id:3, pId:0, name:"节点搜索演示 3", t:"id=3", open:true},
    { id:31, pId:3, name:"我的 id 是: 31", t:"id=31"},
    { id:32, pId:31, name:"我的 id 是: 32", t:"id=32"},
    { id:33, pId:32, name:"我的 id 是: 33", t:"id=33"}
];

function initTree() {
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
```

--------------------------------

### zTree beforeAsync Callback Example - Prevent AJAX for Node ID 1

Source: https://github.com/ztree/ztree_v3/blob/master/api/en/setting.callback.beforeAsync.html

This example demonstrates how to implement the beforeAsync callback to prevent zTree from sending an AJAX request if the parent node's ID is 1. It depends on the zTree core JavaScript library and jQuery.

```javascript
function myBeforeCallBack(treeId, treeNode) {
    return (treeNode.id !== 1);
};

var setting = {
    callback: {
        beforeAsync: myBeforeCallBack
    }
};
// ... other zTree settings and initialization
```
Tokens:
Raw