11.12.2020, 07:10
|
|
Кандидат Javascript-наук
|
|
Регистрация: 12.05.2015
Сообщений: 111
|
|
|
Как построить полный путь до элемента дерева?
День добрый.
Как найти конкретный элемент дерева понятно.
Как найти всех родителей этого элемента?
Имеем:
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 совпадает с искомым, но и всем его родителям вверх по дереву.
|
|
11.12.2020, 08:04
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
|
|
11.12.2020, 08:28
|
 |
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,700
|
|
|
Тут вопросы возникают по функции setActive
Что она возвращает? Если переданный source, то что означает
011 item = setActive(str,item.children);
Логичнее возвращать найденный item (null, если не найдено)
Второй вопрос. Кто устанавливает active:false для всего дерева в промежутках между поисками?
Должна ли эта функция делать это? Т.е не только устанавливать active:true для найденного и его предков, но и active:false для всех остальных?
Ну и еще замечание. При работе с деревьями лучше считать корень дерева обычным узлом. те должно быть так
tree = {
id:0,
active: false,
link: '',
children: [ // .... то, что сейчас у вас tree
]
}
|
|
11.12.2020, 08:45
|
|
Кандидат Javascript-наук
|
|
Регистрация: 12.05.2015
Сообщений: 111
|
|
Сообщение от voraa
|
Тут вопросы возникают по функции setActive
Что она возвращает? Если переданный source, то что означает
011 item = setActive(str,item.children);
Логичнее возвращать найденный item (null, если не найдено)
Второй вопрос. Кто устанавливает active:false для всего дерева в промежутках между поисками?
Должна ли эта функция делать это? Т.е не только устанавливать active:true для найденного и его предков, но и active:false для всех остальных?
Ну и еще замечание. При работе с деревьями лучше считать корень дерева обычным узлом. те должно быть так
tree = {
id:0,
active: false,
link: '',
children: [ // .... то, что сейчас у вас tree
]
}
|
1. Функция возвращает source в котором active:true искомый элемент.
2. В промежутках между поисками никто никому ничего не устанавливает
3. Не обязательно, это можно вынести в отдельную функцию, которая перед поиском будет все сбрасывать в active:false. |
|
11.12.2020, 08:50
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
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>
|
|
11.12.2020, 08:59
|
|
Кандидат Javascript-наук
|
|
Регистрация: 12.05.2015
Сообщений: 111
|
|
|
Сообщение от рони
|
|
dpts,
|
Спасибо. Работает. Хоть и не понимаю пока сходу как - буду изучать.
Последний раз редактировалось dpts, 11.12.2020 в 09:26.
|
|
11.12.2020, 09:29
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,700
|
|
Если слегка изменить условия
- Функция возвращает найденный 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>
Последний раз редактировалось voraa, 11.12.2020 в 09:48.
|
|
11.12.2020, 09:55
|
|
Кандидат Javascript-наук
|
|
Регистрация: 12.05.2015
Сообщений: 111
|
|
|
Сообщение от voraa
|
Если слегка изменить условия
- Функция возвращает найденный item (source по нему всегда взять можно)
- Дерево оформлено с корневым узлом
- Функция очищает все остальные active
То получается совсем простая функция
........
|
И Вам спасибо. |
|
|
|
