Bootstrap treeview how auto expand parent nodes?

0
votes

I am using bootstrap treeview which is mostly working well, however when I load a new page from the menu link I want all the parent nodes of the selected child node to expand, does anyone know how to do this?

Thanks,

Rob

Here is some code...

This is the array that is coming from my database and works fine in showing all the treeview items...

If you look at id 127 in the array you will notice that 'expanded' for the child is true

"state": { "checked": false, "disabled": false, "expanded": true, "selected": true }

But all the parent nodes of this child are set as false by default as these are not the selected item/page.

So how can I make all the parent nodes of this child also expand?

I am guessing there is a way to loop through the array find the selected child and then go back through and select its parent id and set that as expanded???

I'm just not sure where to start! :-(

      [{
     "id": 107,
     "level_name": "How To Use The Knowledge Base",
     "level_id": 1,
     "parent_id": 0,
     "page_slug": "how-to-use-the-knowledge-base",
     "page_id": 3,
     "text": "How To Use The Knowledge Base",
     "href": "\/website\/how-to-use-the-knowledge-base",
     "selectedIcon": "",
     "selectable": true,
     "state": {
         "checked": false,
         "disabled": false,
         "expanded": false,
         "selected": false
     },
     "nodes": [{
         "id": 110,
         "level_name": "Ask An Expert",
         "level_id": 4,
         "parent_id": 1,
         "page_slug": "ask-an-expert-1",
         "page_id": 6,
         "text": "Ask An Expert",
         "href": "\/website\/ask-an-expert-1",
         "selectedIcon": "",
         "selectable": true,
         "state": {
             "checked": false,
             "disabled": false,
             "expanded": false,
             "selected": false
         }
     }, {
         "id": 115,
         "level_name": "Meet The Team",
         "level_id": 9,
         "parent_id": 1,
         "page_slug": "meet-the-team",
         "page_id": 11,
         "text": "Meet The Team",
         "href": "\/website\/meet-the-team",
         "selectedIcon": "",
         "selectable": true,
         "state": {
             "checked": false,
             "disabled": false,
             "expanded": false,
             "selected": false
         }
     }]
 }, {
     "id": 109,
     "level_name": "Explore The Sustainability Standards",
     "level_id": 3,
     "parent_id": 0,
     "page_slug": "explore-the-sustainability-standards",
     "page_id": 5,
     "text": "Explore The Sustainability Standards",
     "href": "\/website\/explore-the-sustainability-standards",
     "selectedIcon": "",
     "selectable": true,
     "state": {
         "checked": false,
         "disabled": false,
         "expanded": false,
         "selected": false
     },
     "nodes": [{
         "id": 111,
         "level_name": "Principle 1 Senior Management Commitment",
         "level_id": 5,
         "parent_id": 3,
         "page_slug": "principle-1-senior-management-commitment",
         "page_id": 7,
         "text": "Principle 1 Senior Management Commitment",
         "href": "\/website\/principle-1-senior-management-commitment",
         "selectedIcon": "",
         "selectable": true,
         "state": {
             "checked": false,
             "disabled": false,
             "expanded": false,
             "selected": false
         }
     }, {
         "id": 112,
         "level_name": "Principle 2 Sourcing And Supply Chain",
         "level_id": 6,
         "parent_id": 3,
         "page_slug": "principle-2-sourcing-and-supply-chain",
         "page_id": 8,
         "text": "Principle 2 Sourcing And Supply Chain",
         "href": "\/website\/principle-2-sourcing-and-supply-chain",
         "selectedIcon": "",
         "selectable": true,
         "state": {
             "checked": false,
             "disabled": false,
             "expanded": false,
             "selected": false
         }
     }, {
         "id": 113,
         "level_name": "Principle 3 Performance Measures",
         "level_id": 7,
         "parent_id": 3,
         "page_slug": "principle-3-performance-measures",
         "page_id": 9,
         "text": "Principle 3 Performance Measures",
         "href": "\/website\/principle-3-performance-measures",
         "selectedIcon": "",
         "selectable": true,
         "state": {
             "checked": false,
             "disabled": false,
             "expanded": false,
             "selected": false
         },
         "nodes": [{
             "id": 116,
             "level_name": "Social Accountability",
             "level_id": 10,
             "parent_id": 7,
             "page_slug": "social-accountability",
             "page_id": 12,
             "text": "Social Accountability",
             "href": "\/website\/social-accountability",
             "selectedIcon": "",
             "selectable": true,
             "state": {
                 "checked": false,
                 "disabled": false,
                 "expanded": false,
                 "selected": false
             }
         }, {
             "id": 117,
             "level_name": "Environmental",
             "level_id": 11,
             "parent_id": 7,
             "page_slug": "environmental",
             "page_id": 13,
             "text": "Environmental",
             "href": "\/website\/environmental",
             "selectedIcon": "",
             "selectable": true,
             "state": {
                 "checked": false,
                 "disabled": false,
                 "expanded": false,
                 "selected": false
             },
             "nodes": [{
                 "id": 126,
                 "level_name": "Site Management",
                 "level_id": 20,
                 "parent_id": 11,
                 "page_slug": "site-management",
                 "page_id": 22,
                 "text": "Site Management",
                 "href": "\/website\/site-management",
                 "selectedIcon": "",
                 "selectable": true,
                 "state": {
                     "checked": false,
                     "disabled": false,
                     "expanded": false,
                     "selected": false
                 }
             }, {
                 "id": 127,
                 "level_name": "Resource Management",
                 "level_id": 21,
                 "parent_id": 11,
                 "page_slug": "resource-management",
                 "page_id": 23,
                 "text": "Resource Management",
                 "href": "\/website\/resource-management",
                 "selectedIcon": "",
                 "selectable": true,
                 "state": {
                     "checked": false,
                     "disabled": false,
                     "expanded": true,
                     "selected": true
                 }
             }, {
                 "id": 128,
                 "level_name": "Inputs",
                 "level_id": 22,
                 "parent_id": 11,
                 "page_slug": "inputs",
                 "page_id": 24,
                 "text": "Inputs",
                 "href": "\/website\/inputs",
                 "selectedIcon": "",
                 "selectable": true,
                 "state": {
                     "checked": false,
                     "disabled": false,
                     "expanded": false,
                     "selected": false
                 }
             }, {
                 "id": 134,
                 "level_name": "Outputs",
                 "level_id": 28,
                 "parent_id": 11,
                 "page_slug": "outputs",
                 "page_id": 30,
                 "text": "Outputs",
                 "href": "\/website\/outputs",
                 "selectedIcon": "",
                 "selectable": true,
                 "state": {
                     "checked": false,
                     "disabled": false,
                     "expanded": false,
                     "selected": false
                 }
             }]
         }, {
             "id": 118,
             "level_name": "Economic Criteria",
             "level_id": 12,
             "parent_id": 7,
             "page_slug": "economic-criteria",
             "page_id": 14,
             "text": "Economic Criteria",
             "href": "\/website\/economic-criteria",
             "selectedIcon": "",
             "selectable": true,
             "state": {
                 "checked": false,
                 "disabled": false,
                 "expanded": false,
                 "selected": false
             },
             "nodes": [{
                 "id": 149,
                 "level_name": "Financial Management",
                 "level_id": 43,
                 "parent_id": 12,
                 "page_slug": "financial-management",
                 "page_id": 45,
                 "text": "Financial Management",
                 "href": "\/website\/financial-management",
                 "selectedIcon": "",
                 "selectable": true,
                 "state": {
                     "checked": false,
                     "disabled": false,
                     "expanded": false,
                     "selected": false
                 }
             }, {
                 "id": 151,
                 "level_name": "Supporting Communities",
                 "level_id": 45,
                 "parent_id": 12,
                 "page_slug": "supporting-communities",
                 "page_id": 47,
                 "text": "Supporting Communities",
                 "href": "\/website\/supporting-communities",
                 "selectedIcon": "",
                 "selectable": true,
                 "state": {
                     "checked": false,
                     "disabled": false,
                     "expanded": false,
                     "selected": false
                 }
             }]
         }]
     }, {
         "id": 114,
         "level_name": "Principle 4 Continuous Improvement",
         "level_id": 8,
         "parent_id": 3,
         "page_slug": "principle-4-continuous-improvement",
         "page_id": 10,
         "text": "Principle 4 Continuous Improvement",
         "href": "\/website\/principle-4-continuous-improvement",
         "selectedIcon": "",
         "selectable": true,
         "state": {
             "checked": false,
             "disabled": false,
             "expanded": false,
             "selected": false
         }
     }]
 }, {
     "id": 160,
     "level_name": "What Is The Sustainability Programme",
     "level_id": 54,
     "parent_id": 0,
     "page_slug": "what-is-the-sustainability-programme",
     "page_id": 56,
     "text": "What Is The Sustainability Programme",
     "href": "\/website\/what-is-the-sustainability-programme",
     "selectedIcon": "",
     "selectable": true,
     "state": {
         "checked": false,
         "disabled": false,
         "expanded": false,
         "selected": false
     }
 }]

Here is my recursive function thats creating the array above:

public static function generateTreeView($elements, $parent, $num, $clientname, $pageid)
{
        $tree = [];

        //Log::info('Num: ' . $num);

        if($num <= 100)
        {

            foreach ($elements as $element) 
            {
                $pid = $element->parent_id;
                //$id   = $element->id;
                $levelid = $element->level_id;
                $levelname = $element->level_name;
                $pageslug = $element->page_slug;
                $thispageid = $element->page_id;

                $element->text = $levelname;
                $element->href = '/' . $clientname . '/' . $pageslug;
                $element->selectedIcon = "";
                $element->selectable = true;

                if($pageslug == $pageid)
                {
                    $selected = true;
                    $expanded = true;
                    //Log::info($pageslug . ' - ' . $pageid);

                }
                else
                {
                    $selected = false;
                    $expanded = false;
                }

                $state = ['checked' => false, 'disabled' => false, 'expanded' => $expanded, 'selected' => $selected];

                $element->state = $state;

                if($pid == $parent)
                {

                    $children = General::generateTreeView($elements, $levelid, $num +1, $clientname, $pageid);

                    if ($children) {



                        $element->nodes = $children;
                    }

                    $tree[] = $element;

                }

            }

        }

        return $tree;
}

To call the function...

$getCatTreeNodes = General::generateTreeView($getClientCats, 0, 0,$getClientDataCheck->client_slug, $pageid);

$getCatTree = collect($getCatTreeNodes);

$getCatTree is passed to my view/web page...

and my Javascript does this...

$(document).ready(function(){

var catTree = <?php echo $cattree; ?>;

//console.log(catTree);

$('#tree').treeview({
  data: catTree,
  levels: 5,
  backColor: '#414141',
  color: '#ffffff',
  onhoverColor: '#666666',
  selectedBackColor: '#666666',
  showBorder: false,
  borderColor: '#dddddd',
  enableLinks: true,
});

});

Rendered HTML from the data array

<div id="tree" class="treeview"><ul class="list-group"><li class="list-group-item node-tree" data-nodeid="0" style="color:undefined;background-color:undefined;"><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span><a href="/sainsburys/how-to-use-the-knowledge-base" style="color:inherit;">How To Use The Knowledge Base</a></li><li class="list-group-item node-tree" data-nodeid="3" style="color:undefined;background-color:undefined;"><span class="icon expand-icon glyphicon glyphicon-minus"></span><span class="icon node-icon"></span><a href="/sainsburys/explore-the-sustainability-standards" style="color:inherit;">Explore The Sustainability Standards</a></li><li class="list-group-item node-tree" data-nodeid="4" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span><a href="/sainsburys/principle-1-senior-management-commitment" style="color:inherit;">Principle 1 Senior Management Commitment</a></li><li class="list-group-item node-tree" data-nodeid="5" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span><a href="/sainsburys/principle-2-sourcing-and-supply-chain" style="color:inherit;">Principle 2 Sourcing And Supply Chain</a></li><li class="list-group-item node-tree" data-nodeid="6" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-minus"></span><span class="icon node-icon"></span><a href="/sainsburys/principle-3-performance-measures" style="color:inherit;">Principle 3 Performance Measures</a></li><li class="list-group-item node-tree" data-nodeid="7" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span><a href="/sainsburys/social-accountability" style="color:inherit;">Social Accountability</a></li><li class="list-group-item node-tree" data-nodeid="8" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-minus"></span><span class="icon node-icon"></span><a href="/sainsburys/environmental" style="color:inherit;">Environmental</a></li><li class="list-group-item node-tree" data-nodeid="9" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="indent"></span><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span><a href="/sainsburys/site-management" style="color:inherit;">Site Management</a></li><li class="list-group-item node-tree node-selected" data-nodeid="10" style="color:#FFFFFF;background-color:#666666;"><span class="indent"></span><span class="indent"></span><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span><a href="/sainsburys/resource-management" style="color:inherit;">Resource Management</a></li><li class="list-group-item node-tree" data-nodeid="11" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="indent"></span><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span><a href="/sainsburys/inputs" style="color:inherit;">Inputs</a></li><li class="list-group-item node-tree" data-nodeid="12" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="indent"></span><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span><a href="/sainsburys/outputs" style="color:inherit;">Outputs</a></li><li class="list-group-item node-tree" data-nodeid="13" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span><a href="/sainsburys/economic-criteria" style="color:inherit;">Economic Criteria</a></li><li class="list-group-item node-tree" data-nodeid="16" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span><a href="/sainsburys/principle-4-continuous-improvement" style="color:inherit;">Principle 4 Continuous Improvement</a></li><li class="list-group-item node-tree" data-nodeid="17" style="color:undefined;background-color:undefined;"><span class="icon glyphicon"></span><span class="icon node-icon"></span><a href="/sainsburys/what-is-the-sustainability-programme" style="color:inherit;">What Is The Sustainability Programme</a></li></ul></div>

Thanks

1
jquerytreeviewnodesparentexpand
We'll want to see some code before we can help. – mjw
Just added something, hope it helps people understand? – Rob
That's a start. Can you show us the markup for the treeview, rendered if possible? If you have some jQuery that would be helpful to see as well. – mjw
added more code, thanks for looking. – Rob
Specifically i'm after how the treeview is rendered since there are a bunch of treeview plugins out there. Is it generating a UL with LI items as the children? I can give you some jQuery but I need the rendered treeview markup to be helpful. – mjw

1 Answers

0
votes

I have a similar need so I began with GetParent in jQuery:

    $(document).on('nodeSelected',".treeview", function(e, node){
     var NodeID=node.nodeId;
     console.log("nodeID selected:"+NodeID);
     var ParentID=$('#tree_0').treeview('getParent', NodeID).nodeId;
     console.log("av bcl parent:"+ParentID);
     while (ParentID != undefined){
       ParentID=$('#tree_0').treeview('getParent', ParentID).nodeId;
       console.log("bcl parent:"+ParentID);
       /**test here if expanded or not**/
     }
    });

But after i find easier but I don't test it

revealNode(node | nodeId, options)

Reveals a given tree node, expanding the tree from node to root.

    $('#tree').treeview('revealNode', [ nodeId, { silent: true } ]);

Triggers nodeExpanded event; pass silent to suppress events.

Here is then solution bootstrap-treeview