Bootstrap TreeView如何自动展开父节点? [英] Bootstrap treeview how auto expand parent nodes?
本文介绍了Bootstrap TreeView如何自动展开父节点?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用引导树视图，该视图通常运行良好，但是当我从菜单链接加载新页面时，我希望所选子节点的所有父节点都展开，有人知道怎么做吗?
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?
谢谢
Rob
这是一些代码...
这是来自我的数据库的数组，可以很好地显示所有树视图项目...
This is the array that is coming from my database and works fine in showing all the treeview items...
如果您查看数组中的ID 127，您会注意到该孩子的展开" 是正确的
If you look at id 127 in the array you will notice that 'expanded' for the child is true
状态":{ 已检查":否， 已禁用":false， 扩展":是的， 已选择":是 }
"state": { "checked": false, "disabled": false, "expanded": true, "selected": true }
但是默认情况下，此子级的所有父节点都设置为false，因为它们不是选定的项目/页面.
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?
我猜想有一种方法可以遍历数组，找到选中的孩子，然后返回并选择其父ID，并将其设置为展开状态.
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;
}
要调用该函数...
$getCatTreeNodes = General::generateTreeView($getClientCats, 0, 0,$getClientDataCheck->client_slug, $pageid);
$getCatTree = collect($getCatTreeNodes);
$ getCatTree传递到我的视图/网页...
$getCatTree is passed to my view/web page...
而我的Javascript做到了...
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,
});
});
数据数组中呈现的HTML
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>
谢谢
推荐答案
我也有类似的需求，所以我开始使用jQuery中的GetParent:
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(节点| nodeId，选项)
revealNode(node | nodeId, options)
显示给定的树节点，将树从节点扩展到根.
Reveals a given tree node, expanding the tree from node to root.
$('#tree').treeview('revealNode', [ nodeId, { silent: true } ]);
触发nodeExpanded事件；沉默以压制事件.
Triggers nodeExpanded event; pass silent to suppress events.
这就是解决方案 bootstrap-treeview
这篇关于Bootstrap TreeView如何自动展开父节点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
