1. 程式人生 > >Bootstrap Table 中文文檔(完整翻譯版)

Bootstrap Table 中文文檔(完整翻譯版)

classes keyword onenter boolean 順序 rip -name 從表 switch

表格參數:

名稱標簽類型默認描述
- 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 {
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` 
filter the data. NO use ` }
customSort data-custom-sort Function $.noop 執行自定義排序函數而不是內置排序函數,需要兩個參數:
sortName: 排序名稱
sortOrder: 排序順序
如:
   function customSort(sortName, sortOrder) {
         //Sort logic here.
         //You must use `this.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, ...) {
    // ...
});

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,則折疊所有行.

Bootstrap Table 中文文檔(完整翻譯版)