表单实时保存的本质是监听+提交+状态同步；需手动用onblur触发savecell实现dom与bootstrap table数据同步，防抖、幂等、localstorage草稿缓存缺一不可。
表单实时保存的本质是监听 + 提交 + 状态同步
Bootstrap 本身不提供“实时保存”能力，它只是 UI 框架；真正起作用的是你绑定的事件监听（如 input、change、blur）和后续的异步提交逻辑。常见误区是以为加个 form-control 类就自动保存了——其实连网络请求都不会触发。
关键判断：是否需要「每次输入都发请求」？大多数场景下不该这么做。更合理的是「用户离开字段时保存」或「批量变更后统一提交」，兼顾体验与服务端压力。
用 onblur + updateRow 保存表格内嵌表单值
在 Bootstrap Table 的列中插入 <input> 或 <select></select> 后，原始 getData() 方法取不到控件当前值，因为 DOM 和内部 data 数组已脱钩。必须手动同步。
- 在
formatter中为每个 input 添加onblur="saveCell(this, 'fieldName', rowIndex)" - 在
saveCell函数里用$('#table').bootstrapTable('getRowByUniqueId', id)或索引定位 row - 更新 row 对应字段：
row.fieldName = $(input).val() - 调用
$('#table').bootstrapTable('updateRow', {index: rowIndex, row: row})刷新视图并持久化到内部 data - 此时再调用
getData()就能拿到最新值
注意：不要用 refreshOptions 或重绘整表，会丢失焦点、清空未 blur 的输入内容。
避免重复请求和竞态问题
多个输入框同时修改、快速切换焦点，容易触发多次并发请求，导致后发先至、数据覆盖。必须加控制：
- 对同一行的保存加防抖（
clearTimeout+setTimeout），延迟 300ms 再提交 - 提交前检查该行是否已被其他操作标记为“待保存”，跳过重复触发
- 后端接口需支持幂等性，例如带
version或lastModified字段校验 - 提交成功后禁用对应控件或置灰，防止用户重复点击
错误示例：oninput="$.post('/save', {...}) —— 每敲一个字就发一次请求，既卡顿又危险。
结合 localStorage 缓存未提交的变更
用户刷新页面或意外关闭标签页，未保存的编辑就丢了。可以用 localStorage 做轻量级草稿缓存：
- 在
onblur后，把整行数据JSON.stringify(row)存入localStorage.setItem('draft-row-' + id, ...) - 表格初始化时，检查是否存在对应 draft，有则优先用它初始化该行
- 提交成功后，立即
removeItem对应 key
这个方案不依赖后端，也不增加请求负担，但要注意敏感字段（如密码、token）不能缓存。另外，localStorage 是同源共享的，多标签页编辑同一行时仍可能冲突——这点常被忽略。
