如何使用jquery树结构获取JSON数据的子节点

Question

我已尝试使用以下代码来获取数据但无法获取子项。

＆＃13;

＆＃13;

gulp test

＆＃13;

var data= [    
    {
        "name": "India",
        "region": "Asia"
    },
    {
        "name": "Sri Lanka",
        "region": "Asia"
    },
    {
        "name": "Maldives",
        "region": "Asia"
    },
    {
        "name": "China",
        "region": "Asia",
        "subRegion": [
            {
                "name": "Central China"
            },
            {
                "name": "East China"
            },
            {
                "name": "Hongkong"
            },
            {
                "name": "Macao"
            },
            {
                "name": "South China"
            }
        ]
    },
    {
        "name": "Malaysia",
        "region": "Asia"
    }]
$(document).ready( function() {
	$.each(data, function(key, val) {
			if (!$("#regionContent ul." + val.region).is("*")) {
				$("<ul />", {
				  "class": val.region,
				  "html": "<li>" + '<input type="checkbox" />' + val.name + "</li>"
				})
				.appendTo("#regionContent")
				.before('<input type="checkbox" />' + '<b class=' + val.region + ' ><a name="' + val.region + '" >' + val.region + '</a></b>');
			  } else {
				$("b." + val.region).each(function() {
				  if (this.textContent === val.region) {
					$(this).next("ul").append("<li>" + '<input type="checkbox" />' + val.name + "</li>");
				  }
				})
			  }
		});    
});

＆＃13;

#regionContent ul li{list-style:none;}

＆＃13;

＆＃13;

＆＃13;

预期结果折叠/扩展 http://s29.postimg.org/idirjntif/image.jpg

当选择父级的子项时，复选框选择将以树结构的形式表示。

Answer 1

您需要浏览所有subRegions并添加它们。其次，您需要使用subRegions向所有区域添加事件侦听器。我没有添加加/减图像，但您可以分别使用hide（）/ show（）函数将它们添加到事件监听器中。

＆＃13;

＆＃13;

var data = [{
  "name": "India",
  "region": "Asia"
}, {
  "name": "Sri Lanka",
  "region": "Asia"
}, {
  "name": "Maldives",
  "region": "Asia"
}, {
  "name": "China",
  "region": "Asia",
  "subRegion": [{
    "name": "Central China"
  }, {
    "name": "East China"
  }, {
    "name": "Hongkong"
  }, {
    "name": "Macao"
  }, {
    "name": "South China"
  }]
}, {
  "name": "Malaysia",
  "region": "Asia"
}]
$(document).ready(function() {
  $.each(data, function(key, val) {
    if (!$("#regionContent ul." + val.region).is("*")) {
      $("<ul />", {
          "class": val.region,
          "html": "<li>" + '<input type="checkbox" />' + val.name + "</li>"
        })
        .appendTo("#regionContent")
        .before('<input type="checkbox" />' + '<b class=' + val.region + ' ><a name="' + val.region + '" >' + val.region + '</a></b>');
    } else {
      $("b." + val.region).each(function() {
        if (this.textContent === val.region) {
          var extra = "";
          if (val.hasOwnProperty("subRegion")) {
            extra = '<ul id="subRegion_' + val.region + '_' + val.name + '" style="display:none;">';
            $.each(val.subRegion, function(k, v) {
              extra += "<li>" + '<input type="checkbox" />' + v.name + "</li>";
            });
            extra += "</ul>";
          }
          $(this).next("ul").append('<li id="' + val.region + '_' + val.name + '">' + '<input type="checkbox" />' + val.name + "</li>" + extra);
          
          if (val.hasOwnProperty("subRegion")) {
            var checkbox = document.getElementById(val.region + '_' + val.name);
            checkbox.addEventListener('click', function() {
              var subRegions = $('#subRegion_' + val.region + '_' + val.name);
              if (subRegions.is(':visible')) {
                subRegions.hide();
              } else {
                subRegions.show();
              }
            });
          }
        }
      });
    }
  });
});

＆＃13;

#regionContent ul li {
  list-style: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="country" id="regionSort">
  <div id="regionContent">
    <ul></ul>
  </div>
  <ul id="1"></ul>
</div>

＆＃13;

＆＃13;

＆＃13;