Bootstrap Table 动态行增删：三步搞定表格实时管理

Bootstrap Table 动态行增删：三步搞定表格实时管理

【免费下载链接】bootstrap-tableAn extended table for integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-table

运营后台里，销售每录入一条订单明细，页面就得手动刷一次才能看到新数据——这种体验谁用谁知道。用 Bootstrap Table 做动态行增删，点一下按钮，行就直接出现在表格里，分页、搜索、排序全部自动跟着走。

配好这三行就能跑

这一节解决"表格长什么样"的问题。把依赖引进来后，一个空<table>加上初始化代码就够了，重点盯idField、uniqueId、columns这三处：

<table id="orderTable"></table>

$('#orderTable').bootstrapTable({ idField: 'id', // 行主键字段名，editable 等扩展靠它定位行 uniqueId: 'id', // 渲染时写到 <tr />
加一行、删一行，到底在调什么
这一节把"点按钮→生成数据→调方法→UI 刷新→给反馈"这条数据流走一遍。append、prepend、removeByUniqueId、remove、removeAll不是五个孤立 API，它们在同一次业务操作里各干各的活：
let seq = 1 // 加一行明细：校验 → append → 反馈 $('#btnAdd').on('click', () => { const row = { id: seq, name: `商品-${seq}`, amount: 99 } if (!row.name) return showToast('名称不能为空', 'warning') // 校验放在 append 之前 $('#orderTable').bootstrapTable('append', row) // 末尾追加，分页/搜索自动重算 seq++ showToast('已添加') }) // 置顶一行（比如加急订单） $('#orderTable').bootstrapTable('prepend', { id: seq, name: '加急商品', amount: 999 }) // 按唯一 ID 删单行 $('#orderTable').on('click', '.btn-del', function (e) { $('#orderTable').bootstrapTable('removeByUniqueId', $(e.currentTarget).data('id')) }) // 按勾选批量删：getSelections 拿选中行，remove 按字段值过滤 $('#btnBatchDel').on('click', () => { const rows = $('#orderTable').bootstrapTable('getSelections') if (!rows.length) return $('#orderTable').bootstrapTable('remove', { field: 'id', values: rows.map(r => r.id) }) }) $('#btnClear').on('click', () => $('#orderTable').bootstrapTable('removeAll'))
每次调用内部都会重新走initSearch → initPagination → initBody，所以不用你手动刷新 DOM，搜索框、页码、排序态都会同步。这里别自己拼<tr>塞进<tbody>：
// 别这么写：手拼的 <tr> 不在插件数据里 // 删行、翻页、排序后它直接错位或残留 $('<tr><td>99</td><td>新商品</td></tr>').appendTo('#orderTable tbody') // 正确姿势：只改数据，DOM 交给插件 $('#orderTable').bootstrapTable('append', { id: seq, name: '新商品', amount: 99 })
手拼 DOM 的行不在getData()里，批量删除、导出、服务端提交全都会漏掉它。
删错、改乱、校验漏了怎么办
动态表格翻车基本就三种：删了不该删的、存了脏数据、用户不知道操作生效没有。对策只有两件：危险动作加确认，数据进门先校验，再给个轻反馈。
// 列级 validator：编辑提交前拦截，返回 false 就改不了 // { field: 'amount', title: '金额', // validator: v => v > 0 && Number.isInteger(v) } // 危险操作：先 confirm，再执行，最后给 toast $('#btnClear').on('click', () => { if (!confirm('清空全部明细？此操作不可恢复')) return $('#orderTable').bootstrapTable('removeAll') showToast('已清空全部明细', 'warning') // 3 秒自动消失的提示即可 }) function showToast(msg, type = 'success') { const $t = $(`<div class="toast bg-${type} border-0 text-white">${msg}</div>`).appendTo('body') setTimeout(() => $t.remove(), 3000) }
validator挂在列定义里，是表格数据实时校验的第一道闸——校验放在append之前，比存进去再捞出来改干净得多。确认框只管删除和清空这类不可逆动作，普通新增不用问，问了反而烦。行高亮（给tr加个闪烁 class）可做可不做，toast 够用了。
数据一多，卡在哪
卡顿的临界点大约在 1000 行附近。真正有效的招只有两个。
批量提交，别循环append。循环里每次append都触发一轮完整的重绘：
// 反例：N 次 append = N 次搜索、分页、渲染 rows.forEach(r => $('#orderTable').bootstrapTable('append', r)) // 正例：一次 append 整个数组 $('#orderTable').bootstrapTable('append', rows)
append本来就收数组，一次调用只渲染一轮，1000 行导入的耗时差出几十倍。万行以上再去看virtualScroll，极端场景再说。
事件委托，别逐个绑定。行内按钮是动态生成的，逐个绑不但漏，还会越绑越多：
// 反例：每次 append 后新按钮没有事件 $('#orderTable .btn-del').on('click', fn) // 正例：委托到表格容器，新行天然生效 $('#orderTable').on('click', '.btn-del', fn)
把零散代码收成一个对象
写到这里，页面上会散落着seq计数器、五六个按钮回调、一个 toast 函数。别让它们平铺在全局作用域里，收进一个对象，入口一个init()：
const OrderTable = { seq: 1, init() { // 初始化表格、绑定按钮事件（本文前面几段代码） // ... }, addRow(row) { // 校验 + append，seq 自增 }, removeSelected() { // getSelections + remove }, highlight(id) { // 新行短暂高亮，靠 contenteditable="false">【免费下载链接】bootstrap-tableAn extended table for integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-table