Fancytree Demo

<!DOCTYPE html>
<html>

  <head>
  	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  	<title>Fancytree - Demo</title>
  
  	<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

  	<link href="//cdn.jsdelivr.net/gh/mar10/fancytree@2/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet"/>
  	<script src="//cdn.jsdelivr.net/gh/mar10/fancytree@2/dist/jquery.fancytree-all-deps.min.js"></script>

    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

<body class="example">
  <h1>Select Employees</h1>
  <div class="description">
    <p>
 Instructions here.
    </p>
    <p>
      <b>Status:</b> production.
      <b>Details:</b>
      <a href="https://github.com/mar10/fancytree/wiki/ExtFilter"
        target="_blank" class="external">ext-filter</a>.
    </p>
  </div>
  <div>
    <label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
  </div>
  <p>
    <label>Filter:</label>
    <input name="search" placeholder="Filter..." autocomplete="off">
    <button id="btnResetSearch">&times;</button>
    <span id="matches"></span>
  </p>
  <!-- (Irrelevant source removed.) -->

  <!-- Add a <table> element where the tree should appear: -->
  <div id="tree">
  </div>
  <div>Selected keys: <span id="echoSelection1">-</span></div>
  <!-- (Irrelevant source removed.) -->
</body>

</html>

$(function(){
  var sampleSource = [
	    { title: "Folder 1", folder: true, children: [
	      { title: "Subnode 1.1"},
	      { title: "Subnode 1.2"},
	      { title: "Subnode 1.3"}
	      ]},
	    { title: "Folder 2", expanded: true, children: [
	      { title: "Subnode 2.1"},
	      { title: "Subnode 2.2"},
	      { title: "Subnode 2.3"}
	      ]},



    ];

	$("#tree").fancytree({
  extensions: ["filter"],
      filter: {
        autoApply: true,   // Re-apply last filter if lazy data is loaded
        autoExpand: true, // Expand all branches that contain matches while filtered
        counter: true,     // Show a badge with number of matching child nodes near parent icons
        fuzzy: false,      // Match single characters in order, e.g. 'fb' will match 'FooBar'
        hideExpandedCounter: true,  // Hide counter badge if parent is expanded
        hideExpanders: true,       // Hide expanders if all child nodes are hidden by filter
        highlight: true,   // Highlight matches by wrapping inside <mark> tags
        leavesOnly: false, // Match end nodes only
        nodata: true,      // Display a 'no data' status node if result is empty
        mode: "hide"       // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
      },
    checkbox: true,
     selectMode: 3,
	  source: sampleSource,

	  activate: function(event, data) {
	    $("#status").text("Activate " + data.node);
	  },
	        select: function(event, data) {
        // Display list of selected nodes
        var s = data.tree.getSelectedNodes(false).join(", ");
        $("#echoSelection1").text(s);
      }
	});
	
	
	
	  /*
     * Event handlers for our little demo interface
     */
    $("input[name=search]").keyup(function(e){
      var n,
        tree = $.ui.fancytree.getTree(),
        args = "autoApply autoExpand fuzzy hideExpanders highlight leavesOnly nodata".split(" "),
        opts = {},
        filterFunc = $("#branchMode").is(":checked") ? tree.filterBranches : tree.filterNodes,
        match = $(this).val();

      $.each(args, function(i, o) {
        opts[o] = $("#" + o).is(":checked");
      });
      opts.mode = $("#hideMode").is(":checked") ? "hide" : "dimm";

      if(e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === ""){
        $("button#btnResetSearch").click();
        return;
      }
      if($("#regex").is(":checked")) {
        // Pass function to perform match
        n = filterFunc.call(tree, function(node) {
          return new RegExp(match, "i").test(node.title);
        }, opts);
      } else {
        // Pass a string to perform case insensitive matching
        n = filterFunc.call(tree, match, opts);
      }
      $("button#btnResetSearch").attr("disabled", false);
      $("span#matches").text("(" + n + " matches)");
    }).focus();

    $("button#btnResetSearch").click(function(e){
      $("input[name=search]").val("");
      $("span#matches").text("");
      tree.clearFilter();
    }).attr("disabled", true);

    $("fieldset input:checkbox").change(function(e){
        var id = $(this).attr("id"),
          flag = $(this).is(":checked");

        // Some options can only be set with general filter options (not method args):
        switch( id ){
        case "counter":
        case "hideExpandedCounter":
          tree.options.filter[id] = flag;
          break;
        }
        tree.clearFilter();
        $("input[name=search]").keyup();
    });
    
 
	
	$("#button1").click(function(event){
	  var tree = $("#tree").fancytree("getTree"),
	      node = tree.getActiveNode();

	  alert("Actie node " + node);
	});
	$("#version").text("Fancytree " + $.ui.fancytree.version 
    + " / jQuery " + $.fn.jquery);
});

/* Styles go here */

#status {
  border: 1px inset gray;
  background-color: #eee;
}
#version {
  color: #555;
  font-size: 70%;
}

# Fancytree Basic Sample

Use this Plunk to try Fancytree options or reproduce errors.

[
  {"title": "Subnode 1"},
  {"title": "Subnode 2", "lazy": true}
]