Bootstrap Table X-Editable单元格编辑与空值处理、多样式支持
Bootstrap Table 的单元格编辑功能用起来还是挺香的，是搭配上 X-Editable，前端交互体验一下子就上去了。你只需要给列加上 data-editable="true"，表格里的内容就能点了就改，响应也快，代码也简单。
编辑时最头疼的是空数据的？嗯，其实你可以监听 shown 事件，提前填上默认值或者提示一下用户，体验上就舒服多了。比如让空字段自动填个 Default Value，挺实用的。
自定义样式也不难，把 .editable-click 加点背景色，再在 JS 里加上类名，就能让编辑中的单元格高亮显示，风格统一也能兼顾交互细节。配合 CSS 写一点样式就行了，比如 background-color: #ffffcc。
导出功能也考虑进来了，支持 CSV 和 PDF，用起来还蛮方便的。引入 bootstrap-table-export.js 和 jspdf 那一套插件后，加个 data-export-type="csv" 属性就能用了，适合后台管理系统之类的场景。
记得在保存编辑后更新一下数据源，用 $('.editable').on('save', ...) 把新值写回去，这样刷新表格的时候才不会打回原样。细节到位，整体使用体验会提升不少。
如果你正好在做表格编辑相关的需求，不妨试试这个组合，样式灵活、功能齐，适配各种场景还挺稳的。
文件大小：18.83MB
评论区