官网地址： http://bootstrap-table.wenzhixin.net.cn/zh-cn/
Github地址： https://github.com/wenzhixin/bootstrap-table
官网介绍：
基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。
主要功能
- 支持 Bootstrap 3 和 Bootstrap 2
- 自适应界面
- 固定表头
- 非常丰富的配置参数
- 直接通过标签使用
- 显示/隐藏列
- 显示/隐藏表头
- 通过 AJAX 获取 JSON 格式的数据
- 支持排序
- 格式化表格
- 支持单选或者多选
- 强大的分页功能
- 支持卡片视图
- 支持多语言
- 支持插件
优点
- 学习成本较低，配置简单，文档齐全
- 跟Bootstrap无缝衔接，整体风格一致，也便于二次开发
- 开发者活跃，Github定期维护
开始使用
- 1、在网页的head标签里插入下面的代码
<!-- 引入bootstrap样式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap-table样式 -->
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- bootstrap-table.min.js -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
- 2、在页面body代码块里定义表格展示的区域
<table id="table"></table>- 3、使用data属性来渲染表格 （简单方式）
<table data-toggle="table" data-url="data1.json">
<thead>
<tr>
<th data-field="id">序号</th>
<th data-field="name">名称</th>
<th data-field="price">价格</th>
</tr>
</thead>
</table>- 4、编写JavaScript代码渲染表格 （推荐使用这种方式，代码阅读和扩展更为方便）
在网页代码最下面插入js脚本，内容如下：
$("#table").bootstrapTable({ // 对应table标签的id
url: "<%=request.getContextPath()%>/api/getDataList.do", // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
striped: true, //表格显示条纹，默认为false
pagination: true, // 在表格底部显示分页组件，默认false
pageList: [10, 20], // 设置页面可以显示的数据条数
pageSize: 10, // 页面数据条数
pageNumber: 1, // 首页页码
sidePagination: 'server', // 设置为服务器端分页
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
return {
pageSize: params.limit, // 每页要显示的数据条数
offset: params.offset, // 每页显示数据的开始行号
sort: params.sort, // 要排序的字段
sortOrder: params.order, // 排序规则
dataId: $("#dataId").val() // 额外添加的参数
}
},
sortName: 'id', // 要排序的字段
sortOrder: 'desc', // 排序规则
columns: [
{
checkbox: true, // 显示一个勾选框
align: 'center' // 居中显示
}, {
field: 'code', // 返回json数据中的name
title: '编号', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle' // 上下居中
}, {
field: 'name',
title: '名称',
align: 'center',
valign: 'middle'
}, {
field: 'calcMode',
title: '计算方式',
align: 'center',
valign: 'middle',
formatter: function (value, row, index){ // 单元格格式化函数
var text = '-';
if (value == 1) {
text = "方式一";
} else if (value == 2) {
text = "方式二";
} else if (value == 3) {
text = "方式三";
} else if (value == 4) {
text = "方式四";
}
return text;
}
}, {
title: "操作",
align: 'center',
valign: 'middle',
width: 160, // 定义列的宽度，单位为像素px
formatter: function (value, row, index) {
return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.stdId + '\')">删除</button>';
}
}
],
onLoadSuccess: function(){ //加载成功时执行
console.info("加载成功");
},
onLoadError: function(){ //加载失败时执行
console.info("加载数据失败");
}
})
组件文档
一、表格参数
设置表格如何显示，下面列举了常用的参数，更全的列表请访问官方网址：
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#表格参数
使用方式如下：
$("#table").bootstrapTable({
method: "post",
url: "获取后台数据的url",
... ...
}); | 名称 | 标签 | 类型 | 默认 | 描述 |
|---|---|---|---|---|
| method | data-method | String | ‘get’ | 服务器数据的请求方式 ‘get’ or ‘post’ |
| url | data-url | String | undefined | 服务器数据的加载地址 |
| undefinedText | data-undefined-text | String | ‘-‘ | 当数据为 undefined 时显示的字符 |
| striped | data-striped | Boolean | false | 设置为 true 会有隔行变色效果 |
| columns | - | Array | [] | 列配置项,详情请查看 列参数 表格. |
| data | - | Array | [] | 加载json格式的数据 |
| cache | data-cache | Boolean | true | 设置为 false 禁用 AJAX 数据缓存 |
| dataType | data-data-type | String | ‘json’ | 服务器返回的数据类型 |
| queryParams | data-query-params | Function | function(params) { return params; } |
请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数， 例如 toolbar 中的参数 如果 queryParamsType = ‘limit’ ,返回参数必须包含 limit, offset, search, sort, order 否则, 需要包含: pageSize, pageNumber, searchText, sortName, sortOrder. 返回false将会终止请求 |
| pagination | data-pagination | Boolean | false | 设置为 true 会在表格底部显示分页条 |
| paginationLoop | data-pagination-loop | Boolean | true | 设置为 true 启用分页条无限循环的功能。 |
| sidePagination | data-side-pagination | String | ‘client’ | 设置在哪里进行分页，可选值为 ‘client’ 或者 ‘server’。设置 ‘server’时，必须设置 服务器数据地址（url）或者重写ajax方法 |
| pageNumber | data-page-number | Number | 1 | 如果设置了分页，首页页码 |
| pageSize | data-page-size | Number | 10 | 如果设置了分页，页面数据条数 |
| pageList | data-page-list | Array | [10, 25, 50, 100, All] | 如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。 |
| search | data-search | Boolean | false | 是否启用搜索框 |
| searchOnEnterKey | data-search-on-enter-key | Boolean | false | 设置为 true时，按回车触发搜索方法，否则自动触发搜索方法 |
| showRefresh | data-show-refresh | Boolean | false | 是否显示 刷新按钮 |
| clickToSelect | data-click-to-select | Boolean | false | 设置true 将在点击行时，自动选择rediobox 和 checkbox |
| singleSelect | data-single-select | Boolean | false | 设置True 将禁止多选 |
二、列参数
针对具体每一列展示的设置参数，最常用的为 title 和 field， 它们分别设置了表头显示文字和对应要显示的每项数据
示例代码：
$("#table").bootstrapTable({
method: "post",
url: "获取后台数据的url",
columns: [
{
checkbox: true
}, {
title: '标准编号'
field: 'stdCode'
},
... ...
]
}); | 名称 | 标签 | 类型 | 默认 | 描述 |
|---|---|---|---|---|
| title | data-title | String | undefined | 表头要显示的文本 |
| field | data-field | String | undefined | 要显示数据的字段名称，可以理解为json对象里的key |
| checkbox | data-checkbox | Boolean | false | 设置为True的时候 则显示一列checkbox组件，该列的宽度为固定宽度 |
| radio | data-radio | Boolean | false | 设置为True的时候 则显示一列radio组件，该列的宽度为固定宽度 |
| align | data-align | String | undefined | 设置单元格数据的左右对齐方式， 可选择的值有：’left’, ‘right’, ‘center’ |
| valign | data-valign | String | undefined | 设置单元格数据的上下对齐方式， 可选择的值有：’top’, ‘middle’, ‘bottom’ |
| width | data-width | Number {Pixels or Percentage} | undefined | 设置列的宽度。如果没有设置的话则根据表格内容自适应宽度。设置的话，可以使用’%’百分比的方式，也可以设置要显示的像素值， 如果设置像素值的话可以不填’px’， 例如： width : 100 和 width : ‘100px’ ，效果是一样的 |
| visible | data-visible | Boolean | true | 显示或隐藏该列， 默认显示， False为隐藏 |
| formatter | data-formatter | Function | undefined | 单元格格式化函数，有三个参数： value： 该列的字段值； row： 这一行的数据对象； index： 行号，第几行，从0开始计算 例子： formatter : function(value, row, index){ return value + row.id + index; } |
关于列参数，更详细文档请访问
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#列参数
三、事件
给表格绑定事件，代码：
$("#table").bootstrapTable({
method: "post",
url: "获取后台数据的url",
onLoadSuccess: function(){ //加载成功时执行
console.info("加载成功");
},
onLoadError: function(){ //加载失败时执行
console.info("加载数据失败");
}
}); | Option 事件 | jQuery 事件 | 参数 | 描述 |
|---|---|---|---|
| onLoadSuccess | load-success.bs.table | data | 请求加载远程服务器数据成功时的事件 |
| onLoadError | load-error.bs.table | status | 请求加载远程服务器数据失败时的事件 |
| onClickRow | click-row.bs.table | row, element|当用户点击某一行的时候触发，参数包括：<br/>row：点击行的数据 ，<br/>element|当用户点击某一行的时候触发，参数包括：<br/>row：点击行的数据， <br/>element：tr 元素， field：点击列的 field 名称。 |
|
| onDblClickRow | dbl-click-row.bs.table | row, $element | 当用户双击某一行的时候触发，参数包括： row：点击行的数据， field：点击列的 field 名称。 |
| onClickCell | click-cell.bs.table | field, value, row, element|当用户点击某一列的时候触发，参数包括：<br/>field：点击列的field名称 ，<br/>value： 点击列的value值，<br/>row：点击列的整行数据，<br/>element|当用户点击某一列的时候触发， 参数包括：<br/>field：点击列的field名称，<br/>value：点击列的value值，<br/>row：点击列的整行数据，<br/>element：td 元素。 |
|
| onDblClickCell | dbl-click-cell.bs.table | field, value, row, element|当用户双击某一列的时候触发 ，参数包括：<br/>field：点击列的field名称，<br/>value：点击列的value值，<br/>row： 点击列的整行数据，<br/>element|当用户双击某一列的时候触发，参数包括：<br/>field：点击列的field名称，<br/>value：点击列的value值，<br/>row：点击列的整行数据，<br/>element：td 元素。 |
关于事件，更详细文档请访问：
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#事件
四、方法
使用方法的语法：$(‘#table’).bootstrapTable(‘method’, parameter);。
示例代码：
// 获取表格所有已经勾选的行数据，为一个对象数组
var selects = $('#table').bootstrapTable('getSelections');- 1
- 2
| 名称(method) | 参数 | 描述 |
|---|---|---|
| getOptions | none | 返回表格的 Options。 |
| getSelections | none | 返回所选的行，当没有选择任何行的时候返回一个空数组。 |
| getAllSelections | none | 返回所有选择的行，包括搜索过滤前的，当没有选择任何行的时候返回一个空数组。 |
| load | data | 加载数据到表格中，旧数据会被替换。 |
| append | data | 添加数据到表格在现有数据之后。 |
| prepend | data | 插入数据到表格在现有数据之前。 |
| insertRow | params | 插入新行，参数包括： index: 要插入的行的 index。 row: 行的数据，Object 对象。 |
| refresh | params | 更新远程服务器上的数据，可以设置{silent: true}来默认刷新，也可以设置{url: newUrl}来改变获取数据的url接口，也支持设置请求的参数{query: {foo: ‘bar’}}，这点在表单查询时很有用 |
| showLoading | none | 显示数据加载状态 |
| hideLoading | none | 隐藏数据加载状态 |
| check | index | 选择一行，参数为行号，index从0开始 |
| uncheck | index | 取消选择一行，参数为行号，index从0开始 |
| destroy | none | 销毁一个表格，直接把整个table删掉，需要重新开始渲染table |
| selectPage | page | 跳到指定的页。 |
| prevPage | none | 跳到上一页。 |
| nextPage | none | 跳到下一页。 |
| 名称 | 属性 | 类型 | 默认值 | 作用描述 |
|---|---|---|---|---|
| showPaginationSwitch | data-show-pagination-switch | Boolean | false | 默认为false隐藏每页数据条数选择，设为true显示 |
| minimumCountColumns | data-minimum-count-columns | Number | 1 | 每列的下拉菜单最小数 |
| idField | data-id-field | String | undefined | 表明哪个是字段是标识字段 |
| uniqueId | data-unique-id | String | undefined | 表明每行唯 一的标识符 |
| cardView | data-card-view | Boolean | false | 默认false，设为true显示card view（卡片视图） |
| detailView | data-card-view | Boolean | false | 默认false，设为true显示detail view（细节视图） |
| detailFormatter | data-detail-formatter | Function | function(index, row, element){ return ”;} |
前提：detailView设为true，启用了显示detail view。 - 用于格式化细节视图 - 返回一个字符串，通过第三个参数element直接添加到细节视图的cell（某一格）中，其中，element为目标cell的jQuery element |
| searchAlign | data-search-align | String | right | 搜索框的位置，默认right（最右），可选left |
| buttonsAlign | data-buttons-align | String | right | 工具栏按钮的位置，默认right（最右），可选left |
| toolbarAlign | data-toolbar-align | String | left | 自定义工具栏的位置，默认right（最右），可选left |
| paginationVAlign | data-pagination-v-align | String | bottom | 分页条垂直方向的位置，默认bottom（底部），可选top、both（顶部和底部均有分页条） |
| paginationHAlign | data-pagination-h-align | String | right | 分页条水平方向的位置，默认right（最右），可选left |
| paginationDetailHAlign | data-pagination-detail-h-align | String | left | 如果解译的话太长，举个例子，paginationDetail就是“显示第 1 到第 8 条记录，总共 15 条记录 每页显示 8 条记录”，默认left（最左），可选right |
| paginationPreText | data-pagination-pre-text | String | ‹ | 还是举例子，如果你内容太多，底部最右边会显示：”‹ 1 2 3 4 5 ›”来选择页数，默认就是最左边那个符号，下同 |
| paginationNextText | data-pagination-next-text | String | › | 参考上面一条 |
| clickToSelect | data-click-to-select | Boolean | false | 默认false不响应，设为true则当点击此行的某处时，会自动选中此行的checkbox（复选框）或radiobox（单选按钮） |
| singleSelect | data-single-select | Boolean | false | 默认false，设为true则允许复选框仅选择一行 |
| toolbar | data-toolbar | String | Node | undefined | jQuery的选择器，例如：#toolbar，.toolbar，或者是DOM 结点 |
| checkboxHeader | data-checkbox-header | Boolean | true | 如果你有声明复选框，默认显示表头行的全选复选框，设为false隐藏（就是表格第一行的不显示，从第二行往后都显示） |
| maintainSelected | data-maintain-selected | Boolean | false | 设为true则保持被选的那一行的状态 |
| sortable | data-sortable | Boolean | true | 默认true，设为false禁用所有的行排列（也就是每列表头不会显示排序的按钮，这个需要在th声明data-sortable=”true”，写在js中只是启不启用） |
| slientSort | data-silent-sort | Boolean | true | 前提：sidePagination设为server（服务端） - 默认true，设为false则静默排序数据 |
| rowStyle | data-row-style | Function | {} | 改变某行的格式，需要两个参数： - row：此行的数据 - index：此行的索引 支持classes和css，用法如下： function rowStyle(row, index){ return { classes: ‘text-nowrap another-class’, css: {“color”: “blue”, “font-size”: “50px”} }; } |
| rowAttributes | data-row-attributes | Function | {} | 改变某行的属性，需要两个参数： - row：此行的数据 - index：此行的索引 支持所有自定义的属性。 |
| customSearch | data-custom-search | Function | $.noop | 自定义搜索功能（用来代替自带的搜索功能），需要一个参数： - text：想要搜索的内容 用法如下： function customSearch(text){ //必须使用’this.data’对数据进行过滤（filter the data，感觉这个词也不用译），不要使用’this.options.data’ } |
| customSort | data-custom-sort | Function | $.noop | 自定义排序功能（用来代替自带的排序功能），需要两个参数（可以参考前面）： - sortName：需要排序的那列 - sortOrder：排序方式 用法：和上面一样，不用担心，注释也一模一样 |
| locale | data-locale | String | undefined | 本地化（动词）。 本地化的文件必须被预加载，允许fallback（简单来说就是如果要使用的文件不可用，就可以用别的替代它，例如球场替补，没替补，如果有人受伤了，比赛不就废了），如果加载，将按如下顺序： - 首先尝试加载的是指定的”本地化”文件 - 然后是’_’（下划线）写成’-‘（破折号），并且区域代码被大写的 - 然后是短区域代码（例如：用’fr’代替’fr-CA’） - 最后使用的是剩下的本地化文件（当没有文件可加载则使用默认的） 如果剩余的undefined，或者是空字符，则使用最后一次使用的那个文件（当没有本地化文件可被加载，则使用自带的’en_US’） |
| footerStyle | data-footer-style | Function | {} | 改变footer格式，需要两个参数： - row：此行的数据 - index：此行的索引 支持classes和css，用法如下： function rowStyle(value，row, index){ return { css: { “font-weight”: “bold” } }; } |
列的各项（Column options ）
定义在 jQuery.fn.bootstrapTable.columnDefaults 文件内
| 名称 | 属性 | 类型 | 默认值 | 作用描述 |
|---|---|---|---|---|
| radio | data-radio | Boolean | false | 默认false不显示radio（单选按钮），设为true则显示，radio宽度是固定的 |
| checkbox | data-checkbox | Boolean | false | 默认false不显示checkbox（复选框），设为true则显示，checkbox的每列宽度已固定 |
| field | data-field | String | undefined | 是每列的字段名，不是表头所显示的名字，通过这个字段名可以给其赋值，相当于key，表内唯一 |
| title | data-title | String | undefined | 这个是表头所显示的名字，不唯一，如果你喜欢，可以把所有表头都设为相同的名字 |
| titleTooltip | data-title-tooltip | String | undefined | 当悬浮在某控件上，出现提示 - 参考 Bootstrap 提示工具（Tooltip）插件 |
| class | class/data-class | String | undefined | 没什么好说的，就是class |
| rowspan | rowspan/data-rowspan | Number | undefined | 每格所占的行数 |
| colspan | colspan/data-colspan | Number | undefined | 每格所占的列数 |
| align | data-align | String | undefined | 每格内数据的对齐方式，有：left（靠左）、right（靠右）、center（居中） |
| halign | data-halign | String | undefined | table header（表头）的对齐方式，有：left（靠左）、right（靠右）、center（居中） |
| falign | data-falign | String | undefined | table footer（表脚，就这样译，任性，其实随便译啦，知道就好）的对齐方式，有：left（靠左）、right（靠右）、center（居中） |
| valign | data-valign | String | undefined | 每格数据的对齐方式，有：top（靠上）、middle（居中）、bottom（靠下） |
| width | data-width | Number（单位：px或%） | undefined | 每列的宽度。 - 如果没有自定义宽度，那么宽度会根据内容的宽度自适应。 - 如果表是左适应（left responsive）或者设置的宽度小于内容的宽度，那么，宽度还是会自适应（可以在class或其他的属性中使用 min-width 或 max-width）。 - 你也可以使用”%”作为单位，这样的话，bootstapTable将按百分比划分，如果你想使用”pixels（像素值）”，你可以只写数字（只要不加”%”，单位默认”px”，不嫌麻烦，或者想更清晰，你也可以加上”px”） |
| sortable | data-sortable | Boolean | false | 默认false就默认显示，设为true则会被排序 |
| order | data-order | String | asc | 默认的排序方式为”asc（升序）”，也可以设为”desc（降序）”。 - 与上面的结合使用，不然都不让排序了，你还考虑什么升降。 |
| visible | data-visible | Boolean | true | 默认为true显示该列，设为false则隐藏该列。 - 还是很有用的，例如隐藏自定义index列，按某属性排序后会变乱，你可以读取某行的index来进行赋值 |
| cardVisible | data-card-visible | Boolean | true | 默认为true显示该列，设为false则隐藏。 |
| switchable | data-switchable | Boolean | true | 默认为true显示该列，设为false则禁用列项目的选项卡。 |
| clickToSelect | data-click-to-select | Boolean | true | 默认true不响应，设为false则当点击此行的某处时，不会自动选中此行的checkbox（复选框）或radiobox（单选按钮） |
| formatter | data-formatter | Function | undefined | 需要此列的对象。 某格的数据转换函数，需要三个参数： -value： field（字段名） -row：行的数据 -index：行的（索引）index |
| footerFormatter | data-footer-formatter | Function | undefined | 需要此列的对象。 某格的数据转换函数，需要一个参数： -data： 所有行数据的数组 函数需要返回（return）footer某格内所要显示的字符串的格式，还要包括内容 |
| events | data-events | Object | undefined | 当某格使用formatter函数时，事件监听会响应，需要四个参数： -event：jQuery事件（参考Events）。 - value：字段名 - row：行数据 - index：此行的index 举个例子： <th .. data-events=”operateEvent”> var operateEvents = {‘click .like’: function (e, value, row, index) {}}; |
| sorter | data-sorter | Function | undefined | 自定义的排序函数，实现本地排序，需要两个参数： - a：第一个字段名 - b：第二个字段名 |
| sortName | data-sort-name | String | undefined | 除了表头默认的sort-name或列的字段名，还可以使用自定义的sort-name 对特殊情况说明： - 一个列显示的内容或许是”html”代码，如：<b><span style=”color:red”>abc</span></b>，但是被排列的是html代码中的内容（content）：abc |
| cellStyle | data-cell-style | Function | undefined | 对某格中显示样式（style）进行改变，需要三个函数： - value：字段名 - row：行数据 - index：此行的index - field：行的字段名 支持classes和css，用法如下： function cellStyle(value, row, index, field) { return { classes: ‘text-nowrap another-class’, css: {“color”: “blue”, “font-size”: “50px”} }; } |
| searchable | data-searchable | Boolean | true | 默认true，表示此列数据可被查询 |
| searchFormatter | data-search-formatter | Boolean | true | 默认true，可使用格式化的数据查询 |
| escape | data-escape | Boolean | false | 跳过插入HTML中的字符串，替换掉特殊字符（后面符号没有逗号）：&，<，>，"，`，' |
事件（Events）
定义事件的格式：
$(‘#table’).bootstrapTable({
onEventName: function (arg1, arg2, …) {
// …
} });$(‘#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) {
// …
});
| 事件名 | 定义在jQuery中的事件名 | 参数 | 作用描述 |
|---|---|---|---|
| onAll | all.bs.table | name, args | 当所有触发器被触发时都执行此函数，就是所有的事件都会触发该事件，参数包括： - name：事件名 - args：事件的数据 |
| onClickRow | click-row.bs.table | row, $element, field | 当单击此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为单击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）： - row：哪一行（从0开始） - $element：该行（tr） - field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名 - 参考：Bootstrap Table 双击或单击行获取该行内容 |
| onDblClickRow | dbl-click-row.bs.table | row, $element, field | 和上面差不多，当双击（666）此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为双击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）： - row：哪一行（从0开始） - $element：该行（tr） - field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名 - 参考：Bootstrap Table 双击或单击行获取该行内容 |
| onClickCell | click-cell.bs.table | field, value, row, $element | 当单击某一格，就会触发该事件，所需参数如下： - field：此格所在列的字段名 - value：此格的数据 - $element：此行的此列，就是此格（td） |
| onDblClickCell | dbl-click-cell.bs.table | field, value, row, $element | 当双击某一格，就会触发该事件，所需参数如下： - field：此格所在列的字段名 - value：此格的数据 - $element：此行的此列，就是此格（td） |
| onSort | sort.bs.table | name, order | 当对某列进行排序时触发该事件，所需参数如下： - name：所排序的列的字段名 - order：所排的顺序 |
| onCheck | check.bs.table | row, $element | 当选择（check）此行时触发，所需的参数如下： - row：所选择的行的字段名 - $element：此行的DOM元素 |
| onUncheck | uncheck.bs.table | row, $element | 当取消选择（uncheck）此行时触发，所需的参数如下： - row：所取消选择的行的字段名 - $element：此行的DOM元素 |
| onCheckAll | check-all.bs.table | rows | 当全选行时触发，所需的参数如下： - rows：最近（newly）所选择的行的字段名的数组 |
| onUncheckAll | uncheck-all.bs.table | rows | 当取消全选行时触发，所需的参数如下： - rows：之前或上次（previously）所选择的行的字段名的数组 |
| onCheckSome | check-some.bs.table | rows | 当选择（check）某些行（多行，rows）时触发，所需的参数如下： - rows：之前或上次（previously）所选择的行的字段名的数组 |
| onUncheckSome | uncheck-some.bs.table | rows | 当取消选择（uncheck）某些行（多行，rows）时触发，所需的参数如下： - rows：之前或上次（previously）所选择的行的字段名的数组 |
| onLoadSuccess | load-success.bs.table | data | 当所有数据被加载时触发 |
| onLoadError | load-error.bs.table | status, res | 当加载某些数据出现错误时触发 |
| onColumnSwitch | column-switch.bs.table | field, checked | 当某列改变是否可见的状态时触发 |
| onColumnSearch | column-search.bs.table | field, text | 当某列被查询时触发 |
| onPageChange | page-change.bs.table | number, size | 当改变此页所显示的数据条数或改变页码时触发 |
| onSearch | search.bs.table | text | 当查询此表时触发 |
| onToggle | toggle.bs.table | cardView | 当改变表的视图时触发 |
| onPreBody | pre-body.bs.table | data | 当<tbody></tbody>中的内容没显示前触发 |
| onPostBody | post-body.bs.table | data | 当<tbody></tbody>中的内容被加载完后或者在你所用的DOM中有定义则被触发 |
| onPostHeader | post-header.bs.table | none | 当<thead></thead>中的内容被加载完后或者在你所用的DOM中有定义则被触发 |
| onExpandRow | expand-row.bs.table | index, row, $detail | 当查看详细视图（点击查看detail的图标）时触发 |
| onCollapseRow | collapse-row.bs.table | index, row | 当关闭详细视图（再次点击查看detail的图标）时触发 |
| onRefreshOptions | refresh-options.bs.table | options | 当刷新各项后或在初始化表（也包括销毁了再初始化）之前触发 |
| onResetView | reset-view.bs.table | 当重置（reset）表的视图时触发 | |
| onRefresh | refresh.bs.table | params | 当点击刷新按钮（refresh，不是浏览器的，而是表格右上角的刷新按钮）后触发 |
方法（Methods）
定义方法响应的语法
$('#table').bootstrapTable('method', parameter);
| 方法名 | 参数 | 描述 | 举例 |
|---|---|---|---|
| getOptions | none | 返回各项的object | $table.bootstrapTable(‘getOptions’); - 请查看： getOptions |
| getSelections | none | 返回被选择的行，当没有行被选择，则返回空数组（但并不是undefined，也不是null，是长度为0的空数组，所以可以判断长度是否大于0来确定是否选择了行） | $table.bootstrapTable(‘getSelections’); - 请查看： getSelections |
| getAllSelections | none | 返回所有被选的行（原文中：contain search or filter，其实就是你选择的筛选之后的数据），当没有行被选择，则返回空数组 | $table.bootstrapTable(‘getAllSelections’); - 请查看： getAllSelections |
| showAllColumns | none | 显示所有的列 | $table.bootstrapTable(‘showAllColumns’); - 就是显示所有的列，并没什么可说的 |
| hideAllColumns | none | 隐藏所有的列 | $table.bootstrapTable(‘hideAllColumns’); - 就是隐藏所有的列 |
| getData | useCurrentPage | 获取被加载的表的数据，如果你设置了使用当前页的数据（useCurrentPage），则返回当前页的数据 | $table.bootstrapTable(‘getData’); - 请查看： getData |
| getRowByUniqueId | id | 获取你想要的某行的数据（设置某行的id） | $table.bootstrapTable(‘getRowByUniqueId’, 1);后面的1就是你要的那一行的ID - 请查看： getRowByUniqueId |
| load | data | 向表中加载数据，原来的数据将被移除 | $table.bootstrapTable(‘load’, data); - 请查看： load |
新版的CSDN有bug，所以其余的Methods另写一个表格 [ Bootstraptable API 中文文档 ]
| 方法名 | 参数 | 描述 | 举例 |
|---|---|---|---|
| append | data | 将数据追加在最后一行后 | $table.bootstrapTable(‘append’, data);data可以是数组 - 请查看： append |
| prepend | data | 也是追加，只是在第一行之前 | $table.bootstrapTable(‘prepend’, data);data可以是数组 - 请查看： prepend |
| remove | params | 移除一行或多行你所选的数据 | $table.bootstrapTable(‘remove’, {field: ‘id’, values: ids}); - id：所需移除的那一行（rows，一或多行）的字段 - values：被移除的行的数组 - 请查看： remove |
| removeAll | - | 移除表中所有的数据 | $table.bootstrapTable(‘removeAll’); - 请查看： removeAll |
| removeByUniqueId | - | 移除某行数据（设置某行的id） | $table.bootstrapTable(‘removeByUniqueId’, 1);后面的1就是你想移除的那一行的ID - 请查看： removeByUniqueId |
| insertRow | params | 新增一行，所需的参数如下： - index：你想插入到哪（只要愿意，想插哪就插哪，想插谁就插谁） - row：你想插入的数据 |
$table.bootstrapTable(‘insertRow’, {index: 1, row: row}); - 请查看： insertRow |
| updateRow | params | 更新行数据，所需的参数如下： - index：所要更新的行的索引（index） - row：你想换的新的数据 |
$table.bootstrapTable(‘updateRow’, {index: 1, row: row}); - 请查看： updateRow - 请查看： Bootstrap Table实现定时刷新数据 |
| updateByUniqueId | params | 更新某行数据，所需的参数如下： - id：你想更新那行的id（唯一），（只要愿意，想换哪个换哪个） - row：你想换的新的数据 |
$table.bootstrapTable(‘updateByUniqueId’, {id: 3, row: row}); - 请查看： updateByUniqueId |
| showRow | params | 显示特定行，所需的参数至少包括下面所列的一个： - id：所要显示的行的索引（index） - uniqueId：那一行的id |
$table.bootstrapTable(‘showRow’, {index:1}); - 请查看： showRow/hideRow |
| hideRow | params | 隐藏特定行，所需的参数至少包括下面所列的一个： - id：所要隐藏的行的索引（index） - uniqueId：那一行的id |
$table.bootstrapTable(‘hideRow’, {index:1}); - 请查看： showRow/hideRow |
| getRowsHidden | boolean | 获取隐藏的行（官方原话很多，其实总结起来就前面那一句） | $table.bootstrapTable(‘getRowsHidden’); |
新版的CSDN有bug，所以其余的Methods另写一个表格 [ Bootstrap Table API 中文文档 ]
| 方法名 | 参数 | 描述 | 举例 |
|---|---|---|---|
| mergeCells | options | 融合~（把多格合并为一格），所需的参数如下： - index：所要合并的格所在行的索引（index） - field：所在列的字段名 - rowspan：合并的行总数目 - colspan：合并的列总数目 |
$table.bootstrapTable(‘mergeCells’, {index: 1, field: ‘name’, colspan: 2, rowspan: 3}); - 请查看： mergeCells |
| updateCell | params | 更新某格数据，所需的参数如下： - index：所要合并的格所在行的索引（index） - field：所在列的字段名 - value：要换的新的数据 你也可以设置{reinit:false}来禁用表格的再次初始化 |
$table.bootstrapTable(‘updateCell’,{index:index,field:’id’,value:value}); |
| refresh | params | 刷新服务端的数据： - 可以设置{silent:true}来 - 设置{url:newUrl,pageNumber:pageNumber, pageSize:pageSize}改变请求的地址，页数，每页所显示的条数 - 可以设置{query:{foo:’bar’}}增加特定的参数 |
$table.bootstrapTable(‘refresh’); - 请查看： refresh |
| refreshOptions | options | 看例子吧 | - 请查看： refreshOptions |
| resetSearch | text | 重置搜索的文本（text） | - 请查看： resetSearch |
| showLoading | none | 显示正在加载…… | - 请查看： showLoading/hideLoading |
| hideLoading | none | 隐藏正在加载…… | - 请查看： showLoading/hideLoading |
| checkAll | none | 选择当前页的所有行 | $table.bootstrapTable(‘checkAll’); - 请查看： checkAll/uncheckAll |
| uncheckAll | none | 取消选择当前页的所有行 | $table.bootstrapTable(‘uncheckAll’); - 请查看： checkAll/uncheckAll |
| checkInvert | none | 反向选择，不难理解吧 | $table.bootstrapTable(‘checkInvert’); |
| check | index | 选择某一行，索引（index）从0开始 | $table.bootstrapTable(‘check’, 1); - 请查看： check/uncheck |
| uncheck | index | 取消选择某一行，索引（index）从0开始 | $table.bootstrapTable(‘uncheck’, 1); - 请查看： check/uncheck |
| checkBy | params | 通过数组选择某一行，所需的参数如下： - field：所要选的字段名 - values：所要选的那些值（数组） |
官方没，啊，有例纸： - $(“#table”).bootstrapTable(“checkBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]}); - 请查看： checkBy/uncheckBy |
| uncheckBy | params | 通过数组选择某一行，所需的参数如下： - field：所要取消选择的字段名 - values：所要取消选择的那些值（数组） |
$(“#table”).bootstrapTable(“uncheckBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]}); - 请查看： checkBy/uncheckBy |
| resetView | params | 改变表格的样式，例如改变表格的高度（height） | $table.bootstrapTable(‘resetView’); - 请查看： resetView |
| resetWidth | none | 自动改变表头和表脚（就译成脚，任性）的宽度来适应每列的宽度 | $table.bootstrapTable(‘resetWidth’); |
| destroy | none | 销毁表格 A！T！T！A！C！K！ | $table.bootstrapTable(‘destroy’); - 请查看： destroy |
| showColumn | field | 显示特定的列 | $table.bootstrapTable(‘showColumn’, ‘name’); - 请查看： showColumn/hideCoulumn |
| hideColumn | field | 隐藏特定的列 | $table.bootstrapTable(‘hideColumn’, ‘name’); - 请查看： showColumn/hideCoulumn |
新版的CSDN有bug，所以其余的Methods另写一个表格 [ Bootstrap table API 中文文档 ]
| 方法名 | 参数 | 描述 | 举例 |
|---|---|---|---|
| getHiddenColumns | - | 获取所有隐藏的列 | $table.bootstrapTable(‘getHiddenColumns’); |
| getVisibleColumns | - | 获取所有显示的列 | $table.bootstrapTable(‘getVisibleColumns’); |
| scrollTo | value | 滚……到哪个位置，单位是’px’，如果设为’bottom’，嗖，恭喜你已到表尾 | $table.bootstrapTable(‘scrollTo’, 0); - 请查看： scrollTo |
| getScrollPosition | none | 获取当前所滚到的位置，单位你懂得，就是’px’ | $table.bootstrapTable(‘getScrollPosition’); |
| filterBy | none | 只能在客户端（client-side，相对server-side）这边用，过滤表中的数据 例如： - 可以设置{age:10}来只显示age为10的数据 - 不仅单的，你还可以双飞，甚至多p，设置{age: 10, hairColor: [“blue”, “red”, “green”]} ，这样你就得到了一群10岁的，头发颜色为蓝，红，绿的……数据 |
$table.bootstrapTable(‘filterBy’, { id: [1, 2, 3] }); - 请查看： filterBy |
| selectPage | page | 跳转到特定的页面 | $table.bootstrapTable(‘selectPage’, 1); - 请查看： selectPage/prevPage/nextPage |
| prevPage | none | 跳转到上一页 | $table.bootstrapTable(‘prevPage’); - 请查看： selectPage/prevPage/nextPage |
| nextPage | none | 跳转到下一页 | $table.bootstrapTable(‘nextPage’); - 请查看： selectPage/prevPage/nextPage |
| togglePagination | none | 词穷，请看例纸 | $table.bootstrapTable(‘togglePagination’); - 请查看： togglePagination |
| toggleView | none | 改变视图 | $table.bootstrapTable(‘toggleView’); - 请查看： toggleView |
| expandRow | index | 可使用条件：detail view设为了true，不然无法使用视图功能，这个也没用 - 通过参数index来展开此列的详细视图 |
- 请查看： expandRow-collapseRow |
| collapseRow | index | 可使用条件：detail view设为了true - 通过参数index来关闭此列的详细视图 |
- 请查看： expandRow-collapseRow |
| expandAllRow | is subtable | 可使用条件：detail view设为了true - 展开所有列的详细视图 |
$table.bootstrapTable(‘expandAllRow’); - 参考上面的实例，上面是展开（折叠）某一行的视图，这个是所有行的 |
| collapseAllRow | is subtable | 可使用条件：detail view设为了true - 关闭所有列的详细视图 |
$table.bootstrapTable(‘collapseAllRow’); - 参考上面 |
本地化，切换为另一种语言（Localizations）
默认显示英文，如果想使用中文，首先引入：
<script src="bootstrap-table-zh-CN.js"></script>然后是三种声明使用的方法（个人只使用第二、三种），如下：
第一种：
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);第二种：
<table data-toggle="table" data-locale="zh-CN"></table>第三种：
$('table').bootstrapTable({locale:'zh-CN'});
- 以下说明除了数字外均为中文默认显示，本来不用写的，只要引入就显示中文了
| 名称 | 参数 | 默认 | 说明 |
|---|---|---|---|
| formatLoadingMessage | - | ‘Loading, please wait…’ | “加载中，请等待……” |
| formatRecordsPerPage | pageNumber | ‘%s records per page’ | “每页显示 15 条记录” |
| formatShowingRows | pageFrom, pageTo, totalRows | ‘Showing %s to %s of %s rows’ | “显示第 1 到第 15 条记录” |
| formatDetailPagination | totalRows | ‘Showing %s rows’ | “总共 15 条记录” |
| formatSearch | - | ‘Search’ | “搜索”（占位符） |
| formatNoMatches | - | ‘No matching records found’ | “没有找到匹配的记录” |
| formatRefresh | - | ‘Refresh’ | “刷新”（鼠标悬浮显示的文字，下同） |
| formatToggle | - | ‘Toggle’ | “切换” |
| formatColumns | - | ‘Columns’ | “列” |
有错请留言，看到后会及时更改，如果像那种翻译的行写成列或漏字等低级错误，看英文名称就知道有没有错了，主要就是为了让你们知道怎么用，会持续检查哪有误、漏译，如果认为有译得不妥的地方，也可以留言一起讨论，谢谢