js tree example

by vaibhav saxena

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.8/themes/default/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.8/jstree.min.js"></script>


 
<button id="jstreeFolderCreate" type="button" disabled>Create Folder</button>
<button id="jstreeFolderRename" type="button" disabled>Rename</button>
<button id="jstreeFolderDelete" type="button" disabled>Delete</button>

<br>

<div class="columns small-7">
  <div id="mynewdocs-tree">

  </div>BS
  <div id="mydocs-tree">
    <ul>
      <li data-jstree='{"opened":true, "type":"folder"}'>Assets:
        <ul>
          <li id='201' data-id='201' data-jstree='{"type":"template"}'>Cash</li>
          <li id='202' data-id='202' data-jstree='{"type":"campaign"}'>Cash and Cash Equivalent</li>
          <li id='203' data-id='201' data-jstree='{"type":"template"}'>Cash and invested cash</li>
          <li id='204' data-id='201' data-jstree='{"type":"template"}'>Cash and bank deposit</li>
        </ul>
      </li>
      <li data-jstree='{"opened":true, "type":"folder"}'>Assets 2</li>
    </ul>
  </div>
</div>

JavaScript

$(function() {

		  $('#jstreeFileCreate').click(function() {
		    var ref = $('#mydocs-tree').jstree(true),
		      sel = ref.get_selected();
		    if (!sel.length) {
		      return false;
		    }
		    sel = sel[0];
		    sel = ref.create_node(sel, {
		      "type": "file"
		    });
		    if (sel) {
		      ref.edit(sel);
		    }
		  });
      
        $('#jstreeFolderCreate').click(function() {
		    var ref = $('#mydocs-tree').jstree(true),
		      sel = ref.get_selected();
		    if (!sel.length) {
		      return false;
		    }
		    sel = sel[0];
		    sel = ref.create_node(sel, {
		      "type": "file"
		    });
		    if (sel) {
		      ref.edit(sel);
		    }
		  });
		  $('#jstreeFolderRename').click(function() {
		    var ref = $('#mydocs-tree').jstree(true),
		      sel = ref.get_selected();
		    if (!sel.length) {
		      return false;
		    }
		    sel = sel[0];
		    ref.edit(sel);
		  });
		  $('#jstreeFolderDelete').click(function() {
		    var ref = $('#mydocs-tree').jstree(true),
		      sel = ref.get_selected();
		    if (!sel.length || !ref.get_node(sel).children.length == 0) {
		      return false;
		    }
		    ref.delete_node(sel);
		  });
		  $('#incoming-tree')
		    .jstree({
		      "core": {
		        "check_callback": function(o, n, p, pos, more) {
		          if (more && more.dnd && more.is_multi) {
		            return false;
		          }
		          return true;
		        }
		      },
		      "types": {
		        "template": {
		          "valid_children": [],
		          "icon": "icon-brush"
		        },
		        "campaign": {
		          "valid_children": [],
		          "icon": "icon-megaphone"
		        },
		        "#": {
		          "valid_children": []
		        }
		      },
		      "dnd": {
		        "always_copy": true
		      },
		      "plugins": ["types", "dnd", "wholerow", "Unique"]
		    });


		  // listen for event
		  $('#mydocs-tree')
		    .on("click", "li.jstree-node a", function() {
		     ...