如何使用 jquery 树结构获取 child of JSON 数据

Question

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

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>");
      }
    })
     }
  });    
});

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

<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>
</div>

预期结果Collapse/Expanded http://s29.postimg.org/idirjntif/image.jpg

并且check-box选择将作为树结构表示当child选择时parent也选择。

Answer 1

您需要遍历所有子区域并添加它们。其次，您需要为所有具有子区域的区域添加一个事件侦听器。我没有添加 plus/minus 图片，但您可以分别使用 hide()/show() 函数将它们添加到事件侦听器中。

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

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

<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>

如何使用 jquery 树结构获取 child of JSON 数据

How to fetch the child of JSON data using jquery tree structure

javascript

tree

jquery

json