16.10.2017, 20:56
|
|
Новичок на форуме
|
|
Регистрация: 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 :
Ссылка
Я правда надеюсь, что не слишком много прошу по данному поводу, но задача для меня оказалась сложной |
|
18.10.2017, 00:01
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
меню из 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 в 14:57.
|
|
18.10.2017, 11:59
|
|
Профессор
|
|
Регистрация: 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 в 14:03.
|
|
18.10.2017, 13:47
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Dilettante_Pro,
 тогда строка 36
parent = document.querySelector("#_0000"); ???
Последний раз редактировалось рони, 18.10.2017 в 13:57.
|
|
18.10.2017, 14:04
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
рони,
Да, недоправил. Удалил все лишнее из примера пост#3
|
|
18.10.2017, 14:14
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
может так ???
<!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 в 14:57.
|
|
18.10.2017, 14:16
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Dilettante_Pro,
нехватает некоторых пунктов без if(!parent)
|
|
18.10.2017, 14:21
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
 ??? что-то не так снова |
|
18.10.2017, 14:30
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
 надо посмотреть 
<!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 в 15:09.
|
|
18.10.2017, 14:55
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
Этот элемент
{"CID":"02FX","PARENT":"0301","LINK":"02FX","NAME" :"Группы активов"}
должен входить в
{"CID":"0301","PARENT":"0300","LINK":"0301","NAME" :"Справочники"}
Но не входит, потому что они идут в JSON в обратном порядке.
М.Б. предварительно сортировать данные?
|
|
|
|
