Há um repositório no github, bootstrap-table-examples, que mostra uma tabela dinâmica e muito interessante de ser reaproveitada. Porém, por falta de conhecimento não consegui compreender o projeto 100%. Contudo, tem um trecho de código fiquei muito interessado e mesmo procurando na internet não encontrei nada similar, que é modo como a tabela é construída.
No arquivo welcome.html a tabela está sendo construída por JQuery passando parâmetros para ele. Segue o código:
var $table = $('#table'),
$remove = $('#remove'),
selections = [];
function initTable() {
$table.bootstrapTable({
height: getHeight(),
columns: [
[
{
field: 'state',
checkbox: true,
rowspan: 2,
align: 'center',
valign: 'middle'
}, {
title: 'Item ID',
field: 'id',
rowspan: 2,
align: 'center',
valign: 'middle',
sortable: true,
footerFormatter: totalTextFormatter
}, {
title: 'Item Detail',
colspan: 3,
align: 'center'
}
],
[
{
field: 'name',
title: 'Item Name',
sortable: true,
editable: true,
footerFormatter: totalNameFormatter,
align: 'center'
}, {
field: 'price',
title: 'Item Price',
sortable: true,
align: 'center',
editable: {
type: 'text',
title: 'Item Price',
validate: function (value) {
value = $.trim(value);
if (!value) {
return 'This field is required';
}
if (!/^\$/.test(value)) {
return 'This field needs to start width $.'
}
var data = $table.bootstrapTable('getData'),
index = $(this).parents('tr').data('index');
console.log(data[index]);
return '';
}
},
footerFormatter: totalPriceFormatter
}, {
field: 'operate',
title: 'Item Operate',
align: 'center',
events: operateEvents,
formatter: operateFormatter
}
]
]
});
Gostaria de entender mais de como isso é feito! E também, se possível, passar outros links para eu verificar e estudar também de outras fontes! E, se possível, opine se é de fato mais interessante montar tabela de modo dinâmico assim ou fazer mesmo no código html!
Muito grato!