javascript - 将 JSON 文件中的数据加载到带有复选框的树中

Question

我正在尝试为我的 Web 应用程序创建一个扩展树，但我无法从 JSON 文件中获取数据来动态填充树。我从 SOF 的另一篇文章中找到了这段代码。 这是我的 JSON 文件，名为 tree_data.json :

    {
"Data": {

    "id": "0",
    "title": "root-not displayed",
    "children": {
        "id": "1",
        "title": "Option 1",
        "children": {
            "id": "11",
            "title": "Option 11",
            "children": {
                "id": "111",
                "title": "Option 111",
                "id": "112",
                "title": "Option 112"
            }
        }
    }
}

}

这里是嵌入 HTML 中的 JavaScript 代码:

    $.getJSON("tree_data.json", function(treedata) ){
//$.each(treedata.data, function(i, field){
$(function () {
    addItem($('#root'), treedata); //first call to add item which passes the main parent/root.
    $(':checkbox').change(function () {
        $(this).closest('li').children('ul').slideToggle();
    });
    $('label').click(function(){
        $(this).closest('li').find(':checkbox').trigger('click');
    });
});//}
function addItem(parentUL, branch) {
    for (var key in branch.children) { //for each key in child in data
        var item = branch.children[key]; //assign each child in variable item
        $item = $('<li>', {        //jquery object
            id: "item" + item.id
        });
        $item.append($('<input>', { //add check boxes
            type: "checkbox",
            id: "item" + item.id,
            name: "item" + item.id
        }));
        $item.append($('<label>', { //add labels to HTML. For every id, display its title.
            for: "item" + item.id,
            text: item.title
        }));
        parentUL.append($item);
        if (item.children) {
            var $ul = $('<ul>', {
                style: 'display: none'
            }).appendTo($item);
            $item.append();
            addItem($ul, item); //recursive call to add another item if there are more children.
        }
    }
}}

我需要很多帮助来更改此代码，以便获取 JSON 数据并创建树。任何帮助将不胜感激。谢谢。

Answer 1

首先，您必须将每个子对象封装在一个 json 数组中，这样每个子对象中可以有单个或多个对象(例如 111 和 112)。因此将 json 更改为如下所示:

{
  "Data": {
    "id": "0",
    "title": "root-not displayed",
    "children": [{
        "id": "1",
        "title": "Option 1",
        "children": [{
            "id": "11",
            "title": "Option 11",
            "children": [{
                "id": "111",
                "title": "Option 111"
              },
              {
                "id": "112",
                "title": "Option 112"
              }]
          }]
      }]
  }
}

现在，有一个工作代码库(带有工作示例):

$(function () {
    var treedata = JSON.parse('{"Data": {"id": "0","title": "root-not displayed","children": [{ "id":"1","title":"Option 1","children": [{"id": "11","title": "Option 11","children": [{"id": "111","title": "Option 111"},{"id": "112","title": "Option 112"}]}]}]}}'); //JUST FOR MOCKUP THE JSON CALL

    addItem($('#root'), treedata.Data); //first call to add item which passes the main parent/root.
    $(':checkbox').change(function () {
        $(this).closest('li').children('ul').slideToggle();
    });
    $('label').click(function(){
        $(this).closest('li').find(':checkbox').trigger('click');
    });
});//}

function addItem(parentUL, branch) {
            $.each(branch.children, function(i){
        var item = branch.children[i]; //assign each child in variable item
        $item = $('<li>', {        //jquery object
            id: "item" + item.id
        });
        $item.append($('<input>', { //add check boxes
            type: "checkbox",
            id: "item" + item.id,
            name: "item" + item.id
        }));
        $item.append($('<label>', { //add labels to HTML. For every id, display its title.
            for: "item" + item.id,
            text: item.title
        }));
        parentUL.append($item);
        if (item.children) {
            var $ul = $('<ul>', {
            }).appendTo($item);
            addItem($ul, item); //recursive call to add another item if there are more children.
        }      
      });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="root">
 </div>

现在只需使用您的 getJSON 而不是我的模型数据，我希望您会没事的:)