问题：
引导树视图如何自动扩展父节点？
杜俊爽
我使用的是bootstrap treeview，它大部分工作正常，但是当我从菜单链接加载一个新页面时，我希望所选子节点的所有父节点都展开，有人知道怎么做吗？
谢谢
抢劫
这里有一些代码...
这是来自我的数据库的数组，可以很好地显示所有treeview项。。。
如果您查看数组中的ID127，您将注意到子级的“扩展”为true
“状态：{“选中”：false，“禁用”：false，“扩展”：true，“选中”：true}
但此子节点的所有父节点默认设置为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,
});
});
从数据数组渲染超文本标记语言
<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>
谢谢
共有1个答案
浦思源
我也有类似的需求，所以我开始在jQuery中使用Get家长：
$(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（节点|节点ID，选项）
显示给定的树节点，将树从节点展开到根。
$('#tree').treeview('revealNode', [ nodeId, { silent: true } ]);
触发nodeExpanded事件；传递沉默以抑制事件。
下面是解决方案引导树视图
类似资料：
-
使用此示例，我想创建带有节点的TreeView，我可以拖动这些节点来更改它们的位置。 我试图实现这个例子，但我在这里遇到了一个问题： 我得到了
-
很多时候，在制作网页时，我们希望在其他页面中重复某些页面。 CakePHP具有这样的功能，可以在另一个视图中扩展视图，为此，我们不需要再次重复代码。 extend()方法用于扩展View文件中的View 。 此方法采用一个参数，即带路径的视图文件的名称。 提供View文件的名称时，请勿使用扩展名.ctp。 例子 (Example) 在config/routes.php文件中进行更改，如以下程序所示
-
问题 与<Binary Tree DP>类似，对于拥有 n 个节点的多叉树，其节点下标范围为 [0,n) ，节点 i 的权值为 v_i （ v_i gt 0 ），整个多叉树的权值为所有节点的权值之和。现在要求只保留 m 个节点（ 0 lt m lt n ），剪裁掉 n-m 个节点，要求剩余部分仍然是一个多叉树，而不能是多个树。 对于拥有 n 个节点的多叉树，求出保留 m 个节点的多叉树的最大权值。
-
我有一个容器div设置了宽度和高度，溢出设置为自动。在内部，有一个无序列表，其中包含导致div滚动的内容。 问题是列表本身没有扩展到容器div之外。所以当我尝试在列表的右侧添加填充时，它并不能正常工作： CSS 这里有一把小提琴说明了问题。
-
如果我没弄错的话，树通常是一个列表，其中的元素按特定顺序排列。孩子们不在他们自己的子列表中，他们都在同一个列表中。 所以，我试图创建一个Tree类，其中包含TreeNodes（类）使用Tree类中的List。 我如何跟踪父母/孩子/叶子？如果父母“父母1”，有两个孩子“孩子A”和“孩子B”，我如何将他们联系在一起？
-
说明 本部分说明如何在现有的机器中添加一个新的计算节点。添加节点之前，OpenShift 共有四个节点，1 个 master，1 个 infra，2 个 nodes，如下命令所示： # oc get nodes NAME STATUS ROLES AGE VERSION infra.example.com Ready infr