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

<link rel="stylesheet" href="http://mbraak.github.io/jqTree/jqtree.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css">
<script src="https://mbraak.github.io/jqTree/tree.jquery.js"></script>
<link rel="stylesheet" href="https://mbraak.github.io/jqTree/jqtree.css">

<div id="tree1"></div>

CSS

.jqtree-closed > .jqtree-element i.icon-folder-open:before {
    content: "\f07b";
  }
  
  .jqtree-tree i {
    margin-right: 4px;
  }

JavaScript

var numNode = 5;
var $tree = $('#tree1');

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() {
  $tree.tree({
    data: data,
    dragAndDrop: true,
    useContextMenu: true,
    onCreateLi: function(node, $li) {
      // Use the node.getLevel function to get level of this node
      var level = node.getLevel();

      var name;

      if (level == 1) {
        // root node
        name = 'fa fa-folder';
      } else if (node.children.length != 0) {
        // folder
        name = 'fa fa-folder-o';
      } else {
        // leaf
        name = 'fa fa-leaf';
      }

      var $title = $li.find('.jqtree-title');
      $title.prepend(
        $('<i class="' + name + '" aria-hidden = "true"></i>')
      );
      
      $li.find('.jqtree-element').append(
        '<a style="text-decoration: none" href="#node-' + node.id + '" class="edit" data-node-id="' + node.id + '"> edit</a><a style="text-decoration: none" href="#node-' + node.id + '" class="add" data-node-id="' + node.id + '"> add</a><a style="text-decoration: none" href="#node-' + node.id + '" class="del" data-node-id="' + node.id + '"> del</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) {
        var nodeName = prompt("Enter new node name");
        if (nodeName == "") {
          $tree.tree('removeNode', node);
        } else {
          $tree.tree('updateNode', node, nodeName);
        }
      }
    }
  );

});

$tree.on(
    'click', '.add',
  function(event) {
    var node = prompt("Enter name to a new node", "");
    var child2 = $tree.tree('getNodeById', $(event.target).data('node-id'));
   ...