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

Question

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

这段代码很棒，但不幸的是，它 returns 所有站点一个接一个地没有层次结构，我对 returning/building 输出类似这样的内容很感兴趣：(因为我可以绑定到树视图库）

<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 站点树视图导航的东西，但我发现的只是 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>

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

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

SharePoint 2013 build a site tree navigation using javascript

javascript

navigation

treeview

sharepoint

csom