属性 (Options)
基本使用
$('#tableID').bootstrapTable({})
表的各项(Table options )
定义在 jQuery.fn.bootstrapTable.defaults 文件内
名称 | 类型 | 默认值 | 作用描述 |
---|
height | Number | | 表格的高度 |
undefinedText | String | - | 当不写任何内容默认显示'-' |
striped | Boolean | false | 默认false,当设为true,则每行表格的背景会显示灰白相间 |
sortName | String | | 定义哪一列的值会被排序 |
sortOrder | String | asc | 默认递增(asc),也可设为递减(desc) |
sortStable | Boolean | false | |
iconsPrefix | String | glyphicon | |
iconSize | String | | 定义的图标大小:<br/>- undefined =>默认表示默认的按钮尺寸(btn)<br/>- xs =>超小按钮的尺寸(btn-xs)<br/>- sm =>小按钮的尺寸(btn-sm)<br/>- lg =>大按钮的尺寸(btn-lg) |
buttonsClass | String | 默认为default | 按钮的类,- 可选的有:primary、danger、warning等<br/> 参考:Bootstrap 按钮 |
columns | Array | [] | |
data | Array | [] | 被加载的数据 |
method | String | get | 向服务器请求远程数据的方式 |
url | String | | 向服务器请求的url |
cache | Boolean | true | 默认缓存ajax请求,设为false则禁用缓存 |
dataType | String | json | 期望从服务器获取的数据的类型 |
ajaxOptions | Object | {} | 向服务器请求ajax时的附加项 |
queryParams | Function | | 当请求数据时,你可以通过修改queryParams向服务器发送其余的参数。 <br/>- queryParamsType <br/> - params包括:pageSize,pageNumber,searchText,sortName,sortOrder<br/> - 当return false,请求则终止 |
queryParamsType | String | limit | 参数包括:limit,offset,search,sort,order Else |
pagination | Boolean | false | 默认为false,表格的底部工具栏不会显示分页条 |
paginationLoop | Boolean | true | 默认true,分页条无限循环 |
pageNumber | Number | 1 | 用于设置初始的页数,默认第1页 |
pageSize | Number | 10 | 用于设置每页初始显示的条数,默认每页显示10条记录 |
pageList | Array | [10, 25, 50, 100] | 用于设置选择每页显示的条数 |
selectItemName | String | btSelectItem | radio或checkbox的字段名btSelectItem |
search | Boolean | false | 在搜索框内输入内容并且按下回车键才开始搜索 |
strictSearch | Boolean | false | 设为true,开启精确搜索 |
searchText | String | | 搜索框初始显示的内容,默认空字符串 |
showHeader | Boolean | true | 默认为true显示表头,设为false隐藏 |
showFooter | Boolean | false | 默认为false隐藏表尾,设为true显示 |
showColumns | Boolean | false | 默认为false隐藏某列下拉菜单,设为true显示 |
showRefresh | Boolean | false | 默认为false隐藏刷新按钮,设为true显示 |
showToggle | Boolean | false | 默认为false隐藏视图切换按钮,设为true显示 |
showPaginationSwitch | Boolean | false | 默认为false隐藏每页数据条数选择,设为true显示 |
minimumCountColumns | Number | 1 | 每列的下拉菜单最小数 |
idField | String | | 表明哪个是字段是标识字段 |
uniqueId | String | | 表明每行唯 一的标识符 |
cardView | Boolean | false | 默认false,设为true显示card view(卡片视图) |
detailView | Boolean | false | 默认false,设为true显示detail view(细节视图) |
searchAlign | String | right | 索框的位置,默认right(最右),可选left |
buttonsAlign | String | right | 工具栏按钮的位置,默认right(最右),可选left |
toolbarAlign | String | left | 自定义工具栏的位置,默认right(最右),可选left |
paginationVAlign | String | bottom | 分页条垂直方向的位置,<br/>默认bottom(底部),可选top、both(顶部和底部均有分页条) |
paginationHAlign | String | right | 分页条水平方向的位置,默认right(最右),可选left |
singleSelect | Boolean | false | 默认false,设为true则允许复选框仅选择一行 |
toolbar | String or Node | | |
checkboxHeader | Boolean | true | 设为false则表格第一行的不显示,从第二行往后都显示 |
列的各项(Column options )
定义在 jQuery.fn.bootstrapTable.columnDefaults 文件内
名称 | 类型 | 默认值 | 作用描述 |
---|
radio | Boolean | false | 默认false不显示radio,<br/>设为true则显示,radio宽度是固定的 |
checkbox | Boolean | false | 默认false不显示checkbox,<br/>设为true则显示,checkbox的每列宽度已固定 |
field | String | | 是每列的字段名,表内唯一 |
title | String | | 这个是表头所显示的名字,不唯一 |
titleTooltip | String | | 当悬浮在某控件上,出现提示 <br/>- 参考 Bootstrap 提示工具(Tooltip)插件 |
rowspan | Number | | 每格所占的行数 |
colspan | Number | | 每格所占的列数 |
align | String | | 每格内数据的对齐方式,有:<br/>left、<br/>right、<br/>center |
halign | String | | table header(表头)的对齐方式,有:<br/>left、<br/>right、<br/>center |
falign | | String | table footer(表脚)的对齐方式,有:<br/>left、<br/>right、<br/>center |
valign | String | | 每格数据的对齐方式,有:<br/>top、<br/>middle(居中)、<br/>bottom |
width | Number(单位:px或%) | | 每列的宽度。<br/>如果没有自定义宽度,那么会根据内容的宽度自适应。<br/>可以使用"%"作为单位,bootstapTable将按百分比划分 |
sortable | Boolean | false | 默认false就默认显示,设为true则会被排序 |
order | String | asc | 默认的排序方式为"asc",也可以设为"desc"。<br/> - 与sortable的结合使用 |
visible | Boolean | true | 默认为true显示该列,设为false则隐藏该列 |
cardVisible | Boolean | true | 默认为true显示该列,设为false则隐藏。 |
switchable | Boolean | true | 默认为true显示该列,设为false则禁用列项目的选项卡 |
clickToSelect | Boolean | true | 默认true,不响应,设为false;<br/>当点击此行时,不会自动选中此行的checkbox或radiobox |
formatter | Function | | 某格的数据转换函数,需要三个参数:<br/>- value: field(字段名) <br/>- row:行的数据 <br/>- index:行的(索引)index |
footerFormatter | Function | | 某格的数据转换函数,需要一个参数:<br/>- data: 所有行数据的数组 |
events | Object | | 当某格使用formatter函数时,事件监听会响应,需要四个参数: <br/>- event:jQuery事件(参考Events) <br/> - value:字段名 <br/>- row:行数据 <br/> - index:此行的index |
cellStyle | Function | | 对某格中显示样式进行设置,需要四个函数:<br/>- value:字段名 <br/>- row:行数据 <br/>- index:此行的index <br/> - field:行的字段名 |
searchable | Boolean | true | 默认true,表示此列数据可被查询 |
searchFormatter | Boolean | true | 默认true,可使用格式化的数据查询 |
escape | Boolean | false | 跳过插入HTML中的字符串,替换掉特殊字符(后面符号没有逗号):<br/>&,<,>,",`,' |
简单示例
$.fn.bootstrapTableEx = function(opt) {
var defaults = {
toolbar:'',
url : '', // 请求后台的URL(*)
dataField : "rows",
dataType : 'json',
selectItemName : 'id',
smartDisplay : false,
method: 'post', // 请求方式(*)
toolbar: '', // 工具按钮用哪个容器
iconsPrefix:'glyphicon', // 定义字体库 ('Glyphicon' or 'fa' for FontAwesome)
striped: true, // 是否显示行间隔色
cache: false, // 是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
sortable: true, // 是否启用排序
queryParamsType: '',
queryParams: queryParams, // 传递参数(*)
sidePagination: "server", // 分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, // 初始化加载第一页,默认第一页
pageSize: 10, // 每页的记录行数(*)
pageList: [10, 20, 30, 40, 50], // 可供选择的每页的行数(*)
strictSearch: true,
showHeader:true, // 是否显示列头
showFooter:false, // 是否显示列脚
showColumns: true, // 是否显示所有的列
showRefresh: true, // 是否显示刷新按钮
showToggle: false, // 是否显示详细视图和列表视图的切换按钮
minimumCountColumns: 2, // 最少允许的列数
clickToSelect: true, // 是否启用点击选中行
cardView: false, // 是否显示详细视图
detailView: false, // 是否显示父子表
pagination: true, // 是否显示分页(*)
paginationLoop:false, // 设置为 true 启用分页条无限循环的功能
onlyInfoPagination:false, // 设置为 true 只显示总数据数,而不显示分页按钮
paginationPreText:"上一页", // 指定分页条中上一页按钮的图标或文字
paginationNextText:"下一页", // 指定分页条中下一页按钮的图标或文字
clickToSelect:true, // 设置true 将在点击行时,自动选择rediobox 和 checkbox
singleSelect:true, // 设置True 将禁止多选
maintainSelected:false, // 设置为 true 在点击分页按钮或搜索按钮时,将记住checkbox的选择项
contentType: "application/x-www-form-urlencoded",
columns : [],
formatDetailPagination : function(totalRows) {
return "总共显示 " + totalRows + " 条记录";
},
onLoadSuccess: function(data){ // 加载成功时执行
if(dllwh.isNotNullOrEmpty(data.success)&& !data.success){
dialogMsg(data.msg, "error");
}
},
onLoadError: function(status){ // 加载失败时执行
dialogMsg("数据加载失败,请重新刷新页面", "error");
},
formatShowingRows : function(pageFrom, pageTo, totalRows) {
if(totalRows >0){
return "显示第 " + pageFrom + " 到第 " + pageTo + " 条记录,总共 " + totalRows + " 条记录"
} else {
return "";
}
},
formatNoMatches: function () {//没有匹配的结果
$(".page-next").addClass('disabled');
return '无符合条件的记录';
}
}
var option = $.extend({}, defaults, opt);
$(this).bootstrapTable(option);
}
事件(Events)
定义事件的格式
$('#tableID').bootstrapTable({
onEventName: function (arg1, arg2, ...) {
// ...
}
});
$('#tableID').on('event-name.bs.table', function (e, arg1, arg2, ...) {
// ...
}
常用事件
事件名称 | JQuery事件 | 参数 | 作用描述 |
---|
onAll | all.bs.table | name, args | 任何事件触发都会同时触发该事件, 包含2个参数<br/>name: 事件名称<br/>args: 事件参数 |
onClickRow | click-row.bs.table | row, $element,field | 当点击某一行时触发,包含3个参数 <br/>row:点击行的数据(从0开始)<br/>$element: 对应的tr元素<br/> field:所点击的单元格对应的列名称<br/> |
onDblClickRow | dbl-click-row.bs.table | row, $element, field | 当双击击某一行时触发,包含3个参数 <br />row: 点击行的数据 <br />$element: 对应的tr元素 <br />field:所点击的单元格对应的列名称 |
onClickCell | click-cell.bs.table | field, value, row, $element | 当点击某一个单元格时触发,包含4个参数 <br />field: 所点击的单元格对应的列名称 <br />value: 所点击的单元格对应列的值 <br />row:单元格所在行数据 <br />$element: 对应的td元素 |
onDblClickCell | dbl-click-cell.bs.table | field, value, row, $element | 当双击某一个单元格时触发,包含4个参数 <br/>field: 所点击的单元格对应的列名称 <br />value: 所点击的单元格对应列的值 <br />row:单元格所在行数据 <br />$element: 对应的td元素 |
onSort | sort.bs.table | name,order | 当用户点击列头对某一列进行排序时触发,包含2个参数<br/>name: 排序的列名称 <br />order: 排序方式 |
onCheck | check.bs.table | row, $element | 当用户选中一行时触发,包含2个参数<br />row: 所选中行的行数据<br/>$element: 选中的<input>元素 |
onUncheck | uncheck.bs.table | row,$element | 当用户取消选中一行时触发,包含2个参数<br/>row: 所取消选中的行数据<br/>$element: 选中的<input>元素 |
onCheckAll | check-all.bs.table | rows | 当用户点击全选框时触发,包含1个参数 <br />rows: 选中的行数据数组 |
onUncheckAll | uncheck-all.bs.table | rows | 当用户点击全选框取消选择时触发,包含1个参数 <br/>rows: 取消选中的行数据数组 |
onCheckSome | check-some.bs.table | rows | 当用户选中某些行时触发,包含1个参数 <br />rows: 选中的行数据数组 |
onUncheckSome | uncheck-some.bs.table | rows | 当用户取消选中某些行时触发,包含1个参数 <br/>rows: 取消选中的行数据数组 |
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 | 在表格体渲染完成,并在 DOM 中可见后触发 |
onPostHeader | post-header.bs.table | none | 在表格列头渲染完成,并在 DOM 中可见后触发 |
onExpandRow | expand-row.bs.table | index, row, $detail | 当点击详情按钮展开详情视图时触发 |
onCollapseRow | collapse-row.bs.table | index, row | 当点击关闭详情按钮收起详情视图时触发 |
onRefreshOptions | refresh-options.bs.table | options | 在销毁当前表格并重新初始化新表格之前触发 |
onResetView | reset-view.bs.table | | 当重置表格视图时触发 |
onRefresh | refresh.bs.table | params | 当点击刷新按钮对表格进行刷新时触发 |
onScrollBody | scroll-body.bs.table | | 当对表格体进行滚动时触发 |
方法(Methods)
定义方法响应的语法:
$('#table').bootstrapTable('method', parameter);
方法列表说明
方法名 | 参数 | 描述 |
---|
getOptions | | 获取表格的参数 <br/> - 请查看: getOptions |
getSelections | | 获取当前被选中的行,当没有行被选择,则返回长度为0的空数组 <br/> - 请查看: getSelections |
getAllSelections | | 获取当前被选中的行数据,包含搜索和过滤前的,当没有行被选择,则返回空数组 <br/> - 请查看: getAllSelections |
showAllColumns | | 展示所有列 |
hideAllColumns | | 隐藏所有列 |
getData | useCurrentPage | 获取当前表格中加载的数据,参数useCurrentPage为true 将返回当前页内的数据 <br/> - 请查看: getData |
getRowByUniqueId | id | 根据唯一ID获取行数据 <br/> - 请查看: getRowByUniqueId |
load | data | 向表中加载新数据,原来的数据将被移除 <br/> - 请查看: load |
append | data | 将新数据追加到表格末尾 <br/> - 请查看: append |
prepend | data | 将新数据插入到表格头部 <br/> - 请查看: prepend |
remove | params | 从表格中移除列名为指定值的数据,包含2个参数<br />field: 列名 <br />values: 列名取值数组 <br/> - 请查看: remove |
removeAll | | 移除表格中的所有数据 <br/>- 请查看: removeAll |
removeByUniqueId | id | 根据唯一ID移除行数据 <br/>- 请查看: removeByUniqueId |
insertRow | params | 插入多个新行到指定位置,每一行包含以下参数<br/>index:要插入到行的索引<br/>row: 要插入的行数据 <br/> - 请查看: insertRow |
updateRow | params | 更新指定的行,每一行包含以下参数<br/>index:要插入到行的索引<br/>row: 要插入的行数据 <br/> - 请查看: updateRow |
updateByUniqueId | params | 根据唯一ID更新行数据每一行包含以下参数<br/>id: 唯一ID<br/>row: 新的行数据 <br/> - 请查看: updateByUniqueId |
showRow | params | 显示指定行,至少需包含以下任意参数<br/>index:行索引<br/>uniqueId:行唯一ID <br/> - 请查看: showRow/hideRow |
hideRow | params | 隐藏指定行,至少需包含以下任意参数<br/>index:行索引 <br/> - 请查看: showRow/hideRow |
getHiddenRows | boolean | 获取所有隐藏的行数据,当参数为 true 会将隐藏行进行显示 <br/> - 请查看: getHiddenRows |
mergeCells | options | 合并多个单元格,包含以下参数<br/>index: 行索引<br/>field: 列名称<br/>rowspan: 合并多少行<br/>colspan: 合并多少列 <br/> - 请查看: mergeCells |
updateCell | params | 更新一个单元格数据,包含以下参数<br/>index: 行索引<br/>field: 列名称<br/>value: 新列值<br/>禁止表格重新初始化需添加参数{reinit: false} |
refresh | params | 重新加载远程数据,可以设置{silent: true}静默加载数据,<br/>设置{url: newUrl, pageNumber: pageNumber, pageSize: pageSize}改变数据请求地址和分页参数,<br/>请求参数通过 {query: {foo: 'bar'}} 修改 <br/> 请查看: refresh |
refreshOptions | options | 刷新表格的参数<br/>- 请查看: refreshOptions |
resetSearch | text | 设置搜索内容<br/> - 请查看: resetSearch |
showLoading | | 显示数据加载状态提示<br/> - 请查看: showLoading/hideLoading |
hideLoading | | 隐藏数据加载状态提示<br/> - 请查看: showLoading/hideLoading |
checkAll | | 选中当前页的所有行<br/> - 请查看: checkAll/uncheckAll |
uncheckAll | | 取消选中当前页的所有行<br/> - 请查看: checkAll/uncheckAll |
checkInvert | | 对当前页内行数据进行反选,会触发onCheckSome 和 onUncheckSome 事件 |
check | index | 选中某一行,索引从0开始<br/> - 请查看: checkAll/uncheckAll |
uncheck | index | 取消选中某一行,索引从0开始<br/> - 请查看: checkAll/uncheckAll |
checkBy | params | 根据列名选则行数据<br/>field: 列名称<br/>values:列取值数组<br/>$("#table").bootstrapTable("checkBy",{field:"field_name",values:["value1","value2","value3"]}) |
uncheckBy | params | 根据列名取消选中行数据<br/>field: 列名称<br/>values:列取值数组<br/>$("#table").bootstrapTable("uncheckBy", {field:"field_name",values:["value1","value2","value3"]}) |
resetView | params | 重置表格视图 |
resetWidth | | 重新设置列头和列尾的宽度去适应当前列的宽度 |
destroy | | 销毁表格<br/>- 请查看: destroy |
showColumn | field | 显示指定列<br/> - 请查看: showColumn/hideCoulumn |
hideColumn | field | 隐藏指定列<br/> - 请查看: showColumn/hideCoulumn |
getHiddenColumns | | 获取隐藏的列 |
getVisibleColumns | | 获取可见的列 |
scrollTo | value | 使滚动条滚动到指定位置,单位像素,'bottom' 滚动条滚动到底<br/> - 请查看: scrollTo |
getScrollPosition | | 获取当前滚动条的位置,单位像素 |
filterBy | params | 在client模式下,对表格数据进行过滤,语法示例如下<br/>{age: 10, hairColor: ["blue", "red", "green"]} |
selectPage | page | 跳转到指定页<br/>- 请查看: selectPage/prevPage/nextPage |
prevPage | | 上一页<br/>- 请查看: selectPage/prevPage/nextPage |
nextPage | | 下一页<br/>- 请查看: selectPage/prevPage/nextPage |
togglePagination | | 切换分页参数<br/> - 请查看: togglePagination |
toggleView | | 切换 card/table 视图<br/>- 请查看: toggleView |
expandRow | index | 当详细视图设置为True时,展开指定索引的行的详细视图<br/> - 请查看: expandRow-collapseRow |
collapseRow | index | 当详细视图设置为True时,收起指定索引的行的详细视图<br/> - 请查看: expandRow-collapseRow |
expandAllRows | is subtable | 当详细视图设置为True时,展开所有行的详细视图 |
collapseAllRows | is subtable | 当详细视图设置为True时,收起所有行的详细视图 |
updateCellById | params | 根据唯一ID更新指定单元格,包含以下参数<br/>id: 唯一ID<br/>field: 要更新的列的列名称<br/>value: 新值 |
语言
需要在页面中引入所有需要的本地化脚本
<script src="bootstrap-table-en-US.js"></script><script src="bootstrap-table-zh-CN.js"></script>
名称 | 参数 | 默认值 | 描述 |
---|
formatLoadingMessage | | 'Loading, please wait…' | "加载中,请等待……" |
formatRecordsPerPage | pageNumber | '%s records per page' | "每页显示 pageNumber 条记录" |
formatShowingRows | pageFrom, pageTo, totalRows | 'Showing %s to %s of %s rows' | "显示第 from 到第 to 条记录 totalRows" |
formatDetailPagination | totalRows | 'Showing %s rows' | “总共 totalRows 条记录" |
formatSearch | | 'Search' | "搜索" |
formatNoMatches | | 'No matching records found' | “没有找到匹配的记录” |
formatRefresh | | 'Refresh' | "刷新"(鼠标悬浮显示的文字) |
formatToggle | | 'Toggle' | "切换"(鼠标悬浮显示的文字) |
formatColumns | | 'Columns' | "列"(鼠标悬浮显示的文字) |
formatAllRows | | 'All' | |
formatFullscreen | | 'Fullscreen' | |