jstree Double Click to Edit

Had a hard time with this and I have no idea how the best way to do it is but I don't care as long as it is working finally.

by Doug Collins

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/themes/default/style.min.css">
<!--
Include jQuery
jsTree requires 1.9.0 or greater in your webpage. You can use a CDN version or include a local copy.

Include jsTree
If hosting the files yourself: for production include the minified version: dist/jstree.min.js, there is a development version too: dist/jstree.js
->
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
-->
<!--
Setup a container
This is the element where you want the tree to appear, a <div> is enough. This example has a nested <ul> as there is no other data source configured (such as JSON).-->

Tree: 1
  <div id="tree1"></div>

CSS

.rename_node,
.set_text {
  padding: 10px;
  background-color: orange;
  margin-top: 20px;
  cursor: pointer
}

.rename_node {
  background-color:lime;
}

JavaScript

$(document).ready(function() {

	$('#tree1').jstree({
    'core': {
      'check_callback': true,
        'data': [
            { "id": "ajson1", "parent": "#", "text": "Folder 1", "state": {"opened": true}, "data" : { "file" : false } },
            { "id": "ajson2", "parent": "ajson1", "text": "File 1", "data" : { "file" : true } },
            { "id": "ajson3", "parent": "ajson1", "text": "File 2", "data" : { "file" : true } }
				]
    }
	});


$('#tree1').bind("dblclick.jstree", function (event) {
  var tree = $(this).jstree();
  var node = tree.get_node(event.target);
  tree.edit(node);
});

/* Here is single click to edit code if you also need it
$('#tree1')
  // listen for event
  .on('select_node.jstree', function (e, data) {
			var node = data.instance.get_node(data.selected[0]);
  		data.instance.edit(node);
});
*/
});