首頁 > 文章 > web前端 > Bootstrap Table API 中文版（翻譯文件）

Bootstrap Table API 中文版（翻譯文件）

angryTom原創: 2019-08-20 14:57:526486瀏覽

　　看網上有中文版的，但有些就是字面直接譯過來了，而且有的就沒有翻譯，那就打算自己再翻譯一遍，每一條會盡最大可能結合盡可能多資料翻譯，如果發現譯的內容比英文多，是添加了更詳細的說明，表的名稱，屬性，類型，默認值不翻譯，例如："class"、"id"等不翻譯。有錯請提出，會及時改正，謝謝。

推薦教學：bootstrap教學

#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 檔案內

##Stringasc同上面的結合使用，預設遞增（asc），也可設為遞減（desc）sortStabledata-sort -stableBooleanfalse（別看錯了，是sortStable，sortable在下面）預設false，設為true，則和sort部分一樣，差異是：在排序過程中，如果存在相等的元素，則原來的順序不會改變。原文還有一句：（如果你把此屬性設為true）我們將為此行加上'_position'屬性#iconsPrefixdata-icons-prefixStringglyphicon定義字體庫('Glyphicon' or 'fa' for FontAwesome),使用"fa"時需引用FontAwesome，並且配合icons 屬性實作效果 Glyphicon 整合於Bootstrap可免費使用iconSizedata-icon-sizeStringundefined定義的圖示大小：##data-buttons-class#String #default按鈕的類，預設為default。 iconsdata-iconsObject{ paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',定義在工具列、分頁、詳細檢視中使用的圖示columns-Array[]預設空數組，在JS裡面定義，field即data-field，title就是每個列表頭名等等。 #data-##[ ]被載入的資料。 #dataFielddata-data-fieldStringrows - 名稱寫自己定義的每列的字段名，也就是key，透過key才能為某行的某一列賦value。 - 例如：{"name":"zz","age":20}，name和age就是key，如果這是從服務端請求的json，那可能和每列定義的欄位不同，但都是唯一的ajaxdata-ajaxbtSelectItem機智地（d1409c87d38acc51d9cfac6e7fe6fd52，"，`，'BooleanBooleanBooleanfalse#設為true，開啟精確搜尋searchTextdata-search-text##預設為true顯示表頭，設為false隱藏showFooterdata-show-footer#Boolean #false預設為false隱藏表尾，設定為true顯示showColumns##data-show-columns##data-show-refresh Booleanfalse預設為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（細節視圖）########還是舉例子，如果你內容太多，底部最右邊會顯示："‹ 1 2 3 4 5 ›"來選擇頁數，預設就是最左邊那個符號，下同paginationNextText#data- pagination-next-textString›參考上面一條clickToSelectsingleSelect改變某行的格式，需要兩個參數： - row：此行的資料 - index：此行的索引 return { classes: 'text-nowrap another-class', }; }rowAttributes##自訂排序功能（用來代替自帶的排序功能），需要兩個參數（可以參考前面）：localedata-localeString##局部化（動詞）。 - 首先嘗試加載的是指定的"本地化"文件footerStyledata-footer-styleFunction{}改變footer格式，需要兩個參數： - index：此行的索引

名稱屬性類型 #預設值作用描述

#- 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

- undefined =>預設表示預設的按鈕尺寸（btn）
- xs =>超小按鈕的尺寸（btn-xs）
- sm =>小按鈕的尺寸（btn-sm）
- lg =>大按鈕的尺寸（btn-lg）

#buttonsClass - 可選的有：primary、danger、warning等等
- 寫了之後會自動轉換為btn-primary（藍色）、btn-danger（紅色）、btn-warning（黃色）等格式，所以前面不要再加"btn-"，預設為btn-default（白色）
- 參考菜鳥教學：
Bootstrap 按鈕

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 字型圖示

- 請參考：
查Bootstrap-table的Usage

##Array - 也就是從伺服器取得的數據，透過"."運算子取得，例如"data.date/data.anything"，後面是伺服器發來的欄位名稱

- 原文：取得每行資料json內的key

##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

radio（單選按鈕）或checkbox（複選框）的欄位名稱 smartDisplay data-smart-display Boolean

#預設為true，會 search data-search

false 預設false不顯示表格右上方搜尋框，可設為true，在搜尋框內只要輸入內容即開始搜尋 #searchOnEnterKey data-search-on- enter-key

false 預設false不啟用，設為true啟用，比功能是與上面相比，在搜尋框內輸入內容並且按下回車鍵才開始搜尋 strictSearch data-strict-search

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

#Boolean false 預設為false隱藏某列下拉選單，設為true顯示 showRefresh

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 ‹

##data-click -to-select Boolean false 預設false不回應，設為true則當點擊此行的某處時，會自動選取此行的checkbox（複選框）或radiobox（單選按鈕）

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 {}

支援classes和css，用法如下： function rowStyle(row, index){ css: {"color": "blue", "font-size": "50px"} 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：排序方式
用法：和上面一樣，別擔心，註解也一模一樣

##undefined 本地化的文件必須預先加載，允許fallback（簡單來說就是如果要使用的文件不可用，就可以用別的替代它，例如球場替補，沒替補，如果有人受傷了，比賽不就廢了），如果加載，將按如下順序： - 然後是'_'（下劃線）寫成'-'（破折號），並且區域代碼被大寫的
- 然後是短區域代碼（例如：用'fr'代替'fr-CA'）
- 最後使用的是剩餘的本地化文件（當沒有文件可加載則使用默認的）
如果剩餘的undefined，或者是空字符，則使用最後一次使用的那個文件（當沒有本地化文件可被加載，則使用自帶的'en_US'）

- row：此行的資料

支援classes和css，用法如下：
function rowStyle(value，row, index){# return# css: { "font-weight": "bold" } }; }

#

列的各項(Column options )

定義在jQuery.fn.bootstrapTable.columnDefaults 檔案內

##data-field# #Stringundefined是每列的欄位名，不是表頭所顯示的名字，透過這個欄位名可以給其賦值，相當於key，表內唯一titledata-titleString#undefined##data-visibleBooleantrue預設為true顯示該列，設為false則隱藏該列。 #cardVisibledata-card-visibleBooleantrue#預設為true顯示該列，設為false則隱藏。 switchabledata-switchable#Booleantrue預設為true顯示該列，設為false則停用列項目的選項卡。 clickToSelectdata-click-to-selectBooleantrue預設true不回應，設為false則當點選此行的某處時，不會自動選取此行的checkbox（複選框）或radiobox（單選按鈕）formatter#data-formatterFunctionundefined#需要此列的物件。 ##footerFormatter 某格的資料轉換函數，且需要參數： ##data-events Objectundefined當某格使用formatter函數時，事件監聽會回應，需要四個參數：sorter#data-sorter#Functionundefined自訂的排序函數，實現本地排序，需要兩個參數： - b：第二個欄位名稱sortName 對特殊情況說明：# cellStyledata-cell-styleFunctionundefined對某格中顯示樣式（style）進行改變，需要三個函數： - value：欄位名稱 - row：以資料 function cellStyle(value, row, index, field) { return { classes: 'text-nowrap another-class', css: {"color": "blue", "font-size": "50px"} }; }searchable data-searchableBooleantrue預設true，表示此欄位資料可被查詢searchFormatterdata-search-formatterBooleantrue

名稱	屬性	類型	#預設值	作用描述
#radio	data-radio	Boolean	#false	預設false不顯示radio（單選按鈕），設為true則顯示，radio寬度是固定的
checkbox	data-checkbox	Boolean	false	#默認false不顯示checkbox（複選框），設為true則顯示，checkbox的每列寬度已固定
#field

				這個是表頭所顯示的名字，不唯一，如果你喜歡，可以把所有表頭都設為相同的名字############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				- 還是有用的，例如隱藏自訂index列，依某屬性排序後會變亂，你可以讀取某行的index來進行賦值



				某格的資料轉換函數，需要三個參數： -value：field（欄位名稱） -index：行的（索引）index
data-footer-formatter	#Function	undefined	需要此列的物件。	- 資料：所有行資料的陣列函數需要傳回（return）footer某格內要顯示的字串的格式，也要包含內容
#events				-event：jQuery事件（參考Events）。 - value：欄位名稱 - row：行資料 - var operateEvents = {'click .like': function (e, value, row, index) {}};
			- a：第一個欄位名稱	個欄位名稱
data-sort-name	String	undefined	除了表頭預設的sort-name或欄位的欄位名，也可以使用自訂的sort-name	- 一個欄位中顯示的內容為「html」代碼，例如：a4b561c25d9afb9ac8dc4d70affff419 0bbd5cc33b622ada7b9ba1b438e60276abc54bdf357c58b8a65c66d7c19c8e4d1140d36329ec37a2cc24d42c7229b69747a，但是被排列的是html程式碼中的內容（content）：abc


- 支援classes和css，用法如下：

###預設true，可使用格式化的資料查詢############escape######data-escape######Boolean######false######跳過插入HTML中的字串，替換掉特殊字元（後面符號沒有逗號）：&，bff82425ba327b991a066901888e460e，"，`，'#############

事件(Events)

定义事件的格式：

$(’#table’).bootstrapTable({
onEventName: function (arg1, arg2, …) {
// …
} });

$(’#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) {
// …
});

uncheck.bs.table##row, $element當取消選擇（uncheck）此行時觸發，所需的參數如下： - $element：此行的DOM元素check-all.bs.tabledata##data post-header.bs.tableexpand-row.bs.table######index, row, $detail######當查看詳細視圖（點擊查看detail的圖示）時觸發############onCollapseRow#######collapse-row.bs.table##############當關閉詳細視圖（再次點擊查看detail的圖示）時觸發############onRefreshOptions######refresh-options.bs.table######options######當刷新各項後或在初始化表（也包括銷毀了再初始化）之前觸發#######params#」表格的刷新按鈕）後觸發

事件名	定义在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
	- row ：所取消選取的行的欄位名稱		onCheckAll
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
當26e624a08e787224f4286a80ac33e6ae中的內容沒顯示前觸發		onPostBody	post-body.bs.table

	##當92cee25da80fac49f6fb6eec5fd2c22aca745a59da05f784b8811374296574e1中的內容加載完或在你所用的DOM中有定義則被觸發		onPostHeader
none	當ae20bdd317918ca68efdc799512a9b397943277d65306330563feb42dc8c705a中的內容載入完後或是在你所用的DOM中有定義則被觸發		onExpandRow
onResetView	reset-view.bs.table		#當重置（reset）表的檢視時觸發
onRefresh	refresh.bs.table	#params	#當點擊刷新按鈕時（refresh，右上角不是瀏覽器的，而是

#########

方法(Methods)

# 定義方法回應的語法 $('#table').bootstrapTable(' method', parameter);

none - 請查看： none - 請查看： appendprependremove##removeAll-##removeAll##移除某行資料（設定某行的id）$table.bootstrapTable('removeByUniqueId', 1);後面的1就是你想移除的那一行的ID removeByUniqueId - row：你想插入的資料$table.bootstrapTable(' insertRow', {index: 1, row: row}); insertRow#更新行數據，所需的參數如下： - 請參閱： updateRow ##$table.bootstrapTable('mergeCells', {index: 1, field: 'name', colspan: 2, rowspan: 3});#textresetSearchshowLoading/hideLoadingcheckAllnone 選擇目前頁面的所有行#uncheckAllnone取消選擇目前頁面的所有行$table.bootstrapTable('uncheckAll'); - 請參閱： checkAll/uncheckAll- $("#table").bootstrapTable("checkBy", { field:"field_name", values:["value1","value2"," value3"]});uncheckByparams##uncheckBy - field：所要取消選取的欄位名稱 - values：所要取消選取的那些值（陣列） -# 請參閱： checkBy/unch#Cydestroynone銷毀表格A！ T！ T！ A！ C！ K！ $table.bootstrapTable('destroy');destroyshowColumn##field - 請檢視： field隱藏特定的欄位$table.bootstrapTable('hideColumn', 'name');showColumn/hideCoulumn#getHiddenColumnsselectPage/prevPage/nextPage#跳到下一頁selectPage/prevPage/nextPagenonenone。 $table.bootstrapTable('togglePagination');togglePaginationnone

方法名稱	參數	描述	#範例
getOptions	none	返回各項的object	$table.bootstrapTable('getOptions'); - 請查看： getOptions




			getSelections
傳回被選取的行，當沒有行被選擇，則傳回空數組（但不是undefined，也不是null，是長度0的空數組，所以可以判斷長度是否大於0來確定是否選擇了行）	$table.bootstrapTable('getSelections');	getSelections	getAllSelections
返回所有被選的行（原文中：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可以是陣列 - 請檢視：
	prepend	data	也是追加，只是在第一行之前 $table.bootstrapTable('prepend', data);data可以是陣列 - 請檢視：
	remove	params 移除一行或多行你所選的資料	$table.bootstrapTable(' remove', {field: 'id', values: ids}); - id：移除的那一行（rows，一或多行）的字段的陣列 - 請參閱：
			-#。 ##$table.bootstrapTable('removeAll')；
- 請參閱：		insertRow	params 新增一行，所需的參數如下： - index：你想插入到哪裡（只要願意，想插哪就插哪，想插誰就插誰）
- 請參閱：			- index：所要更新的行的索引（index） - row：你想換的新的資料$table .bootstrapTable('updateRow', {index: 1, row: row});
		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：總列的總欄位總數#	- 請參閱： 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
	#resetSearch	#text	重置搜尋的文字（text） - 請檢視：
	showLoading	none	顯示正在載入… - 請檢視：
	hideLoading	none	隱藏正在載入… - 請檢視： showLoading/hideLoading
			$table.bootstrapTable('checkAll'); - 請檢視：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：所要選取的那些值（陣列）
		官方沒，啊，有例紙：	- 請參閱： checkBy/uncheckBy
			params通過數組通過數組選擇某一行，所需的參數如下：
$$("#table"))：所要取消選取的那些值（陣列）	$$("#table")) .bootstrapTable("uncheckBy", { field:"field_name", values:["value1","value2","value3"]});	checkBy/unch# -# 請參閱：	eckmeckBy
#resetView	params	改變表格的樣式，例如改變表格的高度（height）	$table.bootstrapTable('resetView '); - 請參閱： resetView
resetWidth	none	自動變更表頭和表腳（就譯成腳，任性）的寬度來適應每列的寬度	$table.bootstrapTable('resetWidth');
		- 請參閱：
顯示特定的欄位	$table.bootstrapTable('showColumn', 'name');	showColumn/hideCoulumn

			#hideColumn
	-請查看：
-	取得所有隱藏的欄位	$ 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'); - 請檢視：
	nextPage	none	$table.bootstrapTable('nextPage'); - 請參閱：
	togglePagination	none	togglePagination
togglePagination		togglePagination	none
	- 請參閱：		#toggleView

######### ######改變檢視 ######$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[&#39;zh-CN&#39;]);

第二种：

<table data-toggle="table" data-locale="zh-CN"></table>

第三种：

$(&#39;table&#39;).bootstrapTable({locale:&#39;zh-CN&#39;});

以下说明除了数字外均为中文默认显示，本来不用写的，只要引入就显示中文了

名称	参数	默认	说明
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

上一篇：BootStrapTable的動態表格詳細教學【附程式碼】下一篇：BootStrapTable的動態表格詳細教學【附程式碼】

看更多