Какой самый быстрый способ создать таблицу HTML с данными из массива JavaScript? - PullRequest
Новая
       52

Какой самый быстрый способ создать таблицу HTML с данными из массива JavaScript?

2 голосов
/ 31 июля 2011

У меня есть следующий код для преобразования моего набора данных JSON в HTML-таблицу. Я хочу знать, если это самый быстрый метод, или я должен использовать jqote2 с jquery для написания шаблона?

Требования:

  • может изменить определения столбцов одним щелчком мыши (клиент может изменить способ просмотра таблицы, изменится массив определений столбцов и перестроить таблицу)
  • сортировка, фильтрация и разбиение на страницы (я считаю, что необработанные данные могут быть отсортированы и таблица может быть перестроена)
  • преобразований (если, скажем, 1 столбец содержит данные длины в разных единицах, то можно добавить новый столбец в наборе необработанных данных, содержащий данные в 1 единице, чтобы можно было отсортировать данные)

Так может ли кто-нибудь направить меня, если я на правильном пути или я работаю над тем, что уже существует? 

<div id="hii"><!-- table loads here --></div>

<script>
var set1={ // JSON dataset & col definitions
    'col':[ // definition/template of data to load in column cells
        [function(x){return '<a href="?sid='+x[1]+'">'+x[0]+'</a>';}],
        [function(x){return '<a href="?id='+x[2]+'">'+x[2]+'</a>';}],
    ],
    'data':[ // raw data, output table has only 2cells/row using these 3 values from each row
        ['Name 1','00000001','Value 1'],
        ['Name 2','00000002','Value 2'],
        ['Name 3','00000003','Value 3'],
        ['Name 4','00000004','Value 4'],
        ['Name 1','00000001','Value 5'],
        ['Name 5','00000005','Value 1'],
        ['Name 6','00000006','Value 1'],
        ['Name 7','00000007','Value 2'],
        ['Name 8','00000008','Value 6'],
        ['Name 9','00000009','Value 3'],
        ['Name A','00000010','Value 7'],
        ['Name B','00000011','Value 7'],
        ['Name C','00000012','Value 1'],
    ],
};
function tbody(x){ // function to create table, using dataset name passed to x
    for(i=0,data='';i<x.data.length;i++){
        data+='<tr>';
        for(j=0;j<x.col.length;j++){
            data+='<td>'+x.col[j][0](x.data[i])+'</td>';
        }
        data+='</tr>';
    }
    return data;
}
document.getElementById('hii').innerHTML='<table>'+tbody(set1)+'</table>';
</script>

Ответы [ 4 ]

2 голосов
/ 31 июля 2011

Вы можете использовать Datatables . Он работает с JQuery, а также является themable. Вы можете установить несколько вариантов, которые могут удовлетворить ваши требования, и даже больше.

1 голос
/ 14 августа 2013

jquery / jqote может сделать это тоже: 

$('#container tbody').empty().html($('#row_template').jqote(set1));

<script type="text/x-jqote-template" id="row_template">
<![CDATA[
    <tr id="<%=this.id%>_valuebox">
        <td><%=this.name%></td>
        <td><%=this.value%></td>
    </tr>
]]>
</script>
1 голос
/ 31 июля 2011

Это не так просто сделать. Взгляните на Sencha (extJS), особенно на Grids - http://www.sencha.com/learn/legacy/Tutorials, http://www.sencha.com/learn/legacy/Tutorials#Grids

0 голосов
/ 31 июля 2011

Взгляните на плагин jQuery Templates.

http://api.jquery.com/category/plugins/templates/

<ul id="movieList"></ul>

<script id="movieTemplate" type="text/x-jquery-tmpl">
    <li><b>${Name}</b> (${ReleaseYear})</li>
</script>

<script type="text/javascript">
    var movies = [
        { Name: "The Red Violin", ReleaseYear: "1998" },
        { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
        { Name: "The Inheritance", ReleaseYear: "1976" }
    ];

    // Render the template with the movies data and insert
    // the rendered HTML under the "movieList" element
    $( "#movieTemplate" ).tmpl( movies )
        .appendTo( "#movieList" );
</script>
...