Fancytree - dynamic tree view

Mar 28, 2014 in Drag and drop 20434 views

Download

Overview
Documents

User Rating: 4/5 ( 9 votes)

Your Rating:

Fancytree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, tables, drag'n'drop, and lazy loading.

Embed Fancytree on Your Web Page

The most simple way to create a tree is like that:

<head>
  [...]
  <!-- Include jQuery and jQuery UI -->
  [...]
  <!-- Include Fancytree skin and library -->
  <link href="fancytree/skin-win8/ui.fancytree.css" rel="stylesheet" type="text/css">
  <script src="fancytree/jquery.fancytree-all.min.js" type="text/javascript"></script>
  <!-- Initialize the tree when page is loaded -->
  <script type="text/javascript">
    $(function(){
      // Create the tree inside the <div id="tree"> element.
      $("#tree").fancytree({ ... });
    });
  </script>
</head>
<body>
  [...]
  <!-- Define where the tree should appear -->
  <div id="tree">...</div>
  [...]
</body>
</html>

Configure Options

Additional options are passed to Fancytree during initialization:

$("#tree").fancytree({
  source: {
    url: "ajax-tree-plain.json"
  },
  checkbox: true,
  [...]
});

Options can also be set after initialization using this syntax:

$("#tree").fancytree("option", "checkbox", true);

For more information see also the complete list of available options and the Option Configurator.

Define the Tree Data

There are several ways to define the actual tree data:

Use the source option to pass a data structure, i.e. an array of nested objects:

  source: [
    {title: "Node 1", key: "1"},
    {title: "Folder 2", key: "2", folder: true, children: [
      {title: "Node 2.1", key: "3"},
      {title: "Node 2.2", key: "4"}
    ]}
  ],
  ...

See also the complete list of data properties.

Use the source option to load the data via ajax.

  source: {
    url: "/getTreeData",
    cache: false
  },
  ...

The ajax service is expected to return valid JSON data:

[{"title": "Node 1", "key": "1"},
 {"title": "Folder 2", "key": "2", "folder": true, "children": [
    {"title": "Node 2.1", "key": "3"},
    {"title": "Node 2.2", "key": "4"}
  ]}
]

Define a <ul>/<li> markup structure inside the tree's <div> tag.

$("#tree").fancytree();

<div id="tree">
  <ul id="treeData" style="display: none;">
    <li id="1">Node 1
    <li id="2" class="folder">Folder 2
      <ul>
        <li id="3">Node 2.1
        <li id="4">Node 2.2
      </ul>
  </ul>
</div>
  ...

For more information see also TutorialLoadData and the online sample.

Event Handling

Functionality can be added (and modified) by defining event handlers (i.e. callback functions).

Every event handler is passed a data argument, that contains information about the event target.

  $("#tree").fancytree({
    ...
    activate: function(event, data){
      // A node was activated: display its title:
      var node = data.node;
      $("#echoActive").text(node.title)
    },
    beforeSelect: function(event, data){
      // A node is about to be selected: prevent this, for folder-nodes:
      if( data.node.isFolder() ){
        return false;
      }
    }
  });

An alternative way to define event handlers is to bind them later to an initialized tree. Note that the event name must be converted to lower case and prefixed with 'fancytree':

  $("#tree").bind("fancytreebeforeselect", function(event, data){
    ...
  });

For more information see also TutorialEvents, the online sample, the complete list of available events, and a description of the 'data' object.

Lazy Loading

Fancytree supports loading nodes on demand, i.e. only load data when a node is expanded for the first time.

In order to enable this, we can mark nodes as lazy.

  $("#tree").fancytree({
    source: [...], // the initial tree data should contain some nodes marked as 'lazy'
    lazyLoad: function(event, data) {
      var node = data.node;
      data.result = {
        url: "/getBranchData",
        data: {key: node.key}
      }
    }
  });

For more information see TutorialLoadData.

API Access

Fancytree exposes an extensive, object oriented interface to query and manipulate the data model:

  var tree = $("#tree").fancytree("getTree"),
      activeNode = tree.getActiveNode();

  // Sort children of active node:
  activeNode.sortChildren();
  // Expand all tree nodes
  tree.visit(function(node){
    node.setExpanded(true);
  });
  // Append a new child node
  activeNode.addChildren({
    title: "Document using a custom icon",
    icon: "customdoc1.gif"
  });

For more information see TutorialApi.

JS Tutorial