Question

我正在尝试为我的Web应用程序创建一个扩展树，但我无法从JSON文件中提取数据以动态填充树。我在SOF的另一篇文章中找到了这段代码。这是我的名为tree_data.json的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"
              }]
          }]
      }]
  }
}

现在，有一个可用的代码库（带有工作示例）：

＆＃13;

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

＆＃13;

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

＆＃13;

现在只需使用你的getJSON而不是我的模型数据就可以了，我希望：）

使用复选框将数据从JSON文件加载到树中

1 个答案: