Press "Enter" to skip to content

Hierarchical jQuery Folder Tree Structure Plugin In HTML CSS | zTree

zTree is a multifunctional “plug-in tree” based on jQuery. The main advantages of zTree include excellent performance, flexible configuration, and a combination of multiple functions.

zTree is a free tree plug-in that uses the MIT license.

hierarchical tree structure in html css, hierarchical tree structure in html bs, jquery file tree demo, jquery dynamic treeview example, javascript hierarchy tree visualization

Key Features:

  • JSON data support
  • Ajax & Async Download Support
  • Lazy data loading for better performance
  • Customizable skins and icons
  • Allows you to edit, show, hide and drag nodes
  • Multiple instances of zTree in one-page support
  • Compatible with all major browsers

How to make use of it:

1. Embed the jQuery library and zTree.js plug-in on the webpage.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Core JavaScript -->
<script src="/path/to/js/jquery.ztree.core.min.js"></script>
<!-- Checkbox Plugin -->
<script src="/path/to/js/jquery.ztree.excheck.min.js"></script>
<!-- Editable Plugin -->
<script src="/path/to/js/jquery.ztree.exedit.min.js"></script>
<!-- Show/Hide Plugin -->
<script src="/path/to/js/jquery.ztree.exhide.min.js"></script>

<!-- OR ALL IN ONE -->
<script src="/path/to/js/jquery.ztree.all.min.js"></script>

2. Create an empty HTML list of the tree.

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

3. Include the style sheet for the basic tree design.

<!-- Default Theme -->
<link rel="stylesheet" href="/path/to/zTreeStyle/zTreeStyle.css" />

<!-- Awesome Theme -->
<link rel="stylesheet" href="/path/to/awesomeStyle/awesomeStyle.css" />

<!-- Metro Theme -->
<link rel="stylesheet" href="/path/to/metroStyle/metroStyle.css" />

4. Prepare your data to display in the tree.

var zNodes =[
    { 
      id: 1, // unique ID
      pId: 0, // parent ID
      name: "Name", 
      t: "Description", 
      open: true // open this node on page load
    },
    { 
      id: 11, 
      pId: 1, 
      name: "Node 1-1", 
      t: "This is Node 1-1"
    },
    // ...
];

5. Configure the plugin to display a base tree in the HTML menu.

var setting = {
    data: {
      key: {
        title:"t"
      },
      simpleData: {
        enable: true
      }
    },
    // more settings here
};

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

6. Full plugin options and callbacks to configure and customize the tree.

var setting = {

    // core settings
    treeId: "",
    treeObj: null,
    view: {
      addDiyDom: null,
      autoCancelSelected: true,
      dblClickExpand: true,
      expandSpeed: "fast",
      fontCss: {},
      nodeClasses: {},
      nameIsHTML: false,
      selectedMulti: true,
      showIcon: true,
      showLine: true,
      showTitle: true,
      txtSelectedEnable: false
    },
    data: {
      key: {
        isParent: "isParent",
        children: "children",
        name: "name",
        title: "",
        url: "url",
        icon: "icon"
      },
      render: {
        name: null,
        title: null,
      },
      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",
      headers: {},
      xhrFields: {},
      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
    },

    // checkbox plugin options
    check: {
      enable: false,
      autoCheckTrigger: false,
      chkStyle: _consts.checkbox.STYLE,
      nocheckInherit: false,
      chkDisabledInherit: false,
      radioType: _consts.radio.TYPE_LEVEL,
      chkboxType: {
        "Y": "ps",
        "N": "ps"
      }
    },
    data: {
      key: {
        checked: "checked"
      }
    },
    callback: {
      beforeCheck: null,
      onCheck: null
    },

    // Editable plugin options
    edit: {
      enable: false,
      editNameSelectAll: false,
      showRemoveBtn: true,
      showRenameBtn: true,
      removeTitle: "remove",
      renameTitle: "rename",
      drag: {
        autoExpandTrigger: false,
        isCopy: true,
        isMove: true,
        prev: true,
        next: true,
        inner: true,
        minMoveSize: 5,
        borderMax: 10,
        borderMin: -5,
        maxShowNodeNum: 5,
        autoOpenTime: 500
      }
    },
    view: {
      addHoverDom: null,
      removeHoverDom: null
    },
    callback: {
      beforeDrag: null,
      beforeDragOpen: null,
      beforeDrop: null,
      beforeEditName: null,
      beforeRename: null,
      onDrag: null,
      onDragMove: null,
      onDrop: null,
      onRename: null
    },

    // Hide plugin options
    data: {
      key: {
        isHidden: "isHidden"
      }
    }

};

7. API methods and properties.

// $.fn.zTree
$.fn.zTree.init.init(obj, zSetting, zNodes)
$.fn.zTree.initgetZTreeObj(treeId)
$.fn.zTree.initdestroy(treeId)

// zTreeObj
zTreeObj.setting
zTreeObj.addNodes(parentNode, index, newNodes, isSilent)
zTreeObj.cancelEditName(newName)
zTreeObj.cancelSelectedNode(node)
zTreeObj.checkAllNodes(checked)
zTreeObj.checkNode(node, checked, checkTypeFlag, callbackFlag)
zTreeObj.copyNode(targetNode, node, moveType, isSilent)
zTreeObj.destroy()
zTreeObj.editName(node)
zTreeObj.expandAll(expandFlag)
zTreeObj.expandNode(node, expandFlag, sonSign, focus, callbackFlag)
zTreeObj.getChangeCheckedNodes()
zTreeObj.getCheckedNodes(checked)
zTreeObj.getNodeByParam(key, value, parentNode)
zTreeObj.getNodeByTId(tId)
zTreeObj.getNodeIndex(node)
zTreeObj.getNodes()
zTreeObj.getNodesByFilter(filter, isSingle, parentNode, invokeParam)
zTreeObj.getNodesByParam(key, value, parentNode)
zTreeObj.getNodesByParamFuzzy(key, value, parentNode)
zTreeObj.getSelectedNodes()
zTreeObj.hideNode(node)
zTreeObj.hideNodes(nodes)
zTreeObj.moveNode(targetNode, node, moveType, isSilent)
zTreeObj.reAsyncChildNodes(parentNode, reloadType, isSilent, callback)
zTreeObj.reAsyncChildNodesPromise(parentNode, reloadType, isSilent)
zTreeObj.refresh()
zTreeObj.removeChildNodes(parentNode)
zTreeObj.removeNode(node, callbackFlag)
zTreeObj.selectNode(node, addFlag, isSilent)
zTreeObj.setChkDisabled(node, disabled, inheritParent, inheritChildren)
zTreeObj.setEditable(editable)
zTreeObj.showNode(node)
zTreeObj.showNodes(nodes)
zTreeObj.transformToArray(nodes)
zTreeObj.transformTozTreeNodes(simpleNodes)
zTreeObj.updateNode(node, checkTypeFlag)

// treeNode
treeNode.checked
treeNode.children
treeNode.chkDisabled
treeNode.click
treeNode.getCheckStatus()
treeNode.getIndex()
treeNode.getNextNode()
treeNode.getParentNode()
treeNode.getPath()
treeNode.getPreNode()
treeNode.halfCheck
treeNode.icon
treeNode.iconClose
treeNode.iconOpen
treeNode.iconSkin
treeNode.isHidden
treeNode.isParent
treeNode.name
treeNode.nocheck
treeNode.open
treeNode.target
treeNode.url

Powerful and Multi-Functional jQuery Folder Tree Plugin, zTree Github, jquery treeview plugin example, jquery treeview with checkbox


See Demo And Download

Official Website(zTree): Click Here

This superior jQuery/javascript plugin is developed by zTree. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.