表的各項(Table options )
定義在 jQuery.fn.bootstrapTable.defaults 文件內
| 名稱 | 屬性 | 類型 | 默認值 | 作用描述 |
|---|---|---|---|---|
| - | data-toggle | String | table | 只要引入 jquery、bootstrap 、bootstrap-table的包，不用在js裏面定義就可以使用 默認有寫data-toggle=”table”,data-toggle應該知道吧，常用的有”tooltip、popover等等”，這邊就不說了 |
| classes | data-classes | String | table table-hover | 表的class屬性，如果沒有自己定義，則默認有邊框，並且當鼠標懸浮在那一行，背景會變爲淺灰色. |
| sortClass | data-sort-class | String | undefined | 聲明表格td的class名，代表此列元素的class名將被排序 |
| height | data-height | Number | undefined | 表格的高度 |
| undefinedText | data-undefined-text | String | - | 當不寫任何內容默認顯示’-‘ |
| striped | data-striped | Boolean | false | 默認false，當設爲true，則每行表格的背景會顯示灰白相間 |
| sortName | data-sort-name | String | undefined | 定義哪一列的值會被排序，寫data-field的自定義名，沒定義默認都不排列，如果你定義了，則定義的列默認遞增（asc） |
| sortOrder | data-sort-order | String | asc | 同上面的結合使用，默認遞增（asc），也可設爲遞減（desc） |
| sortStable | data-sort-stable | Boolean | false | （別看錯了，是sortStable，sortable在下面）默認false，設爲true，則和sort部分一樣，區別是：在排序過程中，如果存在相等的元素，則原來的順序不會改變。原文還有一句：（如果你把此屬性設爲了true）我們將爲此行添加’_position’屬性 |
| iconsPrefix | data-icons-prefix | String | glyphicon | 定義字體庫 (‘Glyphicon’ or ‘fa’ for FontAwesome),使用”fa”時需引用 FontAwesome，並且配合 icons 屬性實現效果 Glyphicon 集成於Bootstrap可免費使用 |
| iconSize | data-icon-size | String | undefined | 定義的圖標大小： - undefined =>默認表示默認的按鈕尺寸（btn） - xs =>超小按鈕的尺寸（btn-xs） - sm =>小按鈕的尺寸（btn-sm） - lg =>大按鈕的尺寸（btn-lg） |
| buttonsClass | data-buttons-class | String | default | 按鈕的類，默認爲default。 - 可選的有：primary、danger、warning等等 - 寫了之後會自動轉換爲btn-primary（藍色）、btn-danger（紅色）、btn-warning（黃色）等格式，所以前面不要再加”btn-“，默認爲btn-default（白色） - 參考菜鳥教程：Bootstrap 按鈕 |
| 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’ } |
定義在工具欄、分頁、詳細視圖中使用的圖標 - 沒辦法解釋，請參考菜鳥教程的圖標：Bootstrap 字體圖標 |
| columns | - | Array | [] | 默認空數組，在JS裏面定義，field即data-field，title就是每列表頭名等等。 - 請參考：點擊Bootstrap-table的右側邊欄Usage |
| data | - | Array | [] | 被加載的數據。 - 也就是從服務器獲取的數據，通過”.”運算符獲取，例如”data.date/data.anything”，後面是服務器發來的字段名 |
| dataField | data-data-field | String | rows | - 名稱寫自己定義的每列的字段名，也就是key，通過key才能給某行的某列賦value。 - 原文：獲取每行數據json內的key - 例如：{“name”:”zz”,”age”:20}，name和age就是key，如果這是從服務端請求的json，那可能和每列定義的字段不同，但都是唯一的 |
| ajax | data-ajax | Function | undefined | - ajax方法，和jQuery的ajax方法類似 - 參考 BootstrapTable實現定時刷新數據，只是參考，因爲那是jQuery的ajax方法 |
| method | data-method | String | get | 向服務器請求遠程數據的方式，默認爲’get’，可選’post’ |
| url | data-url | String | undefined | 向服務器請求的url。 - 例如：server + “get_app_player”和server + ‘get_channel_list’，兩者都是向server（server是自己定義的，例如”http://kanshakan.nichousha.com/”）請求數據，只是接口不同，一個是請求該遊戲玩家信息，一個是請求渠道信息 下面看看原文： - 向遠程站點請求數據的URL - 請記住，如果服務端分頁選項使用了自定義的，那麼請求的服務器響應格式是不同的，參考下面兩個數據格式： Without server-side pagination（沒有啓用服務端分頁 - data1.json） With server-side pagination（啓用服務端分頁 - data2.json） |
| cache | data-cache | Boolean | true | 默認緩存ajax請求，設爲false則禁用緩存 |
| contentType | data-content-type | String | application/json | 請求數據的contentType（內容類型），用於定義文件的類型，決定接收方以什麼形式讀取這個文件。 - 默認application/json，用來告訴接收端從服務器發來的消息是序列化後的json字符串 |
| dataType | data-data-type | String | json | 期望從服務器獲取的數據的類型，默認爲json格式字符串 |
| ajaxOptions | data-ajax-options | Object | {} | 向服務器請求ajax時的附加項，默認無附加 - 參考 jQuery.ajax() |
| queryParams | data-query-params | Function |
function(params){
return params;}
|
當請求數據時，你可以通過修改queryParams向服務器發送其餘的參數。 - queryParamsType=”limit”，它的參數包括：limit，offset，search，sort，order Else - params包括：pageSize，pageNumber，searchText，sortName，sortOrder - 當return false，請求則終止 |
| queryParamsType | data-query-params-type | String | limit | 默認”limit”，設置該屬性用來發送符合RESTful格式的參數 |
| responseHandler | data-response-handler | Function |
function(res){
return res;}
|
在加載服務器發送來的數據之前，處理數據的格式，參數res表示the response data（獲取的數據） |
| pagination | data-pagination | Boolean | false | 默認爲false，表格的底部工具欄不會顯示分頁條（pagination toolbar），可以設爲true來顯示 |
| paginationLoop | data-pagination-loop | Boolean | true | 默認true，分頁條無限循環 |
| onlyInfoPagination | data-only-info-pagination | Boolean | false | 前提：pagination設爲true，啓用了分頁功能。 - 默認false，設爲true顯示總記錄數 |
| sidePagination | data-side-pagination | String | client | 設置在哪進行分頁，默認”client”，可選”server”，如果設置 “server”，則必須設置url或者重寫ajax方法 - 請記住，如果服務端分頁選項使用了自定義的，那麼請求的服務器響應格式是不同的，參考下面兩個數據格式： Without server-side pagination（沒有啓用服務端分頁） With server-side pagination（啓用服務端分頁） |
| pageNumber | data-page-number | Number | 1 | 前提：pagination設爲true，啓用了分頁功能。 - 默認第1頁，用於設置初始的頁數 |
| pageSize | data-page-size | Number | 10 | 前提：pagination設爲true，啓用了分頁功能。 - 默認每頁顯示10條記錄，用於設置每頁初始顯示的條數 |
| pageList | data-page-list | Array | [10, 25, 50, 100] | 前提：pagination設爲true，啓用了分頁功能。 - 默認爲[10, 25, 50, 100]，即可以選擇”每頁顯示10/25/50/100條記錄”，用於設置選擇每頁顯示的條數 |
| selectItemName | data-select-item-name | String | btSelectItem | radio（單選按鈕）或checkbox（複選框）的字段名 |
| smartDisplay | data-smart-display | Boolean | true | 默認爲true，會 機智地（<_<） 根據情況顯示分頁（pagination）或卡片視圖（card view） |
| 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，啓用了搜索功能。 - 設置搜索文件的超時時間（原文：Set timeout for search fire，不知道是寫錯了還是我知識面太窄，”search fire”是什麼意思，官方API錯了？給我整蒙逼了） |
| 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顯示 |
新版的CSDN有bug，所以其餘的Table options另寫一個表格 [ BootstrapTable 文檔 ]
| 名稱 | 屬性 | 類型 | 默認值 | 作用描述 |
|---|---|---|---|---|
| showPaginationSwitch | data-show-pagination-switch | 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-card-view | Boolean | false | 默認false，設爲true顯示detail view（細節視圖） |
| detailFormatter | data-detail-formatter | Function | function(index, row, element){ return ”;} |
前提：detailView設爲true，啓用了顯示detail view。 - 用於格式化細節視圖 - 返回一個字符串，通過第三個參數element直接添加到細節視圖的cell（某一格）中，其中，element爲目標cell的jQuery element |
| searchAlign | data-search-align | String | right | 搜索框的位置，默認right（最右），可選left |
| buttonsAlign | data-buttons-align | String | right | 工具欄按鈕的位置，默認right（最右），可選left |
| toolbarAlign | data-toolbar-align | String | left | 自定義工具欄的位置，默認right（最右），可選left |
| 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 | 如果解譯的話太長，舉個例子，paginationDetail就是“顯示第 1 到第 8 條記錄，總共 15 條記錄 每頁顯示 8 條記錄”，默認left（最左），可選right |
| paginationPreText | data-pagination-pre-text | String | ‹ | 還是舉例子，如果你內容太多，底部最右邊會顯示：”‹ 1 2 3 4 5 ›”來選擇頁數，默認就是最左邊那個符號，下同 |
| paginationNextText | data-pagination-next-text | String | › | 參考上面一條 |
| clickToSelect | data-click-to-select | Boolean | false | 默認false不響應，設爲true則當點擊此行的某處時，會自動選中此行的checkbox（複選框）或radiobox（單選按鈕） |
| singleSelect | data-single-select | Boolean | false | 默認false，設爲true則允許複選框僅選擇一行 |
| toolbar | data-toolbar | String | Node | undefined | jQuery的選擇器，例如：#toolbar，.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”，寫在js中只是啓不啓用） |
| slientSort | data-silent-sort | Boolean | true | 前提：sidePagination設爲server（服務端） - 默認true，設爲false則靜默排序數據 |
| rowStyle | data-row-style | Function | {} | 改變某行的格式，需要兩個參數： - row：此行的數據 - index：此行的索引 支持classes和css，用法如下： function rowStyle(row, index){ return { classes: ‘text-nowrap another-class’, css: {“color”: “blue”, “font-size”: “50px”} }; } |
| rowAttributes | data-row-attributes | Function | {} | 改變某行的屬性，需要兩個參數： - row：此行的數據 - index：此行的索引 支持所有自定義的屬性。 |
| customSearch | data-custom-search | Function | $.noop | 自定義搜索功能（用來代替自帶的搜索功能），需要一個參數： - text：想要搜索的內容 用法如下： function customSearch(text){ //必須使用’this.data’對數據進行過濾（filter the data，感覺這個詞也不用譯），不要使用’this.options.data’ } |
| customSort | data-custom-sort | Function | $.noop | 自定義排序功能（用來代替自帶的排序功能），需要兩個參數（可以參考前面）： - sortName：需要排序的那列 - sortOrder：排序方式 用法：和上面一樣，不用擔心，註釋也一模一樣 |
| locale | data-locale | String | undefined | 本地化（動詞）。 本地化的文件必須被預加載，允許fallback（簡單來說就是如果要使用的文件不可用，就可以用別的替代它，例如球場替補，沒替補，如果有人受傷了，比賽不就廢了），如果加載，將按如下順序： - 首先嚐試加載的是指定的”本地化”文件 - 然後是’_’（下劃線）寫成’-‘（破折號），並且區域代碼被大寫的 - 然後是短區域代碼（例如：用’fr’代替’fr-CA’） - 最後使用的是剩下的本地化文件（當沒有文件可加載則使用默認的） 如果剩餘的undefined，或者是空字符，則使用最後一次使用的那個文件（當沒有本地化文件可被加載，則使用自帶的’en_US’） |
| footerStyle | data-footer-style | Function | {} | 改變footer格式，需要兩個參數： - row：此行的數據 - index：此行的索引 支持classes和css，用法如下： function rowStyle(value，row, index){ return { css: { “font-weight”: “bold” } }; } |
列的各項（Column options ）
定義在 jQuery.fn.bootstrapTable.columnDefaults 文件內
| 名稱 | 屬性 | 類型 | 默認值 | 作用描述 |
|---|---|---|---|---|
| radio | data-radio | Boolean | false | 默認false不顯示radio（單選按鈕），設爲true則顯示，radio寬度是固定的 |
| checkbox | data-checkbox | Boolean | false | 默認false不顯示checkbox（複選框），設爲true則顯示，checkbox的每列寬度已固定 |
| field | data-field | String | undefined | 是每列的字段名，不是表頭所顯示的名字，通過這個字段名可以給其賦值，相當於key，表內唯一 |
| title | data-title | String | undefined | 這個是表頭所顯示的名字，不唯一，如果你喜歡，可以把所有表頭都設爲相同的名字 |
| titleTooltip | data-title-tooltip | String | undefined | 當懸浮在某控件上，出現提示 - 參考 Bootstrap 提示工具（Tooltip）插件 |
| 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 | 每格數據的對齊方式，有：top（靠上）、middle（居中）、bottom（靠下） |
| width | data-width | Number（單位：px或%） | undefined | 每列的寬度。 - 如果沒有自定義寬度，那麼寬度會根據內容的寬度自適應。 - 如果表是左適應（left responsive）或者設置的寬度小於內容的寬度，那麼，寬度還是會自適應（可以在class或其他的屬性中使用 min-width 或 max-width）。 - 你也可以使用”%”作爲單位，這樣的話，bootstapTable將按百分比劃分，如果你想使用”pixels（像素值）”，你可以只寫數字（只要不加”%”，單位默認”px”，不嫌麻煩，或者想更清晰，你也可以加上”px”） |
| sortable | data-sortable | Boolean | false | 默認false就默認顯示，設爲true則會被排序 |
| order | data-order | String | asc | 默認的排序方式爲”asc（升序）”，也可以設爲”desc（降序）”。 - 與上面的結合使用，不然都不讓排序了，你還考慮什麼升降。 |
| visible | data-visible | Boolean | true | 默認爲true顯示該列，設爲false則隱藏該列。 - 還是很有用的，例如隱藏自定義index列，按某屬性排序後會變亂，你可以讀取某行的index來進行賦值 |
| cardVisible | data-card-visible | Boolean | true | 默認爲true顯示該列，設爲false則隱藏。 |
| switchable | data-switchable | Boolean | true | 默認爲true顯示該列，設爲false則禁用列項目的選項卡。 |
| clickToSelect | data-click-to-select | Boolean | true | 默認true不響應，設爲false則當點擊此行的某處時，不會自動選中此行的checkbox（複選框）或radiobox（單選按鈕） |
| formatter | data-formatter | Function | undefined | 需要此列的對象。 某格的數據轉換函數，需要三個參數： -value： field（字段名） -row：行的數據 -index：行的（索引）index |
| footerFormatter | data-footer-formatter | Function | undefined | 需要此列的對象。 某格的數據轉換函數，需要一個參數： -data： 所有行數據的數組 函數需要返回（return）footer某格內所要顯示的字符串的格式，還要包括內容 |
| events | data-events | Object | undefined | 當某格使用formatter函數時，事件監聽會響應，需要四個參數： -event：jQuery事件（參考Events）。 - value：字段名 - row：行數據 - index：此行的index 舉個例子： <th .. data-events=”operateEvent”> var operateEvents = {‘click .like’: function (e, value, row, index) {}}; |
| sorter | data-sorter | Function | undefined | 自定義的排序函數，實現本地排序，需要兩個參數： - a：第一個字段名 - b：第二個字段名 |
| sortName | data-sort-name | String | undefined | 除了表頭默認的sort-name或列的字段名，還可以使用自定義的sort-name 對特殊情況說明： - 一個列顯示的內容或許是”html”代碼，如：<b><span style=”color:red”>abc</span></b>，但是被排列的是html代碼中的內容（content）：abc |
| cellStyle | data-cell-style | Function | undefined | 對某格中顯示樣式（style）進行改變，需要三個函數： - value：字段名 - row：行數據 - index：此行的index - field：行的字段名 支持classes和css，用法如下： function cellStyle(value, row, index, field) { return { classes: ‘text-nowrap another-class’, css: {“color”: “blue”, “font-size”: “50px”} }; } |
| searchable | data-searchable | Boolean | true | 默認true，表示此列數據可被查詢 |
| searchFormatter | data-search-formatter | Boolean | true | 默認true，可使用格式化的數據查詢 |
| escape | data-escape | Boolean | false | 跳過插入HTML中的字符串，替換掉特殊字符（後面符號沒有逗號）：&，<，>，"，`，' |
事件（Events）
定義事件的格式：
$(‘#table’).bootstrapTable({
onEventName: function (arg1, arg2, …) {
// …
} });$(‘#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) {
// …
});
| 事件名 | 定義在jQuery中的事件名 | 參數 | 作用描述 |
|---|---|---|---|
| onAll | all.bs.table | name, args | 當所有觸發器被觸發時都執行此函數，就是所有的事件都會觸發該事件，參數包括： - name：事件名 - args：事件的數據 |
| onClickRow | click-row.bs.table | row, $element, field | 當單擊此行的任意一處，就會觸發該事件，所需參數如下（只是按原文譯過來的，在bootstraptable的js中不需要這些參數，因爲單擊該行就會獲得一個row，row中包括此行所有數據，只要通過此行某列的字段名即可取出）： - row：哪一行（從0開始） - $element：該行（tr） - field：當點擊該行，你想獲取此行哪一格的數據，field就是此列字段名 - 參考：Bootstrap Table 雙擊或單擊行獲取該行內容 |
| onDblClickRow | dbl-click-row.bs.table | row, $element, field | 和上面差不多，當雙擊（666）此行的任意一處，就會觸發該事件，所需參數如下（只是按原文譯過來的，在bootstraptable的js中不需要這些參數，因爲雙擊該行就會獲得一個row，row中包括此行所有數據，只要通過此行某列的字段名即可取出）： - row：哪一行（從0開始） - $element：該行（tr） - field：當點擊該行，你想獲取此行哪一格的數據，field就是此列字段名 - 參考：Bootstrap Table 雙擊或單擊行獲取該行內容 |
| onClickCell | click-cell.bs.table | field, value, row, $element | 當單擊某一格，就會觸發該事件，所需參數如下： - field：此格所在列的字段名 - value：此格的數據 - $element：此行的此列，就是此格（td） |
| onDblClickCell | dbl-click-cell.bs.table | field, value, row, $element | 當雙擊某一格，就會觸發該事件，所需參數如下： - field：此格所在列的字段名 - value：此格的數據 - $element：此行的此列，就是此格（td） |
| onSort | sort.bs.table | name, order | 當對某列進行排序時觸發該事件，所需參數如下： - name：所排序的列的字段名 - order：所排的順序 |
| onCheck | check.bs.table | row, $element | 當選擇（check）此行時觸發，所需的參數如下： - row：所選擇的行的字段名 - $element：此行的DOM元素 |
| onUncheck | uncheck.bs.table | row, $element | 當取消選擇（uncheck）此行時觸發，所需的參數如下： - row：所取消選擇的行的字段名 - $element：此行的DOM元素 |
| onCheckAll | check-all.bs.table | rows | 當全選行時觸發，所需的參數如下： - rows：最近（newly）所選擇的行的字段名的數組 |
| onUncheckAll | uncheck-all.bs.table | rows | 當取消全選行時觸發，所需的參數如下： - rows：之前或上次（previously）所選擇的行的字段名的數組 |
| onCheckSome | check-some.bs.table | rows | 當選擇（check）某些行（多行，rows）時觸發，所需的參數如下： - rows：之前或上次（previously）所選擇的行的字段名的數組 |
| onUncheckSome | uncheck-some.bs.table | rows | 當取消選擇（uncheck）某些行（多行，rows）時觸發，所需的參數如下： - rows：之前或上次（previously）所選擇的行的字段名的數組 |
| onLoadSuccess | load-success.bs.table | data | 當所有數據被加載時觸發 |
| onLoadError | load-error.bs.table | status, res | 當加載某些數據出現錯誤時觸發 |
| 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 | 當<tbody></tbody>中的內容沒顯示前觸發 |
| onPostBody | post-body.bs.table | data | 當<tbody></tbody>中的內容被加載完後或者在你所用的DOM中有定義則被觸發 |
| onPostHeader | post-header.bs.table | none | 當<thead></thead>中的內容被加載完後或者在你所用的DOM中有定義則被觸發 |
| onExpandRow | expand-row.bs.table | index, row, $detail | 當查看詳細視圖（點擊查看detail的圖標）時觸發 |
| onCollapseRow | collapse-row.bs.table | index, row | 當關閉詳細視圖（再次點擊查看detail的圖標）時觸發 |
| onRefreshOptions | refresh-options.bs.table | options | 當刷新各項後或在初始化表（也包括銷燬了再初始化）之前觸發 |
| onResetView | reset-view.bs.table | 當重置（reset）表的視圖時觸發 | |
| onRefresh | refresh.bs.table | params | 當點擊刷新按鈕（refresh，不是瀏覽器的，而是表格右上角的刷新按鈕）後觸發 |
方法（Methods）
定義方法響應的語法
$('#table').bootstrapTable('method', parameter);
| 方法名 | 參數 | 描述 | 舉例 |
|---|---|---|---|
| getOptions | none | 返回各項的object | $table.bootstrapTable(‘getOptions’); - 請查看： getOptions |
| getSelections | none | 返回被選擇的行，當沒有行被選擇，則返回空數組（但並不是undefined，也不是null，是長度爲0的空數組，所以可以判斷長度是否大於0來確定是否選擇了行） | $table.bootstrapTable(‘getSelections’); - 請查看： getSelections |
| getAllSelections | none | 返回所有被選的行（原文中：contain search or filter，其實就是你選擇的篩選之後的數據），當沒有行被選擇，則返回空數組 | $table.bootstrapTable(‘getAllSelections’); - 請查看： getAllSelections |
| showAllColumns | none | 顯示所有的列 | $table.bootstrapTable(‘showAllColumns’); - 就是顯示所有的列，並沒什麼可說的 |
| hideAllColumns | none | 隱藏所有的列 | $table.bootstrapTable(‘hideAllColumns’); - 就是隱藏所有的列 |
| getData | useCurrentPage | 獲取被加載的表的數據，如果你設置了使用當前頁的數據（useCurrentPage），則返回當前頁的數據 | $table.bootstrapTable(‘getData’); - 請查看： getData |
| getRowByUniqueId | id | 獲取你想要的某行的數據（設置某行的id） | $table.bootstrapTable(‘getRowByUniqueId’, 1);後面的1就是你要的那一行的ID - 請查看： getRowByUniqueId |
| load | data | 向表中加載數據，原來的數據將被移除 | $table.bootstrapTable(‘load’, data); - 請查看： load |
新版的CSDN有bug，所以其餘的Methods另寫一個表格 [ Bootstraptable API 中文文檔 ]
| 方法名 | 參數 | 描述 | 舉例 |
|---|---|---|---|
| append | data | 將數據追加在最後一行後 | $table.bootstrapTable(‘append’, data);data可以是數組 - 請查看： append |
| prepend | data | 也是追加，只是在第一行之前 | $table.bootstrapTable(‘prepend’, data);data可以是數組 - 請查看： prepend |
| remove | params | 移除一行或多行你所選的數據 | $table.bootstrapTable(‘remove’, {field: ‘id’, values: ids}); - id：所需移除的那一行（rows，一或多行）的字段 - values：被移除的行的數組 - 請查看： remove |
| removeAll | - | 移除表中所有的數據 | $table.bootstrapTable(‘removeAll’); - 請查看： removeAll |
| removeByUniqueId | - | 移除某行數據（設置某行的id） | $table.bootstrapTable(‘removeByUniqueId’, 1);後面的1就是你想移除的那一行的ID - 請查看： removeByUniqueId |
| insertRow | params | 新增一行，所需的參數如下： - index：你想插入到哪（只要願意，想插哪就插哪，想插誰就插誰） - row：你想插入的數據 |
$table.bootstrapTable(‘insertRow’, {index: 1, row: row}); - 請查看： insertRow |
| updateRow | params | 更新行數據，所需的參數如下： - index：所要更新的行的索引（index） - row：你想換的新的數據 |
$table.bootstrapTable(‘updateRow’, {index: 1, row: row}); - 請查看： updateRow - 請查看： Bootstrap Table實現定時刷新數據 |
| updateByUniqueId | params | 更新某行數據，所需的參數如下： - id：你想更新那行的id（唯一），（只要願意，想換哪個換哪個） - row：你想換的新的數據 |
$table.bootstrapTable(‘updateByUniqueId’, {id: 3, row: row}); - 請查看： updateByUniqueId |
| showRow | params | 顯示特定行，所需的參數至少包括下面所列的一個： - id：所要顯示的行的索引（index） - uniqueId：那一行的id |
$table.bootstrapTable(‘showRow’, {index:1}); - 請查看： showRow/hideRow |
| hideRow | params | 隱藏特定行，所需的參數至少包括下面所列的一個： - id：所要隱藏的行的索引（index） - uniqueId：那一行的id |
$table.bootstrapTable(‘hideRow’, {index:1}); - 請查看： showRow/hideRow |
| getRowsHidden | boolean | 獲取隱藏的行（官方原話很多，其實總結起來就前面那一句） | $table.bootstrapTable(‘getRowsHidden’); |
新版的CSDN有bug，所以其餘的Methods另寫一個表格 [ Bootstrap Table API 中文文檔 ]
| 方法名 | 參數 | 描述 | 舉例 |
|---|---|---|---|
| mergeCells | options | 融合~（把多格合併爲一格），所需的參數如下： - index：所要合併的格所在行的索引（index） - field：所在列的字段名 - rowspan：合併的行總數目 - colspan：合併的列總數目 |
$table.bootstrapTable(‘mergeCells’, {index: 1, field: ‘name’, colspan: 2, rowspan: 3}); - 請查看： mergeCells |
| updateCell | params | 更新某格數據，所需的參數如下： - index：所要合併的格所在行的索引（index） - field：所在列的字段名 - value：要換的新的數據 你也可以設置{reinit:false}來禁用表格的再次初始化 |
$table.bootstrapTable(‘updateCell’,{index:index,field:’id’,value:value}); |
| refresh | params | 刷新服務端的數據： - 可以設置{silent:true}來 偷偷地（<_<） 刷新 - 設置{url:newUrl,pageNumber:pageNumber, pageSize:pageSize}改變請求的地址，頁數，每頁所顯示的條數 - 可以設置{query:{foo:’bar’}}增加特定的參數 |
$table.bootstrapTable(‘refresh’); - 請查看： refresh |
| refreshOptions | options | 看例子吧 | - 請查看： refreshOptions |
| resetSearch | text | 重置搜索的文本（text） | - 請查看： resetSearch |
| showLoading | none | 顯示正在加載…… | - 請查看： showLoading/hideLoading |
| hideLoading | none | 隱藏正在加載…… | - 請查看： showLoading/hideLoading |
| checkAll | none | 選擇當前頁的所有行 | $table.bootstrapTable(‘checkAll’); - 請查看： checkAll/uncheckAll |
| uncheckAll | none | 取消選擇當前頁的所有行 | $table.bootstrapTable(‘uncheckAll’); - 請查看： checkAll/uncheckAll |
| checkInvert | none | 反向選擇，不難理解吧 | $table.bootstrapTable(‘checkInvert’); |
| check | index | 選擇某一行，索引（index）從0開始 | $table.bootstrapTable(‘check’, 1); - 請查看： check/uncheck |
| uncheck | index | 取消選擇某一行，索引（index）從0開始 | $table.bootstrapTable(‘uncheck’, 1); - 請查看： check/uncheck |
| checkBy | params | 通過數組選擇某一行，所需的參數如下： - field：所要選的字段名 - values：所要選的那些值（數組） |
官方沒，啊，有例紙： - $(“#table”).bootstrapTable(“checkBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]}); - 請查看： checkBy/uncheckBy |
| uncheckBy | params | 通過數組選擇某一行，所需的參數如下： - field：所要取消選擇的字段名 - values：所要取消選擇的那些值（數組） |
$(“#table”).bootstrapTable(“uncheckBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]}); - 請查看： checkBy/uncheckBy |
| resetView | params | 改變表格的樣式，例如改變表格的高度（height） | $table.bootstrapTable(‘resetView’); - 請查看： resetView |
| resetWidth | none | 自動改變表頭和表腳（就譯成腳，任性）的寬度來適應每列的寬度 | $table.bootstrapTable(‘resetWidth’); |
| destroy | none | 銷燬表格 A！T！T！A！C！K！ | $table.bootstrapTable(‘destroy’); - 請查看： destroy |
| showColumn | field | 顯示特定的列 | $table.bootstrapTable(‘showColumn’, ‘name’); - 請查看： showColumn/hideCoulumn |
| hideColumn | field | 隱藏特定的列 | $table.bootstrapTable(‘hideColumn’, ‘name’); - 請查看： showColumn/hideCoulumn |
新版的CSDN有bug，所以其餘的Methods另寫一個表格 [ Bootstrap table API 中文文檔 ]
| 方法名 | 參數 | 描述 | 舉例 |
|---|---|---|---|
| getHiddenColumns | - | 獲取所有隱藏的列 | $table.bootstrapTable(‘getHiddenColumns’); |
| getVisibleColumns | - | 獲取所有顯示的列 | $table.bootstrapTable(‘getVisibleColumns’); |
| scrollTo | value | 滾……到哪個位置，單位是’px’，如果設爲’bottom’，嗖，恭喜你已到表尾 | $table.bootstrapTable(‘scrollTo’, 0); - 請查看： scrollTo |
| getScrollPosition | none | 獲取當前所滾到的位置，單位你懂得，就是’px’ | $table.bootstrapTable(‘getScrollPosition’); |
| filterBy | none | 只能在客戶端（client-side，相對server-side）這邊用，過濾表中的數據 例如： - 可以設置{age:10}來只顯示age爲10的數據 - 不僅單的，你還可以雙飛，甚至多p，設置{age: 10, hairColor: [“blue”, “red”, “green”]} ，這樣你就得到了一羣10歲的，頭髮顏色爲藍，紅，綠的……數據 |
$table.bootstrapTable(‘filterBy’, { id: [1, 2, 3] }); - 請查看： filterBy |
| selectPage | page | 跳轉到特定的頁面 | $table.bootstrapTable(‘selectPage’, 1); - 請查看： selectPage/prevPage/nextPage |
| prevPage | none | 跳轉到上一頁 | $table.bootstrapTable(‘prevPage’); - 請查看： selectPage/prevPage/nextPage |
| nextPage | none | 跳轉到下一頁 | $table.bootstrapTable(‘nextPage’); - 請查看： selectPage/prevPage/nextPage |
| togglePagination | none | 詞窮，請看例紙 | $table.bootstrapTable(‘togglePagination’); - 請查看： togglePagination |
| toggleView | none | 改變視圖 | $table.bootstrapTable(‘toggleView’); - 請查看： toggleView |
| expandRow | index | 可使用條件：detail view設爲了true，不然無法使用視圖功能，這個也沒用 - 通過參數index來展開此列的詳細視圖 |
- 請查看： expandRow-collapseRow |
| collapseRow | index | 可使用條件：detail view設爲了true - 通過參數index來關閉此列的詳細視圖 |
- 請查看： expandRow-collapseRow |
| expandAllRow | is subtable | 可使用條件：detail view設爲了true - 展開所有列的詳細視圖 |
$table.bootstrapTable(‘expandAllRow’); - 參考上面的實例，上面是展開（摺疊）某一行的視圖，這個是所有行的 |
| collapseAllRow | is subtable | 可使用條件：detail view設爲了true - 關閉所有列的詳細視圖 |
$table.bootstrapTable(‘collapseAllRow’); - 參考上面 |
本地化，切換爲另一種語言（Localizations）
默認顯示英文，如果想使用中文，首先引入：
<script src="bootstrap-table-zh-CN.js"></script>然後是三種聲明使用的方法（建議使用第二、三種），如下：
-
第一種：
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']); -
第二種：
<table data-toggle="table" data-locale="zh-CN"></table> -
第三種：
$('table').bootstrapTable({locale:'zh-CN'});
- 以下說明除了數字外均爲中文默認顯示，本來不用寫的，只要引入就顯示中文了
| 名稱 | 參數 | 默認 | 說明 |
|---|---|---|---|
| formatLoadingMessage | - | ‘Loading, please wait…’ | “加載中，請等待……” |
| formatRecordsPerPage | pageNumber | ‘%s records per page’ | “每頁顯示 15 條記錄” |
| formatShowingRows | pageFrom, pageTo, totalRows | ‘Showing %s to %s of %s rows’ | “顯示第 1 到第 15 條記錄” |
| formatDetailPagination | totalRows | ‘Showing %s rows’ | “總共 15 條記錄” |
| formatSearch | - | ‘Search’ | “搜索（佔位符）” |
| formatNoMatches | - | ‘No matching records found’ | “沒有找到匹配的記錄” |
| formatRefresh | - | ‘Refresh’ | “切換”（鼠標懸浮顯示的文字，下同） |
| formatToggle | - | ‘Toggle’ | “刷新” |
| formatColumns | - | ‘Columns’ | “列” |
有錯請留言，會及時更改，如果翻譯的行寫成列等低級錯誤，看英文名稱就知道有沒有錯了，知道就好，會持續檢查哪有誤、漏譯，謝謝