4

私の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;
                }
             });
         }
4

2 に答える 2

4

ここにデモがあります：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 を返す場合):

false を返すことで、コールバック関数内からループを停止できます。

それはjquery apiページからのものです。

また、そのようなタスクには、デバッガーを使用することを好みます。現時点では、ブラウザーで HTML/CSS/JS をデバッグするための強力なツールが多数あります。Chrome、IE、または FF を押すだけF12で (最後のものについては、Firebug 拡張機能をインストールする必要がある場合があります)、簡単な JS デバッグと共に多くの便利な機能を利用できます。

于 2012-12-25T10:37:16.600 に答える
2

コードを更新し、次の方法で解決しました。コードに li 要素がない場合、コードは不要な ul 要素を作成しません。つまり、親に子がない場合、ul は作成されません。 

 function populateFolder() {
    var list = $("<ul>").attr({ class: "collapsibleList", id: "folder" });
    $.each(data.FolderList, function (i, folder) {
        if (folder.ParentFolderID == -1) {
            var item = $("<li>").html('<span>' + folder.FolderName +
                        '</span><a href="Docs.html">
                        <div class="view-docs pull-right">View</div></a>');
            checkChild(folder.FolderID, item);
            list.append(item);
    });
    $('#anydiv').append(list);

}

function checkChild(parentid, parent) {
    $.each(data.FolderList, function (i, folder) {
       if (folder.ParentFolderID == parentid) {
          var children = $('<ul>');
          var item = $("<li>").html('<span>' + folder.FolderName 
                    + '</span><a href="Docs.html">
                    <div class="view-docs pull-right">View</div></a></li>');
        children.append(item);
        checkChild(folder.FolderID, item);
        parent.append(children);
    }
    else 
        return;
  });
}
于 2012-12-28T12:38:58.930 に答える