jsTree - The correct tree

Hello to all habrau. I want to tell you about a wonderful thing that allows you to draw a beautiful tree structure. On Habré JsTree, it was not once, but mostly it was a brief overview. I want to tell you about it in a bit more detail, because this jQuery plugin performs almost any tasks that can be associated with a tree.



So, the official website of this script: jstree.com , the latest version currently 0.9.8

For minimal work (without the support of XSLT and Cookies), it is enough to connect three files:
')
General style:
<link href="/js/jstree/tree_component.css" type="text/css" rel="stylesheet" />

And two js-scripts:



The tree itself should be of the following form:

<div id="tree">
<ul>
<li><a href="#"> 1</a></li>
<ul>
<li><a href="#"> 1</a></li>
<li><a href="#"> 2</a></li>
<li><a href="#"> 3</a></li>
</ul>
<li><a href="#"> 2</a></li>
<ul>
<li><a href="#"> 1</a></li>
</ul>
</ul>
</div>



This is the easiest option. The main thing here is not to forget that everything should be in the container, and not to set the id to the ul element itself. And the fact that inside the li tags should be nested links. In general, all options for the source to form a tree, with examples written here ( http://www.jstree.com/reference/_examples/1_datasources.html ). In brief there are the following features:

1. Predefined HTML (Predefined HTML)
2. Predefined JSON (Predefined JSON)
3. Predefined XML
4. Loading from a remote XML file (Loading from file)
5. Uploading JSON data from a remote script (Using async loading)

For the methods that use XML data, you must also connect the Sarissa library and the jQuery XSLT plugin

JsTree has a large flexible config. First, you can change topics, and on the fly. By default there are only 5 topics. There is no problem in changing the existing one, because changing the theme comes down to replacing pictures and adjusting the background-position. Secondly, there are more than two dozen callbacks, which allows you to bind the necessary action to almost any event. Thirdly, there are rules in which you can specify which elements can be selected, which are clickable, can they be dragged, deleted, and so on ...

A very handy thing is adding and removing on the fly. In addition, there is a context menu in which you can add any item and attach an icon and a function to it. In addition, the context menu may be different for each element or group of elements.

What I did with jsTree

In general, I was inspired to write an article by two desires: to share how this script works, because I had been tormented with it for a long time, and before that I had only heard about jQuery. And used by jsTree forced me the task at work. I work at the provider, and I write a face for managers, those. support and so on. There was a task to make a card of equipment. Those. there is a tsiska, from it there are switches, on switches other switches and naturally clients. In addition, when you click on a switch, you can view information about it, and if necessary change, add another switch to this switch, or delete it if it has no descendants. Here to solve this problem I used jsTree.

The hardest part was collecting the tree in html code. Because doing the swapping of descendants by ajax is too costly for the base, because by clicking it is necessary to take information about the switch and the clients (2 requests), so it was decided to immediately merge the table into an array to do everything you need with it. In addition, it was necessary to implement the search for switches and clients on the tree, which also added to their difficulties.

The result is this js-tree, which you see on the right. The icons are taken from the fugue package, the available switches are highlighted in green, inaccessible in red, in blue, with the human icon, clients. To create a fully planned functionality, I had to plunge into jsTree itself, and jQuery. It is a pity that I can not give a link, because the database provider is closed and only works from the inside.

I would be happy to describe in more detail what can be done with such a tool in hand, only to know if it will be in demand ...