表格插件-BootStrapTable

属性 (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'

转载于:https://my.oschina.net/u/1030471/blog/3002112