Bootstrap table API 中文文档（完整翻译文档）

*$(’#table’).bootstrapTable({});

*看网上有中文版的，但有些就是字面直接译过来了，而且有的就没有翻译，那就打算自己再翻译一遍，每一条会尽

*最大可能结合尽可能多资料翻译，如果发现译的内容比英文多，是添加了更详细的说明，表的名称，属性，类型，

*默认值不翻译，例如：“class”、"id"等不翻译。

*有错请提出，会及时改正，谢谢。

如果想转请评论留个言并注明原博 @Sclifftop   https://blog.csdn.net/S_clifftop/article/details/77937356


给我评论点赞，听到没有，臭弟弟

“名称”可以写在$('#table').bootstrapTable({});的大括号中，可以定义一些想要的值，如：
$("#realTime_Table").bootstrapTable({
  	  search: true,
      pagination: false,
      pageSize: 15,
      pageList: [5, 10, 15, 20],
      showColumns: true,
      showRefresh: false,
      showToggle: true,
      locale: "zh-CN",
      striped: true
});  

“属性”放在声明表内，如：
<!--例子应该很好看懂Table options和Column options 所放的位置不同，随便写的，主要为了懂得如何用--!>

 <table id="realTime_Table" data-click-to-select="true" class="table table-bordered" data-page-size="20">
      <thead>
          <tr >
              <th data-sortable="true" data-field="realTimeDate">日期</th>
              <th data-sortable="true" data-field="newPlayerNum">新增用户</th>
              <th data-sortable="true" data-field="activePlayerNum">活跃用户</th>
          </tr>
      </thead>
      <tbody>
      </tbody>
</table>

如果名称和属性功能类似，则任意一个地方就够了，不用重复定义，有的属性写在js里比名称写在声明表中更为简单，or vice verse（有的属性必须要写，对应的名称只是表示是否启用那个属性）
目录
表的各项(Table options )
列的各项(Column options  )
事件(Events)
方法(Methods)
本地化，切换为另一种语言(Localizations)

表的各项(Table options )

定义在  jQuery.fn.bootstrapTable.defaults  文件内

名称
        
属性
        
类型
        
默认值
        
作用描述
    
-
      
data-toggle
      
String
      
table
      
只要引入 jquery、bootstrap 、bootstrap-table的包，不用在js里面定义就可以使用
默认有写data-toggle="table",data-toggle应该知道吧，常用的有"tooltip、popover等等"，这边就不说了
   
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的自定义名，没定义默认都不排列，同下面的sortOrder结合使用，没写的话列默认递增（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显示
    

新版的CSDN有bug，所以其余的Table options另写一个表格 [ Bootstrap Table API 中文版（完整翻译文档） ]

名称
        
属性
        
类型
        
默认值
        
作用描述
    
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-detail-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另写一个表格  [ Bootstrap Table 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 
 
 
expandAllRows 
新版有更改（原来为"expandAllRow"），下同
感谢 @zhq449681061
      
is subtable
      
可使用条件：detail view设为了true

      - 展开所有列的详细视图
      
$table.bootstrapTable('expandAllRows'); 
      - 参考上面的实例，上面是展开（折叠）某一行的视图，这个是所有行的 
 
collapseAllRows
      
is subtable
      
可使用条件：detail view设为了true

      - 关闭所有列的详细视图
      
$table.bootstrapTable('collapseAllRows'); 
      - 参考上面
 
本地化，切换为另一种语言(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'});

以下说明除了数字外均为中文默认显示，本来不用写的，只要引入就显示中文了，下面数字我就默认15，这个实际要看你设置的是多少
名称
      
参数
      
默认
      
说明
   
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'
      
“列”
   
有错请留言，看到后会及时更改，如果像那种翻译的行写成列或漏字等低级错误，看英文名称就知道有没有错了，主要就是为了让你们知道怎么用，会持续检查哪有误、漏译，如果认为有译得不妥的地方，也可以留言一起讨论，谢谢
自己做的微信小程序工具 —维尼聚合工具（ 查地铁、线路规划、二维码生成、计算器、指南针、证件识别等等）

其他相关：
Bootstrap Table实现定时刷新数据
Bootstrap Table 双击或单击行获取该行内容

博客地址：http://www.globm.top/blog/1/detail/41

最近在使用element table的时候，经常会遇到排序的问题，如果只是简单的排序的话，element官方已经给出了指定的方法
//table的默认排序方式是按ID排序 顺序为递减 这里可以改成其它 比如 order
    <el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}">
      //设置sortable属性时出现排序按钮
      <el-table-column prop="ID" label="座号" sortable>
    </el-table>

但是，element官方组件并不支持拖拽排序，我在这里引入sortablejs实现拖拽排序的功能

sortablejs     GitHub地址

//sortablejs     GitHub地址
https://github.com/SortableJS/Sortable#readme

//安装sortable.js
Install with NPM:

$ npm install sortablejs --save

//在组件内引入
import Sortable from 'sortablejs'

//为需要拖拽排序的表格添加ref属性
<el-table  ref="dragTable">

//在数据渲染完毕添加拖拽事件
created(){
   this.getBanner()
},
methods:{
	async getBanner(val){
          await apiGetBanner().then((res)=>{
               this.bannerTable = res.data.data;
          })
         this.oldList = this.bannerTable.map(v => v.id);
         this.newList = this.oldList.slice();
         this.$nextTick(() => {
             this.setSort()  //数据渲染完毕执行方法
         })
    }
    setSort() {
        const el = this.$refs.dragTable.$el.querySelectorAll(
        		'.el-table__body-wrapper > table > tbody'
        )[0];
        this.sortable = Sortable.create(el, {
        	// Class name for the drop placeholder,
        		ghostClass: 'sortable-ghost', 
                setData: function(dataTransfer) {
                dataTransfer.setData('Text', '')
            },
           //拖拽结束执行,evt执向拖拽的参数
           onEnd: evt => {
              //判断是否重新排序
              if(evt.oldIndex !== evt.newIndex){
                  let data = {
                     id:this.bannerTable[evt.oldIndex].id,
                     banner_order:evt.newIndex
                  }
                  //数据提交失败则恢复旧的排序
                  apiPutBanner(data).catch(()=>{
                     const targetRow = this.bannerTable.splice(evt.oldIndex, 1)[0];
                     this.bannerTable.splice(evt.newIndex, 0, targetRow);
                  })
              }
            }
        })
    }
}


如果需要列拖拽的话，可以参考下面的代码，和上面是一样的原理，在这里我就不赘述了
//行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    }

在使用 Lua 进行开发的过程中，对 table 的处理是很频繁的，这里整理一下 table.insert 和 table.remove 这两个函数的使用方法以及一些在使用过程中需要注意的地方！

table.insert(list, [pos, ]value)

在表 list 中的 pos 位置插入元素 value，并将原来在 pos 位置以及在 pos 位置后面的元素往后移。pos 为可选参数，默认值是 #list+1，所以 table.insert(list, value) 会将元素 value 插入到表 list 的末尾处！

local tbl = {1, 2, 3, 4, 5}

table.insert(tbl, 3, 666)
print(unpack(tbl))
-- 1   2   666 3   4   5

table.insert(tbl, 999)
print(unpack(tbl))
-- 1   2   666 3   4   5   999

table.remove(list[, pos])

移除表 list 中 pos 位置的元素，并将原来在 pos 位置后面的元素往前移（如果有必要），返回这个被移除的值。pos 为可选参数，默认值是 #list，所以 table.remove(list) 会移除表 list 中的最后一个元素！

local tbl = {1, 2, 3, 4, 5}

local ele = table.remove(tbl, 4)
print(ele)
print(unpack(tbl))
-- 4
-- 1   2   3   5

ele = table.remove(tbl)
print(ele)
print(unpack(tbl))
-- 5
-- 1   2   3

特别注意：在 for 循环中进行删除操作的时候，应该从后往前倒序遍历，如果从前往后顺序遍历的话有可能会漏掉一些项！

local tbl = {1, 2, 2, 3, 4, 5}
-- 顺序遍历：在移除pos为2的元素之后，pos为3以及后面的元素前移导致漏删
for k, v in pairs(tbl) do
    if v == 2 then
        table.remove(tbl, k)
    end
end
print(unpack(tbl))
-- 1   2   3   4   5

tbl = {1, 2, 2, 3, 4, 5}
-- 倒序遍历：在for循环中进行删除的正确遍历方式
for i = #tbl, 1, -1 do
    if tbl[i] == 2 then
        table.remove(tbl, i)
    end
end
print(unpack(tbl))
-- 1   3   4   5

ps：这两个函数只适用于数组型 table 的增删！

spring @Table注解  作用是 ： 声明此对象映射到数据库的数据表，通过它可以为实体指定表(talbe)

常用的两个属性： 

1、name 用来命名 当前实体类 对应的数据库 表的名字 

@Table(name = "tab_user"）

2、uniqueConstraints 用来批量命名唯一键 

其作用等同于多个：@Column(unique = true)

@Table(name = "tab_user",uniqueConstraints = {@UniqueConstraint(columnNames={"uid","email"})})






 

                                    公众号  关注一波  不定期分享视频资料