Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.10.2017, 21:56
Новичок на форуме
Отправить личное сообщение для omegarekrut Посмотреть профиль Найти все сообщения от omegarekrut
 
Регистрация: 09.12.2015
Сообщений: 3

Bootstrap меню с подгрузкой dropdown-menu в col-sm. Меню строится из json
Bootstrap меню с подгрузкой dropdown-menu в col-sm. Меню строится из json
Здравствуйте господа. Возникла огромная проблема с динамическим формированием меню. К сожалению, я немного понимаю в JS.
Задача: имеется json файл из которого необходимо строить меню. ID "0010" и "0020" являются главными parent-ами. У меня получается вытащить все дочерние ветки, если пройтись циклом по json, и если ввести ключевые parentid. Но проблема в том, что дальше зайти, в дочерние ветки сформированных списков я никак не могу, потому что не понимаю как правильно это сделать по событию click в только что сформированном меню.

Вдобавок, jsfiddle не формирует даже меню в первом col-sm level-1 :
Ссылка

Я правда надеюсь, что не слишком много прошу по данному поводу, но задача для меня оказалась сложной
Ответить с цитированием
  #2 (permalink)  
Старый 18.10.2017, 01:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,381

меню из json
omegarekrut,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #test a + ul {
     display: none;
  }
  #test a.open + ul {
     display:  block;
  }
  #test a{
    cursor: pointer;
    display: inline-block;
  }
  #test a.dd:after{
     content: "+";
     margin-left: 4px;
  }
  #test a.dd.open:after{
     content: "-";
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$.getJSON('https://api.myjson.com/bins/zlxnt', function(data) {
data.forEach(function(el, i) {
   var parentId = el.PARENT;
   var parent = document.querySelector("#_"+parentId);
   if(!parent) {
     parent = document.querySelector("#test");
      }
    else $(parent).prev().addClass("dd");
    var li = $("<li>").appendTo(parent);
    $("<a>", {text : el.NAME}).appendTo(li);
    $("<ul>", {id : "_"+parentId}).appendTo(li);
})
})
$("#test").on("click", "a", function(event) {
  event.preventDefault();
  this.classList.toggle("open")
})

});
  </script>
</head>

<body>
<ul id="test"></ul>

</body>
</html>

Последний раз редактировалось рони, 18.10.2017 в 15:57.
Ответить с цитированием
  #3 (permalink)  
Старый 18.10.2017, 12:59
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

рони,
Что-то меню не совсем соответствует структуре JSON
Код:
[{"CID":"0001","PARENT":"0000","LINK":"0001","NAME":"Системное меню"},{"CID":"0010","PARENT":"0001","LINK":"0010","NAME":"Система"},{"CID":"0020","PARENT":"0001","LINK":"0020","NAME":"Разделы учета"},....
т.е. вроде как-то так
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #_0000 a + ul {
     display: none;
  }
  #_0000 a.open + ul {
     display:  block;
  }
  #_0000 a{
    cursor: pointer;
    display: inline-block;
  }
  #_0000 a.dd:after{
     content: "+";
     margin-left: 4px;
  }
  #_0000 a.dd.open:after{
     content: "-";
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$.getJSON('https://api.myjson.com/bins/zlxnt', function(data) {
console.log(JSON.stringify(data));
data.forEach(function(el, i) {
   var parentId = el.PARENT;
   var parent = document.querySelector("#_"+parentId);
   $(parent).prev().addClass("dd");
    var li = $("<li>").appendTo(parent);
    $("<a>", {text : el.NAME}).appendTo(li);
    $("<ul>", {id : "_"+el.CID}).appendTo(li);
})
})
$("#_0000").on("click", "a", function(event) {
  event.preventDefault();
  this.classList.toggle("open")
})

});
  </script>
</head>

<body>
<ul id="_0000"></ul>

</body>
</html>

Последний раз редактировалось Dilettante_Pro, 18.10.2017 в 15:03.
Ответить с цитированием
  #4 (permalink)  
Старый 18.10.2017, 14:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,381

Dilettante_Pro,
тогда строка 36
parent = document.querySelector("#_0000"); ???

Последний раз редактировалось рони, 18.10.2017 в 14:57.
Ответить с цитированием
  #5 (permalink)  
Старый 18.10.2017, 15:04
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

рони,
Да, недоправил. Удалил все лишнее из примера пост#3
Ответить с цитированием
  #6 (permalink)  
Старый 18.10.2017, 15:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,381

может так ???
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #_0000 a + ul {
     display: none;
  }
  #_0000 a.open + ul {
     display:  block;
  }
  #_0000 a{
    cursor: pointer;
    display: inline-block;
  }
  #_0000 a.dd:after{
     content: "+";
     margin-left: 4px;
  }
  #_0000 a.dd.open:after{
     content: "-";
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$.getJSON('https://api.myjson.com/bins/zlxnt', function(data) {
console.log(JSON.stringify(data));
data.forEach(function(el, i) {
   var parentId = el.PARENT;
   var parent = document.querySelector("#_"+parentId);
   if(!parent) {
     parent = $("<ul>", {id : "_"+parentId}).appendTo("#_0000");
      }
    else $(parent).prev().addClass("dd");
    var li = $("<li>").appendTo(parent);
    $("<a>", {text : el.NAME}).appendTo(li);
    $("<ul>", {id : "_"+el.CID}).appendTo(li);
})
})
$("#_0000").on("click", "a", function(event) {
  event.preventDefault();
  this.classList.toggle("open")
})

});
  </script>
</head>

<body>
<ul id="_0000"></ul>

</body>
</html>

Последний раз редактировалось рони, 18.10.2017 в 15:57.
Ответить с цитированием
  #7 (permalink)  
Старый 18.10.2017, 15:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,381

Dilettante_Pro,
нехватает некоторых пунктов без if(!parent)
Ответить с цитированием
  #8 (permalink)  
Старый 18.10.2017, 15:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,381

??? что-то не так снова
Ответить с цитированием
  #9 (permalink)  
Старый 18.10.2017, 15:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,381

надо посмотреть
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #_0000 a + ul {
     display: none;
  }
  #_0000 a.open + ul {
     display:  block;
  }
  #_0000 a{
    cursor: pointer;
    display: inline-block;
  }
  #_0000 a.dd:after{
     content: "+";
     margin-left: 4px;
  }
  #_0000 a.dd.open:after{
     content: "-";
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$.getJSON('https://api.myjson.com/bins/zlxnt', function(data) {
console.log(JSON.stringify(data));
data.forEach(function(el, i) {
   var parentId = el.PARENT;
   var parent = document.querySelector("#_"+parentId);
   var li;
   if(!parent) {
   li =  $("<li>", {id : "_"+parentId}).appendTo("#_0000");
      }
    else {
    $(parent).prev("a").addClass("dd");
    li = $("<li>").appendTo(parent);
    };
    $("<a>", {text : el.NAME}).appendTo(li);
    $("<ul>", {id : "_"+el.CID}).appendTo(li);
})
})
$("#_0000").on("click", "a", function(event) {
  event.preventDefault();
  this.classList.toggle("open")
})

});
  </script>
</head>

<body>
<ul id="_0000"></ul>

</body>
</html>

Последний раз редактировалось рони, 18.10.2017 в 16:09.
Ответить с цитированием
  #10 (permalink)  
Старый 18.10.2017, 15:55
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Этот элемент
{"CID":"02FX","PARENT":"0301","LINK":"02FX","NAME" :"Группы активов"}
должен входить в
{"CID":"0301","PARENT":"0300","LINK":"0301","NAME" :"Справочники"}
Но не входит, потому что они идут в JSON в обратном порядке.
М.Б. предварительно сортировать данные?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
статическое меню Schokk Элементы интерфейса 16 11.02.2015 18:18
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59