将 HTML table 插入 Sharepoint 2013 webpart 脚本

Question

我有一个问题，我创建了一个简单的 Web 部件来执行基本的 CRUD 操作，我想添加一个 HTML table 来格式化和显示从 READ 操作检索到的结果，这是更好理解的代码：

 function retriveListItem() {
  execute(
    "items?$orderby=Nom&$select=Nom,Cognom,Indirizz",
    "GET",
    "GET",
    null,
    function (data, status, xhr) {
        $("#result").empty();
        var string = "<table><tr><th>Nome</th><th>Cognome</th><th>Indirizzo</th></tr>";
        $("#result").append(string);
        string = string = "";
      for (var i = 0; i < data.d.results.length; i++) {
          var item = data.d.results[i];
          string = "<tr><td>" + item.Nom + "</td><td>" + item.Cognom + "</td><td>" + item.Indirizz + "</td></tr>";
        $("#result").append(string);
      }
      string = "</table>";
     $("#result").append(string);
    },
    function (xhr, status, error) {
      $("#result").empty().text(error);
    });
}

但是当页面在浏览器中呈现时，如果我按下 F12 键，我发现 sharepoint 会自动添加 tbody 标签（我没有写过）并自动关闭标签 /table这里错误的位置是在浏览器中呈现的代码：

<div id="result">
  <table>
    <tbody>
      <tr>
       <th>Nome</th>
       <th>Cognome</th>
       <th>Indirizzo</th>
      </tr>
    </tbody>
 </table>
<tr>
  <td>Giova</td>
  <td>Nardi</td>
  <td>Viale della Cagna, Verona</td>
</tr>
<tr>
  <td>Antonio</td>
  <td>Petrarca</td>
  <td>Via Camello 31, Rovegna</td>
</tr>
<tr>
  <td>Luca</td>
  <td>Mandelli</td>
  <td>Via Rossini, 32 Cesano Maderno</td>
</tr>
</div>

有人知道这是为什么吗？关于如何解决该问题的任何想法？非常感谢

Answer 1

您始终可以使用 JQuery 的 after() 方法将 HTML 插入到现有的 table 中。由于您已经有了第一个 <tr>，您可以在第一行之后戳入您构建的 HTML：

// First, put your basic table into #result
$("#result").html('<table id="resulttable"><tr><td>...</td></tr></table>');

// Next build up the necessary rows and columns
for (var i = 0; i < data.d.results.length; i++) {
    // Build up your string as above
}
// Next, poke it into the DOM after the first <tr>
$("#resulttable tr").first().after(string);

您将在下面找到完整的模型。 results 数据和填充行的代码显示在页面的 <head> 部分中。在此之下，在 <body> 中定义了一个 table，ID 为 mytab。该 ID 在填充行的代码中选取。

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script type="text/javascript">

    data = { d : {
        results: [
            { Nom: 'nom1', Cognom: 'Cognom1', Indirizz: 'Indirrizz1' },
            { Nom: 'nom2', Cognom: 'Cognom2', Indirizz: 'Indirrizz2' },
            { Nom: 'nom3', Cognom: 'Cognom3', Indirizz: 'Indirrizz3' } ] } };

    $(document).ready(function() {
        for (var i = 0; i < data.d.results.length; i++) {
            item = data.d.results[i]
            str = '<tr><td>' + item.Nom + '</td><td> ' + item.Cognom +
                '</td><td>' + item.Indirizz + '</td></tr>';
            $('#mytab tr').first().after(str);
        }
    });

    </script>
  </head>
  <body>
    <table id="mytab">
      <tr>
        <td>First column</td> <td>Second column</td> <td>Third column</td>
      </tr>
    </table>
  </body>
</html>

Answer 2

看起来在您的代码中，您的字符串变量只是在覆盖自身，并且您每次都将结果发布到浏览器。而不是每次更新字符串时都使用 .append() ，只需使用 string += .... 然后在循环具有运行并且字符串填充完整的 table.

Here is a JSFiddle 例如使用您的代码（大部分）。

因此您的代码如下所示：

function retriveListItem() {
execute(
"items?$orderby=Nom&$select=Nom,Cognom,Indirizz",
"GET",
"GET",
null,
function (data, status, xhr) {
    $("#result").empty();
    var string = "<table><tr><th>Nome</th><th>Cognome</th><th>Indirizzo</th></tr>";
    //$("#result").append(string);
    //string = string = "";
    for (var i = 0; i < data.d.results.length; i++) {
      var item = data.d.results[i];
      string += "<tr><td>" + item.Nom + "</td><td>" + item.Cognom + "</td><td>" + item.Indirizz + "</td></tr>";
    //$("#result").append(string);
  }
  string += "</table>";
 $("#result").append(string);
},
function (xhr, status, error) {
  $("#result").empty().text(error);
});
}

希望对您有所帮助！

将 HTML table 插入 Sharepoint 2013 webpart 脚本

Insert an HTML table into sharepoint 2013 webpart script

html

sharepoint-2013

sharepoint-list