jstree
jquery tree plugin
jsTree
I have loaded a jsTree with an AJAX call that returns JSON data. How can I refresh the tree so that it reloads its contents?
Source: (StackOverflow)
I am totally new to jQuery and jstree. I am using jstree and populating the data using xml. But would like to capture event for each node whether checked or not along with their Ids. I tried using jstree's plugins API like change_state(),check_node() or select_node() but it's not working. Also I would like to get all selected nodes data in an array for further processing..Can anyone help?
Thanks...
Source: (StackOverflow)
I am new to JSTree and i have a task on it. Please let me know is there any good websites to learn jstree in a faster way.
Source: (StackOverflow)
i'm using the following code:
$("#treeview").jstree();
$("#treeview").jstree('open_all');
With the following html:
<div id="treeview">
<ul>
<li>
<a rel='nofollow' href="#">rubentebogt</a>
<ul>
<li>
<a rel='nofollow' href="#" onclick="goTo('index.php?module=alarm&pagina=dashboard&id=6',false);">Beneden</a>
</li>
<li>
<a rel='nofollow' href="#" onclick="goTo('index.php?module=alarm&pagina=dashboard&id=7',false);">Boven</a>
</li>
</ul>
</li>
</ul>
</div>
My problem is that all nodes stay closed, i can't get them to open with jstree('open_all');
Source: (StackOverflow)
I'm stuck with jsTree here. So far it works and i can browse and expand nodes with the [+] icon and open pages when clicking a node, BUT i still want it to expand all the immediate nodes whenever someone clicks on a node.
i had a look at around for at least 2 hours but couln't find anything. the official website is not very helpfull because they don't have enough examples, and its not very well documented. had a look at this one, but didn't work for me either:
http://luban.danse.us/jazzclub/javascripts/jquery/jsTree/reference/_examples/2_operations.html
i didn't even get an error message in firebug
so here is how my code looks right now,
tree init:
$(function () {
$("#jstree").jstree({
....
function triggered by click on node
.delegate("a","click", function (e) {
//click on node
var page_id = $(this).parent().attr("page_id");
var idn = $(this).parent().attr("id").split("_")[1];
/*
dosnt seem to work either...
$(this).jstree("openNode", $("#node_"+idn));
$(this).jstree("openNode", "#node_"+idn);
*/
page = "index.php?page_id="+page_id;
//location.href = page;
})
.bind didnt work either:
$(this).bind("open_node.jstree", function (event, data) {
if((data.inst._get_parent(data.rslt.obj)).length) {
data.inst._get_parent(data.rslt.obj).open_node(this, false);
}
})
does anyone see what i'm missing here...?
Source: (StackOverflow)
I have a jstree. I want to select the node which is bound to the object which has a location with id of 158. This works but seems stupid. What's the more idiomatic way of doing this?
var $tree = $('.jstree', myContext),
node = $tree.find('li').filter(function() {
return ( $(this).data().location || {}).id === 158;
});
$tree.jstree('select_node', n)
Source: (StackOverflow)
I have used jsTree plugin to render large number of tree node in my product.
Now I am in the process of moving to Ember, and need to implement jsTree plugin within Ember.
I wrote a Ember component to render my folder structure using jsTree.
My Component:
<script type="text/x-handlebars" data-template-name="components/temp-tree">
<div id="treediv">Tree Data</div>
</script>
App.TempTreeComponent = Ember.Component.extend({
didInsertElement: function(){
var self = this;
self.$().jstree({
'plugins':["contextmenu", "dnd"],
'core' : {
'data' : [
'Simple root node',
{
'text' : 'Root node 2',
'state' : {
'opened' : true,
'selected' : true
},
'children' : [
{'text' : 'Child 1'},
'Child 2'
]
}
],
'check_callback': true
}
})
.on('rename_node.jstree', function(e, data) {
alert('rename');
})
.on('delete_node.jstree', function(e, data) {
alert('delete');
});
},
actions: {}
});
JSBIN Demo
In my component for each action done on the tree, jsTree triggers an event respective to the event.
I used to listen to the events and do necessary action if required.
Basically jsTree updates the DOM and triggers the event.
But in Ember we will not update the DOM ,instead we need to update the underlying MODEL and by two way data-binding the DOM is updated by Ember.
Here I am going against the Ember Conventions.
Am I going in the right direction?
Is there any other way to use jsTree with Ember?
Or is there any jsTree like component available in Ember to render large number of tree nodes with all features like context menu, drag & drop, search, unique plugin, checkbox, lazy loading, updating nodes?
Source: (StackOverflow)
I'm trying to get a jsTree working with on demand loading of subnodes. My code is this:
jQuery('#introspection_tree').jstree({
"json_data" : {
"ajax" : {
url : "http://localhost/introspection/introspection/product"
}
},
"plugins" : [ "themes", "json_data", "ui" ]
});
The json returned from the call is
[
{
"data": "Kit 1",
"attr": {
"id": "1"
},
"children": [
[
{
"data": "Hardware",
"attr": {
"id": "2"
},
"children": [
]
}
],
[
{
"data": "Software",
"attr": {
"id": "3"
},
"children": [
]
}
]
]
}
.....
]
Each element could have a lot of children, the tree is going to be big. Currently this is loading the whole tree at once, which could take some time. What do I have to do to implement on-demand-loading of child-nodes when they are opened by the user?
Thanks in advance.
Source: (StackOverflow)
I've seen an example somewhere online showing how to customise the appearance of jstree's right-click context menu (using contextmenu plugin).
For example, allow my users to delete "documents" but not "folders" (by hiding the "delete" option from the context menu for folders).
Now I can't find that example. Can anyone point me in the right direction? The official documentation didn't really help.
Edit:
Since I want the default context menu with only one or two minor changes, I'd prefer to not recreate the whole menu (though of course I will if it's the only way). What I'd like to do is something like this:
"contextmenu" : {
items: {
"ccp" : false,
"create" : {
// The item label
"label" : "Create",
// The function to execute upon a click
"action": function (obj) { this.create(obj); },
"_disabled": function (obj) {
alert("obj=" + obj);
return "default" != obj.attr('rel');
}
}
}
}
but it doesn't work - the create item is just always disabled (the alert never appears).
Source: (StackOverflow)
I have a Jstree populating a list of items. When I click a node a partial is loaded with ajax. Everything works fine until I include the jquery.validate script to validate my forms.
<script src="/scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/scripts/MicrosoftMvcJQueryValidation.js" type="text/javascript"></script>
<script src="/areas/manager/scripts/jquery.jstree.min.js" type="text/javascript"></script>
<script src="/areas/manager/scripts/jquery.hotkeys.js" type="text/javascript"></script>
<script src="/areas/manager/scripts/admin-panel.js" type="text/javascript"></script>
As soon as I include this file the tree nodes cannot be selected. Also drag and drop capability doesn't work. There are no javascript errors reported in firebug. Anyone know how to resolve such conflicts?
Thanks
Source: (StackOverflow)
I am currently working on some POC using JS Tree plugin and related check box plugin.
For certain nodes I need to check the check box by default and disable any further selection.I found the function to hide the check box
.bind("load_node.jstree", function (e, data) {
$(this).find('li[rel!=file]').find('.jstree-checkbox:first').hide();
});
instead of hiding the check box completely I want to find a way to disable check box for certain nodes
Source: (StackOverflow)
I create a treeview using jsTree with contextmenu in asp.net mvc3.
<div id="divtree">
<ul id="tree">
<li><a rel='nofollow' href="#" class="usr">@Model.Name</a>
@Html.Partial("Childrens", Model)
</li>
</ul>
<script type="text/javascript">
$(function () {
$("#divtree").jstree(
{
"plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"]
});
});
it's works fine.
I want to create a custome item in the context menu. for example create a new menu item. New for create new Employee in the context menu. and insert the employee in DB. I use a jQuery POST function for this task. But how to handle the click event in the
Context menu item.
Please help
Source: (StackOverflow)
This is my code:
$("#demo1").jstree({
"themes": {
"theme": "default",
"dots": true,
"icons": true,
"url": "static/themes/default/style.css"
},
"ui" : {
// this makes the node with ID node_4 selected onload
"initially_select" : [ location.hash.slice(1).split('@')[1]]
},
"json_data" : {
"data" : [
{
"data" : "A node",
"attr" : { "id" : "1" ,time:1321},
"callback":function(){alert('sss')},
"children" : [
{
"data" : "ttt node",
"children" : [ "Child 1", "Child 2" ]
}
]
},
{
"attr" : { "id" : "2" },
"data" : {
"title" : "Long format demo",
"attr" : { "href" : "#" }
}
},
{
"data" : "sss node",
"attr" : { "id" : "3" },
"children" : [
{
"data" : "bbb node"
}
,
{
"data" : "kkkk node",
"attr" : { "id" : "11" },
"children" : [
{
"data" : "oooo node",
"children" : [ "pppp", "nnnn" ]
}
]
},
]
},
{
"data" : "wwqq node",
"attr" : { "id" : "4" },
"children" : [ "Child 1", "Child 2" ]
},
{
"data" : "hhh node",
"attr" : { "id" : "5" },
"metadata ":"i am the metadata",
"children" : [
{
"data" : "A node",
"children" : [
{
"data" : "ttt node",
"children" : [ "Child 1", "Child 2" ]
}
]
},
{
"data" : "bbb node"
}
]
},
]
},
/*
"sort":function (a, b) {
return this.get_text(a) < this.get_text(b) ? 1 : -1;
},
////*/
"contextmenu":{
"show_at_node":false,
"items":{
//"ccp":false,
"sort" : {
// The item label
"label" : "sort",
/* The function to execute upon a click
"action" : function (obj) {
var fn=function (a, b) {return this.get_text(a) < this.get_text(b) ? 1 : -1;}
this.changeSort(obj,fn);
},
//*/
// All below are optional
"_disabled" : false, // clicking the item won't do a thing
"_class" : "sort", // class is applied to the item LI node
"separator_before" : false, // Insert a separator before the item
"separator_after" : true, // Insert a separator after the item
// false or string - if does not contain `/` - used as classname
"icon" : false,
"submenu" : {
"name":{
"label" : "name",
"action": function (obj) {
var fn=function (a, b) {return this.get_text(a) < this.get_text(b) ? 1 : -1;}
this.changeSort(obj,fn);
}
},
"time":{
"label" : "time",
"action": function (obj) {
var fn=function (a, b) {return this.get_text(a) < this.get_text(b) ? 1 : -1;}
this.changeSort(obj,fn);
}
}
}
},
"icons":{
"label" : "icons",
"action":function(obj){window.a=obj;},
"submenu" : {
"apple":{
"label" : "apple",
"action": function (obj) {
this.set_theme('apple');
}
},
"classic":{
"label" : "classic",
"action": function (obj) {
this.set_theme('classic');
}
},
"default":{
"label" : "default",
"action": function (obj) {
this.set_theme('default');
}
}
}
}
}
},
"core" : { "initially_open" : [ ] },
"plugins" : [ "themes", "json_data","crrm","ui","contextmenu","search","sort" ]
})
.bind("search.jstree", function (e, data) {
alert("Found " + data.rslt.nodes.length + " nodes matching '" + data.rslt.str + "'.");
});
i set the metadata:
"metadata ":"i am the metadata",
and want to get it when i right click,on the "contextmenu" :
"icons":{
"label" : "icons",
"action":function(obj){console.log(this.data);},
I show this.data follow this article:
// the `metadata` property will be saved using the jQuery `data` function on the `li` node
metadata : "a string, array, object, etc",
but I can't get it, what can I do?
Source: (StackOverflow)
Greetings,
I am using jsTree to generatate my hierarchical data. JsTree is generated as follows:
$(function() {
$("#industries").tree({
data: {
type: "json",
opts: {
url: "/Admin/GetIndustries/"
}
}
});
});
it works find and the jsonresult is something like:
[{"attributes":[],"data":{"title":"Adwokaci, Notariusze","id":"1a051101-c3fa-48f2-b2e1-c60d1b67ea22"},"children":[{"attributes":[],"data":{"title":"Kancelarie adwokackie","id":"26d6cff1-3c7f-4a2f-bf5a-422e08127b43"
my question is: how can I save id of selected node in some hidden field? I do something like this:
<script type="text/javascript">
$("#industries").click(function() {
var tree = $.tree.reference("industries");
var t = $.tree.focused(); if (t.selected) t.selected; else alert("Select a node first");
alert(t.id);
});
but it does not work. I get in my alert window "undefined". Can someone please help me?
EDIT:
I've changed the jstree instance as follows:
$(function() {
$("#industries").tree({
callback: {
onselect: function(NODE, TREE_OBJ) {
alert(NODE.id);
}
},
data: {
type: "json",
opts: {
url: "/Admin/GetIndustries/"
}
}
});
});
and i get empty alertt
Source: (StackOverflow)
I am using the JQuery plugin jsTree, http://www.jstree.com/
I am able to expand the whole tree with the following method:
$("#tree").jstree("open_all");
and also a specific node:
$("#tree").jstree("open_node", $('#childNode'));
I am having difficulty opening a branch of the tree, open branch opens it fine but does not open its parent if it has one.
Has anyone successully done this with jsTree? Let me know if you need more info.
Thanks
Eef
Source: (StackOverflow)