0

我在同一页面上的 SharePoint 中有多个搜索显示模板。如果其中一个启用了分页(要求),则其他(S)在通过单击“下一页”呈现的新页面上丢失其单击事件。

我尝试了不同的解决方案,唯一能想到的解决方法是在分页点击时重新加载页面。我拒绝暗示这种解决方法。

请参阅附件模板和项目显示模板:

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

4

1 回答 1

0

使用 JavaScript Jquery,您可以捕获页面点击事件并在那里编写您的逻辑。

或者您可以自定义寻呼机模板并编写您的逻辑。

您可以查看参考文献的https://github.com/estruyf/DisplayTemplates链接。

于 2017-03-16T09:33:54.807 回答