jstree.js

/**
 * Check if the page content has been loaded completely.
 */
$(function () {
    /**
     * Initialize the jsTree instance on the HTML content.
     * Display the tree view.
     */
    $("#tree-view-from-html").jstree();
    /**
     * Initialize the jsTree instance to create tree view
     * out of JSON content.
     */
    $("#tree-view-from-json").jstree({
        core: {
            /**
             * Add the JSON content inside the "data" attribute.
             */
            data: [
                {
                    text: "JSON Node 1",
                    state: {
                        opened: true,
                    },
                    children: [
                        {
                            text: "JSON Node 1.1",
                        },
                        {
                            text: "JSON Node 1.2",
                        },
                        {
                            text: "JSON Node 1.3",
                        },
                        {
                            text: "JSON Node 1.4",
                        },
                        {
                            text: "JSON Node 1.5",
                        },
                    ],
                },
                {
                    text: "JSON Node 2",
                    state: {
                        opened: true,
                    },
                    children: [
                        {
                            text: "JSON Node 2.1",
                        },
                        {
                            text: "JSON Node 2.2",
                        },
                        {
                            text: "JSON Node 2.3",
                        },
                        {
                            text: "JSON Node 2.4",
                        },
                        {
                            text: "JSON Node 2.5",
                        },
                    ],
                },
            ],
        },
    });
});