bootstrap-table中文文檔(頁疑翻譯)

你們能夠隨便轉載使用,可是請註明出處~~~from oschina 頁疑 css

我從excel翻譯好粘貼過來的,這個格式也太醜了吧。。。好像還顯示不全。。。看不到的能夠來百度雲下載html


表格屬性(jQuery.fn.bootstrapTable.defaults)



插件擴展屬性名 table標籤屬性 類型 默認值 描述

jquery

data-toggle String 'table' 不用寫 JavaScript 直接啓用表格。
classes data-classes String table table-hover' 表格的類名稱。默認狀況下,表格是有邊框的,你能夠用 'table-no-bordered'  來刪除表格的邊框樣式,注意設置後會覆蓋默認樣式,如需默認樣式,請一塊兒加上。
height data-height Number undefined 定義表格的高度,可用js判斷後設置。
undefinedText data-undefined-text String '-' 代替undefined的字符,空字符串不算undefined
striped data-striped Boolean FALSE 隔行變色
sortName data-sort-name String undefined 數據加載時按哪一列排序
sortOrder data-sort-order String 'asc' 數據加載時的排序規則, 'asc' or 'desc'.
iconsPrefix data-icons-prefix String 'glyphicon' 定義圖標組名稱(「glyphicon」或「fa」FontAwesome)。在默認狀況下使用「glyphicon」
icons data-icons Object {
  refresh: 'glyphicon-refresh  icon-refresh',
  toggle: 'glyphicon-list-alt  icon-list-alt',
  columns: 'glyphicon-th icon-th'
}
定義用於刷新圖標,切換和列按鈕圖標




















columns Array [] 列屬性,請參照jQuery.fn.bootstrapTable.columnDefaults設置的列屬性
data Array [] 須要渲染到table裏的數據
ajax data-ajax Function undefined ajax獲取數據,和jquery的ajax徹底同樣
method data-method String 'get' 請求數據的方式
url data-url String undefined 請求數據的URL
cache data-cache Boolean TRUE AJAX請求緩存.
contentType data-content-type String 'application/json' 接收數據的文檔類型
dataType data-data-type String 'json' 接收數據的類型
ajaxOptions data-ajax-options Object {} ajax參數
queryParams data-query-params Function function(params) {
return params;
}
當請求遠程數據時,您能夠經過修改queryParams發送額外的參數。
例如queryParamsType ='limit',
params能夠是:limit, offset, search, sort, order,
參數的值能夠是:pageSize, pageNumber, searchText, sortName, sortOrder。
返回false則中止請求。















queryParamsType data-query-params-type String 'limit' Set 'limit' to send query params width RESTFul type.
responseHandler data-response-handler Function function(res) {
return res;
}
數據加載前出來響應返回的數據格式,res: the response  data.return的數據爲表格渲染所需數據










pagination data-pagination Boolean FALSE 在表格底部顯示詳細信息和分頁欄(當須要分頁時)
onlyInfoPagination data-only-info-pagination Boolean FALSE 只顯示總記錄數(無每頁顯示數和其餘信息),如:Showing  13 rows
sidePagination data-side-pagination String 'client' 定義分頁方式'client' or 'server',假如爲'server'則須要設置'url' or  'ajax' 
pageNumber data-page-number Number 1 當設置了pagination屬性時,控制顯示第幾頁
pageSize data-page-size Number 10 當設置了pagination屬性時,控制每頁顯示數
pageList data-page-list Array [10, 25, 50, 100, All] 每頁顯示數的選項list
selectItemName data-select-item-name String btSelectItem' radio  or checkbox的name,提交表單用的,你懂的
smartDisplay data-smart-display Boolean TRUE 只能選擇table仍是card視圖(所謂的響應式,移動設備會自動使用card視圖)
search data-search Boolean FALSE 是否顯示搜索框
strictSearch data-strict-search Boolean FALSE 是否開啓嚴格搜索
searchText data-search-text String '' 初始化搜索文本
searchTimeOut data-search-time-out Number 500 設置搜索超時
trimOnSearch data-trim-on-search Boolean TRUE 搜索query是否自動去空格(trim)
showHeader data-show-header Boolean TRUE 是否顯示header
showFooter data-show-footer Boolean FALSE 是否顯示footer
showColumns data-show-columns Boolean FALSE 是否顯示tool(顯示/隱藏某些列)
showRefresh data-show-refresh Boolean FALSE 是否顯示刷新按鈕
showToggle data-show-toggle Boolean FALSE 是否顯示視圖切換按鈕
showPaginationSwitch data-show-pagination-switch Boolean FALSE 是否顯示「展開所有」按鈕
minimumCountColumns data-minimum-count-columns Number 1 The minimum count columns to hide of the columns drop  down list.
idField data-id-field String undefined Indicate which field is an identity field.
uniqueId data-unique-id String undefined 把哪一列的值設爲當前行tr的屬性(data-uniqueid)的值
cardView data-card-view Boolean FALSE 數據加載時是否用card視圖模式
detailView data-detail-view Boolean FALSE 數據加載時是否用詳細視圖模式(第一列爲加號)
detailFormatter data-detail-formatter Function function(index, row) {
return '';
}
格式化詳細頁面模式的視圖。










searchAlign data-search-align String 'right' 搜索框位置,left or right
buttonsAlign data-buttons-align String 'right' toolbar的按鈕對齊方式,left or right
toolbarAlign data-toolbar-align String 'left' 自定義toolbar的按鈕對齊方式,left or right
paginationVAlign data-pagination-v-align String 'bottom' pagination顯示的位置,top  or bottom or both
paginationHAlign data-pagination-h-align String 'right' pagination顯示的位置,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 當點擊該行時,checkbox或者radio選中
singleSelect data-single-select Boolean FALSE 是否只容許checkbox選一行(即和radio功能同樣)
toolbar data-toolbar String undefined toolbar容器的選擇器名稱,好比:#toolbar, .toolbar.





checkboxHeader data-checkbox-header Boolean TRUE 是否顯示checkbox全選
maintainSelected data-maintain-selected Boolean FALSE 是否保持被選中的行,when改變頁數或者搜索的時候
sortable data-sortable Boolean TRUE 是否按列排序,假如爲false,則不排序顯示全部數據
silentSort data-silent-sort Boolean TRUE 在客戶端仍是再服務器端排序,false則客戶端,當sidePagination設置爲server時該設置才生效
rowStyle data-row-style Function {} 行樣式,function(row, index)
row: 該行的數據
index: 該行的序號















rowAttributes data-row-attributes Function {} 行屬性,function(row, index)
row: 該行的數據
index: 該行的序號

























列屬性(jQuery.fn.bootstrapTable.columnDefaults)



插件擴展屬性名 table標籤屬性 類型 默認值 描述

Nameajax

Attributejson

Typebootstrap

Default數組

Description緩存

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 False to  disable the switchable of columns item.
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等標籤時,只排序實際內容(忽略標籤和樣式),例如字段爲:"<b><span  style="color:red">abc</span></b>",則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 搜索是否使用格式化後的數據(即顯示在頁面上的數據)










事件



Option 事件服務器

jQuery 事件app

參數

描述


onAll all.bs.table name, args 全部的事件都會觸發該事件,參數包括: 
name:事件名,  
args:事件的參數。 











onClickRow click-row.bs.table row, $element 當用戶點擊某一行的時候觸發,參數包括:
row:點擊行的數據,
$element:tr 元素。











onDblClickRow dbl-click-row.bs.table row, $element 當用戶雙擊某一行的時候觸發,參數包括:
row:點擊行的數據,
$element:tr 元素。 











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 Fires when  user sort a column, the parameters contains:    
name: the sort column field name   
order: the sort column order.   











onCheck check.bs.table row Fires when  user check a row, the parameters contains:  
row: the record corresponding to the clicked row. $element: the DOM element  checked.    






onUncheck uncheck.bs.table row Fires when  user uncheck a row, the parameters contains:    
row: the record corresponding to the clicked row. $element: the DOM element  unchecked.  






onCheckAll check-all.bs.table rows Fires when  user check all rows, the parameters contains:   
rows: array of records corresponding to newly checked rows. 






onUncheckAll uncheck-all.bs.table rows Fires when  user uncheck all rows, the parameters contains: 
rows: array of records corresponding to previously checked rows.    






onCheckSome check-some.bs.table rows Fires when  user check some rows, the parameters contains:  
rows: array of records corresponding to previously checked rows.    






onUncheckSome uncheck-some.bs.table rows Fires when  user uncheck some rows, the parameters contains:    
rows: array of records corresponding to previously checked rows.    






onLoadSuccess load-success.bs.table data Fires when remote  data is loaded successfully.
onLoadError load-error.bs.table status Fires when some  errors occur to load remote data.
onColumnSwitch column-switch.bs.table field, checked Fires when switch the  column visible.
onColumnSearch column-search.bs.table field, text Fires when search by  column.
onPageChange page-change.bs.table number, size Fires when change the  page number or page size.
onSearch search.bs.table text Fires when search the  table.
onToggle toggle.bs.table cardView Fires when toggle the  view of table.
onPreBody pre-body.bs.table data Fires before the  table body is rendered
onPostBody post-body.bs.table none Fires after the table  body is rendered and available in the DOM
onPostHeader post-header.bs.table none Fires after the table  header is rendered and availble in the DOM
onExpandRow expand-row.bs.table index, row, $detail 當點擊詳細圖標展開詳細頁面的時候觸發。
onCollapseRow collapse-row.bs.table index, row 當點擊詳細圖片收起詳細頁面的時候觸發。
onRefreshOptions refresh-options.bs.table options Fires after refresh  the options and before destroy and init the table





方法



使用方法的語法:$('#table').bootstrapTable('method', parameter);。







名稱

參數

描述



getOptions none 返回表格的 Options。

getSelections none 返回所選的行,當沒有選擇任何行的時候返回一個空數組。

getAllSelections none 返回全部選擇的行,包括搜索過濾前的,當沒有選擇任何行的時候返回一個空數組。

getData useCurrentPage 得到當前加載的數據。假如設置  useCurrentPage 爲 true,則返回當前頁的數據。

getRowByUniqueId id 根據 uniqueId 獲取行數據。

load data 加載數據到表格中,舊數據會被替換。

append data 添加數據到表格在現有數據以後。

prepend data 插入數據到表格在現有數據以前。

remove params 從表格中刪除數據,包括兩個參數:  field: 須要刪除的行的 field 名稱。
values: 須要刪除的行的值,類型爲數組。







removeAll - 刪除表格全部數據。

removeByUniqueId id 根據 uniqueId 刪除指定的行。

insertRow params 插入新行,參數包括:
index: 要插入的行的 index。
row: 行的數據,Object 對象。












updateRow params 更新指定的行,參數包括:
index: 要更新的行的 index。
row: 行的數據,Object 對象。












showRow params 顯示指定的行,參數包括:
index: 要顯示的行的 index 或者 uniqueId。
isIdField: 指定 index 是否爲 uniqueid。












hideRow params 隱藏指定的行,參數包括:
index: 要隱藏的行的 index。
uniqueId: 獲取要更新的行的 uniqueid












getRowsHidden show 得到全部隱藏的行

mergeCells options 合併一些單元格到另外一個單元格,options包含:
index:行序號
field:字段名
rowspan:合併的行數
colspan:合併的列數






















updateCell params 更新單元格的值
index: 行序號
field: 字段名
value: 值

















refresh params 刷新遠程數據, {silent: true} 刷新客戶端數據,{url: newUrl}根據newUrl刷新數據,還支持設置參數哦{query: {foo:  'bar'}}

refreshOptions options 刷新options

showLoading none 顯示loading

hideLoading none 隱藏loading

checkAll none 選中當前頁的全部行

uncheckAll none 取消選中當前頁的全部行

check index 選中一行,行序號從0開始

uncheck index 取消選中一行,行序號從0開始

checkBy params 枚舉搜索行
$("#table").bootstrapTable("checkBy",  {field:"field_name",  values:["value1","value2","value3"]})
搜索字段名爲field_name的列中,value是value1或者value2或者value3的行






















uncheckBy params 與checkBy相反





















resetView params 重置表格視圖的屬性,好比:height等

resetWidth none 自動重置header和footer以適應當前的列寬

destroy none 銷燬當前表格

showColumn field 顯示指定的列

hideColumn field 隱藏指定的列

getHiddenColumns - 獲取隱藏的列。

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






多語言



Name

Parameter

Default

說明
formatLoadingMessage - 'Loading, please wait…' loading時顯示的text
formatRecordsPerPage pageNumber '%s records per page' 每頁顯示數text
formatShowingRows pageFrom, pageTo, totalRows 'Showing %s to %s of %s rows' 如今顯示的是1to 10條記錄text
formatDetailPagination totalRows 'Showing %s rows' 總行數text
formatSearch - 'Search' 搜索框提示text
formatNoMatches - 'No matching records found' 搜索無結果text
formatRefresh - 'Refresh' 刷新按鈕title
formatToggle - 'Toggle' 轉換視圖按鈕title
formatColumns - 'Columns' 是否顯示列按鈕title
formatAllRows - 'All' 顯示全部行按鈕title










固然。。。還能夠直接導入語言包



<script  src="bootstrap-table-en-US.js"></script><script src="bootstrap-table-zh-CN.js"></script>…$.extend($.fn.bootstrapTable.defaults,  $.fn.bootstrapTable.locales['en-US']);// $.extend($.fn.bootstrapTable.defaults,  $.fn.bootstrapTable.locales['zh-CN']);// ...
相關文章
相關標籤/搜索