Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Bootstrap меню с подгрузкой dropdown-menu в col-sm. Меню строится из json (https://javascript.ru/forum/dom-window/70983-bootstrap-menyu-s-podgruzkojj-dropdown-menu-v-col-sm-menyu-stroitsya-iz-json.html)

рони 18.10.2017 15:06

Цитата:

Сообщение от Dilettante_Pro
М.Б. предварительно сортировать данные?

посмотри пожалуйста :)
<!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.sort(function(a,b) {
if (a.PARENT > b.PARENT)  return 1;
if (a.PARENT < b.PARENT)  return -1;
return 0
}).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 15:51

:lol:
<!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) {

data.sort(function(a,b) {
if (a.PARENT > b.PARENT)  return 1;
if (a.PARENT < b.PARENT)  return -1;
return 0
})
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>").appendTo("#_0000");
   $("<a>", {text : parentId, "class" : "dd"}).appendTo(li);
   parent = $("<ul>", {id : "_"+parentId}).appendTo(li);
      }
    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>

Dilettante_Pro 18.10.2017 16:37

:( рони,
Пост#11 - :victory:
Пост#12 - :cray:
Несчастные сиротки без родителей типа
{"CID":"VB16","PARENT":"_XXX","LINK":"VB16","NAME" :"Приказ о командировании (Расчет)"}:(


Часовой пояс GMT +3, время: 15:08.