SharePoint 2016 Search 定制开发简介系列三-定制Search Result Webpart样式

最新推荐文章于 2020-01-01 21:27:48 发布

dev-avemike

最新推荐文章于 2020-01-01 21:27:48 发布

阅读量217

点赞数

CC 4.0 BY-SA版权

分类专栏： SharePoint 文章标签： SharePoint Search

本文链接：https://blog.youkuaiyun.com/liangpike/article/details/96856426

SharePoint 专栏收录该内容

12 篇文章

订阅专栏

本文是SharePoint 2016 Search定制开发系列的第三部分，主要讲解如何定制Search Result Webpart的样式。内容涵盖Control_SearchResults.html中的样式修改，包括webpart整体框架的调整，如排序功能的显示与隐藏，并提到了SharePoint属性中的json配置。文章还提及了若要改变搜索结果Item的显示方式，需要使用Item_{Type}.html显示模板，这部分将在后续系列中详述。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定制Search Result Webpart样式

上一系列介绍了Search Navigation部分的样式开发以及配置，本系列介绍Search Result Webpart的样式定制

Search Result Webpart对应的显示模板在SharePoint中位于：

_catalogs/masterpage/Display Templates/Search/Control_SearchResults.html

同样需要定制search results webpart样式的时候就需要修改control_searchresults.html页面，这里介绍的样式只限定于该webpart的整体框架部分

SharePoint默认给出了很多设置控制该webpart的样式，比如webpart 属性中的show sort dropdown

选中该设置之后，webpart上会显示默认的排序功能，包含按照relevance, date, views排序，在sharepoint属性中是以json字符串的方式配置的，可以很方便的删除不需要的排序方式，该样式的html加载代码如下

<!--#_
                }
                if(showSortOptions){
                    var resultHeaderClassNoEncode = "ms-metadata";
                    var availableSorts = ctx.DataProvider.get_availableSorts();
_#-->
                    <div id="ResultHeader" class="_#= resultHeaderClassNoEncode =#_">
                        <ul id="Actions">                    
                                <li id="Sortby">
                                    <select title="_#= $htmlEncode(Srch.Res.rs_SortDescription) =#_" id="SortbySel" onchange="$getClientControl(this).sortOrRank(this.value);">
<!--#_ 
                                    for (var i = 0; i < availableSorts.length; i++) {
                                        var cplxsort = availableSorts[i];
                                        if(!$isNull(cplxsort)){
                                            if(ctx.DataProvider.getSortRankName() == cplxsort.name) {
_#-->
                                                <option selected="selected" value="_#= $htmlEncode(cplxsort.name) =#_">
                                                    _#= $htmlEncode(cplxsort.name) =#_
                                                </option>
<!--#_ 
                                            } else {
_#-->
                                                <option value="_#= $htmlEncode(cplxsort.name) =#_">
                                                    _#= $htmlEncode(cplxsort.name) =#_
                                                </option>
<!--#_ 
                                            }
                                        }
                                    } 
_#-->

想要修改这块的逻辑可以修改该部分的js代码，同理该webpart中的其他部分定制方法类似，当然该改动只限定于搜索结果item之外的内容，如果希望改动搜索结果的Item显示方式，就需要用到SharePoint中名为Item_{Type}.html的显示模板，我们再下个系列中介绍