Stack Overflow
Stack Overflow

Questions tagged [jstree]

jsTree is a JavaScript-based, cross-browser tree component packaged as a jQuery plugin.

jsTree is jquery plugin written by Ivan Bozhanov, that provides interactive trees. It is absolutely free, open source and distributed under the MIT License. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading.

jsTree functions properly in either box-model (content-box or border-box), can be loaded as an AMD module, and has a built in mobile theme for responsive design, that can easily be customized. It uses jQuery's event system, so binding callbacks on various events in the tree is familiar and easy.

Just a few of the features worth noting:

  • drag & drop support
  • keyboard navigation
  • inline edit, create and delete
  • tri-state checkboxes
  • fuzzy searching
  • customizable node types

It supports multiple browsers including Internet Explorer 8+, Mozilla Firefox, Safari, Opera and Google Chrome, as well as most mobile browsers.

See also:

2013 questions
86
votes
8 answers

Configuring jstree right-click contextmenu for different node types

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…
MGOwen
  • 5,951
  • 12
  • 51
  • 64
56
votes
5 answers

How can I refresh the contents of a 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?
John Mills
  • 9,390
  • 11
  • 69
  • 113
42
votes
9 answers

How do I open all nodes in jquery Jstree?

I am using the following code: $("#treeview").jstree(); $("#treeview").jstree('open_all'); With the following html:
40
votes
1 answer

How to use jsTree plugin within Ember

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…
Jeevi
  • 1,032
  • 1
  • 10
  • 22
38
votes
9 answers

How to select a specific node programmatically?

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 =…
George Mauer
  • 103,465
  • 117
  • 349
  • 581
34
votes
5 answers

jsTree - loading subnodes via ajax on demand

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 :…
Christian Waidner
  • 1,284
  • 1
  • 12
  • 21
30
votes
10 answers

How to change icon in jstree?

I have the following code: $('.wpFolders.co_files').bind('select_node.jstree', function (event, data) { getFileById(data.args[0].hash.replace('#', '')); }).jstree({ 'plugins' : ['html_data','themes','ui','types'], …
Gazillion
  • 4,722
  • 10
  • 38
  • 59
26
votes
3 answers

Open branch when clicking on a node?

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…
Daniel
  • 261
  • 1
  • 3
  • 6
26
votes
2 answers

remove folder icon in jstree while using checkbox

How does one remove the folder icon in jstree whilst using the checkbox plugin? $('#div').jstree({ "ui": { "theme_name": "checkbox" }, "theme" : { "icons": false }, "json_data": { "ajax": { …
everreadyeddy
  • 678
  • 1
  • 8
  • 17
24
votes
14 answers

How do I get the id of the selected node in jsTree?

How can I get the id of the selected node in a jsTree? function createNewNode() { alert('test'); var tree = $.tree.reference("#basic_html"); selectedNodeId = xxxxxxxxx; //insert instruction to get id here tree.create({ data : "New Node Name"…
murze
  • 3,799
  • 8
  • 40
  • 68
24
votes
4 answers

How to redraw jstree tree with new data?

So, my question. I initialized my tree with some data: $('#tree').jstree({ 'core' : { 'data' : [ 'Simple root node', { 'id' : 'node_2', 'text' : 'Root node with options', …
user2680139
24
votes
2 answers

dnd, how to restrict dropping to certain node types?

I have 37 different node types. I am trying to implement drag and drop. This works but I need to restrict exactly which types can be dragged and where they can be dropped. I can't find any useful information in the docs unfortunately…
Alex
  • 1,737
  • 4
  • 22
  • 31
23
votes
6 answers

How can I attach custom behaviour to a double click in jsTree?

I'm using the jsTree jQuery plugin and want to execute code when the user double clicks a node. I can't seem to get it to work. I found some documentation on a ondblclk event but it doesn't fire. browser.jstree( { …
John Mills
  • 9,390
  • 11
  • 69
  • 113
23
votes
1 answer

Meteor `Deps.autorun` vs `Collection.observe`

What are the pros/cons between using Deps.autorun or Collection.observe to keep a third-party widget in sync with a reactive Meteor.Collection. For example, I am using jsTree to visually show a directory tree that I have stored in my MongoDB. I'm…
BonsaiOak
  • 20,455
  • 5
  • 25
  • 50
23
votes
7 answers

How can I tell if jsTree has fully loaded?

I am trying to write a function that opens specific nodes on a jsTree but I am having a problem where the function is executed before my base tree is loaded from the ajax call. How can I tell if my jstree data has been loaded and wait until it is…
PlTaylor
  • 6,855
  • 11
  • 48
  • 87
1
2 3
…
99 100