jsTree Demo

Play with jsTree

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="input-group">
        <span class="input-group-addon" id="search-addon"><span class="fa fa-th-list"></span></span>
        <input type="text" id="ricerca-enti" class="form-control" placeholder="Ricerca per denominazione..." aria-describedby="search-addon">
        <span class="input-group-addon" id="search-addon"><span class="fa fa-search"></span></span>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12" id="container-albero">
      <div id="test">

      </div>
    </div>
  </div>
</div>

CSS

#container-albero {
  padding-left: 23px;
}

JavaScript

var to = false;

$('#ricerca-enti').keyup(function() {
  if (to) {
    clearTimeout(to);
  }
  to = setTimeout(function() {
    var v = $('#ricerca-enti').val();
    $('#test').jstree(true).search(v);
  }, 250);
});


$(document).ready(function() {

  $("#test").on("changed.jstree", function(e, data) {
    console.log('Selezionati ' + data.changed.selected);
    console.log('Deselezionati ' + data.changed.deselected);
  }).jstree({
    plugins: ['checkbox', 'search', 'changed', 'contextmenu'],
    contextmenu: {
      select_node: false,
      items: contextMenu
    },
    checkbox: {
      three_state: false
    },
    search: {
      show_only_matches: true
    },
    core: {
      data: [{
        id: "padre1",
        parent: "#",
        text: "Padre 1",
        icon: 'fa fa-star text-warning'
      }, {
        id: "padre2",
        parent: "#",
        text: "Padre 2"
      }, {
        id: "id3",
        parent: "padre1",
        text: "Figlio 1 di padre 1"
      }, {
        id: "id4",
        parent: "padre1",
        text: "Figlio 2 di padre 1"
      }, {
        id: "id5",
        parent: "padre2",
        text: "Figlio 1 di padre 2"
      }, {
        id: "id6",
        parent: "id5",
        text: "Figlio 1 di figlio 1 di padre 2"
      }, {
        id: "id7",
        parent: "id5",
        text: "Figlio 2 di figlio 1 di padre 2"
      }, {
        id: "id8",
        parent: "id5",
        text: "Figlio 3 di figlio 1 di padre 2"
      }, {
        id: "id9",
        parent: "#",
        text: "Figlio 3 di figlio 1 di padre 2"
      }]
    }
  });
});

function contextMenu(node) {
  var items = {};
  alert();
  if (node.children.length > 0) {
    items.selezionaTutti = {
      label: 'Seleziona tutti',
      icon: 'fa fa-check-square',
      action: function(questo) {
        console.log(this);
        console.log(questo);
        alert(this);
      }
    }
  }
  return items;
}