[英]Dynamically display SharePoint List items into HTML
I have the HTML give by the UI designer, requirement is such that whenever a user add a item(Links) into SharePoint list, it should dynamically take the list item and display it as per the HTML provided by UI.我有 UI 设计师提供的 HTML,要求是每当用户将项目(链接)添加到 SharePoint 列表中时,它应该动态获取列表项并按照 UI 提供的 Z4C4AD5FCA2E7A3F74DBB1CED0031 显示它。 Now i know that this can be achieved by REST API, but my problem is im unable to right Jquery HTML for the below HTML.
Now i know that this can be achieved by REST API, but my problem is im unable to right Jquery HTML for the below HTML. Any idea how can i display the below HTML in to dynamic so that when user add aa new item in list it will display.
知道如何将下面的 HTML 显示为动态,以便当用户在列表中添加新项目时它会显示。
<div class="sitemap-pills">
<ul class="nav nav-pills">
<li role="presentation"><a href="#sec1">Section 1</a></li>
<li role="presentation"><a href="#sec2">Section 2</a></li>
<li role="presentation"><a href="#sec3">Section 3</a></li>
<li role="presentation"><a href="#sec4">Section 4</a></li>
</ul>
</div>
<section id="sec1">
<h4>Section 1</h4> //section start here
<div class="row">
<div class="col-md-3">
<ul>
<li><a href="#">Home</a></li> //this will be sharePoint list items
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</section>
Image there is a HyperLink field which stored the hyperlink data in the list named "NavigationUrl", then please refer the following code snippet to display urls into html page:图片有一个 HyperLink 字段,将超链接数据存储在名为“NavigationUrl”的列表中,然后请参考以下代码片段将 url 显示到 html 页面中:
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
$.ajax({
url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('ListName')/items",
type: "GET",
contentType: "application/json;odata=verbose",
headers: {
"Accept": "application/json;odata=verbose"
},
success: function (data) {
//alert('Success');
console.log(data.d.results);
for(var i=0; i<data.d.results.length;i++)
{
$(".col-md-3>ul").append("<li><a href='"+data.d.results[i].NavigationUrl.Url+"'>"+data.d.results[i].NavigationUrl.Description+"</a></li>");
}
},
error: function (data) {
alert("Error");
}
});
});
</script>
<section id="sec1">
<h4>Section 1</h4>
<div class="row">
<div class="col-md-3">
<ul>
</ul>
</div>
<div></div>
The hyperlink field data have the following struct:超链接字段数据具有以下结构:
Url is the href property and description is the display text for <a>
tag. Url 是 href 属性,description 是
<a>
标签的显示文本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.