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 | 是否开启自动记住排序项,设置为 |
sortEmptyLast | false | 排序最后一个空 |
sortName | undefined | 定义排序列信息 |
sortOrder | undefined | 定义排序方式 |
sortReset | false | 是否开启重置排序 |
sortStable | false | 设置为 |
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; }, onl oadSuccess: 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',}