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

　　看網上有中文版的，但有些就是字面直接譯過來了，而且有的就沒有翻譯，那就打算自己再翻譯一遍，每一條會盡最大可能結合盡可能多資料翻譯，如果發現譯的內容比英文多，是添加了更詳細的說明，表的名稱，屬性，類型，默認值不翻譯，例如："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機智地（<_<）BooleanBooleanBooleanBooleanfalse#設為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，會

根據情況顯示分頁（pagination）或卡片視圖（card view）

escape

data-escape

false

跳過插入HTML中的字串，取代掉特殊字元（後面符號沒有逗號）：&，<， >，"，`，'

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」代碼，例如： abc，但是被排列的是html程式碼中的內容（content）：abc
- 支援classes和css，用法如下：

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

---

事件(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中的內容加載完或在你所用的DOM中有定義則被觸發 post-header.bs.table中的內容載入完後或是在你所用的DOM中有定義則被觸發expand-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
當中的內容沒顯示前觸發		onPostBody	post-body.bs.table
	##當
	onPostHeader
none	當
	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['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中文網其他相關文章！

相關標籤：

bootstrap table

來源：php.cn

上一篇：BootStrapTable的動態表格詳細教學【附程式碼】 下一篇：使用Bootstrap-Table實作分頁和排序

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

• jQuery中$(function())的作用
  2020-04-03 18:08:45
• 詳解CSS中position屬性的用法
  2020-04-02 18:10:17
• CSS中的&是什麼意思
  2020-04-01 17:01:16
• 如何查看CentOS是否安裝了MySQL
  2020-03-31 18:06:25
• 怎麼查看docker容器停止原因
  2020-03-31 18:00:22
• 蘋果電腦怎麼安裝docker
  2020-03-31 17:44:20
• 如何查看一個docker映像有哪些版本
  2020-03-31 17:22:09
• 如何禁止docker開機啟動
  2020-03-31 17:09:21
• 如何看centos的版本
  2020-03-31 17:00:48
• 如何使用國內docker映像
  2020-03-31 16:47:03

最新問題

頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...

來自於 2024-04-06 21:58:04

0

1

800

解決CSS中頁面底部神秘空白的方法 我正在嘗試使用Bootstrap和D3建立一個簡單的網頁，但我不知道如何消除底部的所有空白。我想擺脫它。我嘗試將body和html的min-height設定為100%，但沒有任何作...

來自於 2024-04-06 20:22:15

0

1

454

使用「折疊顯示器」類別自訂 Bootstrap 手風琴標題的外觀 我想設定具有類別collapseshow的面板的卡片標題樣式。在此範例中，它是第一個面板。我嘗試使用CSS來使用.accordion.card.card-headerbutton....

來自於 2024-04-06 12:53:11

0

1

376

如何使用 jquery 檢索 HTML 資料表中未選定行的值 我試圖獲取所有未單擊按鈕的行的值。例如，當我單擊第一行上的按鈕時，我想檢索沒有單擊的行的值。 vartable=document.getElementById("all_...

來自於 2024-04-05 09:26:49

0

1

1418

Web頁面調整大小時，Bootstrap開關無法正常運作 這是程式碼：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&q...

來自於 2024-04-05 08:45:39

0

1

3443

相關專題

更多>

• PHP伺服器介紹
• 如何建立FTP站點
• Laravel 教程
• Windows10中Cortana作用
• 微信服務號碼和公眾號區別
• c語言是什麼語言
• 0x80070002解決辦法
• dedecms常用標籤

熱門推薦

• 10款好看又實用的Bootstrap後台管理系統範本（快來下載）
• bootstrap和vue的差別
• spss中怎麼用bootstrap做中介分析
• 8款Bootstrap企業公司網站範本（原始碼免費下載）
• bootstrap框架是什麼意思

熱門教學

更多>

相關教學

熱門推薦

最新課程

• 
  快速入手BootStrap影片教學

  118323
• 
  bootstrap響應式開發教程

  75546
• 
  前端開發常用的函式庫—Bootstrap

  92267

• 
  最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

  1425057次學習
• 
  JAVA 初級入門影片教學

  2552090次學習
• 
  小甲魚零基礎入門學習Python影片教學

  508483次學習
• 
  Web前端開發極速入門

  216029次學習
• 
  零基礎精通 PS 影片教學

  893688次學習

• 
  【web前端】Node.js快速入門

  7770次學習
• 
  國外Web開發全端課程全集

  6209次學習
• 
  Go語言實戰之 GraphQL

  5114次學習
• 
  550W粉絲大佬手把手從零學JavaScript

  711次學習
• 
  python大神Mosh，零基礎小白6小時完全入門

  25906次學習

最新下載

更多>

網站特效

網站源碼

網站素材

前端模板

• [表單按鈕] jQuery企業留言表單聯絡程式碼
• [播放器特效] HTML5 MP3音樂盒播放特效
• [選單導航] HTML5酷炫粒子動畫導覽選單特效
• [表單按鈕] jQuery可視化表單拖曳編輯程式碼
• [播放器特效] VUE.JS仿酷狗音樂播放器代碼
• [html5特效] 經典html5推箱子小遊戲
• [圖片特效] jQuery滾動添加或減少圖片特效
• [相簿特效] CSS3個人相簿封面懸停放大特效

• [前端模板] 家居裝潢清潔維修服務公司網站模板
• [前端模板] 清新配色個人求職履歷引導頁模板
• [前端模板] 設計師創意求職履歷網頁模板
• [前端模板] 現代工程建築公司網站模板
• [前端模板] 教育服務機構響應式HTML5模板
• [前端模板] 網上電子書店商城網站模板
• [前端模板] IT技術解決互聯網公司網站模板
• [前端模板] 紫色風格外匯交易服務網站模板

• [PNG素材] 可愛的夏天元素向量素材(EPS+PNG)
• [PNG素材] 四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)
• [banner圖] 唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)
• [PNG素材] 金色的畢業帽向量素材(EPS+PNG)
• [PNG素材] 黑白風格的山脈圖示向量素材(EPS+PNG)
• [PNG素材] 不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)
• [banner圖] 扁平風格的植樹節banner向量素材(AI+EPS)
• [PNG素材] 九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG)

• [前端模板] 家居裝潢清潔維修服務公司網站模板
• [前端模板] 清新配色個人求職履歷引導頁模板
• [前端模板] 設計師創意求職履歷網頁模板
• [前端模板] 現代工程建築公司網站模板
• [前端模板] 教育服務機構響應式HTML5模板
• [前端模板] 網上電子書店商城網站模板
• [前端模板] IT技術解決互聯網公司網站模板
• [前端模板] 紫色風格外匯交易服務網站模板

公益線上PHP培訓，幫助PHP學習者快速成長！

關於我們 免責聲明 Sitemap

© php.cn All rights reserved