2017-06-14 96 views
0

我使用的引导树视图大多工作正常,但是当我从菜单链接加载新页面时,我希望所有子节点的父节点都展开,是否有人知道如何做到这一点?Bootstrap treeview如何自动扩展父节点?

感谢,

罗布

下面是一些代码...

这是从我的数据库里的阵列和工作在显示所有的树视图项罚款...

如果你看阵列中的ID 127,你会注意到'扩大'为孩子是真的

“状态”:{ “检查”:假的, “已禁用”:假的, “扩展”:真实, “选择”:真 }

但是,这所有的父节点子项默认设置为false,因为它们不是选定的项目/页面。

那么我怎样才能使这个孩子的所有父节点也扩大?

我猜有一种方法是通过数组循环找到所选子,然后回去通过并选择它的父ID,并设置为扩大???

我只是不知道从哪里开始! :-(

 [{ 
    "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 
    } 
}] 

这里是我的递归函数多数民众赞成上面创建数组:

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; 
} 

调用函数...

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

$getCatTree = collect($getCatTreeNodes); 

$ getCatTree传递给我的看法/网页...

和我的Javascript这样做...

$(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, 
}); 

}); 
从数据阵列

渲染HTML

<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> 

感谢

+0

我们会希望看到一些代码之前,我们可以提供帮助。 – mjw

+0

只是增加了一些东西,希望它能帮助人们理解? – Rob

+0

这是一个开始。你可以向我们展示treeview的标记,如果可能的话渲染?如果你有一些有助于查看的jQuery。 – mjw

回答

0

我有一个类似的需要,所以我用的getParent 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**/ 
    } 
    }); 

但之后,我发现更容易,但我不要测试它

revealNode(node | nodeId,options)

显示给定的树节点,将树从节点扩展到根。

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

触发器nodeExpanded事件;通过沉默来压制事件。

这里是那么的解决方案 bootstrap-treeview