【发布时间】：2016-12-31 14:15:07
【问题描述】：
我想附加 json 数据以带来树视图结构。最初我创建了静态树视图，这是我使用 json 树视图的小提琴代码：
var json = {
"category": [{
"title": "Customer Satisfaction",
"id": "nnanet:category/certified-pre-owned",
"items": [{
"title": "Bulletins",
"id": "nnanet:category/customer-satisfaction/bulletins",
"thirditems": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}, {
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}]
}, {
"title": "Consumer Affairs",
"id": "nnanet:category/customer-satisfaction/consumer-affairs"
}, {
"title": "Loyalty",
"id": "nnanet:category/customer-satisfaction/loyalty",
"thirditems": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}, {
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}]
}]
}, {
"title": "Retailer Digital Marketing",
"id": "nnanet:category/retailer-digital-marketing",
"items": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi",
"thirditems": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}, {
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}]
}, {
"title": "Basics",
"id": "nnanet:category/retailer-digital-marketing/reference-guide/basics"
}, {
"title": "International",
"id": "nnanet:category/retailer-digital-marketing/international"
}]
}, {
"title": "Finance Today",
"id": "nnanet:category/customer-satisfaction/bulletins/finance-today",
"items": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi",
"thirditems": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}, {
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}]
}, {
"title": "Basics",
"id": "nnanet:category/retailer-digital-marketing/reference-guide/basics"
}, {
"title": "International",
"id": "nnanet:category/retailer-digital-marketing/international"
}]
}, {
"title": "Annual",
"id": "nnanet:category/customer-satisfaction/bulletins/finance-today/revenue/annual",
"items": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}, {
"title": "Basics",
"id": "nnanet:category/retailer-digital-marketing/reference-guide/basics"
}, {
"title": "International",
"id": "nnanet:category/retailer-digital-marketing/international"
}]
}]
};
function expander(){
var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i++){
tree[i].addEventListener('click', function(e) {
var element = e.target.parentElement; //actually this is just the elem itself
var parent = element.parentElement
var opensubs = parent.querySelectorAll(':scope .open');
console.log(opensubs);
var classList = element.classList;
if(opensubs.length !=0) {
for(var i = 0; i < opensubs.length; i++){
opensubs[i].classList.remove('open');
}
}
classList.add('open');
});
}
}
$(function(){
var tree = $("ul.tree");
$.each(json.category,function(category){
var categoryValue = json.category[category];
tree.append('<li><a href="#">'+categoryValue.title+'</a><ul></ul></li>');
var el = tree.children("li").children("ul");
$.each(categoryValue.items,function(itemId){
var item = categoryValue.items[itemId];
$(el[category]).append('<li><a href="#">'+item.title+'</a></li>');
if(item.thirditems){
$(el[category]).children("li").append('<ul></ul>');
var el1 = el.children("li").children("ul");
$.each(item.thirditems,function(thirdItemId){
var thirdItem = item.thirditems[thirdItemId];
console.log(el1[itemId]);
$(el1[itemId]).append('<li><a href="#">'+thirdItem.title+'</a><ul></ul></li>');
});
}
});
});
expander();
});body {
font-family: Arial;
}
ul.tree li {
list-style-type: none;
position: relative;
}
ul.tree li ul {
display: none;
}
ul.tree li.open > ul {
display: block;
}
ul.tree li a {
color: black;
text-decoration: none;
}
ul.tree li a:before {
height: 1em;
padding:0 .1em;
font-size: .8em;
display: block;
position: absolute;
left: -1.3em;
top: .2em;
}
ul.tree li > a:not(:last-child):before {
content: '+';
}
ul.tree li.open > a:not(:last-child):before {
content: '-';
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tree"></ul>在这里，我很难正确追加三级 json 数据和最多两级 json。使用thirditem 后面临的问题。
在我的 json 代码中有一个名为 thirditems 的数组。如何将此thirditems 数组追加到对应的父数组中？
恰好在零售商digital marketing > sub-ToI > semi-sub-TOI > super-sub-TOI 内部，所有thirditems json 数组仅附加到第一个值。
最多两级 json 数据正确追加，但如何追加第三级 json 数据？
有关更多信息，请查看此小提琴：https://jsfiddle.net/ak3zLzgd/6/
【问题讨论】：
标签： javascript jquery json jquery-ui twitter-bootstrap-3