jstree add node
by bryiantan
HTML
<script src="http://static.jstree.com/3.0.0-beta3/assets/dist/jstree.min.js"></script>
<link rel="stylesheet" href="http://static.jstree.com/3.0.0-beta3/assets/dist/themes/default/style.min.css">
<script src="https://code.angularjs.org/1.0.3/angular.min.js"></script>
<div id="jstree">
</div>
<button id="sam">create node</button>
<div id="selected">
</div>
JavaScript
$(function () {
var data = [
{ "id": "ajson1", "parent": "#", "text": "Simple root node" , "nnn" : "vvv"},
{ "id": "ajson2", "parent": "#", "text": "Root node 2",
"state": {'selected' : true}},
{ "id": "ajson3", "parent": "ajson2", "text": "Child 1" },
{ "id": "ajson4", "parent": "ajson2", "text": "Child 2" },
];
$("#jstree").jstree({
"core": {
// so that create works
"check_callback": true,
"data": data
},
"plugins": ["contextmenu", "dnd"],
"contextmenu": {
"items": {
"create": {
"label": "Add",
"action": function (obj) {
$('#jstree').jstree().create_node('#', { "id": "ajson5", "text": "newly added" }, "last", function () {
alert("done");
});
},
}
}
}
}).on('create_node.jstree', function (e, data) {
console.log('saved');
});
$('#jstree').on("select_node.jstree", function (e, data) {
// alert("node_id: " + data.node.id);
$('#selected').text('selected id: '+data.node.id + ' selected text: '+data.node.id);
});
/*
$("#jstree").bind('select_node.jstree', function(e) {
// gather ids of selected nodes
var selected_ids = [];
$("#jstree").jstree('get_selected').each(function () {
selected_ids.push(this.id);
alert(this.id);
});
// do summit with them
//alert('selected...