算是最全面的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',
}