【20180523】Bootstrap Table 中文文件
阿新 • • 發佈:2018-11-15
表格引數
表格的引數定義在 jQuery.fn.bootstrapTable.defaults
。
名稱 | 標籤 | 型別 | 預設 | 描述 |
---|---|---|---|---|
- | data-toggle | String | 'table' | 不用寫 JavaScript 直接啟用表格。 |
classes | data-classes | String | 'table table-hover' | 表格的類名稱。預設情況下,表格是有邊框的,你可以新增 table-no-bordered |
sortClass | data-sort-class | String | undefined | 被排序的td元素的類名。 |
height | data-height | Number | undefined | 定義表格的高度。 |
undefinedText | data-undefined-text | String | '-' | 當資料為 undefined 時顯示的字元。 |
striped | data-striped | Boolean | false | 設定為 true 會有隔行變色效果,即每行表格的背景會顯示成灰白相間。 |
sortName | data-sort-name | String | undefined | 定義排序列,通過url方式獲取資料填寫欄位名,否則填寫下標。即填寫 field 的自定義名稱,未填寫則預設都不排列。同 sortOrder 結合使用,預設遞增。 |
sortOrder | data-sort-order | String | 'asc' | 定義排序方式,asc 或者 desc 。 |
sortStable | data-sort-stable | Boolean | false | 設定為 true 將獲得穩定的排序,我們會新增_position 屬性到 row 資料中。 |
rememberOrder | data-remember-order | Boolean | false |
設定 true 記住每個列的順序。 |
iconsPrefix | data-icons-prefix | String | 'glyphicon' | 定義字型庫 ('Glyphicon' or 'fa' for FontAwesome),使用"fa"時需引用 FontAwesome,並且配合 icons 屬性實現效果。 Glyphicon 集成於Bootstrap可免費使用,參考: http://glyphicons.com/ FontAwesome 參考: http://fortawesome.github.io/ |
iconSize | data-icon-size | String | undefined | 定義的圖示大小:
|
buttonsClass | data-buttons-class | String | 'default' | 按鈕的類,預設為default。
|
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格式的資料。 |
dataField | data-data-field | String | 'rows' | 獲取每行資料json內的key |
totalField | data-total-field | String | 'total' | 獲取total資料json內的key。 |
ajax | data-ajax | Function | undefined | 自定義 AJAX 方法,須實現 jQuery AJAX API。 |
method | data-method | String | 'get' | 伺服器資料的請求方式 'get' 或 'post'。 |
url | data-url | String | undefined | 伺服器資料的載入地址。 |
cache | data-cache | Boolean | true | 設定為 false 禁用 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 | |
請求伺服器資料時,你可以通過重寫引數的方式新增一些額外的引數,例如 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 | |
載入伺服器資料之前的處理程式,可以用來格式化資料。 引數: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 或者 Unlimited,則顯示所有記錄。 |
selectItemName | data-select-item-name | String | 'btSelectItem' | radio 或者 checkbox 的欄位 name 名。 |
smartDisplay | data-smart-display | Boolean | true | 設定為 true 是程式自動判斷顯示分頁資訊和 card 檢視。 |
escape | data-escape | Boolean | false | 轉義HTML字串,替換 & , < , > , " , \` , 和 ' 字元。 |
search | data-search | Boolean | false | 預設false不顯示錶格右上方搜尋框 ,可設為true,在搜尋框內只要輸入內容即開始搜尋 |
searchOnEnterKey | data-search-on-enter-key | Boolean | false | 預設false不啟用,設為true啟用,在搜尋框內輸入內容並且按下回車鍵才開始搜尋 |
strictSearch | data-strict-search | Boolean | false | 設為true,開啟精確搜尋 |
searchText | data-search-text | String | '' | 前提:search設為true,啟用了搜尋功能。
|
searchTimeOut | data-search-time-out | Number | 500 | 前提:search設為true,啟用了搜尋功能。
|
trimOnSearch | data-trim-on-search | Boolean | true | 預設true,自動忽略空格 |
showHeader | data-show-header | Boolean | true | 預設為true顯示錶頭,設為false隱藏 |
showFooter | data-show-footer | Boolean | false | 預設為false隱藏表尾,設為true顯示 |
showColumns | data-show-columns | Boolean | false | 預設為false隱藏某列下拉選單,設為true顯示 |
showRefresh | data-show-refresh | Boolean | false | 預設為false隱藏重新整理按鈕,設為true顯示 |
showToggle | data-show-toggle | Boolean | false | 預設為false隱藏檢視切換按鈕,設為true顯示 |
showPaginationSwitch | data-show-pagination-switch | Boolean | false | 預設為false隱藏每頁資料條數選擇,設為true顯示 |
showFullscreen | data-show-fullscreen | Boolean | false | 預設為false隱藏全屏按鈕,設為true顯示 |
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 | 預設false,設為true顯示card view(卡片檢視) |
detailView | data-detail-view | Boolean | false | 預設false,設為true顯示detail view(細節檢視) |
detailFormatter | data-detail-formatter | Function | |
前提:detailView設為true,啟用了顯示detail view。
|
detailFilter | data-detail-filter | Function | |
當detailView設定為true時,允許展開每一行。返回true,該行將啟用擴充套件,返回false,並且將禁用該行的擴充套件。預設函式返回true,以便對所有行進行擴充套件。 |
searchAlign | data-search-align | String | 'right' | 搜尋框的位置,預設right(最右),可選left |
buttonsAlign | data-buttons-align | String | 'right' | 工具欄按鈕的位置,預設right(最右),可選left |
toolbarAlign | data-toolbar-align | String | 'left' | 自定義工具欄的位置,預設left(最左),可選right |
paginationVAlign | data-pagination-v-align | String | 'bottom' | 分頁條垂直方向的位置,預設bottom(底部),可選top、both(頂部和底部均有分頁條) |
paginationHAlign | data-pagination-h-align | String | 'right' | 分頁條水平方向的位置,預設right(最右),可選left |
paginationDetailHAlign | data-pagination-detail-h-align | String | 'left' | 指示如何對齊分頁細節。分頁細節為(顯示第 1 到第 10 條記錄,總共 15 條記錄 每頁顯示 10 條記錄) |
paginationPreText | data-pagination-pre-text | String | '‹' | 在分頁中顯示的圖示,即頁碼前面的按鈕。 |
paginationNextText | data-pagination-next-text | String | '›' | 在分頁中顯示的圖示,即頁面後面的按鈕。 |
clickToSelect | data-click-to-select | Boolean | false | 預設false不響應,設為true則當點選此行的某處時,會自動選中此行的checkbox(複選框)或radiobox(單選按鈕) |
ignoreClickToSelectOn | data-ignore-click-to-select-on | Function | { return $.inArray(element.tagName, ['A', 'BUTTON']); } |
採用一個引數:
|
singleSelect | data-single-select | Boolean | false | 預設false,設為true則允許複選框只選擇一行 |
toolbar | data-toolbar | String | Node | undefined | jQuery的選擇器,例如:#toolbar,.toolbar,或者是DOM 結點 |
buttonsToolbar | data-buttons-toolbar | String | Node | undefined | jQuery的選擇器,例如:#buttons-toolbar, .buttons-toolbar,或者是DOM 結點 |
checkboxHeader | data-checkbox-header | Boolean | true | 預設顯示錶頭行的複選框,設為false隱藏(即表格第一行的不顯示,從第二行往後都顯示) |
maintainSelected | data-maintain-selected | Boolean | false | 設為true則保持被選的那一行的狀態 |
sortable | data-sortable | Boolean | true | 預設true,設為false禁用所有列的排列(需要在th宣告data-sortable=”true”) |
silentSort | data-silent-sort | Boolean | true | 設定false對資料進行靜默排序。當sidePagination選項設定為server時,此選項生效。 |
rowStyle | data-row-style | Function | {} | 改變某行的格式,需要兩個引數:
|
rowAttributes | data-row-attributes | Function | {} | 改變某行的屬性,需要兩個引數:
|
customSearch | data-custom-search | Function | $.noop | 自定義搜尋功能(用來代替自帶的搜尋功能),需要一個引數:
|
customSort | data-custom-sort | Function | $.noop | 自定義排序功能(用來代替自帶的排序功能),需要兩個引數:
|
locale | data-locale | String | undefined | 設定要使用的區域設定(即多語言設定)。區域檔案必須預先載入。允許fallback,如果載入,按以下順序:
|
footerStyle | data-footer-style | Function | {} | 改變footer格式,需要兩個引數:
|
列引數
列引數定義在 jQuery.fn.bootstrapTable.columnDefaults
。
名稱 |
標籤 |
型別 |
預設 |
描述 |
---|---|---|---|---|
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, ...) {
// ...
});
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:排序列的 filed 名稱, 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 | 在表格 body 渲染之前觸發。 |
onPostBody | post-body.bs.table | none | 在表格 body 渲染完成後觸發。 |
onPostHeader | post-header.bs.table | none | 在表格 header 渲染完成後觸發。 |
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 | 點選重新整理按鈕後觸發。 |
onScrollBody | scroll-body.bs.table | 表格 body 滾動時觸發。 |
方法
使用方法的語法:$('#table').bootstrapTable('method', parameter);
。
名稱 |
引數 |
描述 |
例子 |
---|---|---|---|
getOptions | none | 返回表格的 Options。 | 檢視 |
getSelections | none | 返回所選的行,當沒有選擇任何行的時候返回一個空陣列。 | 檢視 |
getAllSelections | none | 返回所有選擇的行,包括搜尋過濾前的,當沒有選擇任何行的時候返回一個空陣列。 | 檢視 |
getData | useCurrentPage | 或者當前載入的資料。假如設定 useCurrentPage 為 true,則返回當前頁的資料。 | 檢視 |
getRowByUniqueId | id | 根據 uniqueId 獲取行資料。 | 檢視 |
load | data | 載入資料到表格中,舊資料會被替換。 | 檢視 |
showAllColumns | none | 顯示所有列。 | |
hideAllColumns | none | 隱藏所有列。 | |
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。 |
|
getHiddenRows | 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,可展開索引為 index 的行。 | |
collapseRow | index | 如果詳細檢視選項設定為True,可收起索引為 index 的行。. | |
expandAllRows | none | 如果詳細檢視選項設定為True,可展開所有行。 | |
collapseAllRows | none | 如果詳細檢視選項設定為True,可收起開所有行。 |
多語言
名稱 |
引數 |
預設 |
---|---|---|
formatLoadingMessage | - | 'Loading, please wait…' “載入,請稍候……” |
formatRecordsPerPage | pageNumber | '%s records per page' “%s 每頁記錄” |
formatShowingRows | pageFrom, pageTo, totalRows | 'Showing %s to %s of %s rows' “顯示%s到%s行” |
formatDetailPagination | totalRows | 'Showing %s rows' 顯示%s 行 |
formatSearch | - | 'Search' “搜尋” |
formatNoMatches | - | 'No matching records found' "沒有找到匹配的記錄" |
formatRefresh | - | 'Refresh' “重新整理” |
formatToggle | - | 'Toggle' “切換” |
formatColumns | - | 'Columns' “列” |
formatAllRows | - | 'All' “全部” |
formatFullscreen | - | 'Fullscreen' “全屏” |
PS:
我們可以匯入您需要的所有區域檔案:
<script src="bootstrap-table-en-US.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>
...
然後使用JavaScript來切換區域設定:
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['en-US']);
// $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
// ...