bootstraptable子表
layout 綁入
css =>
<link rel="stylesheet" href="~/lib/bootstrap-table/bootstrap-table.css" asp-append-version="true" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" asp-append-version="true">
js =>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/bootstrap-table/bootstrap-table.min.js"></script>
頁面上的table =>
多 事件
onExpandRow: function(index, row, $detail) {
initDetailTable(index, row, $detail);
},
子表
function initDetailTable(index, row, $detail) {
let tableId = 'detail_' + index;
$detail.html(
'<table id="' + tableId + '"></table>'
);
$('#' + tableId).bootstrapTable({
data: row.events,
pagination: false,
columns: [
{
field: '來源欄',
title: '顯示欄',
},
]
});
}
來源 : https://getbootstrap.com/docs/5.0/content/tables/、https://bootstrap-table.com/docs/api/events/、https://www.cnblogs.com/turnip/p/10834548.html