Bootstrap-table 爬坑之旅
继上次被坑后,由于未做笔记, 没想的我再次败在这个坑上, 自我感觉我还将使用bootstraap-table一段时间, 所以为了避免下次再被这个坑坑一个下午的时间. 我决定将它记录下来.
使用场景
首先, 前端table插件有很多, 但是由于它是我接触的第一个,所以可能会用它一定的时间.
后台管理、数据报表这类页面很常见：表格要分页、排序、勾选、行内操作按钮。Bootstrap-table 和 Bootstrap 样式体系配套，文档和示例也多。我采用的是 data-url 方式，数据与视图分离——表头、列定义写在 HTML 或 JS 里，数据由后端接口返回 JSON，前端只负责展示和交互。
典型初始化大致是这样（当时环境：Bootstrap 3 + jQuery + bootstrap-table 1.x，具体小版本记不清了）：
<table id="table"
data-toggle="table"
data-url="/api/list"
data-pagination="true"
data-side-pagination="server">
<thead>...</thead>
</table>
side-pagination: server 表示分页、排序参数发给服务端，适合数据量大的列表。
坑点记录
坑:
- 在operation的formatter和events的设定时, 切记不要设置data-field的值,否则会出现events显示不了的情况 .
操作列（编辑、删除之类）一般会配 formatter 画按钮，再用 events 绑点击。列定义示例：
{
title: '操作',
// 不要写 data-field: 'operation' 这类字段名
formatter: operateFormatter,
events: operateEvents
}
如果在 <th> 上写了 data-field="operation"，或者列配置里给了会和后端字段冲突的 field，bootstrap-table 有时会把这一列当成普通数据列处理，formatter 能出按钮，events 却绑不上，点按钮没反应。我当时对着控制台查了半天，最后发现是 data-field 惹的祸。操作列要么不设 field，要么用不会和接口字段重名的占位符，以项目文档为准。
- 在引入js拓展时,注意后面的js不能与其冲突,导致改变引入顺序
bootstrap-table 本体依赖 jQuery，不少拓展（editable、export、filter 等）还要在本体之后按顺序加载。若把 export 插件放在 table 核心前面，或者和别的表格插件、全局 $ 污染冲突，会出现「表格空白」「拓展方法 undefined」等现象。
当时页面大致顺序：
- jQuery
- Bootstrap JS
bootstrap-table.min.js- 各 locale / 拓展（
bootstrap-table-zh-CN.min.js、tableExport等） - 业务初始化脚本
改引入顺序能好、改回去又坏，多半是依赖链或重复引入的问题。用浏览器 Network 看是否 404，Console 看 $().bootstrapTable 是否存在。
小结
两个坑都不在「业务逻辑」，而在列配置约定和静态资源顺序。记一笔，下次少亏一个下午。
版权声明: 本文首发于 指尖魔法屋-Bootstrap-table 爬坑之旅（https://blog.thinkmoon.cn/post/157-notes-component-bootstrap-table/） 转载或引用必须申明原指尖魔法屋来源及源地址！