使用Java显示带有关闭按钮的列表项 [英] Display list item with close button using Javascript
本文介绍了使用Java显示带有关闭按钮的列表项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望从名为"Alerts"的自定义列表中显示SharePoint列表项.样式类似于
I am looking to display SharePoint list items from a custom list called "Alerts" styled similar to
我要显示正文"列以及一个关闭按钮，以允许用户折叠警报.我也希望能够应用上述样式.
I want to display the "Body" column only along with a close button to allow users to collapse the alert. I want to be able to apply the above styles as well.
(function () {
var itemCtx = {};
itemCtx.Templates = {};
itemCtx.Templates.Header = "<table>";
itemCtx.Templates.Item = ItemOverrideFun;
itemCtx.Templates.Footer = "</table>";
itemCtx.BaseViewID = 1;
itemCtx.ListTemplateType = 100;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
})();
function ItemOverrideFun(ctx) {
var _AlertDesc = ctx.CurrentItem.Body;
return "<tr><td><p><b>" + "<span style='font-size:24px'>"+ _AlertDesc + "</span></b>" + "</b></td></tr>";
}
推荐答案
嗨这里是经过全面测试的脚本，用于使用JSOM从列表中显示具有所需样式的警报
Here's full tested script for displaying the alerts with the required styles from a list using JSOM
#将Content Editor Webpart插入共享点页面，然后按照脚本+ html插入Web部件
# Insert Content Editor webpart to the sharepoint pages , then following script + html to the web part
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .alert { padding: 20px; background-color: #f44336; 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> </head> <body> <h2>Alert Messages</h2> <p>Click on the "x" symbol to close the alert message.</p> <div class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> <strong id="AlertBodyBox">Danger!</strong> </div> </body> </html> <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script> <script type="text/javascript" src="/_layouts/15/sp.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript"> 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><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');
(#AlertBodyBox").text(alertBody); } } 函数onQueryFailed(sender，args) { alert('请求失败.'+ args.get_message()+'\ n'+ args.get_stackTrace()); } </script>("#AlertBodyBox").text(alertBody); } } function onQueryFailed(sender, args) { alert('Request failed. ' + args.get_message() +'\n' + args.get_stackTrace()); } </script>这是结果
这篇关于使用Java显示带有关闭按钮的列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
