Динамическое отображение элементов списка SharePoint в HTML - PullRequest
Новая
       73

Динамическое отображение элементов списка SharePoint в HTML

0 голосов
/ 27 апреля 2020

У меня есть HTML, предоставленное дизайнером пользовательского интерфейса, требование состоит в том, чтобы всякий раз, когда пользователь добавляет элемент (ссылки) в список SharePoint, он должен динамически брать элемент списка и отображать его в соответствии с HTML, предоставленным UI. Теперь я знаю, что это может быть достигнуто с помощью REST API, но моя проблема заключается в том, что я не могу исправить Jquery HTML для приведенного ниже HTML. Любая идея, как я могу отобразить ниже HTML в Dynami c, чтобы при добавлении пользователем нового элемента в списке он отображался. 

  <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>

1 Ответ

0 голосов
/ 28 апреля 2020

Изображение есть поле 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>

Поле гиперссылки данные имеют следующую структуру:

enter image description here

Url является свойством href, а описание является отображаемым текстом для тега <a>.

...