使用SPServices从SharePoint列表构建HTML表

我正试图使用SPServices用SharePoint列表中的数据构建一个HTML表。我浏览了整个网站，我的代码似乎与工作示例相匹配，但我在网站上没有得到任何结果（我只看到了文本表标题），控制台中也没有错误。

下面是我的代码，谢谢。

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

如下更改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>

在完整的功能中做这样的事情。在下面的第一行代码中，我清空了表的正文。然后我用数据行生成变量

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);
}

希望这对你有帮助。

相关内容

最新更新

热门标签：