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

Posted 2023-05-08

【中文标题】如何将子级和大子级json数据附加到树视图结构中

【英文标题】：how to append child level and grand child level json data into tree view structure

【发布时间】：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/

【参考方案1】：

我想通了，看看这个-

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();
);

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>

我刚刚更改了以下行-

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

进入-

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

这里更新fiddle。

【讨论】：

仍然没有服用