Fancytree Demo

<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <title>Fancytree - Demo</title>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <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>
    <script src="//cdn.jsdelivr.net/gh/mar10/fancytree@2/dist/src/jquery.fancytree.glyph.js"></script>
    <script src="//cdn.jsdelivr.net/gh/mar10/fancytree@2/dist/src/jquery.fancytree.select.js"></script>
    <script src="//cdn.jsdelivr.net/gh/mar10/fancytree@2/dist/src/jquery.fancytree.filter.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Fancytree Demo</h1>
    <button id="button1">Test</button>
    <hr />
    <div id="tableWrapper">
    <table id="tree" class="table table-striped table-bordered">
                                <thead>
                                    <tr><th class="col-md-1">#</th>  <th class="col-md-9">
                                        Name</th> <th class="col-md-2">
                                        Action</th> </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td> <i class="pe-7s-pen edit"></i><span class="size10"></span><i class="pe-7s-trash delete"></i></td>
                                    </tr>
                                </tbody>
                            </table>
                            </div>
    <div id="status">Ready.</div>
    <hr />
    <div id="version"></div>
  </body>

</html>



function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}

$(function(){
    var glyphOpts = {
    preset : "bootstrap3",
    map : {
      doc : "glyphicon glyphicon-file",
      docOpen : "glyphicon glyphicon-file",
      checkbox : "glyphicon glyphicon-unchecked",
      checkboxSelected : "glyphicon glyphicon-check",
      checkboxUnknown : "glyphicon glyphicon-share",
      dragHelper : "glyphicon glyphicon-play",
      dropMarker : "glyphicon glyphicon-arrow-right",
      error : "glyphicon glyphicon-warning-sign",
      expanderClosed : "glyphicon glyphicon-menu-right",
      expanderLazy : "glyphicon glyphicon-menu-right", // glyphicon-plus-sign
      expanderOpen : "glyphicon glyphicon-menu-down", // glyphicon-collapse-down
      folder : "glyphicon glyphicon-folder-close",
      folderOpen : "glyphicon glyphicon-folder-open",
      loading : "glyphicon glyphicon-refresh glyphicon-spin"
    }
  };
  
  var sampleSource = [
	    { title: "Folder 1", folder: true, key: 1, checkbox: true, children: [
	      { title: "Subnode 1.1", key: 2, checkbox: false},
	      { title: "Subnode 1.2", key: 3, checkbox: false},
	      { title: "Subnode 1.3"}
	      ]},
	    { title: "Folder 2", key: 4, folder: true, checkbox: true}
    ];

	$("#tree").fancytree({
	  extensions: ["table", "glyph", "filter"],
    checkbox: "radio",
    glyph: glyphOpts,
	  source: sampleSource,
	 table: {
          checkboxColumnIdx: 0, // render the checkboxes into the this column index (default: nodeColumnIdx)
          indentation: 16, // indent every node level by 16px
          nodeColumnIdx: 1 // render node expander, icon, and title to this column (default: #0)
	 }
	});
	
	$("#button1").click(function(event){
	  var tree = $("#tree").fancytree("getTree");
    var selectedNodes = tree.getSelectedNodes()
    if(selectedNodes === 0){
      alert("Select parent node first!")
    } else {
      var parentNode = selectedNodes[0];
    rand = getRandomInt(100, 1000);
    parentNode.addChildren({title: "Child" + rand, key: rand, checkbox: true, folder: true});
    parentNode.renderStatus();
    }
    var newNode = $("#tree").fancytree("getTree").findFirst(function(node){
          node.key == rand
        })
    alert("New node title: " + newNode.title)    
	});
	$("#version").text("Fancytree " + $.ui.fancytree.version 
    + " / jQuery " + $.fn.jquery);
});

#tableWrapper {
    height: 250px;
    width: 700px;
    overflow: auto;
    position: relative;
}

#tableWrapper table {
    border-collapse: collapse;
}

# Fancytree Basic Sample

Use this Plunk to try Fancytree options or reproduce errors.

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