如何使用带有父子关系的JSON数据创建带有复选框的树？

Question

我有JSON数据,JSON数据有父子关系.我想从中创建树结构.我找到了很多插件和库,但我找不到我的要求.我正在使用PHP脚本获取此JSON数据.

这是具有我想要创建的树结构的图像.我坚持它.我知道JSON不是在图像中显示但我只想告诉你树应该是什么样的.如何在图像中创建树.我想要的是javascript代码来处理和创建这种类型树的结构.必须非常感谢工作示例.

您可以根据需要使用JSON格式,树应该是可折叠的.还为它提供所需的JSON格式.

和我的JSON数据如下:

     {
     "2":
         {
          "5": "Wrist Watch"
         },
     "5":
         {
          "9": "Men's"
         },
     "18": 
         {
         "3": "Clothing"
         },
     "28": 
         {
         "1": "Perfumes"
         },
     "29": 
         {
         "7": "Laptop",
         "10": "Tablets"
         },
     "30":
         {
          "8": "Mobile"
         },
    "31": 
         {
          "2": "Books"
         },
    "33": 
         {
          "6": "Electronics"
         },
   "34": 
         {
          "4": "Home & Kitchen\n"
         }
    }

Answer 1

如果你想自己滚动,"树"中的关键字是递归.它需要支持数据和代码和数据应的任何深度都支持递归.

这意味着您的JSON数据应该是一个递归结构,其中每个节点看起来都一样(看起来像这样):

{
    id: 1,                  // data id
    title: "title",         // display title
    children: [             // list of children, each with this same structure
        // list of child nodes
    ]
}

注意:我已经更改了样本数据以包含更多深度,因为2个级别从不显示递归问题.

例如:

{
    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"
            }]
        }, {
            id: 12,
            title: "Option 12"
        }]
    }, {
        id: 2,
        title: "Option 2",
        children: [{
            id: 21,
            title: "Option 21"
        }, {
            id: 22,
            title: "Option 22"
        }]
    }, {
        id: 3,
        title: "Option 3",
        children: [{
            id: 31,
            title: "Option 31"
        }, {
            id: 32,
            title: "Option 32"
        }]
    }]
}

递归函数如下所示:

function addItem(parentUL, branch) {
    for (var key in branch.children) {
        var item = branch.children[key];
        $item = $('<li>', {
            id: "item" + item.id
        });
        $item.append($('<input>', {
            type: "checkbox",
            name: "item" + item.id
        }));
        $item.append($('<label>', {
            for: "item" + item.id,
            text: item.title
        }));
        parentUL.append($item);
        if (item.children) {
            var $ul = $('<ul>').appendTo($item);
            addItem($ul, item);
        }
    }
}

JSFiddle: http ://jsfiddle.net/0s0p3716/188/

代码递归结构,添加新的UL和LI(带复选框等).顶级调用只提供显示和数据的初始根起始点.

addItem($('#root'), data);

最终结果如下:

如果要根据选中的状态切换可见性,请使用以下命令:

$(':checkbox').change(function () {
    $(this).closest('li').children('ul').slideToggle();
});

如果您还希望标签切换复选框,请使用以下命令:

$('label').click(function(){
    $(this).closest('li').find(':checkbox').trigger('click');
});

注意:我只提供了最基本的造型,因为它通常是"品味".链接中的示例显示在另一个答案中.

- 更新:

修正:项目31和32可能有错误的ID？

更好的选择和取消选择的功能(父级连接到子节点):

$(function () {
addItem($('#root'), data);
$(':checkbox').click(function () {
    $(this).find(':checkbox').trigger('click');
    var matchingId = $(this).attr('id');
    if ($(this).attr('checked'))
    {
        $('input[id*=' + matchingId +']').each(function() {
        $(this).removeAttr('checked');
            $(this).prop('checked', $(this).attr('checked'));
        });
    }
    else {
         $('input[id*=' + matchingId +']').each(function() {
        $(this).attr('checked', 'checked');
            $(this).prop('checked', $(this).attr('checked'));

         });
    }

});
$('label').click(function(){
    $(this).closest('li').children('ul').slideToggle();

});

- 如此处所示更新小提琴(JsFiddle)并且它将更好地工作,并且还允许您单击文本以扩展而无需同时选择 - 我知道我发现这更有用.它将有助于(并且这是个人偏好)您可以看到哪些值和选项可用,而无需选择第一个.