javascript - SharePoint 2013 使用javascript构建站点树状导航

Question

我正在尝试构建一个组件来呈现 Sharepoint 网站集的网站和子网站的结构，并使用 code from here

这段代码很棒，但不幸的是，它会一个接一个地返回所有站点而没有层次结构，我有兴趣返回/构建输出，如下所示:(因为我可以绑定(bind)到 TreeView 图书馆)

<ul>
  <li>site 1
  <li>site 2
  <li>site 3
  <ul>
  <li>Sub-site 3.1
  <ul>
    <li>Sub-site 3.1.1
    <li>Sub-site 3.1.2
  </ul>
  <li>Sub-site 3.2
  <ul>
    <li>Sub-site 3.2.1
    <li>Sub-site 3.2.2
  </ul>
</ul>

很想听听任何对此有想法或做过类似事情的人的意见。我希望找到像 SharePoint 2013 的 jquery 站点 TreeView 导航之类的东西，但我发现的只是 KWizCom treeview component。 (这将完美地解决我们的挑战)并且我们不允许将服务器端代码部署到服务器场。

提前致谢

Answer 1

如果您愿意在混合中加入一点递归，这就相对简单了。

基本过程如下:获取给定网站的所有子网站，将它们显示在层次结构中，然后对每个子网站重复该过程。

这是一个让您入门的示例。

<ul id="root_hierarchy"></ul>

<script>
ExecuteOrDelayUntilScriptLoaded(showWebHierarchy,"sp.js");

function showWebHierarchy(){
    var rootUrl = "/yoursitecollectionurl";
    rootNode = document.getElementById("root_hierarchy");   
    get_subwebs(rootUrl,rootNode);
}

// get_subwebs is a recursive function that accepts the following parameters:
// url: the server relative url of a web 
// node: <ul> element in which to display subsites
function get_subwebs(url,node){
    var clientContext = new SP.ClientContext(url);
    var webs = clientContext.get_web().get_webs();
    clientContext.load(webs);
    clientContext.executeQueryAsync(function(){
        for(var i = 0, len = webs.get_count(); i < len; i++){
            var web = webs.getItemAtIndex(i);
            node.insertAdjacentHTML("beforeend","<li><a target='_blank' href='"
                 + web.get_serverRelativeUrl() + "'>"
                 + web.get_title() + "</a><ul url='" 
                 + web.get_serverRelativeUrl() + "'></ul></li>");
        }
        var subnodes = node.querySelectorAll("ul");
        for(var i = 0, len = subnodes.length; i < len; i++){
            var subnode = subnodes[i];
            var url = subnode.getAttribute("url");
            get_subwebs(url,subnode);
        }
    },function(sender,args){alert(args.get_message());});   
}
</script>

请注意，这会在当前登录用户的权限下运行，因此它无法显示当前用户无权访问的站点。