2017-03-16 7 views
0

같은 페이지에서 SharePoint에 여러 개의 검색 표시 템플릿이 있습니다. 그들 중 하나가 페이징을 활성화하면 (requirment) 다른 페이지는 '다음 페이지'를 클릭하여 렌더링 된 새 페이지에서 클릭 이벤트를 잃게됩니다.페이징 결과가있는 여러 SharePoint 표시 템플릿 클릭 기능이없는 다른 SharePoint 표시 템플릿

나는 다른 솔루션을 시도했으며 페이징 클릭시 페이지를 다시로드한다는 유일한 해결책을 시도했습니다. 이 임시 해결책을 내포하는 것을 거부합니다.

참조하시기 바랍니다 첨부 된 서식 & 항목 표시 템플릿 :

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> 
 
<head> 
 
    <title>Document List Main No Title (Hide) 2</title> 
 

 
    <!--[if gte mso 9]><xml> 
 
     <mso:CustomDocumentProperties> 
 
     <mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden> 
 
     <mso:MasterPageDescription msdt:dt="string">This is the default Control Display Template that will list the items. It does not allow the user to page through items.</mso:MasterPageDescription> 
 
     <mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106601</mso:ContentTypeId> 
 
     <mso:TargetControlType msdt:dt="string">;#Content Web Parts;#</mso:TargetControlType> 
 
     <mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded> 
 
    <mso:HtmlDesignStatusAndPreview msdt:dt="string">http://v02vestasp02/_catalogs/masterpage/JSE/Display%20Templates/Content%20Web%20Parts/Document_List_Main_No_Title_Hide2.html, Conversion successful.</mso:HtmlDesignStatusAndPreview> 
 
    </mso:CustomDocumentProperties> 
 
     </xml><![endif]--> 
 
</head> 
 

 
<body> 
 
    <div id="Control_ListWithPaging"> 
 

 
<!--#_ 
 
if (!$isNull(ctx.ClientControl) && !$isNull(ctx.ClientControl.shouldRenderControl) && !ctx.ClientControl.shouldRenderControl()) { 
 
    return ""; 
 
} 
 
ctx.ListDataJSONGroupsKey = "ResultTables"; 
 
var $noResults = Srch.ContentBySearch.getControlTemplateEncodedNoResultsMessage(ctx.ClientControl); 
 
var isRollupPageInDisplayMode = Srch.ContentBySearch.isRollupPage(ctx.ClientControl) && !Srch.U.isPageInEditMode(); 
 
var noResultsClassName = isRollupPageInDisplayMode ? "ms-attractMode ms-uppercase ms-alignCenter" : "ms-srch-result-noResults"; 
 
var ListRenderRenderWrapper = function(itemRenderResult, inCtx, tpl) { 
 
    var iStr = []; 
 
    iStr.push('<li>'); 
 
    iStr.push(itemRenderResult); 
 
    iStr.push('</li>'); 
 
    return iStr.join(''); 
 
} 
 
ctx['ItemRenderWrapper'] = ListRenderRenderWrapper; 
 
_#--> 
 
    <ul class="cbs-List"> 
 

 
<!--#_ 
 
var showPaging = ctx.ClientControl.get_showPaging(); 
 
if(showPaging) { 
 
    var pagingInfo = ctx.ClientControl.get_pagingInfo(); 
 
    if(!$isEmptyArray(pagingInfo)) { 
 
     var getPagingImageClassName = function(buttonClassNamePrefix, isNext, isEnabled) { 
 
      var className = buttonClassNamePrefix; 
 
      className += (isNext && !Srch.U.isRTL()) || (!isNext && Srch.U.isRTL()) ? "right" : "left"; 
 
      if(!$isNull(isEnabled) && isEnabled == false) { 
 
       className += "-disabled"; 
 
      } 
 
      return className; 
 
     } 
 
     var getPagingContainerClassName = function(buttonClassNamePrefix, isEnabled) { 
 
      var className = buttonClassNamePrefix; 
 
      className += isEnabled ? "enabled" : "disabled"; 
 
      return className; 
 
     } 
 
     var firstPage = pagingInfo[0]; 
 
     var lastPage = pagingInfo[pagingInfo.length - 1]; 
 
     var hasNextPage = lastPage.pageNumber == -2; 
 
     var hasPreviousPage = firstPage.pageNumber == -1; 
 
     var buttonClassNamePrefix = "ms-promlink-button-"; 
 
     var nextPageContainerClassName = getPagingContainerClassName(buttonClassNamePrefix, hasNextPage); 
 
     var previousPageContainerClassName = getPagingContainerClassName(buttonClassNamePrefix, hasPreviousPage); 
 
     var nextPageImageClassName = getPagingImageClassName(buttonClassNamePrefix, true, hasNextPage); 
 
     var previousPageImageClassName = getPagingImageClassName(buttonClassNamePrefix, false, hasPreviousPage); 
 
_#--> 
 
     <li class="ms-promlink-header"> 
 
      <span class="ms-promlink-headerNav"> 
 
       <a class="ms-commandLink ms-promlink-button _#= $htmlEncode(previousPageContainerClassName) =#_" title="_#= $htmlEncode(firstPage.title) =#_" href="#" onclick='$getClientControl(this).page(_#= $htmlEncode(firstPage.startItem) =#_);return Srch.U.cancelEvent(event);'> 
 
        <span class="ms-promlink-button-image"> 
 
         <img class="_#= $htmlEncode(previousPageImageClassName) =#_" alt="_#= $htmlEncode(firstPage.title) =#_" src="_#= $urlHtmlEncode(GetThemedImageUrl('spcommon.png')) =#_"> 
 
        </span> 
 
       </a> 
 

 
       <span class="ms-promlink-button-inner"></span> 
 

 
<!--#_ 
 
     // Show the paging numbers 
 
     for (var i = 0; i < pagingInfo.length; i++) { 
 
      var pi = pagingInfo[i]; 
 
      if(!$isNull(pi)) { 
 
       if (pi.pageNumber !== -1 && pi.pageNumber !== -2) { 
 
        var pageLinkId = "PageLink_" + pi.pageNumber; 
 
        // Check if it is the current selected page 
 
        if (pi.startItem === -1) { 
 
_#--> 
 
        <strong>_#= $htmlEncode(pi.pageNumber) =#_</strong> 
 
<!--#_ 
 
        } else { 
 
_#--> 
 
        <a id="_#= $htmlEncode(pageLinkId) =#_" href="#" title="_#= $htmlEncode(pi.title) =#_" onclick="$getClientControl(this).page(_#= $htmlEncode(pi.startItem) =#_);return Srch.U.cancelEvent(event);">_#= $htmlEncode(pi.pageNumber) =#_</a> 
 
<!--#_ 
 
        } 
 
       } 
 
      } 
 
     } 
 
_#--> 
 

 
       <span class="ms-promlink-button-inner"></span> 
 

 
       <a class="ms-commandLink ms-promlink-button _#= $htmlEncode(nextPageContainerClassName) =#_" title="_#= $htmlEncode(lastPage.title) =#_" href="#" onclick='$getClientControl(this).page(_#= $htmlEncode(lastPage.startItem) =#_);return Srch.U.cancelEvent(event);'> 
 
        <span class="ms-promlink-button-image"> 
 
         <img class="_#= $htmlEncode(nextPageImageClassName) =#_" alt="_#= $htmlEncode(lastPage.title) =#_" src="_#= $urlHtmlEncode(GetThemedImageUrl('spcommon.png')) =#_"> 
 
        </span> 
 
       </a> 
 
      </span> 
 
     </li> 
 
<!--#_ 
 
    } 
 
} 
 
_#--> 
 

 
      _#= ctx.RenderGroups(ctx) =#_ 
 
     </ul> 
 
<!--#_ 
 
if (ctx.ClientControl.get_shouldShowNoResultMessage()) { 
 
_#--> 
 
     <div class="_#= noResultsClassName =#_">_#= $noResults =#_</div> 
 
<!--#_ 
 
} 
 
_#--> 
 

 
    </div> 
 
</body> 
 
</html>

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> 
 
<head> 
 
    <title>JSE Item Document</title> 
 

 
    <!--[if gte mso 9]> 
 
     <xml> 
 
      <mso:CustomDocumentProperties> 
 
       <mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden> 
 
       <mso:ManagedPropertyMapping msdt:dt="string">     Title{Title}:Title, 
 
        Path{Path}:Path, 
 
        FileExtension{FileExtension}:FileExtension</mso:ManagedPropertyMapping> 
 
       <mso:MasterPageDescription msdt:dt="string">This Item Display Template will show a 100x100 picture of the item on the left. The title and the default item description will display to the right of the picture with an additional line that is available for a custom managed property.</mso:MasterPageDescription> 
 
       <mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId> 
 
       <mso:TargetControlType msdt:dt="string">;#Content Web Parts;#</mso:TargetControlType> 
 
      <mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded> 
 
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://v02vestasp02/_catalogs/masterpage/JSE/Display Templates/Content Web Parts/JSE_Item_Document.html, Conversion successful.</mso:HtmlDesignStatusAndPreview> 
 
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated> 
 
<mso:CrawlerXSLFile msdt:dt="string"></mso:CrawlerXSLFile> 
 
<mso:HtmlDesignPreviewUrl msdt:dt="string"></mso:HtmlDesignPreviewUrl> 
 
</mso:CustomDocumentProperties> 
 
     </xml> 
 
    <![endif]--> 
 
</head> 
 

 
<body> 
 

 
    <!-- 
 
      Warning: Do not try to add HTML to this section. Only the contents of the first <div> 
 
      inside the <body> tag will be used while executing Display Template code. Any HTML that 
 
      you add to this section will NOT become part of your Display Template. 
 
    --> 
 
    <script> 
 
     $includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js"); 
 
    </script> 
 

 
    <!-- 
 
     Use the div below to author your Display Template. Here are some things to keep in mind: 
 
     * Surround any JavaScript logic as shown below using a "pound underscore" (#_ ... _#) token 
 
     inside a comment. 
 

 
     * Use the values assigned to your variables using an "underscore pound equals" 
 
     (_#= ... =#_) token. 
 
    --> 
 

 
    <div id="JSE_Item_Document"> 
 
     <!--#_ 
 
     var title = $getItemValue(ctx, "Title"); 
 
     var path = $getItemValue(ctx, "Path"); 
 
     var i = Srch.U.getIconUrlByFileExtension(ctx.CurrentItem); 
 
           var docID = ctx.CurrentItem.DocId; 
 

 
           function CheckDocID() { 
 
               if (document.getElementById(ctx.CurrentItem.DocId) != null){ 
 
                   docID = Math.floor((Math.random() * 100) + 1); 
 
               } 
 
               
 
               if (document.getElementById(docID) != null){ 
 
                   docID = Math.floor((Math.random() * 100) + 1); 
 
               } 
 
           } 
 
           
 
           CheckDocID(); 
 
           
 
     title.overrideValueRenderer($contentLineText); 
 

 
           AddPostRenderCallback(ctx, function() { 
 
               function registerClickEvents(){ 
 
                   var ExpBorderShow = 'EbS'; 
 
                   $('#' + docID).click(function (e) { 
 
                       var $ShowDetailButton_clicked = $(this); 
 
                       var $ShowDetail_PrevSibling = $(this).prev(); 
 
                       var $ShowDetail_DocLink = $(this).prev().children().first(); 
 
                       var pHeight = $(this).parent().height(); 
 
                       if ($ShowDetail_PrevSibling.hasClass(ExpBorderShow) && 
 
                           $ShowDetailButton_clicked.hasClass('Active')) { 
 
                           var $Target = $(e.currentTarget); 
 
                           $ShowDetailButton_clicked.removeClass('Active'); 
 
                           $ShowDetail_DocLink.css({ 
 
                               'white-space': 'nowrap' 
 
                           }); 
 
                           $ShowDetail_PrevSibling.css({ 
 
                               'height': '20px' 
 
                           }); 
 
                           if (pHeight >= 17) { 
 
                               $ShowDetailButton_clicked.parent().animate({ 
 
                                   height: '20px' 
 
                               }); 
 
                           } 
 
                           $ShowDetailButton_clicked.removeClass("glyphicon-minus-sign"); 
 
                           $ShowDetailButton_clicked.addClass("glyphicon-plus-sign"); 
 
                           $ShowDetailButton_clicked.prev().toggleClass(ExpBorderShow); 
 
                       } 
 
                       else { 
 
                           $ShowDetailButton_clicked.toggleClass('Active'); 
 
                           $ShowDetail_DocLink.css({ 
 
                               'white-space': 'normal' 
 
                           }); 
 
                           var h = $ShowDetail_DocLink.html(); 
 
                           if (pHeight <= 17 && h.length <= 44) { 
 
                               $ShowDetail_PrevSibling.css({ 
 
                                   'height': '55px' 
 
                               }); 
 
                               $ShowDetailButton_clicked.parent().animate({ 
 
                                   height: '55px' 
 
                               }); 
 
                           } 
 
                           else { 
 
                               $ShowDetail_PrevSibling.css({ 
 
                                   'height': '64px' 
 
                               }); 
 
                               $ShowDetailButton_clicked.parent().animate({ 
 
                                   height: '64px' 
 
                               }); 
 
                           } 
 
                           $ShowDetailButton_clicked.removeClass("glyphicon-plus-sign"); 
 
                           $ShowDetailButton_clicked.addClass("glyphicon-minus-sign"); 
 
                           $ShowDetailButton_clicked.prev().toggleClass(ExpBorderShow); 
 
                       } 
 
                   }); 
 
               } 
 
               
 
               setTimeout(registerClickEvents, 1500); 
 
           }); 
 
           
 
     _#--> 
 
     <div class="read__more__info__documents--c"> 
 
      <div class="read__more__info__documents--i"> 
 
       <img width="16" height="16" border="0" class="left" src="_#= i =#_" /> 
 
      </div> 
 
      <div class="read__more__info__documents--a"> 
 
       <a class="read__more__info__documents" style="white-space : nowrap;" target="_blank" href="_#= path =#_">_#= title =#_</a> 
 
      </div> 
 
               <div class="read__more__info__documents--s glyphicon glyphicon-plus-sign" style="font-family: 'Glyphicons Halflings';" id="_#= docID =#_"></div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

답변

0

자바 스크립트 jQuery를 사용하면 페이지의 클릭 이벤트를 캡처하고 거기에 당신의 논리를 쓸 수 있습니다 .

또는 페이저 템플릿을 사용자 정의하고 논리를 작성할 수 있습니다.

https://github.com/estruyf/DisplayTemplates 링크를 확인하여 참조 할 수 있습니다.