开发者问题收集

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

2013-10-18
1331
javascript jquery html sharepoint recursion

我有一个网站集。有人告诉我我需要一个递归循环来执行此操作。

这是我尝试过的：

当网站加载时，调用 getSiteTree()，它将顶级网站传递给我的 getSubSite() 函数。从那里我检查是否有任何子网站。我有一个布尔值，但我还没有真正用它做任何事情，我只是以前见过它用于这种类型的工作。无论如何，从那里我检查是否有任何子网站，如果没有，我记录分支的末尾，如果有，我使用新 url 再次调用该函数并重复该过程。查看我的控制台，它似乎按预期工作。 

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);
            });
      }
    }
    });
}

我的问题 ：现在我有了我的网站，我需要利用这些网站并创建类似的东西，但我不确定如何实现这一点。 

    <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>

我有这个初始 html： 

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

这是我可以获得的输出以及我想要实现的目标。希望这能让事情变得清晰一些 https://i.sstatic.net/RsxA4.png :

在此处输入图片描述

1个回答

假设您有一个嵌套对象，您可能想做类似这样的事情： 

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);
    });
}

这里有一个小提琴： http://jsfiddle.net/snowburnt/uJbE8/1/

对于 SharePoint，您将发送网站集的 RootWeb，而不是子类别，您将发送 item.webs 属性。当然，所有这些都使用 javascript 或 jquery 对象。您可以用其他方式执行此操作，但如果您想递归它，则拥有一个包含同一“类”的其他对象的对象会有所帮助

Snowburnt
2013-10-18