你們能夠隨便轉載使用,可是請註明出處~~~from oschina 頁疑 css
我從excel翻譯好粘貼過來的,這個格式也太醜了吧。。。好像還顯示不全。。。看不到的能夠來百度雲下載html
表格屬性(jQuery.fn.bootstrapTable.defaults) | ||||
插件擴展屬性名 | table標籤屬性 | 類型 | 默認值 | 描述 |
無jquery |
data-toggle | String | 'table' | 不用寫 JavaScript 直接啓用表格。 |
classes | data-classes | String | table table-hover' | 表格的類名稱。默認狀況下,表格是有邊框的,你能夠用 'table-no-bordered' 來刪除表格的邊框樣式,注意設置後會覆蓋默認樣式,如需默認樣式,請一塊兒加上。 |
height | data-height | Number | undefined | 定義表格的高度,可用js判斷後設置。 |
undefinedText | data-undefined-text | String | '-' | 代替undefined的字符,空字符串不算undefined |
striped | data-striped | Boolean | FALSE | 隔行變色 |
sortName | data-sort-name | String | undefined | 數據加載時按哪一列排序 |
sortOrder | data-sort-order | String | 'asc' | 數據加載時的排序規則, 'asc' or 'desc'. |
iconsPrefix | data-icons-prefix | String | 'glyphicon' | 定義圖標組名稱(「glyphicon」或「fa」FontAwesome)。在默認狀況下使用「glyphicon」 |
icons | data-icons | Object | { refresh: 'glyphicon-refresh icon-refresh', toggle: 'glyphicon-list-alt icon-list-alt', columns: 'glyphicon-th icon-th' } |
定義用於刷新圖標,切換和列按鈕圖標 |
columns | 無 | Array | [] | 列屬性,請參照jQuery.fn.bootstrapTable.columnDefaults設置的列屬性 |
data | 無 | Array | [] | 須要渲染到table裏的數據 |
ajax | data-ajax | Function | undefined | ajax獲取數據,和jquery的ajax徹底同樣 |
method | data-method | String | 'get' | 請求數據的方式 |
url | data-url | String | undefined | 請求數據的URL |
cache | data-cache | Boolean | TRUE | AJAX請求緩存. |
contentType | data-content-type | String | 'application/json' | 接收數據的文檔類型 |
dataType | data-data-type | String | 'json' | 接收數據的類型 |
ajaxOptions | data-ajax-options | Object | {} | ajax參數 |
queryParams | data-query-params | Function | function(params) { return params; } |
當請求遠程數據時,您能夠經過修改queryParams發送額外的參數。 例如queryParamsType ='limit', params能夠是:limit, offset, search, sort, order, 參數的值能夠是:pageSize, pageNumber, searchText, sortName, sortOrder。 返回false則中止請求。 |
queryParamsType | data-query-params-type | String | 'limit' | Set 'limit' to send query params width RESTFul type. |
responseHandler | data-response-handler | Function | function(res) { return res; } |
數據加載前出來響應返回的數據格式,res: the response data.return的數據爲表格渲染所需數據 |
pagination | data-pagination | Boolean | FALSE | 在表格底部顯示詳細信息和分頁欄(當須要分頁時) |
onlyInfoPagination | data-only-info-pagination | Boolean | FALSE | 只顯示總記錄數(無每頁顯示數和其餘信息),如:Showing 13 rows |
sidePagination | data-side-pagination | String | 'client' | 定義分頁方式'client' or 'server',假如爲'server'則須要設置'url' or 'ajax' |
pageNumber | data-page-number | Number | 1 | 當設置了pagination屬性時,控制顯示第幾頁 |
pageSize | data-page-size | Number | 10 | 當設置了pagination屬性時,控制每頁顯示數 |
pageList | data-page-list | Array | [10, 25, 50, 100, All] | 每頁顯示數的選項list |
selectItemName | data-select-item-name | String | btSelectItem' | radio or checkbox的name,提交表單用的,你懂的 |
smartDisplay | data-smart-display | Boolean | TRUE | 只能選擇table仍是card視圖(所謂的響應式,移動設備會自動使用card視圖) |
search | data-search | Boolean | FALSE | 是否顯示搜索框 |
strictSearch | data-strict-search | Boolean | FALSE | 是否開啓嚴格搜索 |
searchText | data-search-text | String | '' | 初始化搜索文本 |
searchTimeOut | data-search-time-out | Number | 500 | 設置搜索超時 |
trimOnSearch | data-trim-on-search | Boolean | TRUE | 搜索query是否自動去空格(trim) |
showHeader | data-show-header | Boolean | TRUE | 是否顯示header |
showFooter | data-show-footer | Boolean | FALSE | 是否顯示footer |
showColumns | data-show-columns | Boolean | FALSE | 是否顯示tool(顯示/隱藏某些列) |
showRefresh | data-show-refresh | Boolean | FALSE | 是否顯示刷新按鈕 |
showToggle | data-show-toggle | Boolean | FALSE | 是否顯示視圖切換按鈕 |
showPaginationSwitch | data-show-pagination-switch | Boolean | FALSE | 是否顯示「展開所有」按鈕 |
minimumCountColumns | data-minimum-count-columns | Number | 1 | The minimum count columns to hide of the columns drop down list. |
idField | data-id-field | String | undefined | Indicate which field is an identity field. |
uniqueId | data-unique-id | String | undefined | 把哪一列的值設爲當前行tr的屬性(data-uniqueid)的值 |
cardView | data-card-view | Boolean | FALSE | 數據加載時是否用card視圖模式 |
detailView | data-detail-view | Boolean | FALSE | 數據加載時是否用詳細視圖模式(第一列爲加號) |
detailFormatter | data-detail-formatter | Function | function(index, row) { return ''; } |
格式化詳細頁面模式的視圖。 |
searchAlign | data-search-align | String | 'right' | 搜索框位置,left or right |
buttonsAlign | data-buttons-align | String | 'right' | toolbar的按鈕對齊方式,left or right |
toolbarAlign | data-toolbar-align | String | 'left' | 自定義toolbar的按鈕對齊方式,left or right |
paginationVAlign | data-pagination-v-align | String | 'bottom' | pagination顯示的位置,top or bottom or both |
paginationHAlign | data-pagination-h-align | String | 'right' | pagination顯示的位置,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 | 當點擊該行時,checkbox或者radio選中 |
singleSelect | data-single-select | Boolean | FALSE | 是否只容許checkbox選一行(即和radio功能同樣) |
toolbar | data-toolbar | String | undefined | toolbar容器的選擇器名稱,好比:#toolbar, .toolbar. |
checkboxHeader | data-checkbox-header | Boolean | TRUE | 是否顯示checkbox全選 |
maintainSelected | data-maintain-selected | Boolean | FALSE | 是否保持被選中的行,when改變頁數或者搜索的時候 |
sortable | data-sortable | Boolean | TRUE | 是否按列排序,假如爲false,則不排序顯示全部數據 |
silentSort | data-silent-sort | Boolean | TRUE | 在客戶端仍是再服務器端排序,false則客戶端,當sidePagination設置爲server時該設置才生效 |
rowStyle | data-row-style | Function | {} | 行樣式,function(row, index) row: 該行的數據 index: 該行的序號 |
rowAttributes | data-row-attributes | Function | {} | 行屬性,function(row, index) row: 該行的數據 index: 該行的序號 |
列屬性(jQuery.fn.bootstrapTable.columnDefaults) | ||||
插件擴展屬性名 | table標籤屬性 | 類型 | 默認值 | 描述 |
Nameajax |
Attributejson |
Typebootstrap |
Default數組 |
Description緩存 |
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 | False to disable the switchable of columns item. |
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等標籤時,只排序實際內容(忽略標籤和樣式),例如字段爲:"<b><span style="color:red">abc</span></b>",則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 | 搜索是否使用格式化後的數據(即顯示在頁面上的數據) |
事件 | ||||
Option 事件服務器 |
jQuery 事件app |
參數 |
描述 |
|
onAll | all.bs.table | name, args | 全部的事件都會觸發該事件,參數包括: name:事件名, args:事件的參數。 |
|
onClickRow | click-row.bs.table | row, $element | 當用戶點擊某一行的時候觸發,參數包括: row:點擊行的數據, $element:tr 元素。 |
|
onDblClickRow | dbl-click-row.bs.table | row, $element | 當用戶雙擊某一行的時候觸發,參數包括: row:點擊行的數據, $element:tr 元素。 |
|
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 | Fires when user sort a column, the parameters contains: name: the sort column field name order: the sort column order. |
|
onCheck | check.bs.table | row | Fires when user check a row, the parameters contains: row: the record corresponding to the clicked row. $element: the DOM element checked. |
|
onUncheck | uncheck.bs.table | row | Fires when user uncheck a row, the parameters contains: row: the record corresponding to the clicked row. $element: the DOM element unchecked. |
|
onCheckAll | check-all.bs.table | rows | Fires when user check all rows, the parameters contains: rows: array of records corresponding to newly checked rows. |
|
onUncheckAll | uncheck-all.bs.table | rows | Fires when user uncheck all rows, the parameters contains: rows: array of records corresponding to previously checked rows. |
|
onCheckSome | check-some.bs.table | rows | Fires when user check some rows, the parameters contains: rows: array of records corresponding to previously checked rows. |
|
onUncheckSome | uncheck-some.bs.table | rows | Fires when user uncheck some rows, the parameters contains: rows: array of records corresponding to previously checked rows. |
|
onLoadSuccess | load-success.bs.table | data | Fires when remote data is loaded successfully. | |
onLoadError | load-error.bs.table | status | Fires when some errors occur to load remote data. | |
onColumnSwitch | column-switch.bs.table | field, checked | Fires when switch the column visible. | |
onColumnSearch | column-search.bs.table | field, text | Fires when search by column. | |
onPageChange | page-change.bs.table | number, size | Fires when change the page number or page size. | |
onSearch | search.bs.table | text | Fires when search the table. | |
onToggle | toggle.bs.table | cardView | Fires when toggle the view of table. | |
onPreBody | pre-body.bs.table | data | Fires before the table body is rendered | |
onPostBody | post-body.bs.table | none | Fires after the table body is rendered and available in the DOM | |
onPostHeader | post-header.bs.table | none | Fires after the table header is rendered and availble in the DOM | |
onExpandRow | expand-row.bs.table | index, row, $detail | 當點擊詳細圖標展開詳細頁面的時候觸發。 | |
onCollapseRow | collapse-row.bs.table | index, row | 當點擊詳細圖片收起詳細頁面的時候觸發。 | |
onRefreshOptions | refresh-options.bs.table | options | Fires after refresh the options and before destroy and init the table | |
方法 | ||||
使用方法的語法:$('#table').bootstrapTable('method', parameter);。 | ||||
名稱 |
參數 |
描述 |
||
getOptions | none | 返回表格的 Options。 | ||
getSelections | none | 返回所選的行,當沒有選擇任何行的時候返回一個空數組。 | ||
getAllSelections | none | 返回全部選擇的行,包括搜索過濾前的,當沒有選擇任何行的時候返回一個空數組。 | ||
getData | useCurrentPage | 得到當前加載的數據。假如設置 useCurrentPage 爲 true,則返回當前頁的數據。 | ||
getRowByUniqueId | id | 根據 uniqueId 獲取行數據。 | ||
load | data | 加載數據到表格中,舊數據會被替換。 | ||
append | data | 添加數據到表格在現有數據以後。 | ||
prepend | data | 插入數據到表格在現有數據以前。 | ||
remove | params | 從表格中刪除數據,包括兩個參數: field: 須要刪除的行的 field 名稱。 values: 須要刪除的行的值,類型爲數組。 |
||
removeAll | - | 刪除表格全部數據。 | ||
removeByUniqueId | id | 根據 uniqueId 刪除指定的行。 | ||
insertRow | params | 插入新行,參數包括: index: 要插入的行的 index。 row: 行的數據,Object 對象。 |
||
updateRow | params | 更新指定的行,參數包括: index: 要更新的行的 index。 row: 行的數據,Object 對象。 |
||
showRow | params | 顯示指定的行,參數包括: index: 要顯示的行的 index 或者 uniqueId。 isIdField: 指定 index 是否爲 uniqueid。 |
||
hideRow | params | 隱藏指定的行,參數包括: index: 要隱藏的行的 index。 uniqueId: 獲取要更新的行的 uniqueid |
||
getRowsHidden | show | 得到全部隱藏的行 | ||
mergeCells | options | 合併一些單元格到另外一個單元格,options包含: index:行序號 field:字段名 rowspan:合併的行數 colspan:合併的列數 |
||
updateCell | params | 更新單元格的值 index: 行序號 field: 字段名 value: 值 |
||
refresh | params | 刷新遠程數據, {silent: true} 刷新客戶端數據,{url: newUrl}根據newUrl刷新數據,還支持設置參數哦{query: {foo: 'bar'}} | ||
refreshOptions | options | 刷新options | ||
showLoading | none | 顯示loading | ||
hideLoading | none | 隱藏loading | ||
checkAll | none | 選中當前頁的全部行 | ||
uncheckAll | none | 取消選中當前頁的全部行 | ||
check | index | 選中一行,行序號從0開始 | ||
uncheck | index | 取消選中一行,行序號從0開始 | ||
checkBy | params | 枚舉搜索行 $("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]}) 搜索字段名爲field_name的列中,value是value1或者value2或者value3的行 |
||
uncheckBy | params | 與checkBy相反 | ||
resetView | params | 重置表格視圖的屬性,好比:height等 | ||
resetWidth | none | 自動重置header和footer以適應當前的列寬 | ||
destroy | none | 銷燬當前表格 | ||
showColumn | field | 顯示指定的列 | ||
hideColumn | field | 隱藏指定的列 | ||
getHiddenColumns | - | 獲取隱藏的列。 | ||
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 | ||
多語言 | ||||
Name |
Parameter |
Default |
說明 | |
formatLoadingMessage | - | 'Loading, please wait…' | loading時顯示的text | |
formatRecordsPerPage | pageNumber | '%s records per page' | 每頁顯示數text | |
formatShowingRows | pageFrom, pageTo, totalRows | 'Showing %s to %s of %s rows' | 如今顯示的是1to 10條記錄text | |
formatDetailPagination | totalRows | 'Showing %s rows' | 總行數text | |
formatSearch | - | 'Search' | 搜索框提示text | |
formatNoMatches | - | 'No matching records found' | 搜索無結果text | |
formatRefresh | - | 'Refresh' | 刷新按鈕title | |
formatToggle | - | 'Toggle' | 轉換視圖按鈕title | |
formatColumns | - | 'Columns' | 是否顯示列按鈕title | |
formatAllRows | - | 'All' | 顯示全部行按鈕title | |
固然。。。還能夠直接導入語言包 | ||||
<script src="bootstrap-table-en-US.js"></script><script src="bootstrap-table-zh-CN.js"></script>…$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['en-US']);// $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);// ... |