{
data:[
{itemId:1, itemName:"пункт №1", itemParentId:0},
{itemId:2, itemName:"пункт №1.1", itemParentId:1},
{itemId:3, itemName:"пункт №1.2", itemParentId:1},
{itemId:4, itemName:"пункт №1.2.1", itemParentId:3},
{itemId:5, itemName:"пункт №1.2.2", itemParentId:3},
{itemId:6, itemName:"пункт №1.2.3", itemParentId:3},
{itemId:7, itemName:"пункт №2", itemParentId:0},
{itemId:8, itemName:"пункт №3", itemParentId:0},
{itemId:9, itemName:"пункт №3.1", itemParentId:8},
{itemId:10, itemName:"пункт №3.2", itemParentId:8},
{itemId:11, itemName:"пункт №3.3", itemParentId:8},
{itemId:12, itemName:"пункт №3.3.1", itemParentId:11},
{itemId:13, itemName:"пункт №3.3.1.1", itemParentId:12},
{itemId:14, itemName:"пункт №3.3.1.2", itemParentId:12},
{itemId:15, itemName:"пункт №3.3.1.3", itemParentId:12},
{itemId:16, itemName:"пункт №3.3.2", itemParentId:11},
{itemId:17, itemName:"пункт №4", itemParentId:0},
{itemId:18, itemName:"пункт №5", itemParentId:0},
{itemId:19, itemName:"пункт №5.1", itemParentId:18}
]
}
пытался решить так но это неправильное решение:
var listCategories = {
data:[
{itemId:1, itemName:"пункт №1", itemParentId:0},
{itemId:2, itemName:"пункт №1.1", itemParentId:1},
{itemId:3, itemName:"пункт №1.2", itemParentId:1},
{itemId:4, itemName:"пункт №1.2.1", itemParentId:3},
{itemId:5, itemName:"пункт №1.2.2", itemParentId:3},
{itemId:6, itemName:"пункт №1.2.3", itemParentId:3},
{itemId:7, itemName:"пункт №2", itemParentId:0},
{itemId:8, itemName:"пункт №3", itemParentId:0},
{itemId:9, itemName:"пункт №3.1", itemParentId:8},
{itemId:10, itemName:"пункт №3.2", itemParentId:8},
{itemId:11, itemName:"пункт №3.3", itemParentId:8},
{itemId:12, itemName:"пункт №3.3.1", itemParentId:11},
{itemId:13, itemName:"пункт №3.3.1.1", itemParentId:12},
{itemId:14, itemName:"пункт №3.3.1.2", itemParentId:12},
{itemId:15, itemName:"пункт №3.3.1.3", itemParentId:12},
{itemId:16, itemName:"пункт №3.3.2", itemParentId:11},
{itemId:17, itemName:"пункт №4", itemParentId:0},
{itemId:18, itemName:"пункт №5", itemParentId:0},
{itemId:19, itemName:"пункт №5.1", itemParentId:18}
]};
var list = '';
function parseCatRecursive(cat){
cat.forEach(function(item){
list+='<ul class="">';
for(var key in item){
if(key === 'itemName')
list+='<li class ="" id=" ' + key +' ">' +item[key] + '</li>';
if(key === 'itemParentId' && item[key].length !== 0){
list+='<ul class="">'
parseCatRecursive(item[key]);
list+= '</ul>'
}
}
list+='</ul>'
});
}
parseCatRecursive(listCategories);
$('body').html(list);
Вообщем задача у меня такая Необходимо реализовать дерево средствами JS(native)+HTML+CSS3. Базовый принцип работы идентичен навигации по каталогам в проводнике Windows:
- у каждого узла, у которого есть дети, должна быть отдельная иконка-стрелочка с возможностью скрыть/развернуть его. Если детей нет, иконки для сворачивания быть не должно;
- количество уровней вложенности неограниченно;
- при клике, элемент должен подсвечиваться;
Уважаемые коллеги поскольку новичок сильно не разбираюсь в js но данную задачу хотелось бы решить. Прошу помочь если есть аналогичные решения то дать ссылки на них и по возможности давать подсказки в решении. Решать за меня задачу не нужно. Нужны грамотные советы.