表格插件-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'