引导树视图如何自动扩展父节点?

我正在使用引导树视图，它大部分工作正常，但是当我从菜单链接加载新页面时，我希望所选子节点的所有父节点都展开，有谁知道如何做到这一点？

谢谢

抢

这是一些代码...

这是来自我的数据库的数组，可以很好地显示所有树视图项目......

如果您查看数组中的 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>

谢谢

我也有类似的需求，所以我从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 } ]);

触发节点扩展事件;传递静默以抑制事件。

这是解决方案引导树视图

相关内容

最新更新

热门标签：