javascript - 使用 JavaScript 或 JQuery 从 json 数据创建动态文件夹层次结构

Question

我的 jSon 数据结构:

     var data = {
            "FolderList": [
                        {
                            "FolderID": 1,
                            "FolderName": "parent1",
                            "ParentFolderID": -1
                        },
                        {
                            "FolderID": 2,
                            "FolderName": "parent1 Child1",
                            "ParentFolderID": 1
                        },
                        {
                            "FolderID": 3,
                            "FolderName": "parent2",
                            "ParentFolderID": -1
                        },
                        {
                            "FolderID": 4,
                            "FolderName": "parent1 Child1 Child1",
                            "ParentFolderID": 2
                        },
                        {
                            "FolderID": 5,
                            "FolderName": "parent1 Child1 Child2",
                            "ParentFolderID": 2
                        },
                        {
                            "FolderID": 6,
                            "FolderName": "parent2 Child1",
                            "ParentFolderID": 3
                        }
                ]
                    };

现在，我想像这样创建文件夹层次结构 html:

 parent1
    parent1 child1
      parent1 child1 child1
      parent1 child1 child2   
 parent2
    parent2 child1

其实我想生成这样的HTML代码

<ul>
    <li>Parent1
        <ul>
             <li>parent1 child1
                 <ul>
                     <li>parent1 child1 child1</li>
                     <li>parent1 child1 child2</li>
                 </ul>
             </li>
         </ul>
    </li>
    <li>parent2
        <ul>
            <li>parent2 child1</li>
        </ul>
    </li>
</ul>

我如何使用 JavaScript 或 jQuery 执行此操作？提前致谢。我尝试使用递归函数，但卡在了中间。但是我的代码是这样的:

        function populatedata() {
             $.each(data.FolderList, function (i, folder) {
                if (folder.ParentFolderID == -1) {
                    html += '<li>' + folder.FolderName;
                    checkChild(folder.FolderID);
                    html += '</li>';
                }

            });
        }

        function checkChild(parentid) {
            $.each(data.FolderList, function (i, folder) {

                if (folder.ParentFolderID == parentid) {
                    html += '<li><ul>' + folder.FolderName;
                    checkChild(folder.FolderID);
                    html+=</ul></li>
                    return html;
                }
                else {
                    return ;
                }
            });
        }

最后在 FAngel 的帮助下使用以下代码，我创建了项目中实际需要的结构

我修改后的代码是这样的:

      function populatedata() {
        var list = $("<ul>").attr({ class: "collapsibleList", id: "folder" });
             $.each(data.FolderList, function (i, folder) {
                 if (folder.ParentFolderID == -1) {
                   var item = $("<li>").
                   css("border-top","0").html('<span>'+folder.FolderName
                   +'</span><a href="Docs.html">
                   <div class="view-docs pull-right">View</div></a>');
                    list.append(item);
                    var children = $('<ul>');
                    item.append(children);
                    checkChild(folder.FolderID, children);
                  }
              });
              $('#folderList').append(list);
           }
         function checkChild(parentid, parent) {
              $.each(data.FolderList, function (i, folder) {
                if (folder.ParentFolderID == parentid) {
                    var item = $("<li>").
                        html('<span>'+folder.FolderName
                         +'</span><a href="Docs.html">
                           <div class="view-docs pull-right">View</div></a>');
                    var children = $('<ul>');
                    parent.append(item);
                    item.append(children);
                    checkChild(folder.FolderID, children);
                       }
                 else {
                    return;
                }
             });
         }

Answer 1

这是它的演示:http://jsfiddle.net/zn2C7/7/

   var list = $("<ul>");
   function populatedata() {
         $.each(data.FolderList, function (i, folder) {                
            if (folder.ParentFolderID == -1) {
                var item = $("<li>").html(folder.FolderName);

                list.append(item);
                var children = $('<ul>');
                item.append(children);
                checkChild(folder.FolderID, children);                    
            }

        });
        $('body').append(list);
    }

    function checkChild(parentid, parent) {
        $.each(data.FolderList, function (i, folder) {
            if (folder.ParentFolderID == parentid) {
                var item = $("<li>").html(folder.FolderName);                    
                var children = $('<ul>');
                parent.append(item);
                item.append(children);
                checkChild(folder.FolderID, children);                    
            }
            else {
                return ;
            }
        });
    }

可以使用 html 变量来构建它，就像您尝试那样做一样，但是使用 jQuery 的 DOM 操作函数要简单得多($('<ul>') 和 $('<li>') - 创建新元素， .append() - 追加元素到其他元素)

function checkChild(parentid) {
            $.each(data.FolderList, function (i, folder) {

                if (folder.ParentFolderID == parentid) {
                    html += '<li><ul>' + folder.FolderName;
                    checkChild(folder.FolderID);
                    html+=</ul></li>
                    return html;
                }
                else {
                    return ;
                }
            });
        }

此外，请注意，在上面的代码中，您正在执行 return html;来自 each函数回调。不确定你想要得到什么，但在 .each 它可能像 break 一样工作在常规循环中(如果你将返回 false):

We can stop the loop from within the callback function by returning false.

那是来自 jquery api 页面。

此外，对于此类任务，我更喜欢使用调试器。目前有很多强大的工具可以在浏览器中调试 HTML/CSS/JS。只需在 Chrome、IE 或 FF 中按 F12(对于最后一个，您可能需要安装 Firebug 扩展)，您将获得许多有用的功能以及简单的 JS 调试。