如何隐藏内容搜索Web部件没有结果 [英] How to hide Content Search Web Part with no results
问题描述
您好，我正在尝试隐藏CSWP，因为它没有任何结果可以显示。
Hello, I'm trying to hide a CSWP based on it doesn't have any results to display.
基于以下代码，我试图获取DIV元素的id ctl00_ctl40_g_cd9e4a07_6e88_4745_b698_82649c5ae3e1_csr来隐藏它...
Based on the following code I'm trying to get the id of the DIV element ctl00_ctl40_g_cd9e4a07_6e88_4745_b698_82649c5ae3e1_csr to hide it...
< div class =" ms-webpart-zone ms -fullWidth">
< div id =" MSOZoneCell_WebPartWPQ5" class =" s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth">
< div class =" ms-webpart-chrome ms- webpart-chrome-vertical ms-webpart-chrome-fullWidth">
< div class =" ms-webpart-chrome-title" id =" WebPartWPQ5_ChromeTitle">
< span title ="内容搜索 - 内容搜索Web部件将允许您显示作为您指定的搜索查询结果的项目。将其添加到页面时，此Web部件将显示当前站点中最近修改的项目。您可以通过编辑Web部件并更改其搜索条件来更改此
设置以显示来自其他站点或列表的项目。当搜索发现新内容时，此Web部件将在每次页面时显示更新的项目列表被观看。" ID = QUOT; WebPartTitleWPQ5"
class =" js-webpart-titleCell">
<div class="ms-webpart-zone ms-fullWidth">
<div id="MSOZoneCell_WebPartWPQ5" class="s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth ">
<div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
<div class="ms-webpart-chrome-title" id="WebPartWPQ5_ChromeTitle">
<span title="Content Search - Content Search Web Part will allow you to show items that are results of a search query you specify. When you add it to the page, this Web Part will show recently modified items from the current site. You can change this
setting to show items from another site or list by editing the Web Part and changing its search criteria.As new content is discovered by search, this Web Part will display an updated list of items each time the page is viewed." id="WebPartTitleWPQ5"
class="js-webpart-titleCell">
< h2 style =" text-align：justify;" class =" ms-webpart-titleText">内容搜索< / h2>
<h2 style="text-align:justify;" class="ms-webpart-titleText">Content Search</h2>
< / span>
< / div>
</span>
</div>
< div webpartid =" cd9e4a07-6e88-4745-b698-82649c5ae3e1" haspers = QUOT假QUOT; ID = QUOT; WebPartWPQ5"宽度= QUOT; 100％QUOT; class =" ms-WPBody ms-WPBorder noindex ms-wpContentDivSpace" allowdelete = QUOT假QUOT; style ="">
<div webpartid="cd9e4a07-6e88-4745-b698-82649c5ae3e1" haspers="false" id="WebPartWPQ5" width="100%" class="ms-WPBody ms-WPBorder noindex ms-wpContentDivSpace " allowdelete="false" style="">
< / div>< / div>
</div></div>
< div的ComponentID = QUOT; ctl00_ctl40_g_cd9e4a07_6e88_4745_b698_82649c5ae3e1_csr" ID = QUOT; ctl00_ctl40_g_cd9e4a07_6e88_4745_b698_82649c5ae3e1_csr" style =" display：none;">
<div componentid="ctl00_ctl40_g_cd9e4a07_6e88_4745_b698_82649c5ae3e1_csr" id="ctl00_ctl40_g_cd9e4a07_6e88_4745_b698_82649c5ae3e1_csr" style="display: none;">
< div class =" containerForStyle">
< ul class =" cbs-List">
&NBSP; &NBSP; &NBSP; &NBSP; &NBSP;
<div class="containerForStyle"> <ul class="cbs-List">
< div class =" ms-srch-result-noResults">那里没有要显示的项目。& nbsp;< / div> &NBSP; < / ul>< / div>< / div>
< div id =" ctl00_ctl40_g_cd9e4a07_6e88_4745_b698_82649c5ae3e1">
< div class =" display-none">
< div class =" ms-webpart-chrome-title" id =" WebPartWPQ7_ChromeTitle">
< span title ="" ID = QUOT; WebPartTitleWPQ7" class =" js-webpart-titleCell">
<div class="display-none">
<div class="ms-webpart-chrome-title" id="WebPartWPQ7_ChromeTitle">
<span title="" id="WebPartTitleWPQ7" class="js-webpart-titleCell">
< h2 style =" text-align：justify;" class =" ms-webpart-titleText">< nobr>< span>< / span>< span id =" WebPartCaptionWPQ7">< / span>< / nobr>< / h2> ;< / span>
< / div>
<h2 style="text-align:justify;" class="ms-webpart-titleText"><nobr><span></span><span id="WebPartCaptionWPQ7"></span></nobr></h2></span>
</div>
< div webpartid =" 00000000-0000-0000-0000-000000000000" haspers = QUOT;真" ID = QUOT; WebPartWPQ7"宽度= QUOT; 100％QUOT; class =" ms-WPBody ms-WPBorder noindex ms-wpContentDivSpace" onlyformepart = QUOT;真" allowdelete = QUOT假QUOT;
style ="">< div componentid =" ctl00_ctl40_g_cd9e4a07_6e88_4745_b698_82649c5ae3e1_ctl00_csr" id =" ctl00_ctl40_g_cd9e4a07_6e88_4745_b698_82649c5ae3e1_ctl00_csr">
<div webpartid="00000000-0000-0000-0000-000000000000" haspers="true" id="WebPartWPQ7" width="100%" class="ms-WPBody ms-WPBorder noindex ms-wpContentDivSpace " onlyformepart="true" allowdelete="false" style=""><div componentid="ctl00_ctl40_g_cd9e4a07_6e88_4745_b698_82649c5ae3e1_ctl00_csr" id="ctl00_ctl40_g_cd9e4a07_6e88_4745_b698_82649c5ae3e1_ctl00_csr">
< div class =" ms-srch-dataProvider" ID = QUOT; DataProvider的" name =" Control">< / div>< / div>
<div class="ms-srch-dataProvider" id="DataProvider" name="Control"></div></div>
< div id =" ctl00_ctl40_g_cd9e4a07_6e88_4745_b698_82649c5ae3e1_ctl00" ;>
< / div>< div class =" ms-clear">< / div>< / div>
< / div>
< / div>< div class =" ms-clear">< / div>< / div> ;
< / div>
< / div>
< / div>
</div><div class="ms-clear"></div></div>
</div>
</div><div class="ms-clear"></div></div>
</div>
</div>
</div>
是这是最好的办法吗？我应该采取什么其他考虑来实现这一目标？在此先感谢，
Is this the best approach to do it? What other considerations should I take to accomplish this? Thanks in advance,
推荐答案
您好 ，
您可以使用下面Elio共享的自定义显示模板。
https://www.eliostruyf.com/hiding-the-cswp-title-when-there-are-no-results/
在此处备份脚本，以防链接损坏。
<!--#_
// Check if the web part should be hidden (when no results are retrieved)
if (ctx.ClientControl.get_shouldShowNoResultMessage()) {
var containerClass =
htmlEncode（ctx.ClientControl。 get_nextUniqueId（）+" _hide"）;
AddPostRenderCallback（ctx，function（）{
//检查页面是否处于编辑模式
var inDesignMode = document.forms [MSOWebPartPageFormName] .MSOLayout_InDesignMode;
var wikiInEditMode = document。 forms [MSOWebPartPageFormName] ._ wikiPageMode;
var inEdit = false;
if（typeof inDesignMode！==" undefined"）{
inEdit = inDesignMode.value ===" 1"？ true：false;
}
if（typeof wikiInEditMode！==" undefined"）{
inEdit = wikiInEditMode.value ===" Edit"？true：false;
}
//页面未处于编辑模式时隐藏webpart
if（！inEdit）{
var container = document.getElementsByClassName（containerClass）;
if（container。长度）{
var elm = container [0];
while（（elm = elm.parentElement）&&！elm.classList.contains（'s4-wpcell-p躺））;
if（typeof elm！==" undefined"&& elm！== null）{
elm.style.display =" none" ;;
}
}
}
}）;
_＃ - >
< div class =" _＃= containerClass =＃_">< / div>
<！ - #_
}
_＃ - >
htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_hide"); AddPostRenderCallback(ctx, function() { // Check if page is in edit mode var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode; var wikiInEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode; var inEdit = false; if (typeof inDesignMode !== "undefined") { inEdit = inDesignMode.value === "1" ? true : false; } if (typeof wikiInEditMode !== "undefined") { inEdit = wikiInEditMode.value === "Edit" ? true : false; } // Hide the webpart when page is not in edit mode if (!inEdit) { var container = document.getElementsByClassName(containerClass); if (container.length) { var elm = container[0]; while ((elm = elm.parentElement) && !elm.classList.contains('s4-wpcell-plain')); if (typeof elm !== "undefined" && elm !== null) { elm.style.display = "none"; } } } }); _#--> <div class="_#= containerClass =#_"></div> <!--#_ } _#-->
最好的问候，
Lee
这篇关于如何隐藏内容搜索Web部件没有结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
