Example of simple jsTree with static JSON data

Introduction
If you want to create a tree using JavaScript and HTML, you can use jsTree library for that. This is actually jQuery plugin that provides flexible and interaction tree view. This library is absolutely free to be used for your work. This library is free and can be configured quickly and without any difficulty as per your requirement. You can also use different theme for it to give nice look. The most important feature is you can extend or customise library if you face any limitation.

Different features of jsTree
This has multiple features that worth look at like

  • Drag and drop
  • Inline edit, create and delete
  • Keyboard navigation
  • Tri-state checkboxes
  • Customizable node types
  • Searching
  • And many more

For details of all available APIs, you can go though https://www.jstree.com/api/

How to create jsTree with JSON data
I’ll explain how create a basic tree view using jsTree library. For data supply, static JSON data will be used here for simplicity.

To get started, first you need to download the jsTree library and use CDNJS. I’ll be using CDNJS in my example.

We need to include the following in the html page.

  • jsTree theme css
  • HTML container element
  • jQuery [1.9.0 or greater]
  • jsTree js
  • Initializer of the tree

To populate the tree with a JSON object, we need to use $.jstree.defaults.core.data .

My example of the simple jsTree is below. I have highlighted the important piece of information that is tricky.
Simple JSTree

Code file is below, so that you copy it and can be tested.


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Simple jsTree</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script type="text/javascript">
        $(function () {

            var jsondata = [
                           { "id": "ajson1", "parent": "#", "text": "Simple root node" },
                           { "id": "ajson2", "parent": "#", "text": "Root node 2" },
                           { "id": "ajson3", "parent": "ajson2", "text": "Child 1" },
                           { "id": "ajson4", "parent": "ajson2", "text": "Child 2" },
            ];

            createJSTree(jsondata);
        });

        function createJSTree(jsondata) {            
            $('#SimpleJSTree').jstree({
                'core': {
                    'data': jsondata
                }
            });
        }
    </script>
</head>
<body>
    <div id="SimpleJSTree"></div>
</body>
</html>

The outcome will as like below
Simple jsTree Outcome

If you want to know how to create a jsTree using dynamic JSON data , please go through this article.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.