附加 <ul> 和 <li> 在递归循环中

Question

I have a site collection. I was told I need a recursive loop to do this.

This is what I've tried:

When the site loads, call getSiteTree() which passes the top level website to my getSubSite() function. From there I check if there are any subsites. I have a boolean but I'm not really using it for anything yet, I've just seen it used before for this type of work. Anyways, from there I check if there are any sub sits, if not I log the end of the branch, if there are, I call the function again using the new url and repeat the process. Looking at my console, it seems to work as intended.

function getSiteTree(){
  var tree = $('#treeviewList');
  var rootsite = window.location.protocol + "//" + window.location.hostname;
  var siteEnd = false;

  getSubSite(rootsite);  
}

function getSubSite(url){
    $().SPServices({
    operation: "GetWebCollection",
    webURL: url,
    async: true,
    completefunc: function(xData, Status) {
        var siteUrl; 
        var siteCount = $(xData.responseXML).find("Web").length;

        if(siteCount == 0){
            console.log("end of branch");
            siteEnd = true;
        }else{
            $(xData.responseXML).find("Web").each(function() {
                siteUrl = $(this).attr("Url");
                console.log(siteUrl);
                getSubSite(siteUrl);
            });
      }
    }
    });
}

My questions : now that I have my sites, I need to take those sites and create something like this but I'm not sure how to accomplish this.

    <li>Site 1
        <ul>
            <li>sub 1.1</li>
            <li>sub 1.2</li>
            <li>sub 1.3</li>
                <ul>
                    <li>1.3.1</li>
                </ul>
            <li>sub 1.4</li>
            <li>sub 1.5</li>
        </ul>
    </li>
    <li>Site 2
        <ul>
            <li>sub 2.1</li>
            <li>sub 2.2</li>
            <li>sub 2.3</li>
                <ul>
                    <li>2.3.1</li>
                    <li>2.3.2</li>
                </ul>
        </ul>
    </li>
</ul>

I have this inital html:

      <div id="treeviewDiv" style="width:200px;height:150px;overflow:scroll">
        <ui id="treeviewList"></ui>
      </div>

This is the output I can get and what I'm trying to accomplish. Hopefully this clears things up a bit http://i.imgur.com/D5eHeHe.png :

Answer 1

You'd want to do something like this assuming you have a nested object:

function buildTree($element, $object) {
    var $ul = $('<ul></ul>');
    var $li;
    $object.forEach(function (item) {
        $li = $('<li>' + item.Name + '</li>');
        $ul.append($li);
        if (item.SubCategories.length > 0) {
            buildTree($ul, item.SubCategories);
        }
        $element.append($ul);
    });
}

here's a fiddle: http://jsfiddle.net/snowburnt/uJbE8/1/

For SharePoint, you would send the RootWeb of the site collection and instead of subcategories you'd send the item.webs property. All of this using a javascript or jquery object, of course. You could do it some other way, but if you want to recurse it, it helps to have an object that contains other objects of the same "class"