JsTree - trees are so easy

Hello!



On the JsTree plugin on Habré was mentioned only in the distant 2009. Since that time, everything has changed quite a bit. The plugin is actively developing. Project page on githaba .



Considering the specifics of the project I am working on (reference system), this plugin turned out to be simply irreplaceable, and I use 90% of its functionality with great pleasure. And I still have not seen the same powerful alternative.

')





If you need to just draw a tree in the browser, then of course you can use other plugins, or write it yourself and concisely, but for a wider functionality - JsTree is just a great option.

What we have?

• Building a tree based on html markup, json and xml format
• Drag & drop with fine tuning the ability to move nodes on the tree
• Dynamic Add / Remove / Modify Nodes
• Ability to build several trees on one page and manipulate nodes between these trees
• The ability to assign arbitrary types of nodes (file, folder, drive, yes whatever), and specify a separate behavior for each
• Support for themes (on the screenshot at the beginning of the article an example of how I implemented it)
• Keyboard control
• Using native and custom checkboxes
• AJAX node loading, remembering tree state
• The plugin is beautifully and readable written, it allows you to write additional plugins for it and customize it without any problems.
• Convenient buyding system for event handling
• Multilingual
• Disclosure animation control
• Search by tree
• Custom context menu
• Browser support: IE 6+, Firefox 2+, Safari 3+, Opera 9+, Chrome
• A mini feature that I was particularly pleased with - the wholerow plugin - highlighting a node full width. A la mac style

How does it work?

Excellent and clear examples can be found on the official website. Detailed documentation is also present .



To get started, we need to connect jquery.js, jstree.js (180KB uncompressed) and a folder with themes (it connects with the plugin itself, just put it next)



I will give an example of using a tree based on JSON.



HTML:

<div id="tree"></div> 

Jquery:

 $("#tree") .bind("before.jstree", function (e, data) { //       }) .jstree({ //   "plugins" : [ "themes","json_data" ], "json_data" : { "ajax" : { "url" : "tree.php", //   JSON "data" : function (n) { //   } } }, }) .bind("select_node.jstree", function(e, data){ //     //        window.location.hash = "view_" + data.rslt.obj.attr("id").replace("node_",""); }) }); 

We get a simple tree in the spirit of examples



Perhaps I will not describe the sheet from other examples. You can read them on the official website, but if you have any specific questions on the topic, I will answer with pleasure.