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:

2044 questions
23
votes
6 answers

jsTree and Context Menu: modify items

I'm using jsTree 3.0.0 and I need to modify the context in one of the following ways: Change label language for the default items, disable some default items and add new items. Rewrite all items and bind to some new items the create, rename and…
narcolepticvolcano
  • 1,037
  • 1
  • 10
  • 25
22
votes
8 answers

jsTree Open a branch

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…
RailsSon
  • 19,897
  • 31
  • 82
  • 105
22
votes
7 answers

How to associate a data to a node in jstree?

$("#ifTree").jstree({ "plugins" : ["themes","html_data","ui","crrm"], "themes" : { "theme" : "apple", "dots" : true, "icons" : false } …
Abhii
  • 271
  • 1
  • 2
  • 9
21
votes
2 answers

parameters of jstree create_node

Could you please give me the list of parameters of this function and an example of usage $('#treepanel').jstree("create_node");
Artur Keyan
  • 7,643
  • 12
  • 52
  • 65
21
votes
11 answers

get checked values for jsTree - submit with form post

I'm using the jsTree jQuery plugin with the checkbox theme. Does anyone know how to get the selected values with a form post? Thank you!
dzm
  • 22,844
  • 47
  • 146
  • 226
21
votes
4 answers

Why doesn't jsTree open_all() work for me?

Started playing around with jQuery and the jsTree plugin yesterday, and have it successfully loading the tree with an AJAX call to a servlet. Now, I would like to have the tree open all the nodes after loading so I added a success function to the…
seneyr
  • 1,040
  • 1
  • 11
  • 11
21
votes
5 answers

jsTree onSelect event

I've been trying to get the text of a node that is selected in a jsTree. I am able to populate the tree and trigger the onSelect event, but I can't find out which node was clicked. I've seen examples on the net that use data.rslt.obj.attr("data") to…
Dylan Klomparens
  • 2,853
  • 7
  • 35
  • 52
20
votes
4 answers

How can I rename a jsTree node

I am not talking about $("#demo1").jstree("rename",node) which makes the node editable for the user. I am talking about the name being changed within the code. For example my nodes are all prefixed with a 2 digit number "[01]" so before I call…
Chris
  • 2,340
  • 6
  • 40
  • 63
20
votes
7 answers

How to update jstree node values without reload

I have a jstree that I created with the following code: $('#mytree').jstree({"core": { "data" : value , "themes" : { "dots": false , "icons": false } …
Gabor Meszaros
  • 1,335
  • 1
  • 15
  • 25
19
votes
2 answers

Recreate entire jstree instance with new json data

I wish to replace the entire contents of a jstree tree with new json data. I'm using jsTree 1.0 downloaded July 25, 2011 from github Say I have this function... function init_my_tree(my_json_data) { $("#demo1").jstree({ themes: { …
Tom
  • 303
  • 1
  • 2
  • 7
19
votes
1 answer

jstree get new json data from tree

I created a tree with the following data. After this process, I made a drag-drop process between menus. And as a result, my menu structure was changed. I want to export new JSON data which has the same structure as my first data. How can I get…
captainblack
  • 903
  • 3
  • 9
  • 20
19
votes
6 answers

wrapping leaf text in jstree

I am using jstree plugin to populate my tree based on xml file. Some nodes text are greater than the container div. Is there any way to text wrap jstree node texts? $(document).ready(function(){ $("#tree").jstree({ "xml_data" : { …
user1471980
  • 10,127
  • 48
  • 136
  • 235
18
votes
5 answers

jstree jquery how to iterate through all nodes

I'm trying to iterate through every node within a treeview in jstree. The treeview is 4 levels deep but I can't seem to get past the 1st level. The following is the jQuery used to iterate. $("#myTree").bind('ready.jstree', function (event, data) { …
Hshdj122
  • 183
  • 1
  • 1
  • 5
17
votes
4 answers

jstree remove default elements from context menu

I have a problem with JsTree's contextmenu, how can I remove the default elements from the contextmenu like Create, Delete, Rename? I want to provide elements of my own, but the default elements are still at the contextmenu. "contextmenu" : { …
LostMohican
  • 3,082
  • 7
  • 29
  • 38
16
votes
7 answers

Delete all nodes in jsTree

Is there a way to clear out all nodes from a jsTree that's faster than walking through all the nodes deleting them one-by-one?
Jeff Dege
  • 11,190
  • 22
  • 96
  • 165