I am working on a Jstree with context menu plugin but there are few issues.
This is how my tree is getting rendered in browser(tested in both chrome as well as mozilla).
but I want my jstree to be like this http://jsfiddle.net/govi20/cnbsfkx8/1/
There is not a single error on chromeDev console as well as firebug console.
HTML mark-up
<link href="http://medialize.github.io/jQuery-contextMenu/src/jquery.contextMenu.css">
<link href="rhttp://static.jstree.com/3.0.8/assets/dist/themes/default/style.min.css">
<link href="http://static.jstree.com/3.0.8/assets/bootstrap/css/bootstrap.min.css">
</head>
<body>
<div id="jstree1">
</div>
</body>
<script type="text/javascript">
function demo_create() {
var ref = $('#jstree1').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);
}
};
function demo_rename() {
var ref = $('#jstree1').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
sel = sel[0];
ref.edit(sel);
};
function demo_delete() {
var ref = $('#jstree1').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
ref.delete_node(sel);
};
function getJSON() {
// var v = $('#data').jstree(true).get_json('#', {flat:true});
var v = $('#jstree1').jstree(true).get_json('#', { 'flat': true });
var mytext = JSON.stringify(v);
console.log("tree=> "+mytext);
}
$(document).ready(function(){
$('#jstree1').jstree({
"core" : {
"check_callback" : true,
"themes": {
"name": "default-dark",
"dots": true,
"icons": true
},
"themes" : {
"theme" : "apple"
},
'data' : [
'Simple root node',
{
'id' : 'node_2',
'text' : 'Root node with options',
'state' : { 'opened' : true, 'selected' : true },
'children' : [ { 'text' : 'Child 1' }, 'Child 2']
}
]
},
"plugins" : [ "themes","contextmenu","dnd" ]
});
});
</script>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="http://static.jstree.com/3.0.8/assets/dist/jstree.min.js"></script>
<script src="http://medialize.github.io/jQuery-contextMenu/src/jquery.contextMenu.js"></script>
<script type="text/javascript">
function demo_create() {
var ref = $('#jstree1').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);
}
};
function demo_rename() {
var ref = $('#jstree1').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
sel = sel[0];
ref.edit(sel);
};
function demo_delete() {
var ref = $('#jstree1').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
ref.delete_node(sel);
};
function getJSON() {
// var v = $('#data').jstree(true).get_json('#', {flat:true});
var v = $('#jstree1').jstree(true).get_json('#', { 'flat': true });
var mytext = JSON.stringify(v);
console.log("tree=> "+mytext);
}
$(document).ready(function(){
$('#jstree1').jstree({
"core" : {
"check_callback" : true,
"themes": {
"name": "default-dark",
"dots": true,
"icons": true
},
"themes" : {
"theme" : "apple"
},
'data' : [
'Simple root node',
{
'id' : 'node_2',
'text' : 'Root node with options',
'state' : { 'opened' : true, 'selected' : true },
'children' : [ { 'text' : 'Child 1' }, 'Child 2']
}
]
},
"plugins" : [ "themes","contextmenu","dnd" ]
});
});
</script>
please suggest me the changes.
Instead of this:
Use this:
Notice the missing "r" in the beginning of the URL - it is a typo.
But keep in mind hotlinking like this is frowned upon - jstree.com is not a CDN, you can use a real CDN:
I will even recommend you use 3.1.1 which is fully backward compatible with 3.0.8, but has a lot of bug fixes.