名稱 | 屬性 | 類型 | #預設值 | 作用描述 |
---|
#- | 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-nameString |
btSelectItemradio(單選按鈕)或checkbox(複選框)的欄位名稱 | | smartDisplay | data-smart-display | Boolean |
#預設為true,會 | 機智地(<_<)根據情況顯示分頁(pagination)或卡片視圖(card view) | | escape | data-escape |
Booleanfalse | 跳過插入HTML中的字串,取代掉特殊字元(後面符號沒有逗號):&,<, >,",`,' | | search | data-search |
Booleanfalse | 預設false不顯示表格右上方搜尋框,可設為true,在搜尋框內只要輸入內容即開始搜尋 | | #searchOnEnterKey | data-search-on- enter-key |
Booleanfalse | 預設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(最右),可選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(單選按鈕) | |
singleSelectdata-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 | | | | | | | | | | | | 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(欄位名稱) -index:行的(索引)index
| ##footerFormatterdata-footer-formatter | #Function | undefined | 需要此列的物件。 | 某格的資料轉換函數,且需要參數: - 資料:所有行資料的陣列函數需要傳回(return)footer某格內要顯示的字串的格式,也要包含內容 | #events | ##data-events | Object | undefined | 當某格使用formatter函數時,事件監聽會回應,需要四個參數: -event:jQuery事件(參考Events)。 - value:欄位名稱 - row:行資料 - var operateEvents = {'click .like': function (e, value, row, index) {}};
| sorter #data-sorter | #Function | undefined | 自訂的排序函數,實現本地排序,需要兩個參數: - a:第一個欄位名稱 | - b:第二個欄位名稱 個欄位名稱
| sortNamedata-sort-name | String | undefined | 除了表頭預設的sort-name或欄位的欄位名,也可以使用自訂的sort-name | 對特殊情況說明: - 一個欄位中顯示的內容為「html」代碼,例如: abc,但是被排列的是html程式碼中的內容(content):abc
| | | | |
| | # cellStyle | data-cell-style | Function | undefined | 對某格中顯示樣式(style)進行改變,需要三個函數: - value:欄位名稱 - row:以資料 -
支援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:所選取的行的欄位名稱 onUncheck | uncheck.bs.table##row, $element | 當取消選擇(uncheck)此行時觸發,所需的參數如下: - row :所取消選取的行的欄位名稱 | - $element:此行的DOM元素 | onCheckAll
| check-all.bs.table onCheckAll | check-all.bs.table | #rows | 當全選行時觸發,所需的參數如下: - rows:最近(newly)所選擇的行的字段名的數組 | onUncheckAll | uncheck-all.bs.table | rows | 當取消全選行時觸發,所需的參數如下: - rows :先前或上次(previously)所選取的行的欄位名稱的陣列 | onCheckSome | check-some.bs.table | |
| | | | #############(s#>#>#”>##-B>#-B”###-B 她##)#」##rows# ######當選擇(check)某些行(多行,rows)時觸發,所需的參數如下: ### - rows:先前或上一個(previously)所選取的行的欄位名稱的數組############onUncheckSome######uncheck-some.bs.table######rows######當取消選擇(uncheck)某些行(多行,rows)時觸發,所需的參數如下: ###- rows:之前或上次(previously)所選的行的字段名的數組 | onLoadSuccess | load-success.#bs.table | bs# #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當 | 中的內容沒顯示前觸發 | onPostBody | post-body.bs.table | ##data | | | | | ##當 | 中的內容加載完或在你所用的DOM中有定義則被觸發 | onPostHeader | post-header.bs.tablenone | 當中的內容載入完後或是在你所用的DOM中有定義則被觸發 | | onExpandRow | expand-row.bs.table######index, row, $detail######當查看詳細視圖(點擊查看detail的圖示)時觸發############onCollapseRow#######collapse-row.bs.table##############當關閉詳細視圖(再次點擊查看detail的圖示)時觸發############onRefreshOptions######refresh-options.bs.table######options######當刷新各項後或在初始化表(也包括銷毀了再初始化)之前觸發######onResetView | reset-view.bs.table |
| #當重置(reset)表的檢視時觸發 | onRefresh | refresh.bs.table | #params | #當點擊刷新按鈕時(refresh,右上角不是瀏覽器的,而是 | #params #」表格的刷新按鈕)後觸發 #########
方法(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##################load#####data#### ##向表中載入數據,原來的資料將會移除######$table.bootstrapTable('load', data);###- 請查看:load | append | data | 將資料追加在最後一行後 | #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,一或多行)的字段 的陣列 - 請參閱: | remove | ##removeAll | -
| ##removeAll -#。 ##$table.bootstrapTable('removeAll'); | ##移除某行資料(設定某行的id) $table.bootstrapTable('removeByUniqueId', 1);後面的1就是你想移除的那一行的ID - 請參閱: | removeByUniqueId |
insertRow | params 新增一行,所需的參數如下: - index:你想插入到哪裡(只要願意,想插哪就插哪,想插誰就插誰) | - row:你想插入的資料 $table.bootstrapTable(' insertRow', {index: 1, row: row}); - 請參閱: | insertRow |
| #更新行數據,所需的參數如下: - index:所要更新的行的索引(index) - row:你想換的新的資料$table .bootstrapTable('updateRow', {index: 1, row: row}); | - 請參閱: updateRow
| | updateByUniqueId
params######可更新某行數據,所需的參數如下:### - id:你想更新那一行數據,所需的參數如下:### - id:你想更新那行的id(唯一),(只要願意,想換哪換哪一個)### - row:你想換的新的資料######$table.bootstrapTable('updateByUniqueId', {id: 3, row: row}); ### - 請檢視: ###updateByUniqueId###############showRow######params###############showRow#####params###############showRow#####所需的參數至少包含下面所列的一個:### - 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:總欄位的總欄位編號 - rowspan:總列的總欄位總數# | ##$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 | | #resetSearch | #text | #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 | | ##uncheckBy params通過數組通過數組選擇某一行,所需的參數如下: | - field:所要取消選取的欄位名稱 - values:所要取消選取的那些值(陣列)$$("#table")):所要取消選取的那些值(陣列) | $$("#table")) .bootstrapTable("uncheckBy", { field:"field_name", values:["value1","value2","value3"]}); | -# 請參閱: checkBy/unch# -# 請參閱: | checkBy/unch#CyeckmeckBy | #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 | #cPage | | |
| | | | #Page | | | |
| | | none | 跳到上一頁 $table.bootstrapTable('prevPage'); - 請檢視: | selectPage/prevPage/nextPage | nextPage | none
| #跳到下一頁$table.bootstrapTable('nextPage'); - 請參閱: | selectPage/prevPage/nextPage | togglePagination | none
| togglePagination | none togglePagination
| none | togglePagination | none
| 。 | $table.bootstrapTable('togglePagination'); - 請參閱: | togglePagination
| #toggleView | none ######### ######改變檢視 ######$table.bootstrapTable('toggleView');### - 請檢視: ###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 中文版(翻譯文件)的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
-
2020-04-03 18:08:45
-
2020-04-02 18:10:17
-
2020-04-01 17:01:16
-
2020-03-31 18:06:25
-
2020-03-31 18:00:22
-
2020-03-31 17:44:20
-
2020-03-31 17:22:09
-
2020-03-31 17:09:21
-
2020-03-31 17:00:48
-
2020-03-31 16:47:03
|