您好,登錄后才能下訂單哦!
本篇文章為大家展示了什么是Bootstrap Table API 中文版,代碼簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
看網上有中文版的,但有些就是字面直接譯過來了,而且有的就沒有翻譯,那就打算自己再翻譯一遍,每一條會盡最大可能結合盡可能多資料翻譯,如果發現譯的內容比英文多,是添加了更詳細的說明,表的名稱,屬性,類型,默認值不翻譯,例如:"class"、"id"等不翻譯。有錯請提出,會及時改正,謝謝。
1、“名稱”可以寫在$('#table').bootstrapTable({});的大括號中,可以定義一些想要的值,如:
$("#realTime_Table").bootstrapTable({ search: true, pagination: false, pageSize: 15, pageList: [5, 10, 15, 20], showColumns: true, showRefresh: false, showToggle: true, locale: "zh-CN", striped: true });
2、“屬性”放在聲明表內,如:
<!--例子應該很好看懂Table options和Column options 所放的位置不同,隨便寫的,主要為了懂得如何用--!> <table id="realTime_Table" data-click-to-select="true" class="table table-bordered" data-page-size="20"> <thead> <tr > <th data-sortable="true" data-field="realTimeDate">日期</th> <th data-sortable="true" data-field="newPlayerNum">新增用戶</th> <th data-sortable="true" data-field="activePlayerNum">活躍用戶</th> </tr> </thead> <tbody> </tbody> </table>
3、如果名稱和屬性功能類似,則任意一個地方就夠了,不用重復定義,有的屬性寫在js里比名稱寫在聲明表中更為簡單,or vice verse(有的屬性必須要寫,對應的名稱只是表示是否啟用那個屬性)
表的各項(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的自定義名,沒定義默認都不排列,同下面的sortOrder結合使用,沒寫的話列默認遞增(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方法類似 |
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顯示 |
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就是此列字段名 |
onDblClickRow | dbl-click-row.bs.table | row, $element, field | 和上面差不多,當雙擊(666)此行的任意一處,就會觸發該事件,所需參數如下(只是按原文譯過來的,在bootstraptable的js中不需要這些參數,因為雙擊該行就會獲得一個row,row中包括此行所有數據,只要通過此行某列的字段名即可取出): - row:哪一行(從0開始) - $element:該行(tr) - field:當點擊該行,你想獲取此行哪一格的數據,field就是此列字段名 |
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 |
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 |
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'); |
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 |
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 |
expandAllRows 新版有更改(原來為"expandAllRow"),下同 感謝 @zhq449681061 | is subtable | 可使用條件:detail view設為了true - 展開所有列的詳細視圖 | $table.bootstrapTable('expandAllRows'); - 參考上面的實例,上面是展開(折疊)某一行的視圖,這個是所有行的 |
collapseAllRows | is subtable | 可使用條件:detail view設為了true - 關閉所有列的詳細視圖 | $table.bootstrapTable('collapseAllRows'); - 參考上面 |
本地化,切換為另一種語言(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' | “列” |
上述內容就是什么是Bootstrap Table API 中文版,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。