Powerful and Multi-Functional jQuery Folder Tree Plugin - zTree

Powerful and Multi-Functional jQuery Folder Tree Plugin  - zTree
File Size: 906 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

zTree is a powerful and fast jQuery 'Tree' Plugin for creating Multi-functional Folder Trees with excellent performance and flexible configurations.

You might also like:

Features:

  • JSON data support
  • Ajax loading support
  • Customizable skins and icons
  • Multiple instances of zTree in one page support
  • Compatible with all the major browsers

Basic Usage:

1. Include jQuery library and zTree.js in the head section of your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ztree.core-3.5.js"></script>

2. Markup

<ul id="treeDemo" class="ztree">
</ul>

3. Include jQuery zTree CSS

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

4. The javascript

<SCRIPT type="text/javascript">
<!--
var setting = {
data: {
simpleData: {
enable: true
}
}
};

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

$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>

5. Full plugin options and callbacks.

treeId: "",
treeObj: null,
view: {
  addDiyDom: null,
  autoCancelSelected: true,
  dblClickExpand: true,
  expandSpeed: "fast",
  fontCss: {},
  nameIsHTML: false,
  selectedMulti: true,
  showIcon: true,
  showLine: true,
  showTitle: true,
  txtSelectedEnable: false
},
data: {
  key: {
    children: "children",
    name: "name",
    title: "",
    url: "url",
    icon: "icon"
  },
  simpleData: {
    enable: false,
    idKey: "id",
    pIdKey: "pId",
    rootPId: null
  },
  keep: {
    parent: false,
    leaf: false
  }
},
async: {
  enable: false,
  contentType: "application/x-www-form-urlencoded",
  type: "post",
  dataType: "text",
  url: "",
  autoParam: [],
  otherParam: [],
  dataFilter: null
},
callback: {
  beforeAsync:null,
  beforeClick:null,
  beforeDblClick:null,
  beforeRightClick:null,
  beforeMouseDown:null,
  beforeMouseUp:null,
  beforeExpand:null,
  beforeCollapse:null,
  beforeRemove:null,

  onAsyncError:null,
  onAsyncSuccess:null,
  onNodeCreated:null,
  onClick:null,
  onDblClick:null,
  onRightClick:null,
  onMouseDown:null,
  onMouseUp:null,
  onExpand:null,
  onCollapse:null,
  onRemove:null
}

Change Logs:

2017-06-23

  • modify: body.css("cursor", "auto"); to body.css("cursor", "")

2017-06-19

  • add function reAsyncChildNodesPromise(parentNode, reloadType, isSilent), to support ES6 Promise

2017-01-20

  • fixed issue: scrollIntoViewIfNeeded will throw error , because IE8 has not HTMLElement

2016-12-27

  • fixed issue: If you use 'addNodes()' method to add node, it will set the last node's isLastNode error when you set the 'index' parameter.

2016-11-03

  • Use scrollIntoViewIfNeeded() method replace scrollIntoView(). Compatible with browsers(like ie, chrome, firefox, safari...)

2016-09-27

  • support contentType = ‘application/json’ with ajax

2016-06-06

  • fixed bug: If your data's id = 'length', transformTozTreeFormat() method will throw an exception

2016-04-08

  • fixed issue for IE8

2016-04-06

  • fixed issue: can't support 'use strict'

2016-04-01

  • add 'isSilent' param to selectNode() method

2016-03-01

  • Fixed CSS styles
  • fixed issue: if you add padding to <a>, the setting.edit.drag.inner will be invalid

2016-01-20

  • fixbug: checkAllNodes() method can't check the child nodes of the special parent node, which be set chkDisabled is true.

2015-11-25

  • Add className to <span> tag which show the node's name

2015-10-26

  • fixed issue: when you drag&drop or copy node, zTree is error.

2015-10-22

  • fixed issue: can't unbind 'selectstart' event

2015-08-26

  • Remove the 'event' parameter in 'onSelected/onUnSelected' callback. And when you remove the node which be selected, zTree will trigger the 'onUnSelected' callback.

2015-08-13

  • Allow nodes to specify their own icon using an 'icon' property of the 'setting.data.key'
  • Added onSelected / onUnSelected callbacks

2015-06-18

  • add demo: 'awesome style'.

2015-05-25

  • add callback functions: onSelected / onUnSelected

2015-03-29

2015-02-15

  • fixed bug: Can't use updateNode() function in 'onRename' callback.

v3.5.17 (2014-11-17)

  • fixed: ajax cache

v3.5.17 (2014-11-17)

  • update

v3.5.17beta2 (2014-05-08)

  • fix issue: Performance problem in zTree init with 1k nodes when you add exhide.js

v3.5.17beta1 (2014-03-28)

  • fixed Issue: 'excheck' package can't support jqueryUI 1.9

v3.5.16 (2013-12-13)

  • fixed issue: if don't use 'exedit' package, the removeNode() method will can't trigger the 'beforeRemove' and 'onRemove' callback.

v3.5.15 (2013-10-19)

  • bugs fixed

This awesome jQuery plugin is developed by zTree. For more Advanced Usages, please check the demo page or visit the official website.