Вставьте HTML-таблицу в sharepoint 2013 webpart-скрипт

У меня проблема, я создал простую веб-часть, которая выполняет основы CRUD OPERATIONS, я хотел добавить таблицу HTML для форматирования и отображения результатов, полученных из операции READ, здесь код для лучшего понимания:Вставьте HTML-таблицу в sharepoint 2013 webpart-скрипт

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 тег (который я не писал), и это близко тег/таблица автоматически в неправильном положении - это код, отображаемый в браузере:

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

Кто-нибудь знает, почему? Любая идея о том, как решить эту проблему? Большое спасибо

источник

2015-04-15 SergioPetrarca

Похоже, в вашем коде, переменная строка просто перезаписывать себя, и вы публикуете результаты в браузере каждый раз. Вместо использования .append() каждый раз, когда вы обновляете строку, просто используйте string += ...., а затем добавьте после того, как петли запустились, а строка заполнена полной таблицей.

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

Надеется, что это помогает!

источник

2015-04-15 14:08:38 ManicComputer

Другой вариант, если у вас много данных, заключается в том, чтобы сначала создать таблицу, чтобы браузер мог создать таблицу с любым необходимым CSS для просмотра пользователем, а затем добавить строки с вашими данными. [Здесь приведен пример альтернативного JSFiddle] (http://jsfiddle.net/maniccomputer/Lv88z675/). Вы все еще можете использовать свое приложение, но вместо добавления к элементу #results вы добавляете его в таблицу _in_ в таблицу #results. – ManicComputer

Спасибо за помощь. Он отлично работает. – SergioPetrarca

Вы всегда можете вставить HTML в существующую таблицу, используя метод JQuery after(). Поскольку у вас есть первый <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> таблица определена с идентификатором mytab. Этот идентификатор выбирается в коде, который заполняет строки.

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

источник

2015-04-15 13:50:05

Пожалуйста, можете быть более конкретным, исходя из моего примера? Я не могу реализовать ваше решение, возможно, я ничего не понимаю. Большое спасибо – SergioPetrarca

Я только что добавил макет, включая некоторые фиктивные данные и обработку. Удачи! –

Спасибо за вашу помощь, Он также работает, но я предпочитаю решение ManiacComputer, потому что мне легче. – SergioPetrarca

Вставьте HTML-таблицу в sharepoint 2013 webpart-скрипт

ответ

Смежные вопросы