如何将子级别和大子级json数据附加到树视图结构中

时间：2016-08-24 12:30:36

标签： javascript jquery json jquery-ui twitter-bootstrap-3

我想附加json数据来引入树视图结构。最初我创建了静态树视图，这是我用json树视图的小提琴代码：

＆＃13;
＆＃13; 
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();
});
＆＃13; 
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: '-';
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tree"></ul>
＆＃13;
＆＃13;
＆＃13;

这里我有挑战要追加三级json数据和最多两级json正确追加。使用thirditem条件后面临问题。 在我的json代码中有一个名为thirditems的数组。如何将此thirditems数组附加到相应的父数组？<​​/ p>

在零售商digital marketing > sub-ToI > semi-sub-TOI > super-sub-TOI内部，所有thirditems json数组仅附加到第一个值。 最多两级json数据正在追加，但如何附加第三级json数据？

有关详细信息，请查看此小提琴：https://jsfiddle.net/ak3zLzgd/6/

1 个答案:

答案 0 :(得分：0)

我想出来检查这个 -

＆＃13;
＆＃13; 
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[category]).children("li").children("ul");
          $.each(item.thirditems,function(thirdItemId){
            var thirdItem = item.thirditems[thirdItemId];
            
           $(el1[itemId]).append('<li><a href="#">'+thirdItem.title+'</a><ul></ul></li>');
          });
        }
       
      });
    });
    expander();
});
＆＃13; 
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: '-';
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tree"></ul>
＆＃13;
＆＃13;
＆＃13;

我刚刚更改了以下行 - 

var el1 = el.children("li").children("ul");

向 - 

var el1 = $(el[category]).children("li").children("ul");

此处已更新fiddle。

相关问题
最新问题