SharePoint 2013 指定位置增加路径导航（JQuery）

最新推荐文章于 2020-07-22 06:26:08 发布

原创最新推荐文章于 2020-07-22 06:26:08 发布 · 1.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

sharepoint2013

本文介绍如何在SharePoint2013中通过jQuery实现文件路径导航功能，适用于定制化的首页，帮助用户快速定位文件夹位置。

SharePoint 2013 指定位置增加路径导航

由于首页是完全定制化，隐藏了所有SharePoint 本身的元素，但是在知识管理中心，由于文件夹比较深，所有需要返回文件路径导航。以下代码是JQery写的，使用SharePoint 2013 的脚本编辑器实现。效果如下。

如上图，单击20 信息化时
结果如下图

其实现代码如下，可以直接复制到html 测试；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>nav</title>
    <style>
        .spCustomNav li {display: inline-block}
        .spCustomNav li a { text-decoration: none;}
    </style>
</head>
<body>

    <ul class="spCustomNav">
        <li><a href="#"></a> </li>
    </ul>
    <script src="http://portal.hhgs.cpiw/dep/SiteAssets/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        function redirect(){
            var s = window.location.search;
            if(!s){
                 window.location.href = "?RootFolder=/dep/kjxxb/documents/项目文档/项目一/标书/历史版本/相关图片";            }
        }

        //SP中有自带的函数 GetUrlKeyValue
        function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURIComponent(r[2]);
            }
            return null;
        }
        //拼接QueryString
        //使用本地html测试正式环境去掉即可
        //redirect();

         var searchStr = decodeURIComponent( window.location.search);         
         //alert(searchStr);
        if(searchStr) {
            var fullPath = getQueryString("RootFolder");
            var  baseUrl = fullPath.split('documents')[0] + "documents/";
              var      foderPath = fullPath.split("Documents/")[1]; 
                          if(foderPath == undefined)//如果路径结果为undefined 则会出现全部路径或乱码
                           { foderPath = fullPath.split("documents/")[1];  } 
               var     control = $(".spCustomNav").eq(0);
               var navBuilder =  spLibNavBuilder({baseUrl:baseUrl,folderPath:foderPath,control:control});
            navBuilder.render();
            control.delegate("a","click",function(ev){
              var GetNev =$(this).attr("href");   
               //单击跳转  
              var x1=   GetNev.split("Documents")[0];
              var x2= GetNev.split("documents")[1];
              var x3=     x1+"Documents"+x2;    
               //alert(x3);
                 var x4= x3.split("ocuments");
                  if (x4.length >= 3) {
                    x5=x4[0]+"ocuments"+x4[1];
                     window.location.href=x5.split("D")[0];       
                  } else
                {  
                   window.location.href=x3;       
                  }             
               

                return false;
            });
        }

         //自定义的 SharePoint Nav Builder
        //可能需要独自考虑文件夹根路径的情况
         function spLibNavBuilder (settings) {
            var _settings = {
                baseUrl: "/",
                folderPath: location.href,
                control: null
            };

            _settings = $.extend(_settings, settings);

            function  render(){
                var baseUrl = _settings.baseUrl,
                        folderArrs = _settings.folderPath.split('/');
                        control = _settings.control, htmlArr =[], tempArr=[],
                        len = folderArrs.length;
                control.empty();
                for(var i=0; i<len;i++){
                    tempArr.push(folderArrs[i]);
                    var title = folderArrs[i] + (  i == len -1 ? "" : ">>  ");
                    var href = baseUrl +  tempArr.join('/');
                    htmlArr.push(builderSingleNav(title,href));
                }
                control.append(htmlArr.join(""))
            }

             function  builderSingleNav(title,href){
                 return  '<li><a href="' + href + '">' +decodeURIComponent( title) + '</a></li>';
             }

            return {render:render};
        };

    </script>
</body>
</html>