Древовидное представление начальной загрузки, как автоматически расширять родительские узлы? ⇐ Jquery

[Anonymous]

Я использую древовидное представление начальной загрузки, которое в основном работает хорошо, однако, когда я загружаю новую страницу по ссылке меню, я хочу, чтобы все родительские узлы выбранного дочернего узла расширились, кто-нибудь знает, как это сделать?

Спасибо,

Роб

Вот код...

Это массив, который поступает из моей базы данных и отлично работает при отображении всех элементов древовидного представления...

Если вы посмотрите на идентификатор 127 в массиве, вы заметите, что 'expanded' для дочернего элемента имеет значение true

"state": {
"checked": false,
"disabled": false,
"expanded": true,
"selected": true


Но все родительские узлы этого дочернего элемента по умолчанию установлены как ложные, поскольку они не являются выбранным элементом/страницей.

Так как я могу сделать так, чтобы все родительские узлы этого дочернего элемента также расширялись?

Я предполагаю, что есть способ пройтись по массиву, найти выбранный дочерний элемент, а затем вернуться и выбрать его родителя 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 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 = ;

//console.log(catTree);

$('#tree').treeview({
data: catTree,
levels: 5,
backColor: '#414141',
color: '#ffffff',
onhoverColor: '#666666',
selectedBackColor: '#666666',
showBorder: false,
borderColor: '#dddddd',
enableLinks:  t r u e , < b r   / > } ) ; < b r   / > < b r   / > } ) ; < b r   / > < / c o d e > < b r   / > < b r   / > О т о б р а ж а е т с я   H T M L   и з   м а с с и в а   д а н н ы х < / p > < b r   / > < b r   / > < c o d e > & l t ; d i v   i d = " t r e e "   c l a s s = " t r e e v i e w " & g t ; & l t ; u l   c l a s s = " l i s t - g r o u p " & g t ; & l t ; l i   c l a s s = " l i s t - g r o u p - i t e m   n o d e - t r e e "   d a t a - n o d e i d = " 0 "   s t y l e = " c o l o r : u n d e f i n e d ; b a c k g r o u n d - c o l o r : u n d e f i n e d ; " & g t ; & l t ; s p a n   c l a s s = " i c o n   e x p a n d - i c o n   g l y p h i c o n   g l y p h i c o n - p l u s " & g t ; & l t ; / s p a n & g t ; & l t ; s p a n   c l a s s = " i c o n   n o d e - i c o n " & g t ; & l t ; / s p a n & g t ; & l t ; a   h r e f = " / s a i n s b u r y s / h o w - t o - u s e - t h e - k n o w l e d g e - b a s e "   s t y l e = " c o l o r : i n h e r i t ; " & g t ; H o w   T o   U s e   T h e   K n o w l e d g e   B a s e & l t ; / a & g t ; & l t ; / l i & g t ; & l t ; l i   c l a s s = " l i s t - g r o u p - i t e m   n o d e - t r e e "   d a t a - n o d e i d = " 3 "   s t y l e = " c o l o r : u n d e f i n e d ; b a c k g r o u n d - c o l o r : u n d e f i n e d ; " & g t ; & l t ; s p a n   c l a s s = " i c o n   e x p a n d - i c o n   g l y p h i c o n   g l y p h i c o n - m i n u s " & g t ; & l t ; / s p a n & g t ; & l t ; s p a n   c l a s s = " i c o n   n o d e - i c o n " & g t ; & l t ; / s p a n & g t ; & l t ; a   h r e f = " / s a i n s b u r y s / e x p l o r e - t h e - s u s t a i n a b i l i t y - s t a n d a r d s "   s t y l e = " c o l o r : i n h e r i t ; " & g t ; E x p l o r e   T h e   S u s t a i n a b ility Standards[*][url=/sainsburys/principle-1-senior-management-commitment]Principle 1 Senior Management Commitment[/url][*][url=/sainsburys/principle-2-sourcing-and-supply-chain]Principle 2 Sourcing And Supply Chain[/url][*][url=/sainsburys/principle-3-performance-measures]Principle 3 Performance Measures[/url][*][url=/sainsburys/social-accountability]Social Accountability[/url][*][url=/sainsburys/environmental]Environmental[/url][*][url=/sainsburys/site-management]Site Management[/url][*][url=/sainsburys/resource-management]Resource Management[/url][*][url=/sainsburys/inputs]Inputs[/url][*][url=/sainsburys/outputs]Outputs[/url][*][url=/sainsburys/economic-criteria]Economic Criteria[/url][*][url=/sainsburys/principle-4-continuous-improvement]Principle 4 Continuous Improvement[/url][*][url=/sainsburys/what-is-the-sustainability-programme]What Is The Sustainability Programme[/url]

Спасибо

Подробнее здесь: https://stackoverflow.com/questions/445 ... rent-nodes