搜尋

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

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

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

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機智地（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的動態表格詳細教學【附程式碼】

相關文章

看更多