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 idorderTable/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 不在插件数据里 // 删行、翻页、排序后它直接错位或残留 $(trtd99/tdtd新商品/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 classtoast 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) { // 校验 appendseq 自增 }, 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考