算是最全面的bootstrap-table的介绍了吧

目录

1.默认常量信息(表)

1.1. 无法转换为自定义方法

1.2. 可转换为自定义方法

2.字段属性

3.方法相关api

4.事件相关api

5.初始化配置

---

Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件

1.默认常量信息(表)

1.1. 无法转换为自定义方法

属性	默认值	描述
height	undefined	表格的高度
classes	table table-bordered table-hover	表格的类名称
buttons	{}	按钮,bootstraptable加载的按钮集,可自定义
theadClasses	表头样式	''
undefinedText	'-'	当数据为 undefined 时显示的字符
locale	undefined	语言设置
virtualScroll	false	是否开启虚拟滚动
virtualScrollItemHeight	undefined	虚拟滚动条项目高度
sortable	true	是否启用排序
sortClass	undefined	被排序的td标签的class名
silentSort	true	是否开启自动记住排序项,设置为 false 将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为 server时生效
sortEmptyLast	false	排序最后一个空
sortName	undefined	定义排序列信息
sortOrder	undefined	定义排序方式 asc 或者 desc
sortReset	false	是否开启重置排序
sortStable	false	设置为 true 将获得稳定的排序
sortResetPage	false	排序是否重置页面
rememberOrder	false	是否记住顺序
serverSort	true	服务器排序
customSort	undefined	自定义排序
columns	[[]]	列配置项,一般为表格显示的字段信息
data	[]	加载json格式的数据
url	undefined	服务器数据的加载地址
method	get	请求方式,一般列表请求都是get请求,特殊情况特殊处理
cache	true	是否使用ajax缓存,true为禁用ajax缓存
contentType	application/json	发送到服务器的数据编码类型
dataType	json	服务器返回的数据类型
ajax	undefined	自定义 AJAX 方法,须实现 jQuery AJAX API
ajaxOptions	{}	提交ajax请求时的附加参数
queryParamsType	limit	设置为 ‘limit’ 则会发送符合 RESTFul 格式的参数
totalField	total	分页总条数对应的字段,可根据封装的json自定义调整
totalNotFilteredField	totalNotFiltered	json响应中的字段,用于服务器端定义分页计数
dataField	rows	分页数据所对应的字段,可根据封装的json自定义调整
footerField	footer	页脚所对应的字段
pagination	false	是否显示分页 true显示 false隐藏
paginationParts	['pageInfo', 'pageSize', 'pageList']	定义了分页信息哪些部分可见 pageInfo:显示总行数且此页行范围pageSize:每页多少行下拉框pageList:分页按钮
showExtendedPagination	false	是否显示分页的扩展版本
paginationLoop	true	是否启用分页条无限循环的功能
sidePagination	client	分页方式 server服务端分页client客户端分页
totalRows	0	总行数该属性主要由分页服务器传递
totalNotFiltered	0	未筛选总数
pageNumber	1	初始化加载第一页，默认第一页
pageSize	10	每页的记录行数
pageList	[10, 25, 50, 100]	可供选择的每页的行数
paginationHAlign	right	分页条水平方向的位置 left最左 right最右
paginationVAlign	bottom	分页条垂直方向的位置 bottom 底部 top顶部 both:顶/底都存在
paginationDetailHAlign	left	分页明细显示位置,left最左 right最右
paginationPreText	'‹'	上一页的按钮符号
paginationNextText	'›'	下一页的按钮符号
paginationSuccessivelySize	5	左边的最大连续页数 < 1.2.3.4.5 ... n > 建议:5
paginationPagesBySide	1	右边的最大连续页数 < 1.2.3.4.5 ... 80 >
paginationUseIntermediate	false	计算并显示中间页面以便快速访问
search	false	是否显示搜索框功能(客户端搜索)
searchable	false	是否可检索的(一般应用于字段)
searchHighlight	false	是否对搜索内容高亮展示
searchOnEnterKey	false	是否按下EnterKey才进行搜索
strictSearch	false	是否启用启用严格搜索
regexSearch	false	是否启用启用正则搜索
searchSelector	false	自定义搜索框选择器
visibleSearch	false	为仅在可见列/数据中搜索
showButtonIcons	true	是否显示按钮图标
showButtonText	false	是否在按钮上显示文本
showSearchButton	false	是否在搜索输入后面显示搜索按钮
showSearchClearButton	false	是否在搜索输入后面显示清除按钮
trimOnSearch	true	是否自动忽略空格
searchAlign	right	指定搜索输入框的方向 left最左 right最右
searchTimeOut	500	搜索超时时间
searchText	''	设置搜索文本框的默认搜索值
customSearch	undefined	自定义搜索
showHeader	true	是否显示表头 true显示 false隐藏
showFooter	false	是否显示页脚 true显示 false隐藏
searchAccentNeutralise	false	是否开启搜索重音中和,若要使用重音消除功能，请设置为true
showColumns	false	是否显示所有的列 true显示 false隐藏
showColumnsToggleAll	false	是否在列选项/下拉列表中显示“全部切换”复选框
showColumnsSearch	false	是否显示对列过滤器的搜索
minimumCountColumns	1	最少允许的列数
showPaginationSwitch	false	是否显示分页组件的切换按钮 true显示 false隐藏
showRefresh	false	是否显示刷新按钮 true显示 false隐藏
showToggle	false	是否显示详细视图和列表视图的切换按钮 true显示 false隐藏
showFullscreen	false	是否显示全屏按钮 true显示 false隐藏
smartDisplay	true	是否智能显示分页或卡片视图 true是 false 否
escape	false	是否开启html转义
escapeTitle	true	是否转义标题
idField	undefined	表明哪个是字段是标识字段
selectItemName	‘btSelectItem’	设置radio 或者 checkbox的字段名称
clickToSelect	false	是否启用点击选中行 true 启用 false禁用
singleSelect	false	是否单选checkbox
checkboxHeader	true	表头是否展示checkbox
maintainMetaData	false	是否维护元数据
multipleSelectRow	false	是否启用多选行
uniqueId	undefined	唯一的标识符
cardView	false	是否启用卡片视图
detailView	false	是否启用明细视图
detailViewIcon	true	是否显示详细视图图标
detailViewByClick	false	是否允许单击单元格时切换细节视图
detailViewAlign	left	详细信息视图图标对齐方式
toolbar	undefined	指定工具栏
toolbarAlign	left	指示如何对齐自定义工具栏
buttonsToolbar	undefined	一个jQuery选择器，指示按钮工具栏
buttonsAlign	right	指示如何对齐工具栏按钮
buttonsOrder	['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns']	工具栏按钮重新排序
buttonsPrefix	CONSTANTS.classes.buttonsPrefix	按钮前缀 'btn'
buttonsClass	CONSTANTS.classes.buttons	按钮样式
iconsPrefix	undefined	图标前缀
icons	{}	图标,此处可以自定义
iconSize	undefined	图标大小：undefined默认的按钮尺寸 xs超小按钮sm小按钮lg大按钮
loadingFontSize	'auto'	自定义加载文本的字体大小
striped	true	是否显示行间隔色

1.2. 可转换为自定义方法

属性	默认值	描述
headerStyle(column)	return {}	标头样式格式化程序函数
rowStyle (row, index)	return {}	设置行样式的函数支持类或css
rowAttributes (row, index)	return {}	row属性formatter函数，支持所有自定义属性
queryParams (params)	return params	要传递参数
responseHandler (res)	return res	请求获取数据后处理回调函数
footerStyle (column)	return {}	页脚样式设置。
ignoreClickToSelectOn ({ tagName })	return ['A', 'BUTTON'].includes(tagName)	忽略点击选中
detailFormatter (index, row)	return ''	格式化细节视图
detailFilter (index, row)	return true	是否对返回行进行拓展
loadingTemplate (loadingMessage)	return ‘...’	加载模版

2.字段属性

属性	默认值	描述
field	undefined	设置data-field的值,字段返回标识
title	undefined	设置data-field的值,字段显示内容
titleTooltip	undefined	列标题工具提示文本
class	undefined	定义列的类名
width	undefined	列的宽度
widthUnit	'px'	列的宽度单元
rowspan	undefined	指定单元格应占用的行数
colspan	undefined	指定单元格应占用的列数
align	undefined	数据对齐方式
halign	undefined	表头对齐方式
falign	undefined	表格页脚对齐方式
valign	undefined	单元格数据对齐方式
cellStyle	undefined	单元格样式格式化函数
radio	false	单选框(一般都单独提出表格)
checkbox	false	复选框(一般都单独提出表格)
checkboxEnabled	true	设置false以禁用复选框/单选框
clickToSelect	true	是否点击选中
showSelectTitle	false	显示选择框标题,设置为true以使用'radio'或'singleSelect''复选框'选项显示列的标题
sortable	false	列是否允许排序
sortName	undefined	排序字段名
order	'asc'	排序方式
sorter	undefined	用于进行本地排序的自定义字段排序函数
visible	true	列是否可见
switchable	true	是否可切换列
switchableLabel	undefined	可交换的标识
cardVisible	true	是否隐藏card 视图状态中的列项
searchable	true	是否可搜索此列的数据
formatter	undefined	单元格格式函数
footerFormatter	undefined	页脚格式化.页脚单元格中显示的文本
detailFormatter	undefined	明细格式化.
searchFormatter	true	搜索格式化
searchHighlightFormatter	false	搜索高亮格式化
escape	undefined	是否转义字符串(HTMl)
events	undefined	监听事件(function)

3.方法相关api

方法名	方法用途
getOptions	获取表格的参数
refreshOptions	刷新表格参数
getData	获取当前表格中加载的数据，参数useCurrentPage为true 将返回当前页内的数据
getSelections	获取当前被选中的行
load	将新数据加载到表格中
append	将新数据加载到表格末尾中
prepend	将新数据插入到表格头部
remove	从表格中移除列名为指定值的数据
removeAll	移除表格中的所有数据
insertRow	插入多个新行到指定位置 params > index:要插入到行的索引 row: 要插入的行数据
updateRow	更新指定行
getRowByUniqueId	根据唯一ID获取行数据
updateByUniqueId	根据唯一ID更新行数据每一行 params > id: 唯一ID row: 新的行数据
removeByUniqueId	根据唯一ID移除行数据
updateCell	更新一个单元格数据
updateCellByUniqueId	更新id指定的一个单元格
showRow	显示指定行
hideRow	隐藏指定行
getHiddenRows	获取所有隐藏的行数据
showColumn	显示指定列
hideColumn	隐藏指定列
getVisibleColumns	获取可见的列
getHiddenColumns	获取隐藏的列
showAllColumns	展示所有列
hideAllColumns	隐藏所有列
mergeCells	合并多个单元格
checkAll	选中当前页的所有行
uncheckAll	取消选中当前页的所有行
checkInvert	对当前页内行数据进行反选
check	选中某一行，索引从0开始
uncheck	取消选中某一行，索引从0开始
checkBy	根据列名选则行数据
uncheckBy	根据列名取消选中行数据
refresh	重新加载远程数据
destroy	销毁表格
resetView	重置表格视图
showLoading	显示数据加载状态提示
hideLoading	隐藏数据加载状态提示
togglePagination	切换分页参数
toggleFullscreen	切换全屏展示
toggleView	切换 card/table 视图
resetSearch	设置搜索内容
filterBy	在client模式下，对表格数据进行过滤
sortBy	设置排序方式
scrollTo	使滚动条滚动到指定位置，单位像素，'bottom' 滚动条滚动到底
getScrollPosition	获取当前滚动条的位置，单位像素
selectPage	跳转到指定页
prevPage	上一页
nextPage	下一页
toggleDetailView	切换细节视图
expandRow	展开指定索引的行的详细视图
collapseRow	收起指定索引的行的详细视图
expandRowByUniqueId	展开指定UniqueId的行的详细视图
collapseRowByUniqueId	收起指定UniqueId的行的详细视图
expandAllRows	展开所有行的详细视图
collapseAllRows	收起所有行的详细视图
updateColumnTitle	更新列标题
updateFormatText	更新格式文本

4.事件相关api

方法名	监听内容	描述
onAll	all.bs.table	任何事件触发都会同时触发该事件
onClickRow	click-row.bs.table	当点击某一行时触发
onDblClickRow	dbl-click-row.bs.table	当双击击某一行时触发
onClickCell	click-cell.bs.table	当点击某一个单元格时触发
onDblClickCell	dbl-click-cell.bs.table	当双击某一个单元格时触发
onSort	sort.bs.table	当点击对某一字段列进行排序时触发
onCheck	check.bs.table	当选中某一行时触发
onUncheck	uncheck.bs.table	当取消选中某一行时触发
onCheckAll	check-all.bs.table	当点击全选时出发
onUncheckAll	uncheck-all.bs.table	当取消全选时出发
onCheckSome	check-some.bs.table	当选中某些行时触发
onUncheckSome	uncheck-some.bs.table	当取消选中某些行时触发
onLoadSuccess	load-success.bs.table	当加载成功时触发
onLoadError	load-error.bs.table	当加载失败时触发
onColumnSwitch	column-switch.bs.table	当切换某列的显示状态时触发
onColumnSwitchAll	column-switch-all.bs.table	当切换全部列的显示状态时触发
onPageChange	page-change.bs.table	当切换每页条数时触发
onSearch	search.bs.table	当对表格内容进行搜索时触发
onToggle	toggle.bs.table	当切换表格的显示视图时触发
onPreBody	pre-body.bs.table	在对表格体进行渲染前触发
onPostBody	post-body.bs.table	在表格体渲染完成后触发
onPostHeader	post-header.bs.table	在表格列头渲染完成后触发
onPostFooter	post-footer.bs.table	在表格页脚渲染完成后触发
onExpandRow	expand-row.bs.table	当点击详情按钮展开详情视图时触发
onCollapseRow	collapse-row.bs.table	当点击关闭详情按钮收起详情视图时触发
onRefreshOptions	refresh-options.bs.table	当刷新表格选项时，在销毁当前表格并重新初始化新表格之前触发
onResetView	reset-view.bs.table	当重置表格视图时触发
onRefresh	refresh.bs.table	当点击刷新按钮对表格进行刷新时触发
onScrollBody	scroll-body.bs.table	当对表格体进行滚动时触发
onTogglePagination	toggle-pagination.bs.table	当点击切换分页时触发
onVirtualScroll	virtual-scroll.bs.table	当发生虚拟滚动时触发

5.初始化配置

初始化一下常用的配置,可直接移植到项目中使用,一些默认自带的可以省去,罗列出项目中常用的属性,如属性不满足可参考常量信息表自行添加

var table = $("#bootstrap-table-list");
​
// 初始化表格
table.bootstrapTable({
   url: url,                           //请求后台的URL（*）用于从远程站点请求数据的URL
   method: 'get',                      //请求方式（*）
   toolbar: '#toolbar',                //工具栏
   buttonsClass:'secondary',           //定义工具按钮的Bootstrap类（在'btn-'之后添加）
   striped: true,                      //是否显示行间隔色
   cache: false,                       //是否使用缓存，默认为true
   pagination: true,                   //是否显示分页
   sortable: true,                     //是否启用排序
   sortName:'',                        //定义要排序的列
   sortOrder: "asc",                   //定义列排序顺序，只能是'asc'或'desc'。
   sortStable: false,                  //是否启用稳定排序
   queryParams: oTableInit.queryParams,//传递参数（*）
   sidePagination: "server",           //分页方式：client客户端分页（默认），server服务端分页（*）
   pageNumber:1,                       //初始化加载第一页，默认第一页
   pageSize: 10,                       //每页的记录行数（*）
   pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
   search: true,                       //是否显示表格搜索input
   showColumns: false,                 //是否显示所有的列
   showRefresh: true,                  //是否显示刷新按钮 默认false
   minimumCountColumns: 1,             //最少允许的列数 要从列下拉列表中隐藏的最小列数
   clickToSelect: true,                //是否启用点击选中行
   height: 500,                        //行高 
   uniqueId: "id",                     //表明每一行的唯一标识字段，一般为主键列
   showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
   cardView: false,                    //是否显示详细视图
   detailView: false,                  //设置为true以显示detail 视图表（细节视图）
   locale:'zh-CN',                     //语言设置
   height:800,                         //固定表格的高度     
   data:[],                            //要加载的数据 [] or {}
   contentType:'application/json',     //请求远程数据的contentType(现在大部分都是json请求) 
   dataType:'json',                    //服务器返回的数据类型    
   totalField:'total',                 //分页总条数对应的字段,可根据封装的json自定义调整
   dataField:'rows',                   //分页数据所对应的字段,可根据封装的json自定义调整  
   showHeader:true,                    //是否显示表头    
   showFooter:false,                   //是否显示页脚
   showPaginationSwitch:false,         //是否显示分页组件的切换按钮    
   showFullscreen:false,               //是否显示全屏按钮      
   clickToSelect:false,                //是否启用点击选中行
   singleSelect:false,                 //是否允许复选框仅选择一行
   loadingFontSize:'auto',             //加载文本的字体大小
   multipleSelectRow:false,            //是否启用多选行
   icons:icon,                         //自定义icon图标
   iconSize:'undefined',               //icon图表的尺寸大
   iconsPrefix:'fa',                   //图标前缀   
   queryParamsType:'limit',            //设置'limit'以使用RESTFul类型发送查询参数。        
   queryParams: function(params) {     //请求远程数据时，
      var reqParams = {
           // 传递参数查询参数
           pageSize:       params.limit,
           pageNum:        params.offset / params.limit + 1,
           searchValue:    params.search,
          "自定义":"自定义",
      };
       return reqParams; 　　　　
  },   
   responseHandler:function(res) {     //请求获取数据后处理回调函数  
       return res;
​
  },   
   onLoadSuccess: function (data){//表选项也可以时使用事件，列选项的事件则是在events
       //数据加载成功时触发
       console.log(data);
   
  },
   columns: [
      {checkbox: false},
      {radio: false},
      {
           radio: false,//此列转成radio上面单独领出来是应为有字段显示就不需要它呀
           checkbox: false,//此列转成checkbox 单独拎出来同上
           field: '对应服务器返回的字段信息', 
           title: 'table上显示的信息'
           align:'center',//指定如何对齐列数据。可以使用'left'，'right'，'center'
           formatter:function()//自定义格式化信息,一般是对状态等进行标识映射
      },
      {
           field:'opreation',
           tittle:'操作',
           aligin:'center',
           formatter:function(value,row,index,field){
               return[ 
"要添加的按钮"
              ];
          },
      }
  ]
});
​
​
/**
* 重写bootstrap-table 图标
* @type {{toggleOff: string, clearSearch: string, detailOpen: string, search: string, fullscreen: string, columns: string, detailClose: string, refresh: string, paginationSwitchDown: string, paginationSwitchUp: string, toggleOn: string}}
*/
window.icons={
   paginationSwitchDown: 'fa-caret-square-down',
   paginationSwitchUp: 'fa-caret-square-up',
   refresh: 'fa-sync',
   toggleOff: 'fa-toggle-off',
   toggleOn: 'fa-toggle-on',
   columns: 'fa-th-list',
   detailOpen: 'fa-plus',
   detailClose: 'fa-minus',
   fullscreen: 'fa-arrows-alt',
   search: 'fa-search',
   clearSearch: 'fa-trash',
   print:'fa-trash',
   export:'fa-trash',
}
​