How to use jsTree

By : Akshar Raaj

Using jsTree

Problem Statement:

To show a TreeView (hierarchical view of information) structure in a Web page.

I came across this problem when i was required to develop a web application which allows its users to store contacts and their related information(name, email, phone). The contacts would go into a folder and any folder can have any number of subfolders and any subfolder can have any number of contacts. Also, the folder structure can be nested as many levels deep as the user wants. So, how do you show the folder structure in a Web Page?

You might encounter a lot of similar situation.

For the problem stated above, What we need is a Treeview structure.

  1. Display the first level folders(say Level 1 folder).

  2. User expands a Level 1 folder, expand and show all the subfolders within it.

  3. User expands one of the subfolder(Level 2 folder), expand and show all the subfolders(Level 3 folder) within this subfolder and so on.

While searching for the solution to this problem scenario, i came across jsTree.

jsTree is a jquery plugin which allows displaying a tree structure in a web page. In this post we will see how to use it.

We will be dividing our work in two parts.

  1. Illustrating basic use of jsTree. (A simple example)
  2. Solving the problem stated above (using Django)

Basic use of jsTree:

The example used here is not a practical example but as already specified its just for illustration purpose and to get a basic understanding of jsTree.

Our example:

  1. Consider two categories to be shown on the page.
  2. These categories can be considered synonymous to top level folders.
  3. Lets say the two categories as "Search Engines" and "Networking Sites".
  4. Under "Search Engines" we put Google, Bing and Yahoo. "Google", "Bing" and "Yahoo" form second level folder (immediately below top level folder).
  5. Under "Networking Sites" we put Facebook and Twitter. So, "Facebook" and "Twitter" form second level folder.
  6. Now under Google, we put Gmail, YouTube and Orkut. These form the third level folders.
  7. We must also see some actions that can be performed while using jsTree. So, we will take the user to the link for these elements on being selected, provided the link exists.

Lets create an html page which illustrates this example.

I have put this code at github. You can get the entire code at https://github.com/akshar-raaj/Using-jsTree

Let's name the html page as try_jstree.html . Initially the page is:

<html>
    <head>
        <title>Use jsTree</title>
    </head>
    <body>
        <div id="treeViewDiv">
        </div>
    </body>
</html>

Since jsTree is a jquery plugin, it requires jquery to be included in the page before we can use jsTree. So, we downloaded jquery.js and put it in the folder containing the html(try_jstree.html) file. Then we need to download jsTree(named jquery.jstree.js) and we put it in the same folder. Some folders (themes, docs etc.) comes while downloading jsTree. Put all these folders in our working folder.

We have our first commit at this point.

Now, include jquery.js and jquery.jstree.js in the file so that we can use them. At this point code looks like:

<html>
    <head>
        <title>Use jsTree</title>
        <script src="jquery.js">
        </script>
        <script src="jquery.jstree.js">
        </script>
        <script>
            $(document).ready(function(){

            });
        </script>
    </head>
    <body>
        <div id="treeViewDiv">
        </div>
    </body>
</html>

We have our second commit at this point.(commit 4c7c7233ccb4d0e2e463375af9c579374ee73624)

Next we need to select the div where the tree will be displayed. We use jquery selector for it. On the selected element we call jstree() and need to pass the required values.

Here, we will be using json data to populate our tree.

So, the fields needed by jstree() in such case are:

  1. json_data - This is an object.
  2. plugins - This is a list.

Hence at this point our code looks like:

<html>
    <head>
        <title>Use jsTree</title>
        <script src="jquery.js">
        </script>
        <script src="jquery.jstree.js">
        </script>
        <script>
            $(document).ready(function(){
                $("#treeViewDiv").jstree({
                    "json_data" : {

                    },
                    "plugins" : []
                });
            });
        </script>
    </head>
    <body>
        <div id="treeViewDiv">
        </div>
    </body>
</html>

We have our third commit at this point.(commit fd47c9784b7510a8cc3de9209054fbcc39fbac9b)

Now, "json_data" requires an object having a field "data". "data" is a list of the objects which we want displayed on the web page. So, "json_data" would look like

"json_data": {
    "data":[]
}

Each entry in "data" is the actual object to be displayed and used on the webpage. So, we will put the objects in "data" so that they can be displayed on the page.

So, "json_data" becomes

"json_data" : {
                        "data":[
                            {
                                "data" : "Search engines"
                            },
                            {
                                "data" : "Networking sites"
                            }
                        ]
              }

Also, for using json_data we need a plugin named "json_data". For displaying the tree as a tree like structure, we need the plugin named "themes".And for taking the user to a new page upon selecting an entry(which we will be illustrating soon), we need a plugin named "ui". So, "plugins" become

"plugins" : [ "themes", "json_data", "ui" ]

At this point our code is:

<html>
    <head>
        <title>Use jsTree</title>
        <script src="jquery.js">
        </script>
        <script src="jquery.jstree.js">
        </script>
        <script>
            $(document).ready(function(){
                $("#treeViewDiv").jstree({
                    "json_data" : {
                        "data":[
                            {
                                "data" : "Search engines"
                            },
                            {
                                "data" : "Networking sites"
                            }
                        ]
                    },
                    "plugins" : [ "themes", "json_data", "ui" ]
                });
            });
        </script>
    </head>
    <body>
        <div id="treeViewDiv">
        </div>
    </body>
</html>

We have our fourth commit at this point(commit 3e32dfeefe1adbddf3dc88d4a68e93e834996c0e). Check your page now. You should be able to see these entries on the page.

Next, we need to add subelements to the elements. This is done by adding a "children" attribute to the object with which we need to attach the subelement. "children" is an array containing all the childs. We will associate the subelements as described earlier for our example. In the same step we will add subelements(level 3 elements) to the subelements(level 2 elements).

At this point, our code looks like

<html>
    <head>
        <title>Use jsTree</title>
        <script src="jquery.js">
        </script>
        <script src="jquery.jstree.js">
        </script>
        <script>
            $(document).ready(function(){
                $("#treeViewDiv").jstree({
                    "json_data" : {
                        "data":[
                            {
                                "data" : "Search engines",
                                "children" :[
                                             {"data":"Yahoo"},
                                             {"data":"Bing"},
                                             {"data":"Google", "children":[{"data":"Youtube"},{"data":"Gmail"},{"data":"Orkut"}]}
                                            ]
                            },
                            {
                                "data" : "Networking sites",
                                "children" :[
                                    {"data":"Facebook"},
                                    {"data":"Twitter"}
                                ]
                            }
                        ]
                    },
                    "plugins" : [ "themes", "json_data", "ui" ]
                });
            });
        </script>
    </head>
    <body>
        <div id="treeViewDiv">
        </div>
    </body>
</html>

Check you page now.

You should be seeing a Treeview structure in your page. The screenshot for what your page should look like is here. We have our fifth commit at this point(commit 5276b111ee250220a7d422fe86142f16bb45a1cc).

Next we want to add some additional information(fields) about each object, so that we can operate on those fields. The additional information is stored as field "metadata". "metadata" is again an object containing key-value pairs for the additional information. So, the structure of "metadata" would be

"metadata":{}

Let's name the information we want to store as "href". Lets store the value for this key as the url(We need it for our example). For object having "data" as "Gmail", its "metadata" becomes

"metadata":{"href":"www.gmail.com"}

Similarly for all the objects, and our code would look like

<html>
    <head>
        <title>Use jsTree</title>
        <script src="jquery.js">
        </script>
        <script src="jquery.jstree.js">
        </script>
        <script>
            $(document).ready(function(){
                $("#treeViewDiv").jstree({
                    "json_data" : {
                        "data":[
                            {
                                "data" : "Search engines",
                                "children" :[
                                             {"data":"Yahoo", "metadata":{"href":"http://www.yahoo.com"}},
                                             {"data":"Bing", "metadata":{"href":"http://www.bing.com"}},
                                             {"data":"Google", "children":[{"data":"Youtube", "metadata":{"href":"http://youtube.com"}},{"data":"Gmail", "metadata":{"href":"http://www.gmail.com"}},{"data":"Orkut","metadata":{"href":"http://www.orkut.com"}}], "metadata" : {"href":"http://youtube.com"}}
                                            ]
                            },
                            {
                                "data" : "Networking sites",
                                "children" :[
                                    {"data":"Facebook", "metadata":{"href":"http://www.fb.com"}},
                                    {"data":"Twitter", "metadata":{"href":"http://twitter.com"}}
                                ]
                            }
                        ]
                    },
                    "plugins" : [ "themes", "json_data", "ui" ]
                });
            });
        </script>
    </head>
    <body>
        <div id="treeViewDiv">
        </div>
    </body>
</html>

At this point we have our sixth commit(commit 8bad3a8688c1e848fee4cda99d82f2e369d87f92).

Next we need to attach handler to events(Our event would be selection of any element in the Tree structure, and our handler should take us to the "href" for that element).

We accomplish this using bind(), similar to how we use in jquery script. The event we are concerned with is "select_node.jstree". So, the bind() function would look like:

bind("select_node.jstree", function(e, data){})

Whenever an element is selected, we want to get its "href" and take the user to that "href". Also, we make sure that we take the user to new page only when "href" is defined for the element, else we show an alert telling that "href" is not defined for the element.

We attach this bind() function with the div containing the Treeview structure. So, our final code looks like

<html>
    <head>
        <title>Use jsTree</title>
        <script src="jquery.js">
        </script>
        <script src="jquery.jstree.js">
        </script>
        <script>
            $(document).ready(function(){
                $("#treeViewDiv").jstree({
                    "json_data" : {
                        "data":[
                            {
                                "data" : "Search engines",
                                "children" :[
                                             {"data":"Yahoo", "metadata":{"href":"http://www.yahoo.com"}},
                                             {"data":"Bing", "metadata":{"href":"http://www.bing.com"}},
                                             {"data":"Google", "children":[{"data":"Youtube", "metadata":{"href":"http://youtube.com"}},{"data":"Gmail", "metadata":{"href":"http://www.gmail.com"}},{"data":"Orkut","metadata":{"href":"http://www.orkut.com"}}], "metadata" : {"href":"http://youtube.com"}}
                                            ]
                            },
                            {
                                "data" : "Networking sites",
                                "children" :[
                                    {"data":"Facebook", "metadata":{"href":"http://www.fb.com"}},
                                    {"data":"Twitter", "metadata":{"href":"http://twitter.com"}}
                                ]
                            }
                        ]
                    },
                    "plugins" : [ "themes", "json_data", "ui" ]
                }).bind("select_node.jstree", function(e, data)
                    {
                        if(jQuery.data(data.rslt.obj[0], "href"))
                        {
                            window.location=jQuery.data(data.rslt.obj[0], "href");
                        }
                        else
                        {
                            alert("No href defined for this element");
                        }
                    })
            });
        </script>
    </head>
    <body>
        <div id="treeViewDiv">
        </div>
    </body>
</html>

This is the final code and the last commit(commit ff886547287eec114d7020ad66718cae83a1ee37).

We will see how to use jsTree with django, and solve our problem in the next post.



Can we help you build amazing apps? Contact us today.

Comments

Convenience Store Inventory

I really like your post it's really informative for us
thanks to with us!!!

commmenttor
t

thx for the metadata infos!

commmenttor
pioupiou 8th Dec., 2011

merci je galérais avec les autres tutos trouvés sur le web!

commmenttor
mansoor 11th Dec., 2011

hai..
thank u so much for your knowledge...
we well explained and good scenario...
actually i am facing a sort of issue...
once again thank u so much...

commmenttor
fawe 13th Feb., 2012

jQuery not defined

commmenttor
nateDawg 15th Feb., 2012

Great Article!!! THANK YOU!!!

commmenttor
Arvin D

Awesome post, thank you!!

commmenttor
Victor 26th Feb., 2012

Thank you for a superbly lucid step-through! At last, after a day of struggling through documents that appear clear but impart no useful understanding; of trying this, that, and the other and getting nowhere -- you have shown me the light! Thank you!!

commmenttor
Andy 28th Feb., 2012

Great way to display how to use JSON with jsTreeView! Much appreciated!

commmenttor
hetal 27th March, 2012

Nice explanation.

commmenttor
Vaibhav 10th April, 2012

Thank you very much :) for this step by step information

commmenttor
Tongan 18th June, 2012

Great! Thanks a lot!

commmenttor
Praveen 29th June, 2012

very neat . awesome. Thanks.

commmenttor
Daniel Caillibaud 4th July, 2012

Thanks for the full example with github repository. I was wondering why I was unable to display a tree with all my tests and I saw that the pb is the actual jstree.js wich seems broken !

git clone https://github.com/akshar-raaj/Using-jsTree.git
cd Using-jsTree/basic_example/
# test try_jstree.html in your browser => tree is OK
wget https://raw.github.com/vakata/jstree/v.1.0/dist/jstree.js
sed -e 's/jquery.jstree.js/jstree.js/' < try_jstree.html > try_jstree.dist.html
# try_jstree.dist.html doesn't display anything ! (but no errors in firebug console)

Actual distributed jstree.js (v1.0.0) seems really different from yours (1.0-rc3), and I didn't find how to display a tree with this 1.0.0 (all samples from jstree.com fails), so I'll use your rc3 !

commmenttor
Daniel Caillibaud 4th July, 2012

the sed command in the last post is broken (because of &lt; use), the correct one is :

sed -e 's/jquery.jstree.js/jstree.js/' &lt; try_jstree.html &gt; try_jstree.dist.html

(preview comment button could be nice ;-) )

commmenttor
Anon 25th July, 2012

Absolutely right the RC version works currently while1 the 1.0 release does not. You saved me a bunch of hair pulling!

commmenttor
Henry Retter

Thanks for this post. It's what I was looking for to get going.

commmenttor
Mubashar 30th Oct., 2012

Dear All,

I have an issue. I am using jstree plugin in my project for tree view on some sort of data.

I want to auto open the root tree on page load. It's not open by default.

How I can achieve this functionality ?

Can any body help me ?

commmenttor
Tomasz 28th Nov., 2012

Thank you for the working code and the great article! Excellent.

commmenttor
Akshar Raaj 29th Nov., 2012

Mubashar,

You can set "state":"open" on any node that you want to expand on page load.

commmenttor
Bala 5th Dec., 2012

This article is extremely important for all. And, it doesn't work in IE 8 as intended. Any help please ?

commmenttor
Jaganadh G

Hi
Do you have any examples for Django and Jstree

commmenttor
K Snyder 1st Feb., 2013

Need assistance with JsTree loading two tables from the Northwind database. Can we hire your services?

commmenttor
Kurt

Excellent post! I had to infer a couple of things to generate code in a style somewhat more like I would normally do, but that's just the way of things.

I have been trying to get a handle on JSTree. This post did more to help that than any other I've found to date.

Thanks!

commmenttor
Kurt

One minor issue though. The expanding "code windows" are cool UNLESS the text in them runs off the screen, in Chrome, I was unable to "scroll" to the right because the scroll bar would disappear as soon as I clicked on it.

Only one piece of text was not fully visible so it wasn't much of a problem but I thought you might like to know.

Thanks again!

commmenttor
latj 12th April, 2013

1.5 years later- this post is still more useful than jstree docs for someone looking for a quick start.

commmenttor
Anon 14th May, 2013

You seriously commit that much?

commmenttor
Egor 11th June, 2013

thanks a lot ;)

commmenttor
kishore 17th June, 2013

While switching over from one parent to another parent node i m displaying a view in a div. how to check unsaved data and if there is any unsaved data in the view. it should show warning message. I am using mvc3 in our application.

commmenttor
Anil 13th Sept., 2013

Very Useful blog... :)

commmenttor
Priyanka 16th Sept., 2013

Very nicely explained. Thanks for the article.
Pls illustrate how to take user to a new page upon selecting an entry in tree.

commmenttor
Milan Tomic 11th Oct., 2013

Thank you so much for this post, and easy tutorial!!
You rock!

commmenttor
Gustove 26th April, 2014

Thank you for sharing the code, but how to custumize the child icon appearance, for example i want the childeren icon to be pdf icon. Can you give an example code?

commmenttor
toko bunga bandung

jstree is awesome, but i can configure how to make search plugin result a match node properly.

commmenttor
Post a comment Name :

Email :

Your site url:

Comment :

© Agiliq, 2009-2012