使用jQuery顯示Sharepoint列表數據到動態html表格

Question

我有一個場景，我需要使用jQuery在動態html表格中顯示列表數據，以在內容編輯器webpart的網站中顯示。請提前幫助我解決這個問題，謝謝...

Answer 1

您可以使用SharepointPlus或SPServices來檢索列表數據。然後，使用jQuery將數據插入HTML頁面非常簡單。

Answer 2

您可以使用SharePoint客戶端上下文REST API來獲取數據並將其顯示在表中。添加對這三個腳本的引用：
1. /_layouts/15/SP.Runtime.js
2./_layouts/15/SP.js
3. //ajax.googleapis.com/ajax/libs/jquery /1.11.1/jquery.min.js
並使用下面的例子：

<script type="text/javascript"> 

    $(document).ready(function() { 
     fnGetData(); 
    }); 
    function fnGetData() { 
     context = new SP.ClientContext.get_current(); 
     web = context.get_web(); 
     var list = web.get_lists().getByTitle('Users'); 
     var myquery = new SP.CamlQuery(); 
     myquery.set_viewXml("<View><Query>" + 
         "<Where>" + 
         "<IsNotNull>" + 
    "<FieldRef Name='Title' />" + 
    "</IsNotNull>" + 
    "</Where>" + 
           "</Query></View>"); 
     myquery.set_datesInUtc(false); 
     myItems = list.getItems(myquery); 
     context.load(myItems); 
     context.executeQueryAsync(Function.createDelegate(this, function() { fnGetDataSuccess(); }), Function.createDelegate(this, this.fnGetDataFailed)); 
    } 
    function fnGetDataSuccess() { 
     var txtHTML = ""; 
     var ListEnumeratorAcc = this.myItems.getEnumerator(); 
     while (ListEnumeratorAcc.moveNext()) { 
      var currentItem = ListEnumeratorAcc.get_current(); 
      txtHTML = txtHTML + "<tr>"; 
      txtHTML = txtHTML + "<td>"; 
      if (currentItem.get_item('Title') != null) { 
       txtHTML = txtHTML + currentItem.get_item('Title'); 
      } 
      txtHTML = txtHTML + "</td>"; 


      txtHTML = txtHTML + "<td>"; 
      if (currentItem.get_item('Owner') != null) { 
       txtHTML = txtHTML + currentItem.get_item('Owner').get_lookupValue(); 
      } 
      txtHTML = txtHTML + "</td>"; 
      txtHTML = txtHTML + "</tr>"; 
     } 
     $("#tblCustomListData").append(txtHTML); 

    } 
    function fnGetDataFailed(sender, args) { 
     alert("Error Message:\n" + "URL: " + sender.get_url() + ". \n\Error Description:" + args.get_message()); 
    } 
</script> 
<table id="tblCustomListData" border="1"> 
    <thead> 
     <tr> 
      <th>Title 
      </th> 
      <th>Owner 
      </th> 
     </tr> 
    </thead> 
</table>