不显示列表的项目消息 [英] Display no items message for a list

查看：97
本文介绍了不显示列表的项目消息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个列表，可以在页面上的CEWP上显示警报，如下所示。根据每个项目的列选择，它有不同的颜色。如何显示"无活动项目"？当allitems.aspx
视图中没有商品时，带有绿色背景的消息？  

< style> 
 .alert {
 padding：5px; 
 background-color：＃f44336; 
颜色：白色; 
 border：black 3px; 
 border-style：Solid 
} 
 .alert1 {
 padding：5px; 
 background-color：orange; 
颜色：白色; 
 border：black 3px; 
 border-style：Solid 
} 
 .closebtn {
 margin- 
 color：white; 
 font-weight：bold; 
 float：right; 
字体大小：22px; 
 line-height：20px; 
 cursor：pointer; 
过渡：0.3s; 
} 
 
 .closebtn：悬停{
颜色：黑色; 
} 
< / style> 
< div id =" ParentWrapper"> 
< / div> 
< script src =" / _ layouts / 15 / sp.runtime.js"类型= QUOT;文本/ JavaScript的">< /脚本> 
< script src =" / _ layouts / 15 / sp.js"类型= QUOT;文本/ JavaScript的">< /脚本> 
< script type =" text / javascript" src =" https://code.jquery.com/jquery-3.3.1.js">< / script>< script type =" text / javascript"> 
 jq = jQuery.noConflict（true）; 
 SP.SOD.executeFunc（'sp.js'，'SP.ClientContext'，retrieveListItems）; 
函数retrieveListItems（）
 {
 var clientContext = new SP.ClientContext.get_current（）; 
 var oList = clientContext.get_web（）。get_lists（）。getByTitle（'Alerts'）; 
 var camlQuery = new SP.CamlQuery（）; 
 camlQuery.set_viewXml（"< View>< Query>< Where>< And>< Leq>< FieldRef Name ='Start'/>< Value Type ='DateTime'IncludeTimeValue ='TRUE'><今天/>< / Value>< / Leq>< Geq>< FieldRef Name ='Expires_x0020_On'/>< Value Type ='DateTime'IncludeTimeValue ='TRUE' ><今天/>< / Value>< / Geq>< / And>< / Where>< OrderBy>< FieldRef Name ='Body'Ascending ='TRUE'/>< /排序依据>< /查询>< /视图>"）; 
 this.collListItem = oList.getItems（camlQuery）; 
 clientContext.load（collListItem）; 
 clientContext.executeQueryAsync（Function.createDelegate（this，this.onQuerySucceeded），Function.createDelegate（this，this.onQueryFailed））; 
} 
函数onQuerySucceeded（sender，args）
 {
 var listItemInfo =''; 
 var listItemEnumerator = collListItem.getEnumerator（）; 
 while（listItemEnumerator.moveNext（））{
 var oListItem = listItemEnumerator.get_current（）; 
 var alertBody = oListItem.get_item（'Body'）; 
 var clrHTML ="< div style ='clear：both; width：100％; height：5px;'>< / div>" ;; 
 var alertContentHTML ="" ;; 
 if（oListItem.get_item（'Event_x0020_type'）==" A"）{
 alertContentHTML + ="< div class ='alert1'>" ;; 
}其他{
 alertContentHTML + ="< div class ='alert'>" ;; 
} 
 alertContentHTML + ="< div class ='Logo'>< / div>< span class ='closebtn'onclick ='this.parentElement.style.display =&＃ 39;无&＃39;;'>×< / span>< div id ='AlertBodyBox'>" + alertBody +"< / div>< / div>" + clrHTML; 
 jq（"＃ParentWrapper"）。append（alertContentHTML）; 
} 
} 
 
函数onQueryFailed（sender，args）
 {
 alert（'Request failed。'+ args.get_message（）+'\\ \\ n'+ args.get_stackTrace（））; 
} 
< / script>

解决方案


以下代码供您参考。

< style> 
 .alert {
 padding：5px; 
 background-color：＃f44336; 
颜色：白色; 
 border：black 3px; 
 border-style：Solid 
} 
 .alert1 {
 padding：5px; 
 background-color：orange; 
颜色：白色; 
 border：black 3px; 
 border-style：Solid 
} 
 .alertEmpty {
 padding：5px; 
 background-color：green; 
颜色：白色; 
 border：black 3px; 
 border-style：Solid 
} 
 .closebtn {
 margin- 
 color：white; 
 font-weight：bold; 
 float：right; 
字体大小：22px; 
 line-height：20px; 
 cursor：pointer; 
过渡：0.3s; 
} 
 
 .closebtn：悬停{
颜色：黑色; 
} 
< / style> 
< div id =" ParentWrapper"> 
< / div> 
< script src =" / _ layouts / 15 / sp.runtime.js"类型= QUOT;文本/ JavaScript的">< /脚本> 
< script src =" / _ layouts / 15 / sp.js"类型= QUOT;文本/ JavaScript的">< /脚本> 
< script type =" text / javascript" src =" https://code.jquery.com/jquery-3.3.1.js">< / script>< script type =" text / javascript"> 
 jq = jQuery.noConflict（true）; 
 SP.SOD.executeFunc（'sp.js'，'SP.ClientContext'，retrieveListItems）; 
函数retrieveListItems（）{
 var clientContext = new SP.ClientContext.get_current（）; 
 var oList = clientContext.get_web（）。get_lists（）。getByTitle（'Alerts'）; 
 var camlQuery = new SP.CamlQuery（）; 
 camlQuery.set_viewXml（"< View>< Query>< Where>< And>< Leq>< FieldRef Name ='Start'/>< Value Type ='DateTime'IncludeTimeValue ='TRUE'><今天/>< / Value>< / Leq>< Geq>< FieldRef Name ='Expires_x0020_On'/>< Value Type ='DateTime'IncludeTimeValue ='TRUE' ><今天/>< / Value>< / Geq>< / And>< / Where>< OrderBy>< FieldRef Name ='Body'Ascending ='TRUE'/>< /排序依据>< /查询>< /视图>"）; 
 this.collListItem = oList.getItems（camlQuery）; 
 clientContext.load（collListItem）; 
 clientContext.executeQueryAsync（Function.createDelegate（this，this.onQuerySucceeded），Function.createDelegate（this，this.onQueryFailed））; 
} 
函数onQuerySucceeded（sender，args）{
 var listItemInfo =''; 
 var listItemEnumerator = collListItem.getEnumerator（）; 
 if（collListItem.get_count（）== 0）{
 var alertContentHTML ="< div class ='alertEmpty'>< div id ='AlertBodyBox'>没有可用的活动项目。 < / DIV>< / DIV>英寸; 
 jq（"＃ParentWrapper"）。append（alertContentHTML）; 
} else {
 while（listItemEnumerator.moveNext（））{
 var oListItem = listItemEnumerator.get_current（）; 
 var alertBody = oListItem.get_item（'Body'）; 
 var clrHTML ="< div style ='clear：both; width：100％; height：5px;'>< / div>" ;; 
 var alertContentHTML ="" ;; 
 if（oListItem.get_item（'Event_x0020_type'）==" A"）{
 alertContentHTML + ="< div class ='alert1'>" ;; 
}其他{
 alertContentHTML + ="< div class ='alert'>" ;; 
} 
 alertContentHTML + ="< div class ='Logo'>< / div>< span class ='closebtn'onclick ='this.parentElement.style.display =&＃ 39;无&＃39;;'>×< / span>< div id ='AlertBodyBox'>" + alertBody +"< / div>< / div>" + clrHTML; 
 jq（"＃ParentWrapper"）。append（alertContentHTML）; 
} 
} 
} 
函数onQueryFailed（sender，args）{
 alert（'请求失败。'+ args.get_message（）+'\ n' + args.get_stackTrace（））; 
} 
< / script>


最好的问候，


Dennis



I have a list to display alerts on a CEWP on a page as below. It's different colors based on column choice for every item. How can I display a "No active items available" message with a green background for when there are no items in the allitems.aspx view? 

<style>
.alert {
    padding: 5px;
    background-color: #f44336;
    color: white;
    border:black 3px;
    border-style:Solid
}
.alert1 {
    padding: 5px;
    background-color: orange;
    color: white;
    border:black 3px;
    border-style:Solid
}
.closebtn {
    margin-
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}
</style> 
<div id="ParentWrapper"> 
</div> 
<script src="/_layouts/15/sp.runtime.js" type="text/javascript"></script>
<script src="/_layouts/15/sp.js" type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script><script type="text/javascript">
jq = jQuery.noConflict( true );
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveListItems);
function retrieveListItems()
{
	var clientContext = new SP.ClientContext.get_current();
	var oList = clientContext.get_web().get_lists().getByTitle('Alerts');
	var camlQuery = new SP.CamlQuery();
	camlQuery.set_viewXml("<View><Query><Where><And><Leq><FieldRef Name='Start'/><Value Type='DateTime' IncludeTimeValue='TRUE'><Today /></Value></Leq><Geq><FieldRef Name='Expires_x0020_On'/><Value Type='DateTime' IncludeTimeValue='TRUE'><Today /></Value></Geq></And></Where><OrderBy><FieldRef Name='Body' Ascending='TRUE' /></OrderBy></Query></View>");
	this.collListItem = oList.getItems(camlQuery);
	clientContext.load(collListItem);
	clientContext.executeQueryAsync( Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed) );
}
function onQuerySucceeded(sender, args)
{
	var listItemInfo = '';
	var listItemEnumerator = collListItem.getEnumerator();
	while (listItemEnumerator.moveNext()) {
		var oListItem = listItemEnumerator.get_current();
		var alertBody=oListItem.get_item('Body');
		var clrHTML ="<div style='clear: both;width: 100%;height: 5px;'></div>";
		var alertContentHTML="";
		if(oListItem.get_item('Event_x0020_type')=="A"){
			alertContentHTML+="<div class='alert1'>";
		}else{
			alertContentHTML+="<div class='alert'>";
		}
		alertContentHTML+="<div class='Logo'></div><span class='closebtn' onclick='this.parentElement.style.display=&#39;none&#39;;'>×</span><div id='AlertBodyBox'>"+alertBody+"</div></div>"+clrHTML;
		jq("#ParentWrapper").append(alertContentHTML);
	}
}
              
function onQueryFailed(sender, args)
{
	alert('Request failed. ' + args.get_message() +'\n' + args.get_stackTrace());
}
</script>


解决方案

Hi,

The following code for your reference.

<style>
.alert {
    padding: 5px;
    background-color: #f44336;
    color: white;
    border:black 3px;
    border-style:Solid
}
.alert1 {
    padding: 5px;
    background-color: orange;
    color: white;
    border:black 3px;
    border-style:Solid
}
.alertEmpty{
    padding: 5px;
    background-color: green;
    color: white;
    border:black 3px;
    border-style:Solid
}
.closebtn {
    margin-
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}
</style> 
<div id="ParentWrapper"> 
</div> 
<script src="/_layouts/15/sp.runtime.js" type="text/javascript"></script>
<script src="/_layouts/15/sp.js" type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script><script type="text/javascript">
jq = jQuery.noConflict( true );
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveListItems);
function retrieveListItems(){
	var clientContext = new SP.ClientContext.get_current();
	var oList = clientContext.get_web().get_lists().getByTitle('Alerts');
	var camlQuery = new SP.CamlQuery();
	camlQuery.set_viewXml("<View><Query><Where><And><Leq><FieldRef Name='Start'/><Value Type='DateTime' IncludeTimeValue='TRUE'><Today /></Value></Leq><Geq><FieldRef Name='Expires_x0020_On'/><Value Type='DateTime' IncludeTimeValue='TRUE'><Today /></Value></Geq></And></Where><OrderBy><FieldRef Name='Body' Ascending='TRUE' /></OrderBy></Query></View>");
	this.collListItem = oList.getItems(camlQuery);
	clientContext.load(collListItem);
	clientContext.executeQueryAsync( Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed) );
}
function onQuerySucceeded(sender, args){
	var listItemInfo = '';
	var listItemEnumerator = collListItem.getEnumerator();
	if(collListItem.get_count()==0){
		var alertContentHTML="<div class='alertEmpty'><div id='AlertBodyBox'>No active items available.</div></div>";
		jq("#ParentWrapper").append(alertContentHTML);
	}else{
		while (listItemEnumerator.moveNext()) {
			var oListItem = listItemEnumerator.get_current();
			var alertBody=oListItem.get_item('Body');
			var clrHTML ="<div style='clear: both;width: 100%;height: 5px;'></div>";
			var alertContentHTML="";
			if(oListItem.get_item('Event_x0020_type')=="A"){
				alertContentHTML+="<div class='alert1'>";
			}else{
				alertContentHTML+="<div class='alert'>";
			}
			alertContentHTML+="<div class='Logo'></div><span class='closebtn' onclick='this.parentElement.style.display=&#39;none&#39;;'>×</span><div id='AlertBodyBox'>"+alertBody+"</div></div>"+clrHTML;
			jq("#ParentWrapper").append(alertContentHTML);
		}
	}
}             
function onQueryFailed(sender, args){
	alert('Request failed. ' + args.get_message() +'\n' + args.get_stackTrace());
}
</script>

Best Regards,

Dennis


这篇关于不显示列表的项目消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆