我正在使用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 :(得分：0)
我有类似的需求，所以我开始使用jQuery中的GetParent：
$(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