You are here

Example of simple jsTree with static JSON data

Submitted by Asif Nowaj, Last Modified on 2019-11-28

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

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.3.8/themes/default/style.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/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. You can find many more example code of jstree feature at the right hand side bar.

Discussion or Comment

If you have anything in mind to share, please bring it in the discussion forum here.

https://forum.everyething.com/jstree-f33/