Answer on request: I have found a way to do it, although, it is a tad inefficient. What I've done is, I keep a state of all expanded nodes, and when I click on a node to expand it, I make an HTTP request, add the new nodes to the old one, redraw the entire tree and re-expand all the previously expanded nodes. I know this is inefficient, but it is the only way I could find without going into the nitty-gritty and essentially recreating the entire tree myself (which is just a glorified recursion application).

Here's the code I ran with when I posted the question. There is obviously room for improvement.

var expandedNodes = [];
var tree = [];

$(function()
{
    $.post("http://localhost:8000/getLevel1", function( data ) 
    {
        var JSObject = JSON.parse(data);

        for (j in JSObject)
            tree.push(JSObject[j]);

        createTree();
    });
});

function createTree(){

    var options = {
        bootstrap2: false, 
        showTags: true,
        levels: 0,
        data: tree,
        expandIcon: 'fa fa-chevron-right',
        collapseIcon: 'fa fa-chevron-down',
        onNodeExpanded: nodeExpand,
        onNodeCollapsed: nodeCollapse,
        onNodeSelected: nodeSelect,
        onNodeUnselected: nodeUnselect
    }
    $('#treeview').treeview(options);
    for (node in expandedNodes)
        $('#treeview').treeview('expandNode', [ expandedNodes[node], { levels: 0, silent: true } ]);
    $('#treeview').treeview('expandNode', 0, { silent: true } );
};


function nodeExpand(event, data)
{
    expandedNodes.push(data.nodeId);
    var requestObject = []
    requestObject.push(data.text);

    var parent, dummy = data;
    while ((parent = $('#treeview').treeview('getParent', dummy.nodeId))["nodeId"] != undefined)
        {
        requestObject.push(parent.text);
        dummy = parent;
    }

    $.post("http://localhost:8000/getNode?param=" + JSON.stringify(requestObject), function(retVal) 
    {
        var JSObject = JSON.parse(retVal);
        var node = findNode(requestObject);
        node.nodes = JSObject;
        createTree();
    });
}

function nodeCollapse(event, data)
{
    var index = expandedNodes.indexOf(data.nodeId);
    if (index > -1) 
        expandedNodes.splice(index, 1);
}

function nodeSelect(event, data)
{
    if (data.state.expanded == true)
        $('#treeview').treeview('collapseNode', data.nodeId);
    else
        $('#treeview').treeview('expandNode', data.nodeId);
    //$('#treeview').treeview('unselectNode', [ data.nodeId, { silent: true } ]);
}

function nodeUnselect(event, data)
{
}

function findNode(array)
{
    var searchIn = tree; //array
    var lastFound = tree;
    for (var i = array.length - 1; i >= 0; i--)
        {
        var obj = searchInObject(searchIn, array[i]);
        searchIn = obj.nodes;
        lastFound = obj;
    }

    return lastFound;
}

function searchInObject(objectArray, string)
{
    for (var index in objectArray)
        if (objectArray[index].text == string)
            return objectArray[index];
}

$(document).ready(function () {
    var trigger = $('.hamburger'),
    overlay = $('.overlay'),
    isClosed = false;
    hamburger_cross();
    $('#wrapper').toggleClass('toggled');

    trigger.click(function () {
        hamburger_cross();      
    });

    function hamburger_cross() {

        if (isClosed == true) {          
            overlay.hide();
            trigger.removeClass('is-open');
            trigger.addClass('is-closed');
            isClosed = false;
            $('#open_arrow').removeClass('fa-chevron-circle-left').addClass('fa-chevron-circle-right');
        } else {   
            overlay.show();
            trigger.removeClass('is-closed');
            trigger.addClass('is-open');
            isClosed = true;
            $('#open_arrow').removeClass('fa-chevron-circle-right').addClass('fa-chevron-circle-left');
        }
    }

    $('[data-toggle="offcanvas"]').click(function () {
        $('#wrapper').toggleClass('toggled');

    });  
});

Point of interest would be nodeExpand and createTree methods.

Answer from Grimson on Stack Overflow
🌐
jQuery Script
jqueryscript.net › jquery plugins › jquery other plugins
Dynamic Tree View Plugin With jQuery And Bootstrap | Free jQuery Plugins
// check all nodes $('#default-tree').treeview('checkAll', { silent: true }); // checks a given node $('#default-tree').treeview('checkNode', [ nodeId, { silent: true } ]); // clears search results $('#default-tree').treeview('clearSearch'); // collapses all nodes $('#default-tree').treeview('collapseAll', { silent: true }); // collapses a given node $('#default-tree').treeview('collapseNode', [ nodeId, { silent: true, ignoreChildren: false } ]); // expands all nodes $('#default-tree').treeview('expandAll', { silent: true }); // expands a given node $('#default-tree').treeview('expandNode', [
🌐
MDBootstrap
mdbootstrap.com › standard › tree view
Bootstrap Treeview - examples & tutorial
Expand your treeview to the particular list using the expand(ID) method. ... <div class="row justify-content-center mb-3"> <div class="col-md-3"> <button data-mdb-ripple-init type="button" class="btn btn-primary" id="expand-example-button"> Expand first list </button> </div> </div> <div class="row"> <div data-mdb-treeview-init class="treeview" id="expand-example"> <ul> <li>One</li> <li>Two</li> <li> <a>Three</a> <ul id="expand-example-item"> <li>Second-one</li> <li>Second-two</li> <li> <a>Second-three</a> <ul> <li> <a>Third-one</a> <ul> <li>Fourth-one</li> <li>Fourth-two</li> <li>Fourth-three</li> </ul> </li> <li>Third-two</li> <li> <a>Third-three</a> <ul> <li>Fourth-one</li> <li>Fourth-two</li> <li>Fourth-three</li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </div>
Top answer
1 of 1
3

Answer on request: I have found a way to do it, although, it is a tad inefficient. What I've done is, I keep a state of all expanded nodes, and when I click on a node to expand it, I make an HTTP request, add the new nodes to the old one, redraw the entire tree and re-expand all the previously expanded nodes. I know this is inefficient, but it is the only way I could find without going into the nitty-gritty and essentially recreating the entire tree myself (which is just a glorified recursion application).

Here's the code I ran with when I posted the question. There is obviously room for improvement.

var expandedNodes = [];
var tree = [];

$(function()
{
    $.post("http://localhost:8000/getLevel1", function( data ) 
    {
        var JSObject = JSON.parse(data);

        for (j in JSObject)
            tree.push(JSObject[j]);

        createTree();
    });
});

function createTree(){

    var options = {
        bootstrap2: false, 
        showTags: true,
        levels: 0,
        data: tree,
        expandIcon: 'fa fa-chevron-right',
        collapseIcon: 'fa fa-chevron-down',
        onNodeExpanded: nodeExpand,
        onNodeCollapsed: nodeCollapse,
        onNodeSelected: nodeSelect,
        onNodeUnselected: nodeUnselect
    }
    $('#treeview').treeview(options);
    for (node in expandedNodes)
        $('#treeview').treeview('expandNode', [ expandedNodes[node], { levels: 0, silent: true } ]);
    $('#treeview').treeview('expandNode', 0, { silent: true } );
};


function nodeExpand(event, data)
{
    expandedNodes.push(data.nodeId);
    var requestObject = []
    requestObject.push(data.text);

    var parent, dummy = data;
    while ((parent = $('#treeview').treeview('getParent', dummy.nodeId))["nodeId"] != undefined)
        {
        requestObject.push(parent.text);
        dummy = parent;
    }

    $.post("http://localhost:8000/getNode?param=" + JSON.stringify(requestObject), function(retVal) 
    {
        var JSObject = JSON.parse(retVal);
        var node = findNode(requestObject);
        node.nodes = JSObject;
        createTree();
    });
}

function nodeCollapse(event, data)
{
    var index = expandedNodes.indexOf(data.nodeId);
    if (index > -1) 
        expandedNodes.splice(index, 1);
}

function nodeSelect(event, data)
{
    if (data.state.expanded == true)
        $('#treeview').treeview('collapseNode', data.nodeId);
    else
        $('#treeview').treeview('expandNode', data.nodeId);
    //$('#treeview').treeview('unselectNode', [ data.nodeId, { silent: true } ]);
}

function nodeUnselect(event, data)
{
}

function findNode(array)
{
    var searchIn = tree; //array
    var lastFound = tree;
    for (var i = array.length - 1; i >= 0; i--)
        {
        var obj = searchInObject(searchIn, array[i]);
        searchIn = obj.nodes;
        lastFound = obj;
    }

    return lastFound;
}

function searchInObject(objectArray, string)
{
    for (var index in objectArray)
        if (objectArray[index].text == string)
            return objectArray[index];
}

$(document).ready(function () {
    var trigger = $('.hamburger'),
    overlay = $('.overlay'),
    isClosed = false;
    hamburger_cross();
    $('#wrapper').toggleClass('toggled');

    trigger.click(function () {
        hamburger_cross();      
    });

    function hamburger_cross() {

        if (isClosed == true) {          
            overlay.hide();
            trigger.removeClass('is-open');
            trigger.addClass('is-closed');
            isClosed = false;
            $('#open_arrow').removeClass('fa-chevron-circle-left').addClass('fa-chevron-circle-right');
        } else {   
            overlay.show();
            trigger.removeClass('is-closed');
            trigger.addClass('is-open');
            isClosed = true;
            $('#open_arrow').removeClass('fa-chevron-circle-right').addClass('fa-chevron-circle-left');
        }
    }

    $('[data-toggle="offcanvas"]').click(function () {
        $('#wrapper').toggleClass('toggled');

    });  
});

Point of interest would be nodeExpand and createTree methods.

🌐
Webslesson
webslesson.info › 2017 › 05 › make-treeview-using-bootstrap-treeview-ajax-jquery-with-php.html
Make Treeview using Bootstrap Treeview Ajax JQuery with PHP | Webslesson
By using this method we can called Bootstrap Plugin for make Hierarchical Treeview. Under this method we have write data option in this option we can define data which we have received from server. This data is nothing by Array of object and this plugin will display that data on web page in Treeview format. So this way we can make simple dynamic treeview for our web application by using Bootstrap Treeview plugin in PHP Script with Ajax JQuery.
🌐
Bootsnipp
bootsnipp.com › snippets › ypNAe
Bootstrap Snippet BootStrap TreeView using HTML CSS ...
$.fn.extend({ treed: function (o) { var openedClass = 'glyphicon-minus-sign'; var closedClass = 'glyphicon-plus-sign'; if (typeof o != 'undefined'){ if (typeof o.openedClass != 'undefined'){ openedClass = o.openedClass; } if (typeof o.closedClass != 'undefined'){ closedClass = o.closedClass; } }; //initialize each of the top levels var tree = $(this); tree.addClass("tree"); tree.find('li').has("ul").each(function () { var branch = $(this); //li with children ul branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>"); branch.addClass('branch'); branch.on('click', function (e)
🌐
MDBootstrap
mdbootstrap.com › standard › tree view
Bootstrap 4 Treeview - examples & tutorial.
Expand your treeview to the particular list using the expand(ID) method. ... <div class="row justify-content-center mb-3"> <div class="col-md-3"> <button data-mdb-ripple-init type="button" class="btn btn-primary" id="expand-example-button"> Expand first list </button> </div> </div> <div class="row"> <div data-mdb-treeview-init class="treeview" id="expand-example"> <ul> <li>One</li> <li>Two</li> <li> <a>Three</a> <ul id="expand-example-item"> <li>Second-one</li> <li>Second-two</li> <li> <a>Second-three</a> <ul> <li> <a>Third-one</a> <ul> <li>Fourth-one</li> <li>Fourth-two</li> <li>Fourth-three</li> </ul> </li> <li>Third-two</li> <li> <a>Third-three</a> <ul> <li>Fourth-one</li> <li>Fourth-two</li> <li>Fourth-three</li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </div>
🌐
jQuery Script
jqueryscript.net › demo › Dynamic-Tree-View-Plugin-jQuery-Bootstrap
Bootstrap Tree View Plugin Examples
A jQuery treeview plugin that helps you render a dynamic, checkable, filterable, collapsible, vertical hierarchical tree from a JSON schema.
🌐
Koding Made Simple
kodingmadesimple.com › 2018 › 02 › create-treeview-bootstrap-jquery.html
How to Create Treeview with Bootstrap and jQuery
Bootstrap Scrollable Table with Fixed Header Example · It's a hassle-free way to build a hierarchical tree-view using the bootstrap treeview plug-in. It works well with Apps that use bootstrap. I hope this post is useful for you.
🌐
YouTube
youtube.com › watch
Create Treeview with Bootstrap Treeview Ajax JQuery in PHP - YouTube
In this video we have describe How to Create Treeview using bootstrap treeview, PHP and Mysql. We have make Dynamic Tree with Bootstrap Treeview, PHP and Mys...
Published   May 10, 2017
Find elsewhere
🌐
W3Schools
w3schools.com › howto › howto_js_treeview.asp
How To Create a Tree View
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML and more.
🌐
Phpflow
phpflow.com › php › treeview-using-bootstrap-treeview-php-mysql
Treeview using Bootstrap Treeview, PHP and MySQL - Phpflow.com
August 30, 2020 - So we are using below files to create dynamic treeview structure using bootstrap jquery tree plugin, php and mysql.
🌐
Jonmiles
jonmiles.github.io › bootstrap-treeview
Bootstrap Tree View
Bootstrap Tree View · Default · Collapsed · Expanded · Blue Theme · Custom Icons · Tags as Badges · No Border · Colourful · Node Overrides
🌐
YouTube
youtube.com › watch
How to Add New Node in Dynamic Treeview using PHP Ajax - YouTube
Learn How to Create or Add new node dynamically into Treeview using PHP Mysql Ajax with Bootstrap Treeview plugin. How to make dynamic tree view in PHP with ...
Published   September 26, 2018
🌐
ItSolutionstuff
itsolutionstuff.com › post › create-dynamic-treeview-example-using-jquery-ajax-in-php-mysqlexample.html
PHP MySQL Create Dynamic Treeview Example - ItSolutionstuff.com
May 14, 2024 - Also we will create database configuration file: ... $data=["id"=>"0","name"=>"No Members present in list","text"=>"No Members is present in list","nodes"=>[]]; ... Now you are ready to run this example.
🌐
MDBootstrap
mdbootstrap.com › standard › material design for bootstrap 5 & vanilla javascript
Treeview with dynamic data - Material Design for Bootstrap
We are trying to use treeview with ... https://github.com/jonmiles/bootstrap-treeview, and it works using : $('#treeView').treeview({ data: data.data, enableLinks: true });...
🌐
Mobirise
mobirise.com › bootstrap-template › treeview-example.html
Bootstrap Treeview Example. Generate any template with AI.
September 23, 2024 - Free AI Bootstrap 5 Treeview Example and 9900+ Bootstrap HTML CSS Examples, Pages and Codes. Free Download!
🌐
DevExpress
demos.devexpress.com › bootstrap › Navigation › TreeView.aspx
Bootstrap TreeView Demo | DevExpress Bootstrap Controls for ASP.NET
<dx:BootstrapTreeView runat="server"> <Nodes> <dx:BootstrapTreeViewNode Text="Home" Expanded="true"> <Nodes> <dx:BootstrapTreeViewNode Text="News"> <Nodes> <dx:BootstrapTreeViewNode Text="For Developers"> </dx:BootstrapTreeViewNode> <dx:BootstrapTreeViewNode Text="Website news"> </dx:BootstrapTreeViewNode> </Nodes> </dx:BootstrapTreeViewNode> <dx:BootstrapTreeViewNode Text="Our Mission"> </dx:BootstrapTreeViewNode> </Nodes> </dx:BootstrapTreeViewNode> <dx:BootstrapTreeViewNode Text="Products"> <Nodes> <dx:BootstrapTreeViewNode Text="Subscriptions / Packs"> </dx:BootstrapTreeViewNode> <dx:Boots
🌐
CodePen
codepen.io › paulch › pen › OdLoJR
Bootstrap TreeView Example
var defaultData = [ { text: 'Parent 1', href: '#parent1', tags: ['4'], nodes: [ { text: 'Child 1', href: '#child1', tags: ['2'], nodes: [ { text: 'Grandchild 1', href: '#grandchild1', tags: ['0'] }, { text: 'Grandchild 2', href: '#grandchild2', tags: ['0'] } ] }, { text: 'Child 2', href: '#child2', tags: ['0'] } ] }, { text: 'Parent 2', href: '#parent2', tags: ['0'] }, { text: 'Parent 3', href: '#parent3', tags: ['0'] }, { text: 'Parent 4', href: '#parent4', tags: ['0'] }, { text: 'Parent 5', href: '#parent5' , tags: ['0'] } ]; $('#treeview1').treeview({ data: defaultData, collapseIcon:'fas fa-minus', expandIcon:'fas fa-plus' });