【技术】还在找 BootStrap 的API？

基础API

常用表格属性：

pagination: true, // 分页组件
pageSize: 5, // 设置每页显示条数
pageList: [5,10,15,20], // 分页的每页显示条数的数值
search: true, // 搜索框，在页面进行搜索，不调用后台，直接在页面检索内容
showRefresh: true, // 显示刷新按钮
showToggle: true, // 显示切换视图按钮
showColumns: true, // 列的显示与否

常用列属性：

field: 'no', // 当前列的数据，获取的JSON数据中的key，通过key可以给表格填充数据
title: '学号', // 当前列的列名
sortable: true, // 当前列支持排序
checkbox: true, // 当前列设置为复选框

常用列方法：

// 格式化当前列内容的格式，通过return 字符串的形式，浏览器会自动解析为HTML
// value：当前列的值
// row：当前行的所有数据
// index：当前行的下标，从0开始
formatter: function(value, row, index){
    
}

API

2.1 表的各项(Table options )

名称	属性	类型	默认值	作用描述
-	data-toggle	String	table	只要引入 jquery、bootstrap 、bootstrap-table的包，不用在js里面定义就可以使用
classes	data-classes	String	table table-hover	表的class属性，如果没有自己定义，则默认有边框，并且当鼠标悬浮在那一行，背景会变为浅灰色.
sortClass	data-sort-class	String	undefined	声明表格td的class名，代表此列元素的class名将被排序
height	data-height	Number	undefined	表格的高度
undefinedText	data-undefined-text	String	-	当不写任何内容默认显示’-‘
striped	data-striped	Boolean	false	默认false，当设为true，则每行表格的背景会显示灰白相间
sortName	data-sort-name	String	undefined	定义哪一列的值会被排序，写data-field的自定义名，默认递增（asc）
sortOrder	data-sort-order	String	asc	同上面的结合使用，默认递增（asc），也可设为递减（desc）
sortStable	data-sort-stable	Boolean	false	（别看错了，是sortStable，sortable在下面）默认false，设为true，则和sort部分一样，区别是：在排序过程中，如果存在相等的元素，则原来的顺序不会改变。原文还有一句：（如果你把此属性设为了true）我们将为此行添加’_position’属性
iconsPrefix	data-icons-prefix	String	glyphicon	定义字体库 (‘Glyphicon’ or ‘fa’ for FontAwesome),使用”fa”时需引用 FontAwesome，并且配合 icons 属性实现效果 Glyphicon 集成于Bootstrap可免费使用
iconSize	data-icon-size	String	undefined	定义的图标大小： - undefined =>默认表示默认的按钮尺寸（btn） - xs =>超小按钮的尺寸（btn-xs） - sm =>小按钮的尺寸（btn-sm） - lg =>大按钮的尺寸（btn-lg）
buttonsClass	data-buttons-class	String	default	按钮的类，默认为default。 - 可选的有：primary、danger、warning等等 - 写了之后会自动转换为btn-primary（蓝色）、btn-danger（红色）、btn-warning（黄色）等格式，所以前面不要再加”btn-“，默认为btn-default（白色） - 参考菜鸟教程：Bootstrap 按钮
icons	data-icons	Object	{ paginationSwitchDown: ‘glyphicon-collapse-down icon-chevron-down’, paginationSwitchUp: ‘glyphicon-collapse-up icon-chevron-up’, refresh: ‘glyphicon-refresh icon-refresh’, toggle: ‘glyphicon-list-alt icon-list-alt’, columns: ‘glyphicon-th icon-th’, detailOpen: ‘glyphicon-plus icon-plus’, detailClose: ‘glyphicon-minus icon-minus’ }	定义在工具栏、分页、详细视图中使用的图标 - 没办法解释，请参考菜鸟教程的图标：Bootstrap 字体图标
columns	-	Array	[]	默认空数组，在JS里面定义，field即data-field，title就是每列表头名等等。 - 请参考：点击Bootstrap-table的右侧边栏Usage
data	-	Array	[]	被加载的数据。 - 也就是从服务器获取的数据，通过”.”运算符获取，例如”data.date/data.anything”，后面是服务器发来的字段名
dataField	data-data-field	String	rows	- 名称写自己定义的每列的字段名，也就是key，通过key才能给某行的某列赋value。 - 原文：获取每行数据json内的key - 例如：{“name”:”zz”,”age”:20}，name和age就是key，如果这是从服务端请求的json，那可能和每列定义的字段不同，但都是唯一的
ajax	data-ajax	Function	undefined	- ajax方法，和jQuery的ajax方法类似 - 参考 BootstrapTable实现定时刷新数据，只是参考，因为那是jQuery的ajax方法
method	data-method	String	get	向服务器请求远程数据的方式，默认为’get’，可选’post’
url	data-url	String	undefined	向服务器请求的url。 - 例如：server + “get_app_player”和server + ‘get_channel_list’，两者都是向server（server是自己定义的，例如”http://kanshakan.nichousha.com/”）请求数据，只是接口不同，一个是请求该游戏玩家信息，一个是请求渠道信息 下面看看原文： - 向远程站点请求数据的URL - 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式： Without server-side pagination（没有启用服务端分页 - data1.json） With server-side pagination（启用服务端分页 - data2.json）
cache	data-cache	Boolean	true	默认缓存ajax请求，设为false则禁用缓存
contentType	data-content-type	String	application/json	请求数据的contentType（内容类型），用于定义文件的类型，决定接收方以什么形式读取这个文件。 - 默认application/json，用来告诉接收端从服务器发来的消息是序列化后的json字符串
dataType	data-data-type	String	json	期望从服务器获取的数据的类型，默认为json格式字符串
ajaxOptions	data-ajax-options	Object	{}	向服务器请求ajax时的附加项，默认无附加 - 参考 jQuery.ajax()
queryParams	data-query-params	Function	function(params){ return params;}	当请求数据时，你可以通过修改queryParams向服务器发送其余的参数。 - queryParamsType=”limit”，它的参数包括：limit，offset，search，sort，order Else - params包括：pageSize，pageNumber，searchText，sortName，sortOrder - 当return false，请求则终止
queryParamsType	data-query-params-type	String	limit	默认”limit”，设置该属性用来发送符合RESTful格式的参数
responseHandler	data-response-handler	Function	function(res){ return res;}	在加载服务器发送来的数据之前，处理数据的格式，参数res表示the response data（获取的数据）
pagination	data-pagination	Boolean	false	默认为false，表格的底部工具栏不会显示分页条（pagination toolbar），可以设为true来显示
paginationLoop	data-pagination-loop	Boolean	true	默认true，分页条无限循环
onlyInfoPagination	data-only-info-pagination	Boolean	false	前提：pagination设为true，启用了分页功能。 - 默认false，设为true显示总记录数
sidePagination	data-side-pagination	String	client	设置在哪进行分页，默认”client”，可选”server”，如果设置 “server”，则必须设置url或者重写ajax方法 - 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式： Without server-side pagination（没有启用服务端分页） With server-side pagination（启用服务端分页）
pageNumber	data-page-number	Number	1	前提：pagination设为true，启用了分页功能。 - 默认第1页，用于设置初始的页数
pageSize	data-page-size	Number	10	前提：pagination设为true，启用了分页功能。 - 默认每页显示10条记录，用于设置每页初始显示的条数
pageList	data-page-list	Array	[10, 25, 50, 100]	前提：pagination设为true，启用了分页功能。 - 默认为[10, 25, 50, 100]，即可以选择”每页显示10/25/50/100条记录”，用于设置选择每页显示的条数
selectItemName	data-select-item-name	String	btSelectItem	radio（单选按钮）或checkbox（复选框）的字段名
smartDisplay	data-smart-display	Boolean	true	默认为true，会 机智地（<_<） 根据情况显示分页（pagination）或卡片视图（card view）
escape	data-escape	Boolean	false	跳过插入HTML中的字符串，替换掉特殊字符（后面符号没有逗号）：&，<，>，"，`，’
search	data-search	Boolean	false	默认false不显示表格右上方搜索框 ，可设为true，在搜索框内只要输入内容即开始搜索
searchOnEnterKey	data-search-on-enter-key	Boolean	false	默认false不启用，设为true启用，比功能是与上面相比，在搜索框内输入内容并且按下回车键才开始搜索
strictSearch	data-strict-search	Boolean	false	设为true，开启精确搜索
searchText	data-search-text	String	“”	前提：search设为true，启用了搜索功能。 - 搜索框初始显示的内容，默认空字符串
searchTimeOut	data-search-time-out	Number	500	前提：search设为true，启用了搜索功能。 - 设置搜索文件的超时时间（原文：Set timeout for search fire，不知道是写错了还是我知识面太窄，”search fire”是什么意思，官方API错了？给我整蒙逼了）
trimOnSearch	data-trim-on-search	Boolean	true	默认true，自动忽略空格
showHeader	data-show-header	Boolean	true	默认为true显示表头，设为false隐藏
showFooter	data-show-footer	Boolean	false	默认为false隐藏表尾，设为true显示
showColumns	data-show-columns	Boolean	false	默认为false隐藏某列下拉菜单，设为true显示
showRefresh	data-show-refresh	Boolean	false	默认为false隐藏刷新按钮，设为true显示
showToggle	data-show-toggle	Boolean	false	默认为false隐藏视图切换按钮，设为true显示
showPaginationSwitch	data-show-pagination-switch	Boolean	false	默认为false隐藏每页数据条数选择，设为true显示

2.2 列的各项(Column options )

名称	属性	类型	默认值	作用描述
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”代码，如：abc，但是被排列的是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中的字符串，替换掉特殊字符（后面符号没有逗号）：&，<，>，"，`，’

2.3 事件

事件名	定义在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	当
onPostBody	post-body.bs.table	data	当
onPostHeader	post-header.bs.table	none	当
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，不是浏览器的，而是表格右上角的刷新按钮）后触发

中的内容没显示前触发中的内容被加载完后或者在你所用的DOM中有定义则被触发中的内容被加载完后或者在你所用的DOM中有定义则被触发

2.4 方法

方法名	参数	描述	举例
getOptions	none	返回各项的object	$table.bootstrapTable(‘getOptions’); - 请查看： getOptions
getSelections	none	返回被选择的行，当没有行被选择，则返回空数组	$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
append	data	就是追加，并不能在表的哪一行后添加，只能在最后一行后面	$table.bootstrapTable(‘append’, data);data可以是数组 - 请查看： append
mergeCells	options	融合~（把多格合并为一格），所需的参数如下： - index：所要合并的格所在行的索引（index） - field：所在列的字段名 - rowspan：合并的行总数目 - colspan：合并的列总数目	$table.bootstrapTable(‘mergeCells’, {index: 1, field: ‘name’, colspan: 2, rowspan: 3}); - 请查看： mergeCells
getHiddenColumns	-	获取所有隐藏的列	$table.bootstrapTable(‘getHiddenColumns’);