From 21d72c4a80fe2937d0c4ddd20624b27adbcd989b Mon Sep 17 00:00:00 2001 From: lizi00164331
All of the methods in zTree v3.x are available through the '$. fn.zTree._z' calls, open it for you to develop your own zTree plug-ins.
+If you have no special requirements, please don't use this object, and don't modify the methods in this object.
+From zTree v3.4, zTree support the method for destruction.
+1. This method can destroy the zTree with specify treeId, and can destroy all of the zTrees.
+2. If you want to destory some one zTree, you can use the 'zTreeObj.destroy()' method.
+3. If you want to use the tree which has been destroyed, you must use the 'init()' method at first.
+zTree unique identifier
+If this parameter is omitted, then will destroy all of the zTrees.
+no return value
+$.fn.zTree.destroy("treeDemo");
+ $.fn.zTree.destroy();
+zTree v3.x specifically provide the method which can use the tree's Id to get zTree object.
+Please initialize zTree first, then you can use this method.
+Users don't need to set the global variable to hold the zTree object, and all of the callback will return 'treeId' parameters, the user can always use this method to get the zTree object.
+zTree unique identifier
+zTree object
+This object can provide the methods of operate the zTree
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+The method which used to create zTree.
+1. The web page need to use W3C markup. For example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+2. Need to load jquery-1.4.2.js or other higher versions.
+3. Need to load jquery-ztree.core-3.0.js. If you need to use the edit mode or checkbox / radio mode, you need to load jquery-ztree.exedit-3.0.js and jquery-ztree.excheck-3.0.js.
+4. Need to load zTreeStyle.css and image files
+5. If you need to use custom icons, please refer to the appropriate Demo.
+6. Note: You need to set zTree container's class name to "ztree". If you need to change, don't forget to modify the css file. If you need other special styles, can modify the css file to their own needs.
+DOM Container for zTree
+zTree's configuration data, please refer to "setting details" in the API Document.
+zTree's node data, please refer to "treeNode data details" in the API Document.
+1. zTree v3.x support to add single node, that is, if only to add one node, you can use JSON without using Array.
+2. If you need asynchronous load root nodes, can be set to null or [ ]
+3. If you use simple data mode, please refer to "setting.data.simpleData" in the API Document.
+zTree object
+This object can provide the methods of operate the zTree
+You can use $.fn.zTree.getZTreeObj method at any time to obtain.
+<!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.5.js"></script>
+<!--
+ <script type="text/javascript" src="jquery.ztree.excheck-3.5.js"></script>
+ <script type="text/javascript" src="jquery.ztree.exedit-3.5.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>
+Required automatically submit the parameters about the properties of the parent node, when the asynchronous load. It is valid when [setting.async.enable = true]
+Default:[ ]
+1. Just save the attribute name of node to the array. For example: ["id", "name"]
+2. You can change the parameter name. For example: server only accepts "zId" -- ["id=zId"]
+var setting = {
+ async: {
+ enable: true,
+ url: "http://host/getNode.php",
+ autoParam: ["id"]
+ }
+};
+If have the parent node: {id:1, name:"test"}, When asynchronously load this parent node's child nodes, will be submitted parameters: id=1
+......
+ var setting = {
+ async: {
+ enable: true,
+ url: "http://host/getNode.php",
+ autoParam: ["id=zId"]
+ }
+};
+If have the parent node: {id:1, name:"test"}, When asynchronously load this parent node's child nodes, will be submitted parameters: zId=1
+......
+When Ajax sending data to the server, use this content-type. It is valid when [setting.async.enable = true]
+Default:"application/x-www-form-urlencoded"
+contentType = "application/x-www-form-urlencoded", means: the sending data format is "form" format.
+contentType = "application/json", means: the sending data format is "json" format. (for .Net)
+var setting = {
+ async: {
+ enable: true,
+ contentType: "application/json",
+ url: "http://host/getNode.php",
+ autoParam: ["id", "name"]
+ }
+};
+......
+Function used to pre-process for the return data of Ajax. It is valid when [setting.async.enable = true]
+Default: null
+zTree unique identifier: treeId, easy for users to control.
+Parent node's JSON data object
+When asynchronously loading the root, the parentNode = null
+Ajax got Array (JSON) / JSON / String data objects
+From v3.4, support the string with XML format.
+The return value should be the JSON data structure which is supported by the zTree.
+v3.x supports to load single node JSON data object.
+function ajaxDataFilter(treeId, parentNode, responseData) {
+ if (responseData) {
+ for(var i =0; i < responseData.length; i++) {
+ responseData[i].name += "_filter";
+ }
+ }
+ return responseData;
+};
+var setting = {
+ async: {
+ enable: true,
+ url: "http://host/getNode.php",
+ dataFilter: ajaxDataFilter
+ }
+};
+......
+The data type of Ajax. It is valid when [setting.async.enable = true]
+Default:"text"
+dataType = "text", It can meet most of the needs.
+The 'dataType' in zTree and jQuery's ajax is same.
+var setting = {
+ async: {
+ enable: true,
+ dataType: "text",
+ url: "http://host/getNode.php",
+ autoParam: ["id", "name"]
+ }
+};
+......
+Set zTree asynchronous loading mode is turned on or off.
+Default: false
+true - turn on asynchronous loading mode
+false - turn off asynchronous loading mode
+If set it is true, you must set attributes in setting.async
+If you don't pass 'treeNodes' parameter when initialize zTree, the root nodes will get by ajax.
+var setting = {
+ async: {
+ enable: true,
+ url: "http://host/getNode.php",
+ autoParam: ["id", "name"]
+ }
+};
+......
+The static parameters of the Ajax request. (key - value) It is valid when [setting.async.enable = true]
+Default: [ ]
+Can be empty array. e.g. [ ]. If set key, you must set value, e.g. [key, value]. ([key] or [key, value, key] is wrong!!)
+Use JSON data format set the key-value. e.g. { key1:value1, key2:value2 }
+var setting = {
+ async: {
+ enable: true,
+ url: "http://host/getNode.php",
+ otherParam: ["id", "1", "name", "test"]
+ }
+};
+when zTree send ajax, the parameters will has: id=1&name=test
+ var setting = {
+ async: {
+ enable: true,
+ url: "http://host/getNode.php",
+ otherParam: { "id":"1", "name":"test"}
+ }
+};
+when zTree send ajax, the parameters will has: id=1&name=test
+Http request mode in ajax. It is valid when [setting.async.enable = true]
+Defalut: "post"
+"post" - http request mode
+"get" - http request mode
+The 'type' in zTree and jQuery's ajax is same.
+var setting = {
+ async: {
+ enable: true,
+ type: "get",
+ url: "http://host/getNode.php",
+ autoParam: ["id", "name"]
+ }
+};
+......
+The URL to which the ajax request is sent. It is valid when [setting.async.enable = true]
+Default: ""
+A url string(e.g. "http://www.domain.com"). Note: please ensure that the url can be loaded
+Url can also take parameters, please note that transcode.
+zTree unique identifier: treeId, easy for users to control.
+Parent node's JSON data object
+When asynchronously loading the root, the treeNode = null
+Return value is same as 'String Format'
+var setting = {
+ async: {
+ enable: true,
+ url: "nodes.php",
+ autoParam: ["id", "name"]
+ }
+};
+......
+ function getAsyncUrl(treeId, treeNode) {
+ return treeNode.isParent ? "nodes1.php" : "nodes2.php";
+};
+var setting = {
+ async: {
+ enable: true,
+ url: getAsyncUrl,
+ autoParam: ["id", "name"]
+ }
+};
+......
+Used to capture the event before zTree execute ajax, zTree based on return value to determine whether to execute ajax.
+Default: null
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the parent node
+When asynchronously loading the root, the treeNode = null
+return true or false
+If return false, zTree will not execute ajax, and will not trigger the 'onAsyncSuccess / onAsyncError' callback.
+function zTreeBeforeAsync(treeId, treeNode) {
+ return (treeNode.id !== 1);
+};
+var setting = {
+ callback: {
+ beforeAsync: zTreeBeforeAsync
+ }
+};
+......
+Used to capture the event before check or uncheck node, zTree based on return value to determine whether to change check state.
+Default: null
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which is checked or unchecked
+return true or false
+If return false, zTree will not change check state, and will not trigger the 'onCheck' callback.
+function zTreeBeforeCheck(treeId, treeNode) {
+ return false;
+};
+var setting = {
+ callback: {
+ beforeCheck: zTreeBeforeCheck
+ }
+};
+......
+Used to capture the event before click node, zTree based on return value to determine whether to trigger the 'onClick' callback.
+Default: null
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which is clicked
+Node is selected or deselected state, please see table below for details
+clickFlag | selectedMulti | autoCancelSelected && event.ctrlKey / metaKey | isSelected | operate for selected |
1 | true | false | false | node is selected (single) |
1 | true | false | true | node is selected (single) |
2 | true | true | false | node is selected (multi) |
0 | true | true | true | node is deselected |
1 | false | false | false | node is selected (single) |
1 | false | false | true | node is selected (single) |
1 | false | true | false | node is selected (single) |
0 | false | true | true | node is deselected |
return true or false
+If return false, zTree will not change selected state, and will not trigger the 'onClick' callback.
+function zTreeBeforeClick(treeId, treeNode, clickFlag) {
+ return (treeNode.id !== 1);
+};
+var setting = {
+ callback: {
+ beforeClick: zTreeBeforeClick
+ }
+};
+......
+Used to capture the event before collapse node, zTree based on return value to determine whether to collapse node.
+Default: null
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which will be collapsed
+return true or false
+If return false, zTree will not collapse node, and will not trigger the 'onCollapse' callback.
+function zTreeBeforeCollapse(treeId, treeNode) {
+ return false;
+};
+var setting = {
+ callback: {
+ beforeCollapse: zTreeBeforeCollapse
+ }
+};
+......
+Used to capture the dblclick event before the 'onDblClick' callback, zTree based on return value to determine whether to trigger the 'onDblClick' callback.
+Default: null
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which is double clicked
+If the DOM which dblclicked isn't a node, it will return null.
+return true or false
+If return false, ztree will not trigger the 'onDblClick' callback, no effect on other operations.
+This callback function does not affect the dblclick the parent node to auto expand, please refer to setting.view.dblClickExpand properties.
+function zTreeBeforeDblClick(treeId, treeNode) {
+ return false;
+};
+var setting = {
+ callback: {
+ beforeDblClick: zTreeBeforeDblClick
+ }
+};
+......
+Used to capture the event before drag node, zTree based on return value to determine whether to start to drag node.
+Default: null
+zTree unique identifier: treeId, the tree is what the treeNodes are belong to, easy for users to control.
+A collection of the nodes which will be dragged
+v3.x allows drag and drop multiple sibling nodes, so this parameter is modified to Array(JSON).
+If the selected nodes aren't the sibling nodes, you can only drag one node which mouse over.
+return true or false
+If return false, zTree will stop drag, and will not trigger the 'onDrag / beforeDrop / onDrop' callback.
+function zTreeBeforeDrag(treeId, treeNodes) {
+ return false;
+};
+var setting = {
+ edit: {
+ enable: true
+ },
+ callback: {
+ beforeDrag: zTreeBeforeDrag
+ }
+};
+......
+Used to capture the event when drag node to collapsed parent node, zTree based on return value to determine whether to auto expand parent node.
+Default: null
+zTree unique identifier: treeId, the tree is what the treeNode(parent node) is belong to, easy for users to control.
+JSON data object of the parent node which will be auto expanded
+return true or false
+If return false, zTree will not auto expand parent node.
+function zTreeBeforeDragOpen(treeId, treeNode) {
+ return false;
+};
+var setting = {
+ edit: {
+ enable: true
+ },
+ callback: {
+ beforeDragOpen: zTreeBeforeDragOpen
+ }
+};
+......
+Used to capture the event before drag-drop node, zTree based on return value to determine whether to allow drag-drop node.
+Default: null
+When drop the nodes, if the dragged nodes is not in a valid location, this callback will not triggered, and will restore the original position.
+zTree unique identifier: treeId, the tree is what the targetNode is belong to, easy for users to control.
+A collection of the nodes which has been dragged
+The treeNodes are the data of the nodes which has been dragged, when copy nodes or move nodes.
+JSON data object of the target node which treeNodes are drag-dropped.
+If the treeNodes will be root node, the targetNode = null
+the relative position of move to the target node
+"inner": will be child of targetNode
+"prev": will be sibling node, and be in front of targetNode
+"next": will be sibling node, and be behind targetNode
+the flag used to judge copy node or move node
+true: copy node; false: move node
+return true or false
+If return false, zTree will restore the dragged nodes, and will not trigger the 'onDrop' callback.
+function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
+ return !(targetNode == null || (moveType != "inner" && !targetNode.parentTId));
+};
+var setting = {
+ edit: {
+ enable: true
+ },
+ callback: {
+ beforeDrop: zTreeBeforeDrop
+ }
+};
+......
+Used to capture the event before click edit button, zTree based on return value to determine whether to allow to edit the name.
+This callback is used to capture the event which edit button is clicked, then trigger the custom editing operation.
+Default: null
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which will be edited name.
+return true or false
+If return false, the node will not be able to edit the name.
+function zTreeBeforeEditName(treeId, treeNode) {
+ return !treeNode.isParent;
+}
+var setting = {
+ edit: {
+ enable: true
+ },
+ callback: {
+ beforeEditName: zTreeBeforeEditName
+ }
+};
+......
+Used to capture the event before expand node, zTree based on return value to determine whether to expand node.
+Default: null
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which will be expanded
+return true or false
+If return false, zTree will not expand node, and will not trigger the 'onExpand' callback.
+function zTreeBeforeExpand(treeId, treeNode) {
+ return false;
+};
+var setting = {
+ callback: {
+ beforeExpand: zTreeBeforeExpand
+ }
+};
+......
+Used to capture the mousedown event before the 'onMouseDown' callback, zTree based on return value to determine whether to trigger the 'onMouseDown' callback.
+Default: null
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which mouse over
+If the DOM which mouse over isn't a node, it will return null.
+return true or false
+If return false, zTree will not trigger the 'onMouseDown' callback, no effect on other operations.
+function zTreeBeforeMouseDown(treeId, treeNode) {
+ return false;
+};
+var setting = {
+ callback: {
+ beforeMouseDown: zTreeBeforeMouseDown
+ }
+};
+......
+Used to capture the mouseup event before the 'onMouseUp' callback, zTree based on return value to determine whether to trigger the 'onMouseUp' callback.
+Default: null
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which mouse over
+If the DOM which mouse over isn't a node, it will return null.
+return true or false
+If return false, zTree will not trigger the 'onMouseUp' callback, no effect on other operations.
+function zTreeBeforeMouseUp(treeId, treeNode) {
+ return false;
+};
+var setting = {
+ callback: {
+ beforeMouseUp: zTreeBeforeMouseUp
+ }
+};
+......
+Used to capture the event before remove node, zTree based on return value to determine whether to allow to remove node.
+Default: null
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which will be removed.
+return true or false
+If return false, zTree will not remove node, and will not trigger the 'onRemove' callback.
+function zTreeBeforeRemove(treeId, treeNode) {
+ return false;
+}
+var setting = {
+ edit: {
+ enable: true
+ },
+ callback: {
+ beforeRemove: zTreeBeforeRemove
+ }
+};
+......
+Used to capture the event before rename(when input DOM blur or press Enter Key), zTree based on return value to determine whether to allow to rename node.
+When node is editing name, press the ESC key to restore the original name and stop edit name.
+From v3.5.13, zTree will trigger this callback when user cancel edit name. please see 'isCancel' parameter.
+Default: null
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which will be rename.
+the new name
+the status about cancel edit name (v3.5.13+)
+isCancel = true means: user cancel edit name. (press ESC or use cancelEditName() function)
+isCancel = false means: user submit edit name.
+return true or false
+If return false, the treeNode will keep the editing name, don't trigger the 'onRename' callback, and will ignore other enents, until the callback return true.
+If returns false, zTree will not set the input box to get focus to avoid the warning message which led to repeated triggering ‘beforeRename’ callback. Please use editName() method to set the input box to get focus when user close the warning message.
+function zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
+ return newName.length > 5;
+}
+var setting = {
+ edit: {
+ enable: true
+ },
+ callback: {
+ beforeRename: zTreeBeforeRename
+ }
+};
+......
+Used to capture the right click event before the 'onRightClick' callback, zTree based on return value to determine whether to trigger the 'onRightClick' callback.
+Default: null
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which is mouse right clicked
+If the DOM which mouse right clicked isn't a node, it will return null.
+return true or false
+If return false, ztree will not trigger the 'onRightClick' callback, no effect on other operations.
+function zTreeBeforeRightClick(treeId, treeNode) {
+ return false;
+};
+var setting = {
+ callback: {
+ beforeRightClick: zTreeBeforeRightClick
+ }
+};
+......
+Used to capture the error event when execute ajax.
+If you set 'setting.callback.beforeAsync',and return false, zTree will not execute ajax, and will not trigger the 'onAsyncSuccess / onAsyncError' callback.
+Default: null
+event Object
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the parent node
+When load root nodes, treeNode = null
+XMLHttpRequest Object, please refer to JQuery API documentation.
+a string categorizing the status of the request("success", "error"...), please refer to JQuery API documentation.
+eWhen an HTTP error occurs, errorThrown receives the textual portion of the HTTP status, please refer to JQuery API documentation.
+function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
+ alert(XMLHttpRequest);
+};
+var setting = {
+ callback: {
+ onAsyncError: zTreeOnAsyncError
+ }
+};
+......
+Used to capture the complete success event when execute ajax.
+If you set 'setting.callback.beforeAsync',and return false, zTree will not execute ajax, and will not trigger the 'onAsyncSuccess / onAsyncError' callback.
+Default: null
+event Object
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the parent node
+When load root nodes, treeNode = null
+The actualnode data which got by ajax. User-friendly debugging.
+The actual data's type of msg is affected by 'setting.async.dataType', please refer to JQuery API documentation.
+function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
+ alert(msg);
+};
+var setting = {
+ callback: {
+ onAsyncSuccess: zTreeOnAsyncSuccess
+ }
+};
+......
+Used to capture the check or uncheck event when check or uncheck the checkbox and radio.
+If you set 'setting.callback.beforeCheck',and return false, zTree will not change check state, and will not trigger the 'onCheck' callback.
+Default: null
+event Object
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which is checked or unchecked
+function zTreeOnCheck(event, treeId, treeNode) {
+ alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
+};
+var setting = {
+ callback: {
+ onCheck: zTreeOnCheck
+ }
+};
+......
+Used to capture the click event when click node.
+If you set 'setting.callback.beforeClick',and return false, zTree will not change selected state, and will not trigger the 'onClick' callback.
+Default: null
+event Object
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which is clicked
+Node is selected or deselected state, please see table below for details
+clickFlag | selectedMulti | autoCancelSelected && event.ctrlKey / metaKey | isSelected | operate for selected |
1 | true | false | false | node is selected (single) |
1 | true | false | true | node is selected (single) |
2 | true | true | false | node is selected (multi) |
0 | true | true | true | node is deselected |
1 | false | false | false | node is selected (single) |
1 | false | false | true | node is selected (single) |
1 | false | true | false | node is selected (single) |
0 | false | true | true | node is deselected |
function zTreeOnClick(event, treeId, treeNode) {
+ alert(treeNode.tId + ", " + treeNode.name);
+};
+var setting = {
+ callback: {
+ onClick: zTreeOnClick
+ }
+};
+......
+Used to capture the event when collapse node.
+If you set 'setting.callback.beforeCollapse',and return false, zTree will not collapse node, and will not trigger the 'onCollapse' callback.
+Default: null
+event Object
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which will be collapsed
+function zTreeOnCollapse(event, treeId, treeNode) {
+ alert(treeNode.tId + ", " + treeNode.name);
+};
+var setting = {
+ callback: {
+ onCollapse: zTreeOnCollapse
+ }
+};
+......
+Used to capture the dblclick event when double click node.
+If you set 'setting.callback.beforeDblClick',and return false, zTree will not trigger the 'onDblClick' callback.
+Default: null
+event Object
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which is double clicked
+If the DOM which dblclicked isn't a node, it will return null.
+function zTreeOnDblClick(event, treeId, treeNode) {
+ alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
+};
+var setting = {
+ callback: {
+ onDblClick: zTreeOnDblClick
+ }
+};
+......
+Used to capture the drag event when drag node.
+If you set 'setting.callback.beforeDrag',and return false, zTree will stop drag, and will not trigger the 'onDragMove' & 'onDrag' callback.
+Default: null
+event Object
+zTree unique identifier: treeId, the tree is what the treeNodes are belong to, easy for users to control.
+A collection of the nodes which will be dragged
+function zTreeOnDrag(event, treeId, treeNodes) {
+ alert(treeNodes.length);
+};
+var setting = {
+ callback: {
+ onDrag: zTreeOnDrag
+ }
+};
+......
+Used to capture the drag-move event when drag & drop node.
+Mainly used to capture the DOM which the nodes was drag in.
+Default: null
+event Object
+zTree unique identifier: treeId, the tree is what the treeNodes are belong to, easy for users to control.
+A collection of the nodes which will be dragged
+function zTreeOnDragMove(event, treeId, treeNodes) {
+ console.log(event.target);
+};
+var setting = {
+ callback: {
+ onDragMove: zTreeOnDragMove
+ }
+};
+......
+Used to capture the drop event when drag-drop node.
+If you set 'setting.callback.beforeDrop',and return false, zTree will restore the dragged nodes, and will not trigger the 'onDrop' callback.
+Default: null
+event Object
+zTree unique identifier: treeId, the tree is what the targetNode is belong to, easy for users to control.
+A collection of the nodes which has been dragged
+The treeNodes are the data of the nodes which be dragged, when move nodes.
+The treeNodes are the clone data of the nodes which be dragged, when copy nodes.
+JSON data object of the target node which treeNodes are drag-dropped.
+If the treeNodes will be root node, the targetNode = null
+the relative position of move to the target node
+"inner": will be child of targetNode
+"prev": will be sibling node, and be in front of targetNode
+"next": will be sibling node, and be behind targetNode
+If moveType is null, means drag & drop is cancel.
+the flag used to judge copy node or move node
+true: copy node; false: move node
+function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
+ alert(treeNodes.length + "," + (targetNode ? (targetNode.tId + ", " + targetNode.name) : "isRoot" ));
+};
+var setting = {
+ callback: {
+ onDrop: zTreeOnDrop
+ }
+};
+......
+Used to capture the event when expand node.
+If you set 'setting.callback.beforeExpand',and return false, zTree will not expand node, and will not trigger the 'onExpand' callback.
+Default: null
+event Object
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which will be expanded
+function zTreeOnExpand(event, treeId, treeNode) {
+ alert(treeNode.tId + ", " + treeNode.name);
+};
+var setting = {
+ callback: {
+ onExpand: zTreeOnExpand
+ }
+};
+......
+Used to capture the event when mouse down.
+If you set 'setting.callback.beforeMouseDown',and return false, zTree will not trigger the 'onMouseDown' callback.
+Default: null
+event Object
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which mouse over
+If the DOM which mouse over isn't a node, it will return null.
+function zTreeOnMouseDown(event, treeId, treeNode) {
+ alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
+};
+var setting = {
+ callback: {
+ onMouseDown: zTreeOnMouseDown
+ }
+};
+......
+Used to capture the event when mouse up.
+If you set 'setting.callback.beforeMouseUp',and return false, zTree will not trigger the 'onMouseUp' callback.
+Default: null
+event Object
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which mouse over
+If the DOM which mouse over isn't a node, it will return null.
+function zTreeOnMouseUp(event, treeId, treeNode) {
+ alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
+};
+var setting = {
+ callback: {
+ onMouseUp: zTreeOnMouseUp
+ }
+};
+......
+Used to capture the event when node's DOM is created.
+Because v3.x uses lazy loading technology, so the nodes which doesn't create DOM when initialized will not trigger this callback, until its parent node is expanded.
+Large amount of data to load, please note: do not set onNodeCreated, can improve performance as when initialized.
+Default: null
+event Object
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which DOM is created
+function zTreeOnNodeCreated(event, treeId, treeNode) {
+ alert(treeNode.tId + ", " + treeNode.name);
+};
+var setting = {
+ callback: {
+ onNodeCreated: zTreeOnNodeCreated
+ }
+};
+......
+Used to capture the event when remove node.
+If you set 'setting.callback.beforeRemove',and return false, zTree will not remove node, and will not trigger the 'onRemove' callback.
+Default: null
+event Object
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which was removed.
+function zTreeOnRemove(event, treeId, treeNode) {
+ alert(treeNode.tId + ", " + treeNode.name);
+}
+var setting = {
+ callback: {
+ onRemove: zTreeOnRemove
+ }
+};
+......
+Used to capture the event when remove node.
+1. If you set 'setting.callback.beforeRename',and return false, zTree will keep the editing name, and will not trigger the 'onRename' callback.
+2. If you modity treeNode data, and use 'updateNode' function, zTree will not trigger the 'onRename' callback.
+3. From v3.5.13, zTree will trigger this callback when user cancel edit name. please see 'isCancel' parameter.
+Default: null
+event Object
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which was rename.
+the status about cancel edit name (v3.5.13+)
+isCancel = true means: user cancel edit name. (press ESC or use cancelEditName() function)
+isCancel = false means: user submit edit name.
+function zTreeOnRename(event, treeId, treeNode, isCancel) {
+ alert(treeNode.tId + ", " + treeNode.name);
+}
+var setting = {
+ callback: {
+ onRename: zTreeOnRename
+ }
+};
+......
+Used to capture the event when mouse right click node.
+If you set 'setting.callback.beforeRightClick',and return false, zTree will not trigger the 'onRightClick' callback.
+If you set 'setting.callback.onRightClick', zTree will shield the browser context menu when mouse right click on zTree.
+Default: null
+event Object
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which is mouse right clicked
+If the DOM which mouse right clicked isn't a node, it will return null.
+function zTreeOnRightClick(event, treeId, treeNode) {
+ alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
+};
+var setting = {
+ callback: {
+ onRightClick: zTreeOnRightClick
+ }
+};
+......
+When node is automatically checked or unchecked, this parameter used to set to trigger 'beforeCheck / onCheck' callback. It is valid when [setting.check.enable = true & setting.check.chkStyle = "checkbox"]
+1. If you set 'setting.check.chkboxType' to { "Y": "", "N": "" }, will not automatically checked or unchecked.
+2. If you turn on the trigger and there are many more nodes, will affect the performance, because the check or uncheck node can cause many nodes to be automatically checked or unchecked, it will trigger a lot of callbacks, according to the need to decide whether to use this feature.
+Default: false
+true means: trigger callback
+false means: don't trigger callback
+var setting = {
+ check: {
+ enable: true,
+ autoCheckTrigger: true
+ }
+};
+......
+When the parent node's 'chkDisabled' attribute is true, set the child nodes automatically inherit the 'chkDisabled' attribute. It is valid when [setting.check.enable = true]
+1. Only be used to initialize the nodes, easy batch operations. Please use the 'updateNode' method modify existing node.
+Default: false
+true means: When add new child nodes, if parent node's 'chkDisabled' attribute is true, the child nodes automatically inherit the 'chkDisabled' attribute.
+false means: When add new child nodes, the child nodes don't inherit the 'chkDisabled' attribute from parent node.
+var setting = {
+ check: {
+ enable: true,
+ chkDisabledInherit: true
+ }
+};
+......
+Use the checkbox or radio. It is valid when [setting.check.enable = true]
+Default: "checkbox"
+When chkStyle = "checkbox", zTree show checkbox, and 'setting.check.chkboxType' attribute is valid.
+
When chkStyle = "radio", zTree show radio, and 'setting.check.radioType' attribute is valid.
Please note that letter case, do not change.
+not checked; If node is parent, so its child nodes have been not checked. when mouse over:
+not checked; (only parent node) some of its child nodes have been checked. when mouse over:
+be checked; If node is parent, so its all child nodes have been checked. when mouse over:
+be checked; (only parent node) some of its child nodes or all have been not checked. when mouse over:
+not checked; If node is parent, so its child have been not checked. when mouse over:
+not checked; (only parent node) some of its child have been checked. when mouse over:
+be checked; If node is parent, so its child have been not checked. when mouse over:
+be checked; (only parent node) some of its child have been checked. when mouse over:
+var setting = {
+ check: {
+ enable: true,
+ chkStyle: "radio"
+ }
+};
+......
+When one node is checked or unchecked, control its parent node and its child node auto checked or unchecked. It is valid when [setting.check.enable = true & setting.check.chkStyle = "checkbox"]
+Default: { "Y": "ps", "N": "ps" }
+"Y" attribute use to set auto check after checkbox was checked.
+
"N" attribute use to set auto uncheck after checkbox was unchecked.
+
If value has "p", so parent nodes will be checked or unchecked.
+
If value has "s", so child nodes will be checked or unchecked.
Please note that letter case, do not change.
+var setting = {
+ check: {
+ enable: true,
+ chkStyle: "checkbox",
+ chkboxType: { "Y": "p", "N": "s" }
+ }
+};
+......
+Set to use checkbox or radio in zTree
+Default: false
+true means: use the checkbox or radio
+false means: don't use the checkbox or radio
+var setting = {
+ check: {
+ enable: true
+ }
+};
+......
+When the parent node's 'nocheck' attribute is true, set the child nodes automatically inherit the 'nocheck' attribute. It is valid when [setting.check.enable = true]
+1. Only be used to initialize the nodes, easy batch operations. Please use the 'updateNode' method modify existing node.
+Default: false
+true means: When add new child nodes, if parent node's 'nocheck' attribute is true, the child nodes automatically inherit the 'nocheck' attribute.
+false means: When add new child nodes, the child nodes don't inherit the 'nocheck' attribute from parent node.
+var setting = {
+ check: {
+ enable: true,
+ nocheckInherit: true
+ }
+};
+......
+The group about radio. It is valid when [setting.check.enable = true & setting.check.chkStyle = "radio"]
+Default: "level"
+When radioType = "level", will be grouped with same level nodes which have the same parent node.
+
When radioType = "all", will be grouped with all nodes.
Please note that letter case, do not change.
+var setting = {
+ check: {
+ enable: true,
+ chkStyle: "radio",
+ radioType: "all"
+ }
+};
+......
+The leaf node's lock, the leaf node will lock the 'isParent' attribute to false.
+Default: false
+true means: lock the leaf node, and the node which 'isParent' attribute is false can't add child nodes.
+false means: don't lock the leaf node, and the node which 'isParent' attribute is false can add child nodes.
+var setting = {
+ data: {
+ keep: {
+ leaf: true
+ }
+ }
+};
+......
+The parent node's lock, the parent node will lock 'isParent' attribute to true.
+Default: false
+true means: lock the parent node, and if remove all of the parent node's child nodes, its 'isParent' attribute still keep to be true..
+false means: don't lock the parent node, and if remove all of the parent node's child nodes, its 'isParent' attribute will change to be false..
+var setting = {
+ data: {
+ keep: {
+ parent: true
+ }
+ }
+};
+......
+The node data's attribute to save the checked state.
+Default: "checked"
+Please don't set the other node attribute which zTree used. (e.g., checkedOld)
+var setting = {
+ data: {
+ key: {
+ checked: "isChecked"
+ }
+ }
+};
+......
+The node data's attribute to save the child nodes.
+Default: "children"
+var setting = {
+ data: {
+ key: {
+ children: "nodes"
+ }
+ }
+};
+......
+The node data's attribute to save the node name.
+Default: "name"
+var setting = {
+ data: {
+ key: {
+ name: "ename"
+ }
+ }
+};
+......
+The node data's attribute to save the 'title' attribute of node DOM. It is valid when [setting.view.showTitle = true]
+If set it to "", the title of node DOM will be same as 'setting.data.key.name' attribute.
+Default: ""
+var setting = {
+ data: {
+ key: {
+ title: "fullName"
+ }
+ }
+};
+......
+The node data's attribute to save the node link's url.
+Special: If the nodes's data can only use the 'url' attribute, and don't use the link to jump feature, you can modify this attribute to any nonexistent attribute.
+Default: "url"
+var setting = {
+ data: {
+ key: {
+ url: "xUrl"
+ }
+ }
+};
+......
+Set zTree's node to accept the simple data format, when zTree is initialized or when ajax get / or when use addNodes method.
+Don't have to generate the complex nested data.
+Default: false
+true means: zTree's node accept the simple data format.
+false means: zTree's node only accept the nested data format.
+If set it is true, you must set the other attributes in 'setting.data.simpleData'. (e.g., idKey, pIdKey, rootPId) And let the data satisfy the parent-child relationship.
+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"}
+];
+......
+The node data's attribute to save node data's unique identifier. It is valid when [setting.data.simpleData.enable = true]
+Default: "id"
+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"}
+];
+......
+The node data's attribute to save its parent node data's unique identifier. It is valid when [setting.data.simpleData.enable = true]
+Default: "pId"
+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"}
+];
+......
+Set the default value of root's 'pIdKey' specified attribute values. It is valid when [setting.data.simpleData.enable = true]
+Default: null
+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"}
+];
+......
+When drag node cause the parent node is automatically expanded, set whether to allow to trigger the 'onExpand' callback. It is valid when [setting.edit.enable = true]
+Default: false
+true means: trigger the 'onExpand' callback.
+false means: don't trigger the 'onExpand' callback.
+var setting = {
+ edit: {
+ enable: true,
+ drag: {
+ autoExpandTrigger: true
+ }
+ }
+};
+......
+Drag to the parent node, the parent node auto expand time interval. (Unit: ms) It is valid when [setting.edit.enable = true]
+Default: 500
+Please adjust the value according to needs.
+var setting = {
+ edit: {
+ enable: true,
+ drag: {
+ autoOpenTime: 0
+ }
+ }
+};
+......
+When drag a node to root, the zTree's inner border width. (Unit: px) It is valid when [setting.edit.enable = true]
+Default: 10
+Please adjust the value according to needs.
+var setting = {
+ edit: {
+ enable: true,
+ drag: {
+ borderMax: 20
+ }
+ }
+};
+......
+When drag a node to root, the zTree's outer border width. (Unit: px) It is valid when [setting.edit.enable = true]
+Default: -5
+Please adjust the value according to needs.
+var setting = {
+ edit: {
+ enable: true,
+ drag: {
+ borderMin: -10
+ }
+ }
+};
+......
+When drag one node to the target node, set whether to allow the node to be the target node's child. It is valid when [setting.edit.enable = true]
+If the target node is root, so zTree will only trigger 'inner' and not trigger 'prev / next'.
+This function mainly for the appropriate limit drag and drop (auxiliary arrow), it requires a combination of 'prev, next' together, to achieve full functionality.
+Default: true
+true means: allow the node to be the target node's child.
+false means: don't allow the node to be the target node's child.
+zTree unique identifier: treeId, easy for users to control.
+A collection of the nodes which has been dragged
+JSON data object of the target node which treeNodes are draged over.
+If the treeNodes will be root node, the targetNode = null
+return true or false
+var setting = {
+ edit: {
+ enable: true,
+ drag: {
+ prev: true,
+ next: true,
+ inner: false
+ }
+ }
+};
+......
+ function canInner(treeId, nodes, targetNode) {
+ return !(targetNode && targetNode.level === 0);
+}
+var setting = {
+ edit: {
+ enable: true,
+ drag: {
+ prev: true,
+ next: true,
+ inner: canInner
+ }
+ }
+};
+......
+When drag-drop node, set whether to allow to copy node. It is valid when [setting.edit.enable = true]
+Default: true
+1. If isCopy = true and isMove = true, when drag-drop node, press Ctrl-Key or Cmd-key can copy node, don't press Ctrl-Key or Cmd-key can move node.
+2. If isCopy = true and isMove = false, when drag-drop node, will copy node.
+3. If isCopy = false and isMove = true, when drag-drop node, will move node.
+4. If isCopy = false and isMove = false, so disable to drag-drop node.
+var setting = {
+ edit: {
+ enable: true,
+ drag: {
+ isCopy: true,
+ isMove: false
+ }
+ }
+};
+......
+When drag-drop node, set whether to allow to move node. It is valid when [setting.edit.enable = true]
+Default: true
+1. If isCopy = true and isMove = true, when drag-drop node, press Ctrl-Key or Cmd-key can copy node, don't press Ctrl-Key or Cmd-key can move node.
+2. If isCopy = true and isMove = false, when drag-drop node, will copy node.
+3. If isCopy = false and isMove = true, when drag-drop node, will move node.
+4. If isCopy = false and isMove = false, so disable to drag-drop node.
+var setting = {
+ edit: {
+ enable: true,
+ drag: {
+ isCopy: false,
+ isMove: true
+ }
+ }
+};
+......
+When dragging more than one sibling node, the floating layer shows the maximum number of nodes. zTree using '...' instead of redundant nodes. It is valid when [setting.edit.enable = true]
+Default: 5
+Please adjust the value according to needs.
+var setting = {
+ edit: {
+ enable: true,
+ drag: {
+ maxShowNodeNum: 10
+ }
+ }
+};
+......
+The minimum offset which used to determine the drag operator start. (Unit: px) It is valid when [setting.edit.enable = true]
+Please adjust the value according to needs. Note: If it is too small, will easily lead to misoperation when you click mouse.
+Default: 5
+var setting = {
+ edit: {
+ enable: true,
+ drag: {
+ minMoveSize: 10
+ }
+ }
+};
+......
+When drag one node to the target node, set whether to allow the node to be the target node's next sibling. It is valid when [setting.edit.enable = true]
+If the target node is root, so zTree will only trigger 'inner' and not trigger 'prev / next'.
+This function mainly for the appropriate limit drag and drop (auxiliary arrow), it requires a combination of 'prev, inner' together, to achieve full functionality.
+Default: true
+true means: allow the node to be the target node's next sibling.
+false means: don't allow the node to be the target node's next sibling.
+zTree unique identifier: treeId, easy for users to control.
+A collection of the nodes which has been dragged
+JSON data object of the target node which treeNodes are draged over.
+return true or false
+var setting = {
+ edit: {
+ enable: true,
+ drag: {
+ prev: true,
+ next: false,
+ inner: true
+ }
+ }
+};
+......
+ function canNext(treeId, nodes, targetNode) {
+ return !targetNode.isParent;
+}
+var setting = {
+ edit: {
+ enable: true,
+ drag: {
+ prev: true,
+ next: canNext,
+ inner: true
+ }
+ }
+};
+......
+When drag one node to the target node, set whether to allow the node to be the target node's previous sibling. It is valid when [setting.edit.enable = true]
+If the target node is root, so zTree will only trigger 'inner' and not trigger 'prev / next'.
+This function mainly for the appropriate limit drag and drop (auxiliary arrow), it requires a combination of 'next, inner' together, to achieve full functionality.
+Default: true
+true means: allow the node to be the target node's previous sibling.
+false means: don't allow the node to be the target node's previous sibling.
+zTree unique identifier: treeId, easy for users to control.
+A collection of the nodes which has been dragged
+JSON data object of the target node which treeNodes are draged over.
+return true or false
+var setting = {
+ edit: {
+ enable: true,
+ drag: {
+ prev: false,
+ next: true,
+ inner: true
+ }
+ }
+};
+......
+ function canPrev(treeId, nodes, targetNode) {
+ return !targetNode.isParent;
+}
+var setting = {
+ edit: {
+ enable: true,
+ drag: {
+ prev: canPrev,
+ next: true,
+ inner: true
+ }
+ }
+};
+......
+When edit node's name, the text in input is selected or unselected. It is valid when [setting.edit.enable = true]
+Default: false
+true means: when show the input, the text in input is selected
+false means: when show the input, the text in input is not selected
+var setting = {
+ edit: {
+ enable: true,
+ editNameSelectAll: true
+ }
+};
+......
+Set zTree is in edit mode
+Please set this attribute before zTree initialization. If you need to change the edit mode after the initialization, please use zTreeObj.setEditable() method.
+Default: false
+true means: zTree is in edit mode.
+false means: zTree is not in edit mode.
+1. When click the node, it will not open 'node.url' specified URL.
+
2. Support for dynamic tree editing.
+
3. You can drag-drop nodes, and support drag-drop nodes between multiple trees.
+
4. Support use drag-drop to copy or move the node. (Reference: setting.edit.drag.isCopy / setting.edit.drag.isMove)
+
5. You can use the Edit button to modify the name attribute.
+
6. You can use the Remove button to remove the node.
+
+
Please note that letter case, do not change.
+var setting = {
+ edit: {
+ enable: true
+ }
+};
+......
+the title of the remove button DOM. It is valid when [setting.edit.enable = true & setting.edit.showRemoveBtn = true]
+Default: "remove"
+When the mouse over the remove button, the browser auto pop-up message content.
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which show the remove button
+Return value is same as 'String Format'
+var setting = {
+ edit: {
+ enable: true,
+ showRemoveBtn: true,
+ removeTitle: "remove the node"
+ }
+};
+......
+ function setRemoveTitle(treeId, treeNode) {
+ return treeNode.isParent ? "remove the parent node":"remove the leaf node";
+}
+var setting = {
+ edit: {
+ enable: true,
+ showRemoveBtn: true,
+ removeTitle: setRemoveTitle
+ }
+};
+......
+the title of the rename button DOM. It is valid when [setting.edit.enable = true & setting.edit.showRenameBtn = true]
+Default: "rename"
+When the mouse over the rename button, the browser auto pop-up message content.
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which show the rename button
+return value is same as 'String Format'
+var setting = {
+ edit: {
+ enable: true,
+ showRenameBtn: true,
+ renameTitle: "rename the node"
+ }
+};
+......
+ function setRenameTitle(treeId, treeNode) {
+ return treeNode.isParent ? "rename the parent node":"rename the leaf node";
+}
+var setting = {
+ edit: {
+ enable: true,
+ showRenameBtn: true,
+ renameTitle: setRenameTitle
+ }
+};
+......
+Set to show or hide the remove button. It is valid when [setting.edit.enable = true]
+When you click the remove button:
+1. zTree will trigger the setting.callback.beforeRemove callback, and you can decide whether to allow delete.
+2. If you don't set the 'beforeRemove' or the 'beforeRemove' callback return true, so zTree will trigger the setting.callback.onRemove callback after remove the node.
+Default: true
+true means: show the remove button
+false means: hide the remove button
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which show the remove button
+Return value is same as 'Boolean Format'
+var setting = {
+ edit: {
+ enable: true,
+ showRemoveBtn: false
+ }
+};
+......
+ function setRemoveBtn(treeId, treeNode) {
+ return !treeNode.isParent;
+}
+var setting = {
+ edit: {
+ enable: true,
+ showRemoveBtn: setRemoveBtn
+ }
+};
+......
+Set to show or hide the rename button. It is valid when [setting.edit.enable = true]
+When you click the rename button:
+1. Click the rename button, you can rename the node.
+2. After rename operation (the input DOM blur or press the Enter Key), zTree will trigger the setting.callback.beforeRename callback, and you can decide whether to allow rename.
+3. If the 'beforeRename' callback return false, so zTree will keep the edit status. (Press the ESC key, can be restored to the original state.
+4. If you don't set the 'beforeRename' or the 'beforeRename' callback return true, so zTree will trigger the setting.callback.onRename callback after rename the node.
+Default: true
+true means: show the rename button
+false means: hide the rename button
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which show the rename button
+Return value is same as 'Boolean Format'
+var setting = {
+ edit: {
+ enable: true,
+ showRenameBtn: false
+ }
+};
+......
+ function setRenameBtn(treeId, treeNode) {
+ return !treeNode.isParent;
+}
+var setting = {
+ edit: {
+ enable: true,
+ showRenameBtn: setRenameBtn
+ }
+};
+......
+zTree unique identifier. After the initialization, it equals to the id attribute value of the user-defined zTree container.
+Do not initialize or modify it, it is an internal argument.
+zTree DOM's jQuery object, the main function: easy to internal operations.
+Do not initialize or modify it, it is an internal argument.
+This function used to display the custom control on the node.
+1. If you have huge node data, please note: this function will affect the initialization performance. If not required, it is recommended not to use this function.
+2. This function is an advanced application, please make sure that a better understanding of zTree before you use it.
+Default: null
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which display the custom control.
+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);});
+};
+......
+Used to display custom control when mouse move over the node. (e.g. the rename and remove button)
+If you use this function, so must set setting.view.removeHoverDom, please make sure that a better understanding of zTree before you use it.
+Default: null
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which need to display the custom control.
+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();
+};
+......
+When click the selected node while pressing the Ctrl-key or Cmd-key, allow to cancel selected the node.
+If you don't need this function, please set to false.
+Default: true
+true means: press the Ctrl-key or Cmd-key, can cancel selected node.
+false means: press the Ctrl-key or Cmd-key, can't cancel selected node.
+var setting = {
+ view: {
+ autoCancelSelected: false
+ }
+};
+......
+When double-click the parent node, 'dblClickExpand' is used to decide whether to expand the parent node.
+Default: true
+true means: When double-click the parent node, zTree will expand the parent node.
+false means: When double-click the parent node, zTree will not expand the parent node.
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which be double-clicked.
+Return value is same as 'Boolean Format'
+var setting = {
+ view: {
+ dblClickExpand: false
+ }
+};
+......
+ function dblClickExpand(treeId, treeNode) {
+ return treeNode.level > 0;
+};
+var setting = {
+ view: {
+ dblClickExpand: dblClickExpand
+ }
+};
+......
+The animation speed of expand or collapse node. As same as 'speed' parameter in jQuery
+In order to ensure zTree operating speed, if use the IE6, zTree will not use animation.
+Default: "fast"
+e.g. "slow", "normal", or "fast"
+If set to "", zTree will not use animation.
+How long the animation will run. [Unit: ms] (e.g. 1000)
+var setting = {
+ view: {
+ expandSpeed: "slow"
+ }
+};
+......
+Personalized text style, only applies to <A> object in the node DOM
+Default: {}
+As same as .css() method in jQuery. e.g. {color:"#ff0011", background:"blue"}
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which use the personalized text style
+Return value is same as 'JSON Format'. e.g. {color:"#ff0011", background:"blue"}
+var setting = {
+ view: {
+ fontCss : {color:"red"}
+ }
+};
+ function setFontCss(treeId, treeNode) {
+ return treeNode.level == 0 ? {color:"red"} : {};
+};
+var setting = {
+ view: {
+ fontCss: setFontCss
+ }
+};
+Set to use HTML in 'name' attribute.
+If allow HTML, please do check to avoid security issues, e.g. JavaScript Injection...
+Default: false
+true means: 'name' attribute can be HTML.
+false means: 'name' attribute is only TEXT.
+var setting = {
+ view: {
+ nameIsHTML: true
+ }
+};
+var node = {"name":"<font color='red'>test</font>"};
+......
+Used to hide custom control when mouse move out the node. (e.g. the rename and remove button)
+If you use this function, so must set setting.view.addHoverDom, please make sure that a better understanding of zTree before you use it.
+Default: null
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which need to hide the custom control.
+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();
+};
+......
+Set whether to allow select multiple nodes.
+Default: true
+true mean: you can select multiple nodes.
+false mean: you can only select one node.
+1. Press Ctrl-key or Cmd-key, you can select multiple nodes.
+2、This attribute don't affect the feature of cancel select node. ( please see setting.view.autoCancelSelected )
+var setting = {
+ view: {
+ selectedMulti: false
+ }
+};
+......
+Set to show or hide node icon.
+Default: true
+true means: show node icon.
+false means: hide node icon.
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which need to show icon.
+Return value is same as 'Boolean Format'
+var setting = {
+ view: {
+ showIcon: false
+ }
+};
+......
+ function showIconForTree(treeId, treeNode) {
+ return treeNode.level != 2;
+};
+var setting = {
+ view: {
+ showIcon: showIconForTree
+ }
+};
+......
+Set to show or hide line.
+Default: true
+true means: show line.
+false means: hide line.
+var setting = {
+ view: {
+ showLine: false
+ }
+};
+......
+Set to show or hide the 'title' attribute of node DOM.
+Please see the setting.data.key.title attribute
+Default: true
+true means: show the 'title' attribute of node DOM.
+false means: hide the 'title' attribute of node DOM.
+When setting.view.showTitle = true & setting.data.key.title = '', zTree will set the 'setting.data.key.name' attribute to the 'setting.data.key.title'.
+zTree unique identifier: treeId, easy for users to control.
+JSON data object of the node which need to show title.
+Return value is same as 'Boolean Format'
+var setting = {
+ view: {
+ showTitle: false
+ }
+};
+......
+ function showTitleForTree(treeId, treeNode) {
+ return treeNode.level != 2;
+};
+var setting = {
+ view: {
+ showTitle: showTitleForTree
+ }
+};
+......
+Set to allow or don't allow to select the text which in zTree's DOM.
+Default: false
+true means: Allow to select the txt which in zTree's DOM.
+false means: Don't allow to select the txt which in zTree's DOM.
+var setting = {
+ view: {
+ txtSelectedEnable: true
+ }
+};
+......
+Used to record the node's half-checked state about its all child nodes's checkbox or radio. It is valid when [setting.check.enable = true]
+zTree v3.x provides treeNode.getCheckStatus () method to get an accurate the half-checked status.
+Do not initialize or modify it, it is an internal argument.
+Default: true
+Rules:
+setting.check.checkType = "checkbox" | |||
treeNode.check_Child_State | Checked Status Description | ||
-1 | Has no child nodes or all child nodes's 'nocheck' attribute is true. | ||
0 | All of the child nodes has not been checked. | ||
1 | Some of the child nodes has been checked. | ||
2 | All of the child nodes has been checked. |
setting.check.checkType = "radio" | |||
treeNode.check_Child_State | Checked Status Description | ||
-1 | Has no child nodes or all child nodes's 'nocheck' attribute is true. | ||
0 | All of the child nodes has not been checked. | ||
2 | Some of the child nodes has been checked. |
Used to record the status which the checkbox or radio get focus. It is valid when [setting.check.enable = true]
+Do not initialize or modify it, it is an internal argument.
+Default: false
+true means: mouse move over the checkbox
+false means: mouse move out the checkbox
+The checked status about node's checkbox or radio. It is valid when [setting.check.enable = true & treeNode.nocheck = false]
+1. If change the 'checked' to other attribute, please set the 'setting.data.key.checked' attribute.
+2. If you create node data, and set 'checked' attribute to true, zTree will check this node's checkbox or radio when zTree is initialized.
+3. Use the treeObj.checkNode or checkAllNodes or updateNode method, you can check or uncheck the node. Please see the API about these methods.
+4. zTree support identification string 'true' & 'false'.
+Default: false
+true means: check the checkbox or radio when zTree is initialized.
+false means: uncheck the checkbox or radio when zTree is initialized.
+var nodes = [
+{ "id":1, "name":"test1", checked:true },
+{ "id":2, "name":"test2", checked:true }
+]
+ var treeObj = $.fn.zTree.getZTreeObj("tree");
+var checked = treeObj.getNodes()[0].checked;
+
+The checked status about node's checkbox or radio when zTree was initialized. It is valid when [setting.check.enable = true & treeNode.nocheck = false]
+1. Do not initialize it, it will be initialized when the node is initialized.
+2. If you need to achieve special features, you can use the zTreeObj.getChangeCheckedNodes method and modify the value of 'checkedOld' attribute.
+Default: the value of 'checked' attribute when zTree is initialized
+true means: the checkbox or radio is checked when zTree is initialized.
+false means: the checkbox or radio is not checked when zTree is initialized.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var checkedOld = treeObj.getNodes()[0].checkedOld;
+
+The data collections of node's child nodes.
+1. If change the 'children' to other attribute, please set the 'setting.data.key.children' attribute.
+2. If you set to use dynamic tree, when a node is expanded which 'isParent' attribute is true and which has no child nodes, zTree will use ajax to get its child nodes.
+Default: undefined
+Standard JSON Data object
+var nodes = [
+{ "id":1, "name":"test1",
+ children: [
+ { "id":3, "name":"test3"},
+ { "id":4, "name":"test4"},
+ { "id":5, "name":"test5"}
+ ]
+},
+{ "id":2, "name":"test2" }
+]
+ var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getNodes()[0].children;
+
+1. Set node's checkbox / radio to disabled. It is valid when [setting.check.enable = true]
+2. zTree support identification string 'true' & 'false'.
+3. Please don't change this attribute of the nodes which have been created. If you want to disable or undisable the nodes, please use 'setChkDisabled()' methods.
+4. When zTree initialize the nodes, if you need to the child nodes automatically inherit the 'chkDisabled' attribute, please see 'setting.check.chkDisabledInherit'.
+Default: false
+true means: this node's checkbox / radio is disabled.
+false means: this node's checkbox / radio is able.
+var nodes = [
+ { "id":1, "name":"test1", "checked":true, "chkDisabled":true},
+ { "id":2, "name":"test2", "chkDisabled":true},
+ { "id":3, "name":"test3"}
+]
+Simple click event operations. As same as : (onclick ="...") the code. If the operation is more complex, please use the onClick callback.
+Because IE is different to other browsers in operating the event of ‘onclick’ and ‘click’ coexistence, please do not use this parameter to control whether to allow the redirection operation (for example: treeNode.click = "return false;"). If there is similar requirements, please do not use the 'url' attribute to save the website address, but use the 'onClick' callback to control jumps.
+Default: undefined
+Standard javascript syntax, for example: alert ("test"); etc.
+var nodes = [
+ { "id":1, "name":"Google CN", "url":"http://g.cn", "click":"alert('test');"},
+ ......
+]
+Used to save other custom data of node, do not use the same attribute name with ztree used, the user can freely set.
+var node = { "id":1, "name":"test1", "ename":"test eName"};
+Used to save the node editing name status. It is valid when [setting.edit.enable = true]
+Do not initialize or modify it, it is an internal argument.
+Default: false
+true means: node is being edited.
+false means: node is not being edited.
+Get the node's half-checked status of checkbox or radio. It is valid when [setting.check.enable = true]
+Do not initialize or modify it, it is created by the zTree.
+{
+ checked: true, //As same as 'treeNode.checked'
+ half: true //Rule the table below
+}
+ 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 |
var treeObj = $.fn.zTree.getZTreeObj("tree");
+var halfCheck = treeObj.getNodes()[0].getCheckStatus();
+
+Get the treeNode's next sibling node.
+Do not initialize or modify it, it is created by the zTree.
+JSON data object of the treeNode's next sibling node
+If have not the next node, return null.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var sNodes = treeObj.getSelectedNodes();
+if (sNodes.length > 0) {
+ var node = sNodes[0].getNextNode();
+}
+
+Get the treeNode's parent node.
+Do not initialize or modify it, it is created by the zTree.
+JSON data object of treeNode's parent node.
+If treeNode is root, return null.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var sNodes = treeObj.getSelectedNodes();
+if (sNodes.length > 0) {
+ var node = sNodes[0].getParentNode();
+}
+
+Get the treeNode's previous sibling node.
+Do not initialize or modify it, it is created by the zTree.
+JSON data object of the treeNode's previous sibling node
+If have not the previous node, return null.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var sNodes = treeObj.getSelectedNodes();
+if (sNodes.length > 0) {
+ var node = sNodes[0].getPreNode();
+}
+
+Force node checkBox / radio to the half-checked status. It is valid when [setting.check.enable = true & treeNode.nocheck = false]
+1. If you force to the half-checked status, zTree will not automatically calculated the half-checked status about this node.
+2. Until you set treeNode.halfCheck to false or null, zTree will automatically calculated the half-checked status about this node.
+3. zTree support identification string 'true' & 'false'.
+Defaul: false
+true means: the checkbox or radio is half-checked when zTree is initialized.
+false means: the half-checked status will be automatically calculated
+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 }
+]
+URL path of node's custom icon.
+1. If you only set the 'icon' attribute to parent node, the parent node will only show one icon when it is expanded or collapsed.
+2. If you need to show two icons when it is expanded or collapsed, please set the 'treeNode.iconOpen' and 'treeNode.iconClose' attribute.
+3. If you need to use css to set the custom icon, please set the 'treeNode.iconSkin' attribute.
+Default: undefined
+Icon image url can be a relative path or absolute path.
+If use a relative path, please note the relationship between icon image and the page, ensure the correct image path.
+var nodes = [
+ //Only show one icon when it is expanded or collapsed.
+ { name:"Parent Node 1", icon:"/img/parent.gif"},
+
+ //Show two icons when it is expanded or collapsed.
+ { name:"Parent Node 2", iconOpen:"/img/open.gif", iconClose:"/img/close.gif"},
+
+ //the custom icon for leaf node
+ { name:"Leaf Node", icon:"/img/leaf.gif"}
+]
+URL path of parent node's custom icon when it is collapsed.
+1. Only parent node support this attribute.
+2. This attribute must be used simultaneously with 'iconOpen' attribute.
+3. If you need to use css to set the custom icon, please set the 'treeNode.iconSkin' attribute.
+Default: undefined
+Icon image url can be a relative path or absolute path.
+If use a relative path, please note the relationship between icon image and the page, ensure the correct image path.
+var nodes = [
+ //Only show one icon when it is expanded or collapsed.
+ { name:"Parent Node 1", icon:"/img/parent.gif"},
+
+ //Show two icons when it is expanded or collapsed.
+ { name:"Parent Node 2", iconOpen:"/img/open.gif", iconClose:"/img/close.gif"},
+
+ //the custom icon for leaf node
+ { name:"Leaf Node", icon:"/img/leaf.gif"}
+]
+URL path of parent node's custom icon when it is expanded.
+1. Only parent node support this attribute.
+2. This attribute must be used simultaneously with 'iconClose' attribute.
+3. If you need to use css to set the custom icon, please set the 'treeNode.iconSkin' attribute.
+Default: undefined
+Icon image url can be a relative path or absolute path.
+If use a relative path, please note the relationship between icon image and the page, ensure the correct image path.
+var nodes = [
+ //Only show one icon when it is expanded or collapsed.
+ { name:"Parent Node 1", icon:"/img/parent.gif"},
+
+ //Show two icons when it is expanded or collapsed.
+ { name:"Parent Node 2", iconOpen:"/img/open.gif", iconClose:"/img/close.gif"},
+
+ //the custom icon for leaf node
+ { name:"Leaf Node", icon:"/img/leaf.gif"}
+]
+The className of node's custom icon.
+1. You need to modify the css, add the definition of className.
+2. The css is simple, convenient, and support the parent node to switch icons when it is expanded or collapsed.
+3. Recommend the use of CSS Sprites, can reduce repeating load the image, to avoid image flicker.
+4. The 'iconSkin' support IE6 in zTree v3.x.
+5. If you need to use image's URL to set the custom icon, please set the 'treeNode.icon' or 'treeNode.iconOpen' or 'treeNode.iconClose' attribute.
+Default: undefined
+The string about custom icon's className.
+css example:
+.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{...}
+
+node's data example:
+var nodes = [
+ //Only show one icon when it is expanded or collapsed.
+ { name:"Parent Node 1", iconSkin:"diy01"},
+
+ //Show two icons when it is expanded or collapsed.
+ { name:"Parent Node 2", iconSkin:"diy02"},
+
+ //the custom icon for leaf node
+ { name:"Leaf Node", iconSkin:"diy03"}
+]
+Judge whether the node's child nodes being loaded asynchronously.
+Do not initialize or modify it, it is created by the zTree.
+true means: the node's child nodes is being loaded asynchronously
+false means: the node's child nodes is not being loaded asynchronously
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var sNodes = treeObj.getSelectedNodes();
+if (sNodes.length > 0) {
+ var isAjaxing = sNodes[0].isAjaxing;
+}
+
+Judge whether the node is the sibling nodes's first node.
+If you use the 'exhide' pack, so this attribute will only support the node which be shown.
+Do not initialize or modify it, it is created by the zTree.
+true means: the node is first node.
+false means: the node is not first node.
+If the node has been hidden, isFirstNode = false
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var sNodes = treeObj.getSelectedNodes();
+if (sNodes.length > 0) {
+ var isFirstNode = sNodes[0].isFirstNode;
+}
+
+Judge whether the node has been hidden.
+1. When initialize zTree, the nodes which be set 'isHidden = true' will be hidden.
+ +2. Please don't change this attribute of the nodes which have been created. If you want to hide or show nodes, please use 'hideNode() / hideNodes() / showNode() / showNodes()' methods.
+true means: this node is hidden.
+false means: this node is shown.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var sNodes = treeObj.getNodes();
+if (sNodes.length > 0) {
+ var isHidden = sNodes[0].isHidden;
+}
+
+Used to record the hover status of node's DOM. For 'setting.view.addHoverDom / removeHoverDom'.
+Do not initialize or modify it, it is an internal argument.
+Default: false
+true means: the node's DOM is in hover.
+false means: the node's DOM is not in hover.
+Judge whether the node is the sibling nodes's last node.
+If you use the 'exhide' pack, so this attribute will only support the node which be shown.
+Do not initialize or modify it, it is created by the zTree.
+true means: the node is last node.
+false means: the node is not last node.
+If the node has been hidden, isLastNode = false
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var sNodes = treeObj.getSelectedNodes();
+if (sNodes.length > 0) {
+ var isLastNode = sNodes[0].isLastNode;
+}
+
+Judge whether the node is the parent node.
+1. When zTree initialize the node data, the node which has children is set to true, otherwise false.
+2. When zTree initialize the node data, if set treeNode.isParent to true, the node will be set to be parent node.
+3. In order to solve the problem of someone make json data, supporting "false", "true" format of the data string.
+true means: the node is parent node.
+false means: the node is not parent node.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var sNodes = treeObj.getSelectedNodes();
+if (sNodes.length > 0) {
+ var isParent = sNodes[0].isParent;
+}
+
+The level of node
+Do not initialize or modify it, it is created by the zTree.
+The root node's level = 0, and next level = 1, ...
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var sNodes = treeObj.getSelectedNodes();
+if (sNodes.length > 0) {
+ var level = sNodes[0].level;
+}
+
+The node's name
+1. If you want to change 'name' attribute, please modify the 'setting.data.key.name' attribute.
+Default: undenfined
+String object. The HTML special characters are escaped
+var nodes = [
+ { "id":1, "name":"test1"},
+ { "id":2, "name":"test2"},
+ { "id":3, "name":"test3"}
+]
+1. Set node to hide the checkbox or radio. It is valid when [setting.check.enable = true]
+2. zTree support identification string 'true' & 'false'.
+Default: false
+true means: the node hide the checkbox or radio, and don't affect the checked association, and don't affect its parent node's half-checked status.
+false means: the node show the checkbox or radio.
+var nodes = [
+ { "id":1, "name":"test1", "nocheck":true},
+ { "id":2, "name":"test2"},
+ { "id":3, "name":"test3"}
+]
+Used to record the parent node's expand status.
+1. When zTree initialize the node data, if you set treeNode.open = true, zTree will default expand this parent node.
+2. Leaf node's 'open' attribute is false.
+3. In order to solve the problem of someone make json data, supporting "false", "true" format of the data string.
+4. When setting.async.enable = false, the parent node will be expanded which have no child nodes and its attribute 'open' is true. (v3.5.15+)
+Default: false
+true means: the parent node is expanded.
+false means: the parent node is collapsed.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var sNodes = treeObj.getSelectedNodes();
+if (sNodes.length > 0) {
+ var isOpen = sNodes[0].open;
+}
+
+The unique identifier of node's parent node.
+1. zTree v3.x using 'parentTId' replaced the original 'parentNode' attribute, and increased getParentNode () method, in order to avoid the original 'parentNode' cause the clone () method infinite loop.
+2. Do not initialize or modify it, it is created by the zTree.
+String object of node's parent node's tId. please see API about 'treeNode.tId'
+If treeNode is root node, parentTId is null.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var sNodes = treeObj.getSelectedNodes();
+if (sNodes.length > 0) {
+ var parentTId = sNodes[0].parentTId;
+}
+
+The unique identifier of node.
+Do not initialize or modify it, it is created by the zTree.
+tId rules: setting.treeId + "_" + zTree counter
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var sNodes = treeObj.getSelectedNodes();
+if (sNodes.length > 0) {
+ var tId = sNodes[0].tId;
+}
+
+Used to set the target where the node is clicked to open url. It is valid when [treeNode.url exists]
+Default: undefined
+As same as <a> tag's 'target' attribute. e.g. '_blank', '_self' or other window name.
+if this attribute is omitted, zTree default set it to '_blank'
+var nodes = [
+ { "id":1, "name":"test1", "url":"http://myTest.com", "target":"_blank"},
+ ......
+]
+The URL of node link
+1. In edit mode (setting.edit.enable = true) , this feature fails. If you must use a similar feature, please use the 'onClick' callback for their own control.
+2. If you use the 'onClick' callback function to control opening URL , then set the URL in the other custom attribute, do not use the 'url' attribute.
+Default: undefined
+As same as <a> tag's 'href' attribute.
+var nodes = [
+ { "id":1, "name":"Google CN", "url":"http://g.cn"},
+ ......
+]
+Judge whether the parent node's child nodes will be loaded asynchronously when the parent node is expanded.
+Do not initialize or modify it, it is created by the zTree.
+Default:false (the parent node which have no child nodes); true (the parent node which have child nodes or the leaf node)
+true means: the node's child nodes will not be loaded asynchronously when the parent node is expanded.
+false means: the node's child nodes will be loaded asynchronously when the parent node is expanded.
+This attribute will not effect to 'reAsyncChildNodes()' method
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var sNodes = treeObj.getSelectedNodes();
+if (sNodes.length > 0) {
+ var zAsync = sNodes[0].zAsync;
+}
+
+Add nodes
+In order to avoid duplication data resulting from repeated initialization, zTree v3.x will automatically clone node data when zTree initialized or add nodes. If you need to get the data objects within the zTree, please get the return value of this method.
+Please use zTree object to executing the method.
+The additional node's parent node. If additional node is root node, please the parentNode is null.
+Please ensure this node data object is a data object within zTree.
+The node data's JSON object collection which need to increase, refer to 'treeNode treeNode data details'
+1. zTree v3.x support to add single node, that is, if you only add a node, you can don't use the array.
+2. If you use simple data model, please refer to the attributes within the 'setting.data.simpleData'.
+Set whether to automatically expand the parent node, after add nodes.
+isSilent = true means: don't auto expand the parent node. Otherwise auto expand.
+return the new nodes in zTree
+If the newNodes is single data object, the return value is a array with length is 1.
+Note: the node data JSON object in the return value is not equal to the JSON object in the 'newNodes'.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var newNode = {name:"newNode1"};
+newNode = treeObj.addNodes(null, newNode);
+
+ var treeObj = $.fn.zTree.getZTreeObj("tree");
+var newNodes = [{name:"newNode1"}, {name:"newNode2"}, {name:"newNode3"}];
+newNodes = treeObj.addNodes(null, newNodes);
+
+Cancel the edit name status. Can restore the original name, and can also force assigned to a new name.
+Please use zTree object to executing the method.
+Re given a new name
+If this parameter is omitted, then restore the original name.
+no return value
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+treeObj.cancelEditName();
+
+ var treeObj = $.fn.zTree.getZTreeObj("tree");
+treeObj.cancelEditName("test_new_name");
+
+To cancel the selected node.
+zTree v3.x support to select multiple nodes, so you can cancel a single selected node, and you can cancel all of the selected nodes too.
+Please use zTree object to executing the method.
+JSON data object of the node which need to cancel selected.
+Please ensure that this data object is an internal node data object in zTree.
+If you omit this parameter, zTree will cancel all of the selected nodes.
+no return value
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+treeObj.cancelSelectedNode();
+
+ var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getSelectedNode();
+if (nodes.length>0) {
+ treeObj.cancelSelectedNode(nodes[0]);
+}
+
+Check or unCheck all nodes which have been initialized. It is valid when [setting.check.enable = true & setting.check.chkStyle = "checkbox"]
+This method does not trigger 'beforeCheck' or 'onCheck' callback function.
+Please use zTree object to executing the method.
+checked = true means: check all nodes.
+checked = false means: uncheck all nodes.
+Don't affect the node which 'nochecked' attribute is true.
+Don't affect the node is not loaded.
+no return value
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+treeObj.checkAllNodes(true);
+
+Check or unCheck a single node. It is valid when [setting.check.enable = true]
+Use checkNode() method of zTree v3.x can trigger 'beforeCheck' or 'onCheck' callback function. for reduce redundant code.
+Please use zTree object to executing the method.
+JSON data object of the node which need to be checked or unchecked.
+Please ensure that this data object is an internal node data object in zTree.
+checked = true means: check node.
+checked = false means: uncheck node.
+If this parameter is omitted, then toggle check or uncheck depend this node's expanded state.
+Don't affect the node which 'nochecked' attribute is true.
+checkTypeFlag = true means: According to 'setting.check.chkboxType' attribute automatically check or uncheck the parent and child nodes.
+checkTypeFlag = false means: only check or uncheck this node, don't affect its parent and child nodes.
+When checkTypeFlag = false and treeNode.checked = checked, will not trigger callback function.
+Don't affect the parent and child nodes which 'nochecked' attribute is true.
+callbackFlag = true means: call this method, will trigger 'beforeCheck' & 'onCheck' callback.
+callbackFlag = false means: call this method, will not trigger callback.
+If this parameter is omitted, it is same as 'callbackFlag = false'
+no return value
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getSelectedNodes();
+for (var i=0, l=nodes.length; i < l; i++) {
+ treeObj.checkNode(nodes[i], true, true);
+}
+
+Copy the node
+When copy nodes, zTree v3.x will clone nodes. If you need to get the data object in zTree, please get the return value of this method.
+Please use zTree object to executing the method.
+JSON data object of the node which will be target.
+If copy the node to root node, please set the 'targetNode' to null.
+Please ensure that this data object is an internal node data object in zTree.
+JSON data object of the node which will be copied.
+Please ensure that this data object is an internal node data object in zTree.
+Copied to the target node's relative position.
+"inner" means: to be taregetNode's child node.
+"prev" means: to be taregetNode's previous sibling node.
+"next" means: to be taregetNode's next sibling node.
+After copy the node, whether to automatically expand its parent node.
+isSilent = true means: don't expand its parent node.
+isSilent = false or omit this parameter means: expand its parent node.
+return the new node in zTree
+Note: the node data JSON object in the return value is not equal to the treeNode.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getNodes();
+treeObj.copyNode(nodes[0], nodes[1], "inner");
+
+ var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getNodes();
+treeObj.copyNode(nodes[0], nodes[1], "before");
+
+From zTree v3.4, zTree support the method for destruction.
+1. This method can destroy the zTreeObj's zTree.
+2. If you want to destory all of the zTrees, you can use the '$.fn.zTree.destroy()' method.
+3. If you want to use the tree which has been destroyed, you must use the 'init()' method at first.
+no return value
+var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
+zTreeObj.destroy();
+
+Start editing the node's name.
+1. If need to cancel editing the node's name, please use cancelEditName(newName) method.
+2. This method can be used to set the editing node‘s input box to get focus.
+3. Please use zTree object to executing the method.
+JSON data object of the node which will be editing name
+Please ensure that this data object is an internal node data object in zTree.
+no return value
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getNodes();
+treeObj.editName(nodes[0]);
+
+Expand or collapse all nodes.
+This method does not trigger 'beforeExpand / onExpand' or 'beforeCollapse / onCollapse' callback function.
+Please use zTree object to executing the method.
+expandFlag = true means: expand all nodes.
+expandFlag = false means: collapse all nodes.
+return the result of expand or collapse.
+true means: expand all nodes
+false means: collapse all nodes
+null means: have no parent node to expand or collapse.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+treeObj.expandAll(true);
+
+Expand or collapse single node.
+Use expandNode() method of zTree v3.x can trigger 'beforeExpand / onExpand' or 'beforeCollapse / onCollapse' callback function. for reduce redundant code.
+Please use zTree object to executing the method.
+JSON data object of the node which will be expanded or collapsed
+Please ensure that this data object is an internal node data object in zTree.
+expandFlag = true means: expand the node.
+expandFlag = false means: collapse the node.
+If this parameter is omitted, then toggle expand or collapse depend this node's expanded state.
+sonSign = true means: expand or collapse all of the child nodes depend the 'expandFlag' parameter.
+sonSign = false means: only expand or collapse this node.
+When sonSign = false and treeNode.open = expandFlag, will not trigger the callback.
+If this parameter is omitted, it is same as 'sonSign = false'.
+focus = true means: after expand or collapse, set the focus of this node for view.
+focus = false means: after expand or coolapse, don't set the focus of this node.
+If this parameter is omitted, it is same as 'focus = true'.
+callbackFlag = true means: call this method, will trigger 'beforeExpand / onExpand' or 'beforeCollapse / onCollapse' callback.
+callbackFlag = false means: call this method, will not trigger callback.
+If this parameter is omitted, it is same as 'callbackFlag = false'
+return the result of expand or collapse.
+true means: expand node
+false means: collapse node
+null means: the node is not parent node.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getSelectedNodes();
+if (nodes.length>0) {
+ treeObj.expandNode(nodes[0], true, true, true);
+}
+
+Get the collection of nodes which be changed checked status. (Compared with the original data checkedOld) It is valid when [setting.check.enable = true]
+Please use zTree object to executing the method.
+return the collection of nodes which be changed checked status (Array)
+If you need to get the collection of nodes which changed the checked status, when nodes be checked or unchecked, so please set treeNode.checkedOld = treeNode.checked ( for all of the be changed checked status nodes ).
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getChangeCheckedNodes();
+
+Get the collection of nodes which be checked or unchecked. It is valid when [setting.check.enable = true]
+Please use zTree object to executing the method.
+checked = true means: get the collection of nodes which be checked
+checked = false means: get the collection of nodes which be unchecked
+If this parameter is omitted, it is same as 'checked = true'
+Don't get the nodes which 'nochecked' attribute is true.
+return the collection of nodes which be checked or unchecked. (Array)
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getCheckedNodes(true);
+
+According to the node data attribute, search the node which exactly matches, and get the JSON object of node.
+Please use zTree object to executing the method.
+The name of attribute which need to exactly match
+The value which need to exactly match, can be any type, please ensure its type consistent with the attribute values.
+The search range, you can search node from a parent node's child nodes.
+If this parameter is omitted, zTree will search node from all nodes.
+JSON data object of the node which be searched.
+1. If search none node, return null.
+2. If there are many nodes can be searched, return the first node.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var node = treeObj.getNodeByParam("id", 1, null);
+
+According the unique identifier tId of zTree, quick get the node's JSON data object.
+Get the node from the cache, don't need to search from all nodes.
+Please use zTree object to executing the method.
+The unique identifier of node.
+JSON data object of the node which be searched.
+If no result, return null.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var node = treeObj.getNodeByTId("tree_10");
+
+Get the node's index in the same level nodes. (start from 0)
+Please use zTree object to executing the method.
+JSON data object of the node which need to get index.
+Please ensure that this data object is an internal node data object in zTree.
+return the index. (start from 0)
+If there is no this node, return -1.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getSelectedNodes();
+if (nodes.length>0) {
+ var index = treeObj.getNodeIndex(nodes[0]);
+}
+
+Get all of the nodes in zTree
+Please use zTree object to executing the method.
+return all of the nodes
+1. This array is a collection of the root nodes (the default child nodes are in the 'children' attributes);
+2. Traverse all the nodes need to use recursion, or the use of transformToArray() method make the nodes to be a simple array.
+3. For the asynchronous loading mode, can't get the nodes which are yet loaded.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getNodes();
+
+Search the single node's data or collection of nodes's data by custom rules.
+Can be customized complex search rules.
+Please use zTree object to executing the method.
+Custom search function. e.g. function filter(node) {...}
+filter's parameter: node (node's data -- JSON)
+filter's return: boolean (true means: match the rules; false means: don't match the rules)
+isSingle = true means: search only one node
+isSingle = false means: search the array of the nodes
+If this parameter is omitted, as same as false
+The search range, you can search node from a parent node's child nodes.
+If this parameter is omitted, zTree will search node from all nodes.
+Custom data object by user, used to calculate in the filter function.
+If isSingle = true, will return the first node's data (JSON) what be matched. If no match, return null.
+If isSingle = false, will return the array of all nodes's data what be matched. if no match, return [ ].
+function filter(node) {
+ return (node.level == 2 && node.name.indexOf("test")>-1);
+}
+......
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var node = treeObj.getNodesByFilter(filter, true); // search only one node
+var nodes = treeObj.getNodesByFilter(filter); // search the array of the nodes
+
+According to the node data attribute, search the nodes which exactly matches, and get the JSON objects collection of nodes.
+Please use zTree object to executing the method.
+The name of attribute which need to exactly match
+The value which need to exactly match, can be any type, please ensure its type consistent with the attribute values.
+The search range, you can search node from a parent node's child nodes.
+If this parameter is omitted, zTree will search node from all nodes.
+The JSON data objects collection of the nodes which be searched.
+If search none node, return [ ].
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getNodesByParam("name", "test", null);
+
+According to the node data attribute, search the nodes which fuzzy matches, and get the JSON objects collection of nodes.
+Please use zTree object to executing the method.
+The name of attribute which need to fuzzy match
+The value which need to fuzzy match.
+The type of value can only be String
+The search range, you can search node from a parent node's child nodes.
+If this parameter is omitted, zTree will search node from all nodes.
+The JSON data objects collection of the nodes which be searched.
+If search none node, return [ ].
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getNodesByParamFuzzy("name", "test", null);
+
+Get the JSON data objects collection of the selected nodes in zTree.
+Please use zTree object to executing the method.
+The JSON data objects collection of the selected nodes.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getSelectedNodes();
+
+To hide any node.
+1. This feature can't support the 'exedit' feature, so please don't use this feature in edit mode.
+2. If you hide or show the nodes, it will effect the 'isFirstNode' and 'isLastNode' attribute.
+3. Please use zTree object to executing the method.
+JSON data object of the node which will be hidden
+Please ensure that this data object is an internal node data object in zTree.
+no return value
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getNodes();
+treeObj.hideNode(nodes[0]);
+
+To hide a group of nodes.
+1. This feature can't support the 'exedit' feature, so please don't use this feature in edit mode.
+2. If you hide or show the nodes, it will effect the 'isFirstNode' and 'isLastNode' attribute.
+3. Please use zTree object to executing the method.
+the array of the nodes which will be hidden
+Please ensure that this data object is an internal node data object in zTree.
+no return value
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getNodes();
+treeObj.hideNodes(nodes[0].children);
+
+Move the node
+Please use zTree object to executing the method.
+JSON data object of the node which will be target.
+If move the node to root node, please set the 'targetNode' to null.
+Please ensure that this data object is an internal node data object in zTree.
+JSON data object of the node which will be moved.
+Please ensure that this data object is an internal node data object in zTree.
+Moved to the target node's relative position.
+"inner" means: to be taregetNode's child node.
+"prev" means: to be taregetNode's previous sibling node.
+"next" means: to be taregetNode's next sibling node.
+After move the node, whether to automatically expand its parent node.
+isSilent = true means: don't expand its parent node.
+isSilent = false or omit this parameter means: expand its parent node.
+return the node which be moved, it is same as the 'treeNode' parameter.
+Return null means: move node has failed. The cause:
+ 1. the targetNode is the treeNode's parent node, and moveType = "inner"
+ 2. the targetNode is the treeNode's child node.
+
var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getNodes();
+treeObj.moveNode(nodes[0], nodes[1], "inner");
+
+ var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getNodes();
+treeObj.moveNode(nodes[0], nodes[1], "prev");
+
+Forced asynchronous loading child nodes of parent node. It is valid when [setting.async.enable = true]
+You can use this method to reload child nodes.
+Please use zTree object to executing the method.
+The parent node which will asynchronous loading child nodes.
+1. If parentNode = null, it is same as reload root nodes.
+2. If parentNode.isParent = false, don't load nodes.
+3. Please ensure that this data object is an internal node data object in zTree.
+reloadType = "refresh" means: reload child nodes.
+reloadType != "refresh" means: append to load child nodes.
+Set whether to automatically expand the parent node, after load nodes.
+isSilent = true means: don't auto expand the parent node. Otherwise auto expand.
+no return value
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+treeObj.reAsyncChildNodes(null, "refresh");
+
+ var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getSelectedNodes();
+if (nodes.length>0) {
+ treeObj.reAsyncChildNodes(nodes[0], "refresh");
+}
+
+Refresh zTree
+If you have no special need, try not to use this method. If you refresh single node, please use updateNode() method. If you refresh child nodes in dynamic mode, please use the reAsyncChildNodes() method.
+Please use zTree object to executing the method.
+no return value
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+treeObj.refresh();
+
+Remove a parent node's child nodes
+1. After remove child nodes, the parent node will become a leaf node. Such as the need to maintain the parent node is still a parent node, set 'setting.data.keep.parent' attribute.
+2. Do not use this method to empty the root. If you need to empty the root, you can initialization zTree, and set the initial nodes is null.
+3. This method does not trigger any callback function.
+Please use zTree object to executing the method.
+The parent node which need to clear its child nodes.
+Please ensure that this data object is an internal node data object in zTree.
+Return the parent node's child nodes which have been removed. If has no child nodes, return null.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getSelectedNodes();
+if (nodes && nodes.length>0) {
+ treeObj.removeChildNodes(nodes[0]);
+}
+
+Remove a node
+Use removeNode() method of zTree v3.x can trigger 'beforeRemove / onRemove' callback function. for reduce redundant code.
+Please use zTree object to executing the method.
+JSON data object of the node which will be removed.
+Please ensure that this data object is an internal node data object in zTree.
+callbackFlag = true means: call this method, will trigger 'beforeRemove' & 'onRemove' callback.
+callbackFlag = false means: call this method, will not trigger callback.
+If this parameter is omitted, it is same as 'callbackFlag = false'
+no return value
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getSelectedNodes();
+for (var i=0, l=nodes.length; i < l; i++) {
+ treeObj.removeNode(nodes[i]);
+}
+
+Select a node
+zTree v3.x supports select multiple nodes.
+Please use zTree object to executing the method.
+JSON data object of the node which will be selected.
+Please ensure that this data object is an internal node data object in zTree.
+addFlag = true means: append to select node, don't affect the previously selected node, can select multiple nodes.
+addFlag = false means: select single node, prior the selected node is deselected.
+If setting.view.selectedMulti = false, this para, this parameter is not valid, always select single node
+no return value
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getNodes();
+if (nodes.length>0) {
+ treeObj.selectNode(nodes[0]);
+}
+
+Set the node's checkbox or radio is disabled or remove disabled. It is valid when [setting.check.enable = true]
+1. After the node's checkbox / radio is disabled, it can not be checked or unchecked, but it can affect the half-checked status of the parent node.
+2. Please do not directly modify the 'chkDisabled' attribute of the loaded node.
+3. Please use zTree object to executing the method.
+JSON data object of the node which need to be checked or unchecked.
+Please ensure that this data object is an internal node data object in zTree.
+disabled = true means: the node's checkbox / radio is disabled.
+disabled = false means: the node's checkbox / radio is removed disabled.
+If this parameter is omitted, it is same as disabled = false
+Don't affect the node which 'nochecked' attribute is true.
+inheritParent = true means: all parent nodes's disabled status will be same as this node.
+inheritParent = false means: all parent nodes's disabled status will be not affected.
+If this parameter is omitted, it is same as 'inheritParent = false'
+inheritChildren = true means: all child nodes's disabled status will be same as this node.
+inheritChildren = false means: all child nodes's disabled status will be not affected.
+If this parameter is omitted, it is same as 'inheritChildren = false'
+no return value
+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);
+}
+
+Edit mode and normal mode switch.
+To use edit mode, please set the attributes in 'setting.edit'
+Please use zTree object to executing the method.
+true means: set zTree to edit mode.
+false means: set zTree to normal mode.
+no return value
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+treeObj.setEditable(true);
+
+The configuration data of zTree, refer to "setting details"
+zTree v3.x to cancel the original operation setting method, so users can modify.
+Note: Modify the parameters which affect zTree initialization will not work, please first understand the different attributes.
+To hide any node which be hidden.
+1. This feature can't support the 'exedit' feature, so please don't use this feature in edit mode.
+2. If you hide or show the nodes, it will effect the 'isFirstNode' and 'isLastNode' attribute.
+3. Please use zTree object to executing the method.
+JSON data object of the node which will be shown
+Please ensure that this data object is an internal node data object in zTree.
+no return value
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var node = treeObj.getNodeByParam("isHidden", true);
+if (node) {
+ treeObj.showNode(node);
+}
+
+To show a group of nodes which be hidden.
+1. This feature can't support the 'exedit' feature, so please don't use this feature in edit mode.
+2. If you hide or show the nodes, it will effect the 'isFirstNode' and 'isLastNode' attribute.
+3. Please use zTree object to executing the method.
+the array of the nodes which will be shown
+Please ensure that this data object is an internal node data object in zTree.
+no return value
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getNodesByParam("isHidden", true);
+treeObj.showNodes(nodes);
+
+Transform the zTree nodes data into simple array. (To avoid the user to write code to traverse all nodes)
+Please use zTree object to executing the method.
+JSON data object of the node which need to be transformed.
+or JSON data objects collection of the nodes which need to be transformed.
+The JSON data objects array of the nodes which be transformed.
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.transformToArray(treeObj.getNodes());
+
+Transform the simple array into zTree nodes data.
+If you use this method, you must set 'setting.data.simpleData.idKey' and 'setting.data.simpleData.pIdKey' attribute, and let the data are consistent with parent-child relationship.
+Please use zTree object to executing the method.
+JSON data object of the node which need to be transformed.
+or JSON data objects array of the nodes which need to be transformed.
+Standard data which zTree use. The child nodes are stored in the parent node's 'children' attribute.
+If simpleNodes is a single JSON, so the return array's length is 1.
+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);
+
+Update node data. Primarily used to update the node's DOM.
+1. Can update the attributes for display (e.g. 'name', 'target', 'url', 'icon', 'iconSkin', 'checked', 'nocheck'), do not update the other attributes. For example: If you need to expand the node, please use expandNode() method, do not modify the 'open' attribute.
+2. Use updateNode() method of zTree can't trigger 'beforeCheck' or 'onCheck' callback function.
+Please use zTree object to executing the method.
+JSON data object of the node which need to update.
+Please ensure that this data object is an internal node data object in zTree.
+checkTypeFlag = true means: According to 'setting.check.chkboxType' attribute automatically check or uncheck the parent and child nodes.
+checkTypeFlag = false means: only check or uncheck this node, don't affect its parent and child nodes.
+This parameter is valid when 'setting.check.enable = true' and 'setting.check.chkStyle = "checkbox"'
+Don't affect the parent and child nodes which 'nochecked' attribute is true.
+no return value
+var treeObj = $.fn.zTree.getZTreeObj("tree");
+var nodes = treeObj.getNodes();
+if (nodes.length>0) {
+ nodes[0].name = "test";
+ treeObj.updateNode(nodes[0]);
+}
+
+