在於bootstrap Table 5的單欄做修改的功能
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/x-editable-bs5@1.5.8/dist/bootstrap5-editable/css/bootstrap-editable.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
js =>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/bootstrap-table/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/x-editable-bs5@1.5.8/dist/bootstrap5-editable/js/bootstrap-editable.min.js"></script>
<script src="~/lib/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script> <!-- Bootstrap Table Editable Extension -->
頁面上的table =>
欄位設定 =>
columns: [
{
field: '來源欄',
title: '顯示欄',
editable:
{
type: 'text'
}
},
console.log 區下 Object.keys($.fn.editabletypes)，可知editable的type
捉取修改欄位完成事件 =>
$('#html 表id').on('all.bs.table', function (e, name, args) {
if (name === 'editable-save.bs.table') {
const field = args[0];
const row = args[1];
console.log(field); //異動欄位
console.log(row); //變動列
}
});
來源 : https://vitalets.github.io/x-editable/demo.html、https://www.jsdelivr.com/package/npm/x-editable-bs5、https://bootstrap-table.com/docs/extensions/editable/