Как построить полный путь до элемента дерева?
День добрый.
Как найти конкретный элемент дерева понятно. Как найти всех родителей этого элемента? Имеем:
function setActive(str='',source=[]){
if(source.length==0 || str==''){
return source
}
source.forEach(function(item,index){
if(item.link == str){
item.active=true;
}else{
item.active=false;
if(item.children.length > 0){
item = setActive(str,item.children);
}
}
});
return source;
}
var link = 'page_24',
tree = [
{
"id": "9",
"children": [
{
"id": "38",
"children": [],
"active": false,
"link": "page_38"
},
{
"id": "39",
"children": [],
"active": false,
"link": "page_39"
},
{
"id": "40",
"children": [],
"active": false,
"link": "page_40"
},
{
"id": "41",
"children": [],
"active": false,
"link": "page_41"
}
],
"active": false,
"link": "page_9"
},
{
"id": "10",
"children": [
{
"id": "19",
"children": [
{
"id": "13",
"children": [
{
"id": "11",
"children": [],
"active": false,
"link": "page_11"
},
{
"id": "12",
"children": [],
"active": false,
"link": "page_12"
},
{
"id": "14",
"children": [
{
"id": "15",
"children": [],
"active": false,
"link": "page_15"
},
{
"id": "16",
"children": [],
"active": false,
"link": "page_16"
},
{
"id": "17",
"children": [],
"active": false,
"link": "page_17"
},
{
"id": "18",
"children": [],
"active": false,
"link": "page_18"
},
{
"id": "20",
"children": [],
"active": false,
"link": "page_20"
},
{
"id": "21",
"children": [],
"active": false,
"link": "page_21"
},
{
"id": "22",
"children": [],
"active": false,
"link": "page_22"
},
{
"id": "23",
"children": [],
"active": false,
"link": "page_23"
}
],
"active": false,
"link": "page_14"
}
],
"active": false,
"link": "page_13"
},
{
"id": "24",
"children": [],
"active": false,
"link": "page_24"
},
{
"id": "25",
"children": [],
"active": false,
"link": "page_25"
},
{
"id": "28",
"children": [],
"active": false,
"link": "page_28"
}
],
"active": false,
"link": "page_19"
},
{
"id": "26",
"children": [],
"active": false,
"link": "page_26"
},
{
"id": "27",
"children": [],
"active": false,
"link": "page_27"
},
{
"id": "29",
"children": [],
"active": false,
"link": "page_29"
},
{
"id": "30",
"children": [],
"active": false,
"link": "page_30"
},
{
"id": "31",
"children": [],
"active": false,
"link": "page_31"
},
{
"id": "32",
"children": [],
"active": false,
"link": "page_32"
},
{
"id": "33",
"children": [],
"active": false,
"link": "page_33"
},
{
"id": "34",
"children": [],
"active": false,
"link": "page_34"
},
{
"id": "35",
"children": [],
"active": false,
"link": "page_35"
},
{
"id": "36",
"children": [],
"active": false,
"link": "page_36"
},
{
"id": "37",
"children": [],
"active": false,
"link": "page_37"
}
],
"active": false,
"link": "page_10"
},
{
"id": "8",
"children": [],
"active": false,
"link": "page_8"
},
{
"id": "1",
"children": [],
"active": false,
"link": "page_1"
},
{
"id": "3",
"children": [
{
"id": "2",
"children": [],
"active": false,
"link": "page_2"
},
{
"id": "5",
"children": [
{
"id": "4",
"children": [],
"active": false,
"link": "page_4"
}
],
"active": false,
"link": "page_5"
}
],
"active": false,
"link": "page_3"
}
];
console.log(setActive(link,tree));
Задача выставить "active": true не только тому элементу у которого link совпадает с искомым, но и всем его родителям вверх по дереву. |
|
Тут вопросы возникают по функции setActive
Что она возвращает? Если переданный source, то что означает 011 item = setActive(str,item.children); Логичнее возвращать найденный item (null, если не найдено) Второй вопрос. Кто устанавливает active:false для всего дерева в промежутках между поисками? Должна ли эта функция делать это? Т.е не только устанавливать active:true для найденного и его предков, но и active:false для всех остальных? Ну и еще замечание. При работе с деревьями лучше считать корень дерева обычным узлом. те должно быть так tree = { id:0, active: false, link: '', children: [ // .... то, что сейчас у вас tree ] } |
Цитата:
2. В промежутках между поисками никто никому ничего не устанавливает 3. Не обязательно, это можно вынести в отдельную функцию, которая перед поиском будет все сбрасывать в active:false. |
RecursiveIterator обход дерева объекта и установка значений
dpts,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<script src="https://nervgh.github.io/js/recursive-iterator.min.js"></script>
<pre>
<script>
var link = 'page_24',
tree = [
{
"id": "9",
"children": [
{
"id": "38",
"children": [],
"active": false,
"link": "page_38"
},
{
"id": "39",
"children": [],
"active": false,
"link": "page_39"
},
{
"id": "40",
"children": [],
"active": false,
"link": "page_40"
},
{
"id": "41",
"children": [],
"active": false,
"link": "page_41"
}
],
"active": false,
"link": "page_9"
},
{
"id": "10",
"children": [
{
"id": "19",
"children": [
{
"id": "13",
"children": [
{
"id": "11",
"children": [],
"active": false,
"link": "page_11"
},
{
"id": "12",
"children": [],
"active": false,
"link": "page_12"
},
{
"id": "14",
"children": [
{
"id": "15",
"children": [],
"active": false,
"link": "page_15"
},
{
"id": "16",
"children": [],
"active": false,
"link": "page_16"
},
{
"id": "17",
"children": [],
"active": false,
"link": "page_17"
},
{
"id": "18",
"children": [],
"active": false,
"link": "page_18"
},
{
"id": "20",
"children": [],
"active": false,
"link": "page_20"
},
{
"id": "21",
"children": [],
"active": false,
"link": "page_21"
},
{
"id": "22",
"children": [],
"active": false,
"link": "page_22"
},
{
"id": "23",
"children": [],
"active": false,
"link": "page_23"
}
],
"active": false,
"link": "page_14"
}
],
"active": false,
"link": "page_13"
},
{
"id": "24",
"children": [],
"active": false,
"link": "page_24"
},
{
"id": "25",
"children": [],
"active": false,
"link": "page_25"
},
{
"id": "28",
"children": [],
"active": false,
"link": "page_28"
}
],
"active": false,
"link": "page_19"
},
{
"id": "26",
"children": [],
"active": false,
"link": "page_26"
},
{
"id": "27",
"children": [],
"active": false,
"link": "page_27"
},
{
"id": "29",
"children": [],
"active": false,
"link": "page_29"
},
{
"id": "30",
"children": [],
"active": false,
"link": "page_30"
},
{
"id": "31",
"children": [],
"active": false,
"link": "page_31"
},
{
"id": "32",
"children": [],
"active": false,
"link": "page_32"
},
{
"id": "33",
"children": [],
"active": false,
"link": "page_33"
},
{
"id": "34",
"children": [],
"active": false,
"link": "page_34"
},
{
"id": "35",
"children": [],
"active": false,
"link": "page_35"
},
{
"id": "36",
"children": [],
"active": false,
"link": "page_36"
},
{
"id": "37",
"children": [],
"active": false,
"link": "page_37"
}
],
"active": false,
"link": "page_10"
},
{
"id": "8",
"children": [],
"active": false,
"link": "page_8"
},
{
"id": "1",
"children": [],
"active": false,
"link": "page_1"
},
{
"id": "3",
"children": [
{
"id": "2",
"children": [],
"active": false,
"link": "page_2"
},
{
"id": "5",
"children": [
{
"id": "4",
"children": [],
"active": false,
"link": "page_4"
}
],
"active": false,
"link": "page_5"
}
],
"active": false,
"link": "page_3"
}
];
const setParentsActiveValue = (link, source, value) => {
for (let {node, path} of new RecursiveIterator(source)) {
if (node == link) {
console.log(path.join('.'), node);
let obj = source;
for (let key of path) {
obj = obj[key];
if (obj.hasOwnProperty('active')) {
console.log("id", obj.id);
obj.active = value
}
}
break;
}
}
return source
}
document.write(JSON.stringify(setParentsActiveValue(link,tree, true), "", 2))
</script>
</pre>
</body>
</html>
|
Цитата:
|
Если слегка изменить условия
- Функция возвращает найденный item (source по нему всегда взять можно) - Дерево оформлено с корневым узлом - Функция очищает все остальные active То получается совсем простая функция
<pre>
<script>
function setActive(str='',tree){
let founditem = null
for (const item of tree.children) {
const res = setActive(str,item)
founditem = founditem || res
}
if (!founditem && tree.link == str) founditem = tree;
tree.active = !! founditem;
return founditem;
}
let tree = {
id:0,
active: false,
link: '',
children: [
{
"id": "9",
"children": [
{
"id": "38",
"children": [],
"active": false,
"link": "page_38"
},
{
"id": "39",
"children": [],
"active": false,
"link": "page_39"
},
{
"id": "40",
"children": [],
"active": false,
"link": "page_40"
},
{
"id": "41",
"children": [],
"active": false,
"link": "page_41"
}
],
"active": false,
"link": "page_9"
},
{
"id": "10",
"children": [
{
"id": "19",
"children": [
{
"id": "13",
"children": [
{
"id": "11",
"children": [],
"active": false,
"link": "page_11"
},
{
"id": "12",
"children": [],
"active": false,
"link": "page_12"
},
{
"id": "14",
"children": [
{
"id": "15",
"children": [],
"active": false,
"link": "page_15"
},
{
"id": "16",
"children": [],
"active": false,
"link": "page_16"
},
{
"id": "17",
"children": [],
"active": false,
"link": "page_17"
},
{
"id": "18",
"children": [],
"active": false,
"link": "page_18"
},
{
"id": "20",
"children": [],
"active": false,
"link": "page_20"
},
{
"id": "21",
"children": [],
"active": false,
"link": "page_21"
},
{
"id": "22",
"children": [],
"active": false,
"link": "page_22"
},
{
"id": "23",
"children": [],
"active": false,
"link": "page_23"
}
],
"active": false,
"link": "page_14"
}
],
"active": false,
"link": "page_13"
},
{
"id": "24",
"children": [],
"active": false,
"link": "page_24"
},
{
"id": "25",
"children": [],
"active": false,
"link": "page_25"
},
{
"id": "28",
"children": [],
"active": false,
"link": "page_28"
}
],
"active": false,
"link": "page_19"
},
{
"id": "26",
"children": [],
"active": false,
"link": "page_26"
},
{
"id": "27",
"children": [],
"active": false,
"link": "page_27"
},
{
"id": "29",
"children": [],
"active": false,
"link": "page_29"
},
{
"id": "30",
"children": [],
"active": false,
"link": "page_30"
},
{
"id": "31",
"children": [],
"active": false,
"link": "page_31"
},
{
"id": "32",
"children": [],
"active": false,
"link": "page_32"
},
{
"id": "33",
"children": [],
"active": false,
"link": "page_33"
},
{
"id": "34",
"children": [],
"active": false,
"link": "page_34"
},
{
"id": "35",
"children": [],
"active": false,
"link": "page_35"
},
{
"id": "36",
"children": [],
"active": false,
"link": "page_36"
},
{
"id": "37",
"children": [],
"active": false,
"link": "page_37"
}
],
"active": false,
"link": "page_10"
},
{
"id": "8",
"children": [],
"active": false,
"link": "page_8"
},
{
"id": "1",
"children": [],
"active": false,
"link": "page_1"
},
{
"id": "3",
"children": [
{
"id": "2",
"children": [],
"active": false,
"link": "page_2"
},
{
"id": "5",
"children": [
{
"id": "4",
"children": [],
"active": false,
"link": "page_4"
}
],
"active": false,
"link": "page_5"
}
],
"active": false,
"link": "page_3"
}
]
}
let fitem = setActive("page_17", tree)
document.write(JSON.stringify(tree, null, ' '))
</script>
</pre>
|
Цитата:
|
| Часовой пояс GMT +3, время: 14:26. |