jqTree

JqTree is a jQuery widget for displaying a tree structure in html. It supports json data, loading via ajax and drag-and-drop.

by TheDiamondDoge

HTML

<script src="http://mbraak.github.io/jqTree/tree.jquery.js"></script>
<link rel="stylesheet" href="http://mbraak.github.io/jqTree/jqtree.css">
<div id="tree1"></div>

JavaScript

var data = [{
  label: 'node1',
  id: 1,
  children: [{
    label: 'child1',
    id: 2
  }, {
    label: 'child2',
    id: 3
  }]
}, {
  label: 'node2',
  id: 4,
  children: [{
    label: 'child3',
    id: 5
  }]
}];
$(function() {
  var $tree = $('#tree1');

  $tree.tree({
    data: data,
    dragAndDrop: true,
    onCreateLi: function(node, $li) {
      $li.find('.jqtree-element').append(
        '<a style="text-decoration:none"  href="#node-' + node.id + '" class="edit" data-node-id="' + node.id + '"> edit</a>');
    }
  });

$tree.on(
        'click', '.edit',
        function(e) {
            // Get the id from the 'node-id' data property
            var node_id = $(e.target).data('node-id');

            // Get the node from the tree
            var node = $tree.tree('getNodeById', node_id);

            if (node) {
                // Display the node name
                alert(node.name);
            }
        }
    );
});