使用SPServices从SharePoint列表构建HTML表

时间:2014-08-26 09:24:17

标签: javascript jquery sharepoint spservices

我尝试使用SPServices使用SharePoint列表中的数据构建HTML表。我查看了网站,我的代码似乎与工作示例相符,但我在我的网站上没有得到任何结果(我只看到文本表标题),并且控制台中没有错误。< / p>

以下是我的代码,谢谢。

<script type="text/javascript" src="URL/SiteAssets/Libraries/jquery-min.js"></script>
<script type="text/javascript" src="URL/SiteAssets/Libraries/SPServices-min.js.js"></script>
<script type="text/javascript" src="URL/SiteAssets/Libraries/underscore.js"></script>
<script type="text/javascript">

$(document).ready(function() {
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "{REMOVED}",
    CAMLViewFields: "<ViewFields><FieldRef Name='Project_x0020_ID' /><FieldRef Name='Title'/><FieldRef Name='Summary_x0020_Description'/><FieldRef Name='Technology_x0020_Stream'/></ViewFields>",
    completefunc: function (xData, Status) {
        $(xData.responseXML).find("[nodeName='z:row']").each(function() {
        var projectid = $(this).attr("ows_Project_x0020_ID");
        var title = $(this).attr("ows_Title");
        var sumdesc = $(this).attr("ows_Summary_x0020_Description");
        var techstream = $(this).attr("ows_Technology_x0020_Stream");
        var tableBody = document.getElementByID("tasksTB");
        tableBody.innerHTML = "<tr><td>" + projectid + "</td><td>" + title + "</td><td>" + sumdesc + "</td><td>" + techstream + "</td></tr>";
        });
    }
  });
});
</script>
<html>
<body>
<table>

   <thead>
       <tr>
           <th>Project ID</th>
           <th>Title</th>
           <th>Summary Description</th>
           <th>Technology Stream</th>
       </tr>
   </thead>

   <tbody id="tasksTB">
   </tbody>
</table>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

更改您的HTML代码,如下所示。确保我删除了tbody并将id添加到整个表格

<table id="task">
<thead>
   <tr>
       <th>Project ID</th>
       <th>Title</th>
       <th>Summary Description</th>
       <th>Technology Stream</th>
   </tr>
 </thead>
</table>

并且在完整的功能中执行类似的操作。在第一行的下面的代码中,我清空表的tbody。然后我用datarows

创建变量
completefunc: function (xData, Status) {
$("#task > tbody").html(""); 
var datarows = "<tbody>";
$(xData.responseXML).find("[nodeName='z:row']").each(function() {
    var projectid = $(this).attr("ows_Project_x0020_ID");
    var title = $(this).attr("ows_Title");
    var sumdesc = $(this).attr("ows_Summary_x0020_Description");
    var techstream = $(this).attr("ows_Technology_x0020_Stream");
    datarows += "<tr><td>" + projectid + "</td><td>" + title + "</td><td>" + sumdesc + "</td><td>" + techstream + "</td></tr>";
    });
  datarows += "</tbody>";
  $("#task").append(datarows);
}

希望这会对你有所帮助。