Bootstrap Table 中文文檔（完整翻譯版）

 分類：

Web Front End（8） 

 

目錄(?)[-]

1. 表格參數
2. 列參數
3. 事件
4. 方法

 

表格參數：

名稱	標籤	類型	默認	描述
-	data-toggle	String	‘table’	不用寫 JavaScript 直接啓用表格。
classes	data-classes	String	‘table table-hover’	表格的類名稱。默認狀況下，表格是有邊框的，你能夠添加 ‘table-no-bordered’ 來刪除表格的邊框樣式。
sortClass	data-sort-class	String	undefined	被排序的td標籤的class名
height	data-height	Number	undefined	定義表格的高度。
undefinedText	data-undefined-text	String	‘-‘	當數據爲 undefined 時顯示的字符
striped	data-striped	Boolean	false	設置爲 true 會有隔行變色效果
sortName	data-sort-name	String	undefined	定義排序列,經過url方式獲取數據填寫字段名，不然填寫下標
sortOrder	data-sort-order	String	‘asc’	定義排序方式 ‘asc’ 或者 ‘desc’
sortStable	data-sort-stable	Boolean	false	設置爲 true 將得到穩定的排序，咱們會添加_position屬性到 row 數據中。
iconsPrefix	data-icons-prefix	String	‘glyphicon’	定義字體庫 (‘Glyphicon’ or ‘fa’ for FontAwesome),使用」fa」時需引用 FontAwesome，而且配合 icons 屬性實現效果 Glyphicon 集成於Bootstrap可無償使用 參考：http://glyphicons.com/ FontAwesome 參考：http://fortawesome.github.io/
icons	data-icons	Object	{ paginationSwitchDown: ‘glyphicon-collapse-down icon-chevron-down’, paginationSwitchUp: ‘glyphicon-collapse-up icon-chevron-up’, refresh: ‘glyphicon-refresh icon-refresh’ toggle: ‘glyphicon-list-alt icon-list-alt’ columns: ‘glyphicon-th icon-th’ detailOpen: ‘glyphicon-plus icon-plus’ detailClose: ‘glyphicon-minus icon-minus’ }	自定義圖標
columns	-	Array	[]	列配置項,詳情請查看 列參數 表格.
data	-	Array	[]	加載json格式的數據
ajax	data-ajax	Function	undefined	自定義 AJAX 方法,須實現 jQuery AJAX API
method	data-method	String	‘get’	服務器數據的請求方式 ‘get’ or ‘post’
url	data-url	String	undefined	服務器數據的加載地址
cache	data-cache	Boolean	true	設置爲 true 禁用 AJAX 數據緩存
contentType	data-content-type	String	‘application/json’	發送到服務器的數據編碼類型
dataType	data-data-type	String	‘json’	服務器返回的數據類型
ajaxOptions	data-ajax-options	Object	{}	提交ajax請求時的附加參數，可用參數列請查看http://api.jquery.com/jQuery.ajax.
queryParams	data-query-params	Function	function(params) { return params; }	請求服務器數據時，你能夠經過重寫參數的方式添加一些額外的參數，例如 toolbar 中的參數 若是 queryParamsType = ‘limit’ ,返回參數必須包含 limit, offset, search, sort, order 不然, 須要包含:  pageSize, pageNumber, searchText, sortName, sortOrder.  返回false將會終止請求
queryParamsType	data-query-params-type	String	‘limit’	設置爲 ‘limit’ 則會發送符合 RESTFul 格式的參數.
responseHandler	data-response-handler	Function	function(res) { return res; }	加載服務器數據以前的處理程序，能夠用來格式化數據。 參數：res爲從服務器請求到的數據。
pagination	data-pagination	Boolean	false	設置爲 true 會在表格底部顯示分頁條
paginationLoop	data-pagination-loop	Boolean	true	設置爲 true 啓用分頁條無限循環的功能。
onlyInfoPagination	data-only-info-pagination	Boolean	false	設置爲 true 只顯示總數據數，而不顯示分頁按鈕。須要 pagination=’True’
sidePagination	data-side-pagination	String	‘client’	設置在哪裏進行分頁，可選值爲 ‘client’ 或者 ‘server’。設置 ‘server’時，必須設置 服務器數據地址（url）或者重寫ajax方法
pageNumber	data-page-number	Number	1	若是設置了分頁，首頁頁碼
pageSize	data-page-size	Number	10	若是設置了分頁，頁面數據條數
pageList	data-page-list	Array	[10, 25, 50, 100, All]	若是設置了分頁，設置可供選擇的頁面數據條數。設置爲All 則顯示全部記錄。
selectItemName	data-select-item-name	String	‘btSelectItem’	radio or checkbox 的字段名
smartDisplay	data-smart-display	Boolean	true	設置爲 true能夠在分頁和卡片視圖快速切換
escape	data-escape	Boolean	false	轉義HTML字符串，替換 &, <, >, ", `, 和 ' 字符.
search	data-search	Boolean	false	是否啓用搜索框
searchOnEnterKey	data-search-on-enter-key	Boolean	false	設置爲 true時，按回車觸發搜索方法，不然自動觸發搜索方法
strictSearch	data-strict-search	Boolean	false	設置爲 true啓用 全匹配搜索，不然爲模糊搜索
searchText	data-search-text	String	」	初始化搜索文字
searchTimeOut	data-search-time-out	Number	500	設置搜索超時時間
trimOnSearch	data-trim-on-search	Boolean	true	設置爲 true 將容許空字符搜索
showHeader	data-show-header	Boolean	true	是否顯示列頭
showFooter	data-show-footer	Boolean	false	是否顯示列腳
showColumns	data-show-columns	Boolean	false	是否顯示 內容列下拉框
showRefresh	data-show-refresh	Boolean	false	是否顯示 刷新按鈕
showToggle	data-show-toggle	Boolean	false	是否顯示 切換試圖（table/card）按鈕
showPaginationSwitch	data-show-pagination-switch	Boolean	false	是否顯示 數據條數選擇框
minimumCountColumns	data-minimum-count-columns	Number	1	當列數小於此值時，將隱藏內容列下拉框。
idField	data-id-field	String	undefined	指定主鍵列
uniqueId	data-unique-id	String	undefined	爲每一行指定惟一的標識符
cardView	data-card-view	Boolean	false	設置爲 true將顯示card視圖，適用於移動設備。不然爲table試圖，適用於pc
detailView	data-detail-view	Boolean	false	設置爲 true 能夠顯示詳細頁面模式。
detailFormatter	data-detail-formatter	Function	function(index, row) { return 」; }	格式化詳細頁面模式的視圖。
searchAlign	data-search-align	String	‘right’	指定 搜索框 水平方向的位置。’left’ or ‘right’
buttonsAlign	data-buttons-align	String	‘right’	指定 按鈕 水平方向的位置。’left’ or ‘right’
toolbarAlign	data-toolbar-align	String	‘left’	指定 toolbar 水平方向的位置。’left’ or ‘right’
paginationVAlign	data-pagination-v-align	String	‘bottom’	指定 分頁條 在垂直方向的位置。’top’ or ‘bottom’ or ‘bonth’
paginationHAlign	data-pagination-h-align	String	‘right’	指定 分頁條 在水平方向的位置。’left’ or ‘right’
paginationDetailHAlign	data-pagination-detail-h-align	String	‘left’	指定 分頁詳細信息 在水平方向的位置。’left’ or ‘right’
paginationPreText	data-pagination-pre-text	String	‘<’	指定分頁條中上一頁按鈕的圖標或文字
paginationNextText	data-pagination-next-text	String	‘>’	指定分頁條中下一頁按鈕的圖標或文字
clickToSelect	data-click-to-select	Boolean	false	設置true 將在點擊行時，自動選擇rediobox 和 checkbox
singleSelect	data-single-select	Boolean	false	設置True 將禁止多選
toolbar	data-toolbar	String	undefined	一個jQuery 選擇器，指明自定義的toolbar 例如: #toolbar, .toolbar.
checkboxHeader	data-checkbox-header	Boolean	true	設置false 將在列頭隱藏check-all checkbox .
maintainSelected	data-maintain-selected	Boolean	false	設置爲 true 在點擊分頁按鈕或搜索按鈕時，將記住checkbox的選擇項
sortable	data-sortable	Boolean	true	設置爲false 將禁止全部列的排序
silentSort	data-silent-sort	Boolean	true	設置爲 false 將在點擊分頁按鈕時，自動記住排序項。僅在 sidePagination設置爲 server時生效.
rowStyle	data-row-style	Function	function(row,index) { return class; }	自定義行樣式 參數爲： row: 行數據 index: 行下標 返回值能夠爲class或者css
rowAttributes	data-row-attributes	Function	function(row,index) { return attributes; }	自定義行屬性 參數爲： row: 行數據 index: 行下標 返回值能夠爲class或者css 支持全部自定義屬性
customSearch	data-custom-search	Function	$.noop	執行自定義搜索功能而不是內置搜索功能，須要一個參數： text: 搜索文本 如： function customSearch(text) { //Search logic here. //You must use `this.data` array in order to filter the data. NO use `this.options.data`. }
customSort	data-custom-sort	Function	$.noop	執行自定義排序函數而不是內置排序函數，須要兩個參數：  sortName: 排序名稱 sortOrder: 排序順序 如: function customSort(sortName, sortOrder) { //Sort logic here. //You must use `this.data` array in order to sort the data. NO use `this.options.data`. }

列參數：

名稱	標籤	類型	默認	描述
radio	data-radio	Boolean	false	是否顯示單選radio
checkbox	data-checkbox	Boolean	false	是否顯示多選checkbox
field	data-field	String	undefined	該列映射的data的參數名
title	data-title	String	undefined	該列的表頭名
titleTooltip	data-title-tooltip	String	undefined	該列表頭的title提示文本
class	class / data-class	String	undefined	該列的class
rowspan	rowspan / data-rowspan	Number	undefined	合併單元格時定義合併多少行
colspan	colspan / data-colspan	Number	undefined	合併單元格時定義合併多少列
align	data-align	String	undefined	設置該列數據如何對齊，’left’, ‘right’, ‘center’
halign	data-halign	String	undefined	table header對齊方式， ‘left’, ‘right’, ‘center’
falign	data-falign	String	undefined	table footer對齊方式， ‘left’, ‘right’, ‘center’
valign	data-valign	String	undefined	單元格（cell）對齊方式. ‘top’, ‘middle’, ‘bottom’
width	data-width	Number {Pixels or Percentage}	undefined	列的寬度，可使用像素或者百分比，不帶單位則默認爲px
sortable	data-sortable	Boolean	false	該列是否排序（表頭顯示雙箭頭）
order	data-order	String	‘asc’	該列默認的排序方式， ‘asc’ or ‘desc’.
visible	data-visible	Boolean	true	該列是否可見
cardVisible	data-card-visible	Boolean	true	在card視圖裏是否可見
switchable	data-switchable	Boolean	true	列切換是否可見.
clickToSelect	data-click-to-select	Boolean	true	是否選中checkbox或者radio，當該列被選擇時
formatter	data-formatter	Function	undefined	格式化單元格內容，function(value, row, index), value：該cell原本的值，row：該行數據，index：該行序號（從0開始）
footerFormatter	data-footer-formatter	Function	undefined	格式化footer內容，function(rows)，rows：全部行數據
events	data-events	Object	undefined	The cell 的事件監聽，當你使用formatter function的時候,有三個參數: event: the jQuery event. value: 該cell的值 row: 該行的數據 index: 該行的序號
sorter	data-sorter	Function	undefined	自定義字段排序函數，function(a, b)
sortName	data-sort-name	String	undefined	當列中有html等標籤時，只排序實際內容（忽略標籤和樣式），例如字段爲：」abc「，則sortName=abc
cellStyle	data-cell-style	Function	undefined	單元格樣式，支持css和classes，function(value, row, index) value: 該cell的值 row: 該行的數據 index: 該行的序號
searchable	data-searchable	Boolean	true	搜索時是否搜索此列
searchFormatter	data-search-formatter	Boolean	true	搜索是否使用格式化後的數據（即顯示在頁面上的數據）

事件：

$('#table').bootstrapTable({ onEventName: function (arg1, arg2, ...) { // ... } }); $('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) { // ... });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

Option 事件	jQuery 事件	參數	描述
onAll	all.bs.table	name, args	全部的事件都會觸發該事件，參數包括： name：事件名， args：事件的參數。
onClickRow	click-row.bs.table	row, $element	當用戶點擊某一行的時候觸發，參數包括： row：點擊行的數據， $element：tr 元素， field：點擊列的 field 名稱。
onDblClickRow	dbl-click-row.bs.table	row, $element	當用戶雙擊某一行的時候觸發，參數包括： row：點擊行的數據， $element：tr 元素， field：點擊列的 field 名稱。
onClickCell	click-cell.bs.table	field, value, row, $element	當用戶點擊某一列的時候觸發，參數包括： field：點擊列的 field 名稱， value：點擊列的 value 值， row：點擊列的整行數據， $element：td 元素。
onDblClickCell	dbl-click-cell.bs.table	field, value, row, $element	當用戶雙擊某一列的時候觸發，參數包括： field：點擊列的 field 名稱， value：點擊列的 value 值， row：點擊列的整行數據， $element：td 元素。
onSort	sort.bs.table	name, order	當用戶對列進行排序時觸發，參數包含： name: 排序列字段名 order: 排序列的順序
onCheck	check.bs.table	row	當用戶檢查行時觸發，參數包含： row: 與單擊的行對應的記錄. $element: 選中DOM元素.
onUncheck	uncheck.bs.table	row	在用戶取消選中行時觸發，參數包含：  row: 與單擊的行對應的記錄. $element: 取消選中DOM元素.
onCheckAll	check-all.bs.table	rows	當用戶檢查全部行時觸發，參數包含： rows: 與新檢查的行對應的記錄數組
onUncheckAll	uncheck-all.bs.table	rows	當用戶取消選中全部行時觸發，參數包含： rows:與先前檢查的行對應的記錄數組
onCheckSome	check-some.bs.table	rows	當用戶檢查某些行時觸發，參數包含：  rows: 與先前檢查的行對應的記錄數組.
onUncheckSome	uncheck-some.bs.table	rows	當用戶取消選中某些行時觸發，參數包含： rows: 與先前檢查的行對應的記錄數組.
onLoadSuccess	load-success.bs.table	data	在成功加載遠程數據時觸發
onLoadError	load-error.bs.table	status	在加載遠程數據時發生某些錯誤時觸發.
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	none	在表體表示並在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	在刷新選項以後和在銷燬和初始化表以前觸發.
onRefresh	refresh.bs.table	params	單擊刷新按鈕後觸發.

方法：

名稱	參數	描述	例子
getOptions	none	返回表格的 Options。	getOptions
getSelections	none	返回所選的行，當沒有選擇任何行的時候返回一個空數組。	getSelections
getAllSelections	none	返回全部選擇的行，包括搜索過濾前的，當沒有選擇任何行的時候返回一個空數組。	getAllSelections
getData	useCurrentPage	或者當前加載的數據。假如設置 useCurrentPage 爲 true，則返回當前頁的數據。	getData
getRowByUniqueId	id	根據 uniqueId 獲取行數據。	getRowByUniqueId
load	data	加載數據到表格中，舊數據會被替換。	load
showAllColumns	none	顯示全部列.	showAllColumns
hideAllColumns	none	隱藏全部列.	hidAllColumns
append	data	添加數據到表格在現有數據以後。	append
prepend	data	插入數據到表格在現有數據以前。	prepend
remove	params	從表格中刪除數據，包括兩個參數： field: 須要刪除的行的 field 名稱。 values: 須要刪除的行的值，類型爲數組。	remove
removeAll	-	刪除表格全部數據。	removeAll
removeByUniqueId	id	根據 uniqueId 刪除指定的行。	removeByUniqueId
insertRow	params	插入新行，參數包括： index: 要插入的行的 index。 row: 行的數據，Object 對象。	insertRow
updateRow	params	更新指定的行，參數包括： index: 要更新的行的 index。 row: 行的數據，Object 對象。	updateRow
showRow	params	顯示指定的行，參數包括： index: 要更新的行的 index 或者 uniqueId。 isIdField: 指定 index 是否爲 uniqueid。	showRow-hideRow
hideRow	params	顯示指定的行，參數包括： index: 要更新的行的 index。 uniqueId: 或者要更新的行的 uniqueid。	showRow-hideRow
getRowsHidden	show	獲取全部行隱藏，若是show參數爲true，行將再次顯示，不然，方法 只返回隱藏的行.
mergeCells	options	將某些單元格合併到一個單元格，選項包含如下屬性： index：行索引 field：字段名稱 rowspan：要合併的rowspan數量  colspan：要合併的colspan數量
updateCell	params	更新一個單元格，params包含如下屬性： index：行索引  field：字段名稱 value：新字段值
refresh	params	刷新遠程服務器數據，能夠設置 {silent：true} 以靜默方式刷新數據，並設置 {url：newUrl} 更改URL。 要提供特定於此請求的查詢參數，請設置 {query：{foo：’bar’}}
refreshOptions	options	刷新選項
resetSearch	text	設置搜索文本
showLoading	none	顯示加載狀態.
hideLoading	none	隱藏加載狀態
checkAll	none	檢查全部當前頁面行.
uncheckAll	none	取消選中全部當前頁面行
check	index	檢查一行，行索引從0開始.
uncheck	index	取消選中一行，行索引從0開始.
checkBy	params	按值數組檢查一行，參數包含： field：用於查找記錄的字段的名稱 values：要檢查的行的值數組 例:  $(「#table」).bootstrapTable(「checkBy」, {field:」field_name」, values:[「value1」,」value2」,」value3」]})
uncheckBy	params	按值數組取消選中一行，參數包含： field：用於查找記錄的字段的名稱 values：要取消選中的行的值的數組 例:  $(「#table」).bootstrapTable(「uncheckBy」, {field:」field_name」, values:[「value1」,」value2」,」value3」]})
resetView	params	重置引導表視圖，例如重置表高度.
resetWidth	none	調整頁眉和頁腳的大小以適合當前列寬度
destroy	none	銷燬引導表.
showColumn	field	顯示指定的列.
hideColumn	field	隱藏指定的列.
getHiddenColumns	-	獲取隱藏的列。
getVisibleColumns	-	獲取可見列。
scrollTo	value	滾動到指定位置，單位爲 px，設置 ‘bottom’ 表示跳到最後。
getScrollPosition	none	獲取當前滾動條的位置，單位爲 px。
filterBy	params	（只能用於 client 端）過濾表格數據， 你能夠經過過濾{age: 10}來顯示 age 等於 10 的數據。
selectPage	page	跳到指定的頁。
prevPage	none	跳到上一頁。
nextPage	none	跳到下一頁。
togglePagination	none	切換分頁選項。
toggleView	none	切換 card/table 視圖
expandRow	index	若是詳細視圖選項設置爲True，請展開具備經過參數傳遞的索引的行.
collapseRow	index	若是詳細視圖選項設置爲True，則摺疊具備經過參數傳遞的索引的行.
expandAllRows	is subtable	若是詳細視圖選項設置爲True，請展開全部行.
collapseAllRows	is subtable	若是詳細信息視圖選項設置爲True，則摺疊全部行.

 

 

 

http://blog.csdn.net/rickiyeat/article/details/56483577#t0