Bootstrap Table 使用文檔

表格參數：

名稱 標簽 類型 默認 描述
- 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, ...) { 
                                  // ...
                               });
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，則折疊所有行. -
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容