bootstrap table api中文

時間  2019-11-19
標籤 bootstrap table api 中文 欄目 Bootstarp 简体版
原文   原文鏈接

https://blog.csdn.net/s_clifftop/article/details/77937356?skintest=skin3-template-testcss

 

var opt = {
url : "/zixunType/getZixunTypeInfo",//新url
pageNumber:1, //刷新後返回第一頁
pageSize:10, //刷新後返回的每頁總條數
silent : true, //刷新時候，不顯示loading信息
query : { //用來增長參數，在原有基礎上增長，原有的還在。
type : 1,
level : 2
}
};html

$("#table").bootstrapTable('refresh', opt);jquery

 

 

 

2017年09月11日 20:20:27
閱讀數：52974 
/*
*
*$('#table').bootstrapTable({}); *看網上有中文版的，但有些就是字面直接譯過來了，並且有的就沒有翻譯，那就打算本身再翻譯一遍，每一條會盡 *最大可能結合儘量多資料翻譯，若是發現譯的內容比英文多，是添加了更詳細的說明，表的名稱，屬性，類型， *默認值不翻譯，例如："class"、"id"等不翻譯。 *有錯請提出，會及時改正，謝謝。 *Bootstrap table 中文文檔（完整翻譯文檔）若是想轉請註明@Sclifftop * */
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 「名稱」能夠寫在$('#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 });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 「屬性」放在聲明表內，如：
<!--例子應該很好看懂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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 若是名稱和屬性功能相似，則任意一個地方就夠了，不用重複定義，有的屬性寫在js裏比名稱寫在聲明表中更爲簡單，or vice verse（有的屬性必需要寫，對應的名稱只是表示是否啓用那個屬性）

表的各項(Table options )

定義在 jQuery.fn.bootstrapTable.defaults 文件內git

名稱 屬性 類型 默認值 做用描述
- data-toggle String table 只要引入 jquery、bootstrap 、bootstrap-table的包，不用在js裏面定義就可使用
默認有寫data-toggle=」table」,data-toggle應該知道吧，經常使用的有」tooltip、popover等等」，這邊就不說了
classes data-classes String table table-hover 表的class屬性，若是沒有本身定義，則默認有邊框，而且當鼠標懸浮在那一行，背景會變爲淺灰色.
sortClass data-sort-class String undefined 聲明表格td的class名，表明此列元素的class名將被排序
height data-height Number undefined 表格的高度
undefinedText data-undefined-text String - 當不寫任何內容默認顯示’-‘
striped data-striped Boolean false 默認false，當設爲true，則每行表格的背景會顯示灰白相間
sortName data-sort-name String undefined 定義哪一列的值會被排序，寫data-field的自定義名，沒定義默認都不排列，同下面的sortOrder結合使用，沒寫的話列默認遞增（asc）
sortOrder data-sort-order String asc 同上面的結合使用，默認遞增（asc），也可設爲遞減（desc）
sortStable data-sort-stable Boolean false （別看錯了，是sortStable，sortable在下面）默認false，設爲true，則和sort部分同樣，區別是：在排序過程當中，若是存在相等的元素，則原來的順序不會改變。原文還有一句：（若是你把此屬性設爲了true）咱們將爲此行添加’_position’屬性
iconsPrefix data-icons-prefix String glyphicon 定義字體庫 (‘Glyphicon’ or ‘fa’ for FontAwesome),使用」fa」時需引用 FontAwesome，而且配合 icons 屬性實現效果 Glyphicon 集成於Bootstrap可無償使用
iconSize data-icon-size String undefined 定義的圖標大小：
      - undefined =>默認表示默認的按鈕尺寸（btn）
      - xs   =>超小按鈕的尺寸（btn-xs）
      - sm  =>小按鈕的尺寸（btn-sm）
      - lg    =>大按鈕的尺寸（btn-lg）
buttonsClass data-buttons-class String default 按鈕的類，默認爲default。
      - 可選的有：primary、danger、warning等等
      - 寫了以後會自動轉換爲btn-primary（藍色）、btn-danger（紅色）、btn-warning（黃色）等格式，因此前面不要再加」btn-「，默認爲btn-default（白色）
      - 參考菜鳥教程：Bootstrap 按鈕
icons data-icons Object { paginationSwitchDown: ‘glyphicon-collapse-down icon-chevron-down’,
paginationSwitchUp: ‘glyphicon-collapse-up icon-chevron-up’,
refresh: ‘glyphicon-refresh icon-refresh’,
toggle: ‘glyphicon-list-alt icon-list-alt’,
columns: ‘glyphicon-th icon-th’,
detailOpen: ‘glyphicon-plus icon-plus’,
detailClose: ‘glyphicon-minus icon-minus’
}		 定義在工具欄、分頁、詳細視圖中使用的圖標
      - 沒辦法解釋，請參考菜鳥教程的圖標：Bootstrap 字體圖標
columns - Array [] 默認空數組，在JS裏面定義，field即data-field，title就是每列表頭名等等。
      - 請參考：點擊Bootstrap-table的右側邊欄Usage
data - Array [] 被加載的數據。
      - 也就是從服務器獲取的數據，經過」.」運算符獲取，例如」data.date/data.anything」，後面是服務器發來的字段名
dataField data-data-field String rows       - 名稱寫本身定義的每列的字段名，也就是key，經過key才能給某行的某列賦value。
      - 原文：獲取每行數據json內的key
      - 例如：{「name」:」zz」,」age」:20}，name和age就是key，若是這是從服務端請求的json，那可能和每列定義的字段不一樣，但都是惟一的
ajax data-ajax Function undefined       - ajax方法，和jQuery的ajax方法相似
      - 參考 BootstrapTable實現定時刷新數據，只是參考，由於那是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-name String btSelectItem radio（單選按鈕）或checkbox（複選框）的字段名
smartDisplay data-smart-display Boolean true 默認爲true，會 機智地（<_<） 根據狀況顯示分頁（pagination）或卡片視圖（card view）
escape data-escape Boolean false 跳過插入HTML中的字符串，替換掉特殊字符（後面符號沒有逗號）：&，<，>，"，`，'
search data-search Boolean false 默認false不顯示錶格右上方搜索框 ，可設爲true，在搜索框內只要輸入內容即開始搜索
searchOnEnterKey data-search-on-enter-key Boolean false 默認false不啓用，設爲true啓用，比功能是與上面相比，在搜索框內輸入內容而且按下回車鍵纔開始搜索
strictSearch data-strict-search Boolean false 設爲true，開啓精確搜索
searchText data-search-text String 「」 前提：search設爲true，啓用了搜索功能。
      - 搜索框初始顯示的內容，默認空字符串
searchTimeOut data-search-time-out Number 500 前提：search設爲true，啓用了搜索功能。
      - 設置搜索文件的超時時間（原文：Set timeout for search fire，不知道是寫錯了仍是我知識面太窄，」search fire」是什麼意思，官方API錯了？給我整蒙逼了）
trimOnSearch data-trim-on-search Boolean true 默認true，自動忽略空格
showHeader data-show-header Boolean true 默認爲true顯示錶頭，設爲false隱藏
showFooter data-show-footer Boolean false 默認爲false隱藏表尾，設爲true顯示
showColumns data-show-columns Boolean false 默認爲false隱藏某列下拉菜單，設爲true顯示
showRefresh data-show-refresh Boolean false 默認爲false隱藏刷新按鈕，設爲true顯示
showToggle data-show-toggle Boolean false 默認爲false隱藏視圖切換按鈕，設爲true顯示

新版的CSDN有bug，因此其他的Table options另寫一個表格 [ BootstrapTable 文檔 ]github

名稱 屬性 類型 默認值 做用描述
showPaginationSwitch data-show-pagination-switch Boolean false 默認爲false隱藏每頁數據條數選擇，設爲true顯示
minimumCountColumns data-minimum-count-columns Number 1 每列的下拉菜單最小數
idField data-id-field String undefined 代表哪一個是字段是標識字段
uniqueId data-unique-id String undefined 代表每行惟 一的標識符
cardView data-card-view Boolean false 默認false，設爲true顯示card view（卡片視圖）
detailView data-card-view Boolean false 默認false，設爲true顯示detail view（細節視圖）
detailFormatter data-detail-formatter Function function(index, row, element){
return 」;}		 前提：detailView設爲true，啓用了顯示detail view。
      - 用於格式化細節視圖
      - 返回一個字符串，經過第三個參數element直接添加到細節視圖的cell（某一格）中，其中，element爲目標cell的jQuery element
searchAlign data-search-align String right 搜索框的位置，默認right（最右），可選left
buttonsAlign data-buttons-align String right 工具欄按鈕的位置，默認right（最右），可選left
toolbarAlign data-toolbar-align String left 自定義工具欄的位置，默認right（最右），可選left
paginationVAlign data-pagination-v-align String bottom 分頁條垂直方向的位置，默認bottom（底部），可選top、both（頂部和底部均有分頁條）
paginationHAlign data-pagination-h-align String right 分頁條水平方向的位置，默認right（最右），可選left
paginationDetailHAlign data-pagination-detail-h-align String left 若是解譯的話太長，舉個例子，paginationDetail就是「顯示第 1 到第 8 條記錄，總共 15 條記錄 每頁顯示 8 條記錄」，默認left（最左），可選right
paginationPreText data-pagination-pre-text String ‹ 仍是舉例子，若是你內容太多，底部最右邊會顯示：」‹ 1 2 3 4 5 ›」來選擇頁數，默認就是最左邊那個符號，下同
paginationNextText data-pagination-next-text String › 參考上面一條
clickToSelect data-click-to-select Boolean false 默認false不響應，設爲true則當點擊此行的某處時，會自動選中此行的checkbox（複選框）或radiobox（單選按鈕）
singleSelect 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 {} 改變某行的格式，須要兩個參數： 
      - row：此行的數據 
      - index：此行的索引
支持classes和css，用法以下： function rowStyle(row, index){
    return { classes: ‘text-nowrap another-class’,
css: {「color」: 「blue」, 「font-size」: 「50px」}
}; }
rowAttributes data-row-attributes Function {} 改變某行的屬性，須要兩個參數： 
      - row：此行的數據 
      - index：此行的索引
支持全部自定義的屬性。
customSearch data-custom-search Function $.noop 自定義搜索功能（用來代替自帶的搜索功能），須要一個參數： 
      - text：想要搜索的內容
用法以下：
function customSearch(text){
     //必須使用’this.data’對數據進行過濾（filter the data，感受這個詞也不用譯），不要使用’this.options.data’ }
customSort data-custom-sort Function $.noop 自定義排序功能（用來代替自帶的排序功能），須要兩個參數（能夠參考前面）： 
      - sortName：須要排序的那列 
      - sortOrder：排序方式
用法：和上面同樣，不用擔憂，註釋也如出一轍
locale data-locale String undefined 本地化（動詞）。
本地化的文件必須被預加載，容許fallback（簡單來講就是若是要使用的文件不可用，就能夠用別的替代它，例如球場替補，沒替補，若是有人受傷了，比賽不就廢了），若是加載，將按以下順序： 
      - 首先嚐試加載的是指定的」本地化」文件 
      - 而後是’_’（下劃線）寫成’-‘（破折號），而且區域代碼被大寫的 
      - 而後是短區域代碼（例如：用’fr’代替’fr-CA’） 
      - 最後使用的是剩下的本地化文件（當沒有文件可加載則使用默認的）
若是剩餘的undefined，或者是空字符，則使用最後一次使用的那個文件（當沒有本地化文件可被加載，則使用自帶的’en_US’）
footerStyle data-footer-style Function {} 改變footer格式，須要兩個參數： 
      - row：此行的數據 
      - index：此行的索引
支持classes和css，用法以下：
function rowStyle(value，row, index){
    return { css: { 「font-weight」: 「bold」 } }; }

列的各項（Column options ）

定義在 jQuery.fn.bootstrapTable.columnDefaults 文件內ajax

名稱 屬性 類型 默認值 做用描述
radio data-radio Boolean false 默認false不顯示radio（單選按鈕），設爲true則顯示，radio寬度是固定的
checkbox data-checkbox Boolean false 默認false不顯示checkbox（複選框），設爲true則顯示，checkbox的每列寬度已固定
field data-field String undefined 是每列的字段名，不是表頭所顯示的名字，經過這個字段名能夠給其賦值，至關於key，表內惟一
title data-title String undefined 這個是表頭所顯示的名字，不惟一，若是你喜歡，能夠把全部表頭都設爲相同的名字
titleTooltip data-title-tooltip String undefined 當懸浮在某控件上，出現提示
       - 參考 Bootstrap 提示工具（Tooltip）插件
class class/data-class 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 每格數據的對齊方式，有：top（靠上）、middle（居中）、bottom（靠下）
width data-width Number（單位：px或%） undefined 每列的寬度。
       - 若是沒有自定義寬度，那麼寬度會根據內容的寬度自適應。
       - 若是表是左適應（left responsive）或者設置的寬度小於內容的寬度，那麼，寬度仍是會自適應（能夠在class或其餘的屬性中使用 min-width 或 max-width）。
       - 你也可使用」%」做爲單位，這樣的話，bootstapTable將按百分比劃分，若是你想使用」pixels（像素值）」，你能夠只寫數字（只要不加」%」，單位默認」px」，不嫌麻煩，或者想更清晰，你也能夠加上」px」）
sortable data-sortable Boolean false 默認false就默認顯示，設爲true則會被排序
order data-order String asc 默認的排序方式爲」asc（升序）」，也能夠設爲」desc（降序）」。
       - 與上面的結合使用，否則都不讓排序了，你還考慮什麼升降。
visible data-visible Boolean true 默認爲true顯示該列，設爲false則隱藏該列。 
       - 仍是頗有用的，例如隱藏自定義index列，按某屬性排序後會變亂，你能夠讀取某行的index來進行賦值
cardVisible data-card-visible Boolean true 默認爲true顯示該列，設爲false則隱藏。
switchable data-switchable Boolean true 默認爲true顯示該列，設爲false則禁用列項目的選項卡。
clickToSelect data-click-to-select Boolean true 默認true不響應，設爲false則當點擊此行的某處時，不會自動選中此行的checkbox（複選框）或radiobox（單選按鈕）
formatter data-formatter Function undefined 須要此列的對象。 
       某格的數據轉換函數，須要三個參數： 
         -value： field（字段名） 
         -row：行的數據 
         -index：行的（索引）index
footerFormatter data-footer-formatter Function undefined 須要此列的對象。 
       某格的數據轉換函數，須要一個參數： 
         -data： 全部行數據的數組 
       函數須要返回（return）footer某格內所要顯示的字符串的格式，還要包括內容
events data-events Object undefined 當某格使用formatter函數時，事件監聽會響應，須要四個參數： 
         -event：jQuery事件（參考Events）。 
         - value：字段名 
         - row：行數據 
         - index：此行的index 
舉個例子： 
     <th .. data-events=」operateEvent」> var operateEvents = {‘click .like’: function (e, value, row, index) {}};
sorter data-sorter Function undefined 自定義的排序函數，實現本地排序，須要兩個參數： 
         - a：第一個字段名 
         - b：第二個字段名
sortName data-sort-name String undefined 除了表頭默認的sort-name或列的字段名，還可使用自定義的sort-name 
       對特殊狀況說明： 
         - 一個列顯示的內容或許是」html」代碼，如：<b><span style=」color:red」>abc</span></b>，可是被排列的是html代碼中的內容（content）：abc
cellStyle data-cell-style Function undefined 對某格中顯示樣式（style）進行改變，須要三個函數： 
         - value：字段名 
         - row：行數據 
         - index：此行的index 
         - field：行的字段名
支持classes和css，用法以下： 
     function cellStyle(value, row, index, field) { return { classes: ‘text-nowrap another-class’, css: {「color」: 「blue」, 「font-size」: 「50px」} }; }
searchable data-searchable Boolean true 默認true，表示此列數據可被查詢
searchFormatter data-search-formatter Boolean true 默認true，可以使用格式化的數據查詢
escape data-escape Boolean false 跳過插入HTML中的字符串，替換掉特殊字符（後面符號沒有逗號）：&，<，>，"，`，'

事件（Events）

定義事件的格式：json

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

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

事件名 定義在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就是此列字段名 
         - 參考：Bootstrap Table 雙擊或單擊行獲取該行內容
onDblClickRow dbl-click-row.bs.table row, $element, field 和上面差很少，當雙擊（666）此行的任意一處，就會觸發該事件，所需參數以下（只是按原文譯過來的，在bootstraptable的js中不須要這些參數，由於雙擊該行就會得到一個row，row中包括此行全部數據，只要經過此行某列的字段名便可取出）： 
         - row：哪一行（從0開始） 
         - $element：該行（tr） 
         - field：當點擊該行，你想獲取此行哪一格的數據，field就是此列字段名 
         - 參考：Bootstrap Table 雙擊或單擊行獲取該行內容
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：所選擇的行的字段名 
         - $element：此行的DOM元素
onUncheck uncheck.bs.table row, $element 當取消選擇（uncheck）此行時觸發，所需的參數以下： 
         - row：所取消選擇的行的字段名 
         - $element：此行的DOM元素
onCheckAll check-all.bs.table rows 當全選行時觸發，所需的參數以下： 
         - rows：最近（newly）所選擇的行的字段名的數組
onUncheckAll uncheck-all.bs.table rows 當取消全選行時觸發，所需的參數以下： 
         - rows：以前或上次（previously）所選擇的行的字段名的數組
onCheckSome check-some.bs.table rows 當選擇（check）某些行（多行，rows）時觸發，所需的參數以下： 
         - rows：以前或上次（previously）所選擇的行的字段名的數組
onUncheckSome uncheck-some.bs.table rows 當取消選擇（uncheck）某些行（多行，rows）時觸發，所需的參數以下： 
         - rows：以前或上次（previously）所選擇的行的字段名的數組
onLoadSuccess load-success.bs.table data 當全部數據被加載時觸發
onLoadError load-error.bs.table status, res 當加載某些數據出現錯誤時觸發
onColumnSwitch column-switch.bs.table field, checked 當某列改變是否可見的狀態時觸發
onColumnSearch column-search.bs.table field, text 當某列被查詢時觸發
onPageChange page-change.bs.table number, size 當改變此頁所顯示的數據條數或改變頁碼時觸發
onSearch search.bs.table text 當查詢此表時觸發
onToggle toggle.bs.table cardView 當改變表的視圖時觸發
onPreBody pre-body.bs.table data 當<tbody></tbody>中的內容沒顯示前觸發
onPostBody post-body.bs.table data 當<tbody></tbody>中的內容被加載完後或者在你所用的DOM中有定義則被觸發
onPostHeader post-header.bs.table none 當<thead></thead>中的內容被加載完後或者在你所用的DOM中有定義則被觸發
onExpandRow expand-row.bs.table index, row, $detail 當查看詳細視圖（點擊查看detail的圖標）時觸發
onCollapseRow collapse-row.bs.table index, row 當關閉詳細視圖（再次點擊查看detail的圖標）時觸發
onRefreshOptions refresh-options.bs.table options 當刷新各項後或在初始化表（也包括銷燬了再初始化）以前觸發
onResetView reset-view.bs.table   當重置（reset）表的視圖時觸發
onRefresh refresh.bs.table params 當點擊刷新按鈕（refresh，不是瀏覽器的，而是表格右上角的刷新按鈕）後觸發

方法（Methods）

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

方法名 參數 描述 舉例
getOptions none 返回各項的object $table.bootstrapTable(‘getOptions’);
      - 請查看： getOptions
getSelections none 返回被選擇的行，當沒有行被選擇，則返回空數組（但並非undefined，也不是null，是長度爲0的空數組，因此能夠判斷長度是否大於0來肯定是否選擇了行） $table.bootstrapTable(‘getSelections’);
      - 請查看： getSelections
getAllSelections none 返回全部被選的行（原文中：contain search or filter，其實就是你選擇的篩選以後的數據），當沒有行被選擇，則返回空數組 $table.bootstrapTable(‘getAllSelections’);
      - 請查看： getAllSelections
showAllColumns none 顯示全部的列 $table.bootstrapTable(‘showAllColumns’);
      - 就是顯示全部的列，並沒什麼可說的
hideAllColumns none 隱藏全部的列 $table.bootstrapTable(‘hideAllColumns’);
      - 就是隱藏全部的列
getData useCurrentPage 獲取被加載的表的數據，若是你設置了使用當前頁的數據（useCurrentPage），則返回當前頁的數據 $table.bootstrapTable(‘getData’);
      - 請查看： getData
getRowByUniqueId id 獲取你想要的某行的數據（設置某行的id） $table.bootstrapTable(‘getRowByUniqueId’, 1);後面的1就是你要的那一行的ID
      - 請查看： getRowByUniqueId
load data 向表中加載數據，原來的數據將被移除 $table.bootstrapTable(‘load’, data);
      - 請查看： load

新版的CSDN有bug，因此其他的Methods另寫一個表格 [ Bootstraptable API 中文文檔 ]

方法名 參數 描述 舉例
append data 將數據追加在最後一行後 $table.bootstrapTable(‘append’, data);data能夠是數組
      - 請查看： append
prepend data 也是追加，只是在第一行以前 $table.bootstrapTable(‘prepend’, data);data能夠是數組
      - 請查看： prepend
remove params 移除一行或多行你所選的數據 $table.bootstrapTable(‘remove’, {field: ‘id’, values: ids}); 
      - id：所需移除的那一行（rows，一或多行）的字段 
      - values：被移除的行的數組 
      - 請查看： remove
removeAll - 移除表中全部的數據 $table.bootstrapTable(‘removeAll’); 
      - 請查看： removeAll
removeByUniqueId - 移除某行數據（設置某行的id） $table.bootstrapTable(‘removeByUniqueId’, 1);後面的1就是你想移除的那一行的ID 
      - 請查看： removeByUniqueId
insertRow params 新增一行，所需的參數以下： 
      - index：你想插入到哪（只要願意，想插哪就插哪，想插誰就插誰） 
      - row：你想插入的數據		 $table.bootstrapTable(‘insertRow’, {index: 1, row: row}); 
      - 請查看： insertRow
updateRow params 更新行數據，所需的參數以下： 
      - index：所要更新的行的索引（index） 
      - row：你想換的新的數據		 $table.bootstrapTable(‘updateRow’, {index: 1, row: row}); 
      - 請查看： updateRow 
      - 請查看： Bootstrap Table實現定時刷新數據
updateByUniqueId params 更新某行數據，所需的參數以下： 
      - id：你想更新那行的id（惟一），（只要願意，想換哪一個換哪一個） 
      - row：你想換的新的數據		 $table.bootstrapTable(‘updateByUniqueId’, {id: 3, row: row}); 
      - 請查看： updateByUniqueId
showRow params 顯示特定行，所需的參數至少包括下面所列的一個： 
      - 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’);

新版的CSDN有bug，因此其他的Methods另寫一個表格 [ Bootstrap Table API 中文文檔 ]

方法名 參數 描述 舉例
mergeCells options 融合~（把多格合併爲一格），所需的參數以下： 
      - index：所要合併的格所在行的索引（index） 
      - field：所在列的字段名 
      - rowspan：合併的行總數目 
      - colspan：合併的列總數目		 $table.bootstrapTable(‘mergeCells’, {index: 1, field: ‘name’, colspan: 2, rowspan: 3});
      - 請查看： mergeCells
updateCell params 更新某格數據，所需的參數以下： 
      - index：所要合併的格所在行的索引（index） 
      - field：所在列的字段名 
      - value：要換的新的數據 
你也能夠設置{reinit:false}來禁用表格的再次初始化		 $table.bootstrapTable(‘updateCell’,{index:index,field:’id’,value:value});
refresh params 刷新服務端的數據： 
      - 能夠設置{silent:true}來 偷偷地（<_<） 刷新 
      - 設置{url:newUrl,pageNumber:pageNumber,
pageSize:pageSize}改變請求的地址，頁數，每頁所顯示的條數 
      - 能夠設置{query:{foo:’bar’}}增長特定的參數		 $table.bootstrapTable(‘refresh’);
      - 請查看： refresh
refreshOptions options 看例子吧       - 請查看： refreshOptions
resetSearch text 重置搜索的文本（text）       - 請查看： resetSearch
showLoading none 顯示正在加載……       - 請查看： showLoading/hideLoading
hideLoading none 隱藏正在加載……       - 請查看： showLoading/hideLoading
checkAll none 選擇當前頁的全部行 $table.bootstrapTable(‘checkAll’);
      - 請查看： checkAll/uncheckAll
uncheckAll none 取消選擇當前頁的全部行 $table.bootstrapTable(‘uncheckAll’);
      - 請查看： checkAll/uncheckAll
checkInvert none 反向選擇，不難理解吧 $table.bootstrapTable(‘checkInvert’);
check index 選擇某一行，索引（index）從0開始 $table.bootstrapTable(‘check’, 1);
      - 請查看： check/uncheck
uncheck index 取消選擇某一行，索引（index）從0開始 $table.bootstrapTable(‘uncheck’, 1);
      - 請查看： check/uncheck
checkBy params 經過數組選擇某一行，所需的參數以下： 
      - field：所要選的字段名 
      - values：所要選的那些值（數組）		 官方沒，啊，有例紙：
- $(「#table」).bootstrapTable(「checkBy」, { field:」field_name」, values:[「value1」,」value2」,」value3」]});
      - 請查看： checkBy/uncheckBy
uncheckBy params 經過數組選擇某一行，所需的參數以下： 
      - field：所要取消選擇的字段名 
      - values：所要取消選擇的那些值（數組）		 $(「#table」).bootstrapTable(「uncheckBy」, { field:」field_name」, values:[「value1」,」value2」,」value3」]});
      - 請查看： checkBy/uncheckBy
resetView params 改變表格的樣式，例如改變表格的高度（height） $table.bootstrapTable(‘resetView’);
      - 請查看： resetView
resetWidth none 自動改變表頭和表腳（就譯成腳，任性）的寬度來適應每列的寬度 $table.bootstrapTable(‘resetWidth’);
destroy none 銷燬表格 A！T！T！A！C！K！ $table.bootstrapTable(‘destroy’);
      - 請查看： destroy
showColumn field 顯示特定的列 $table.bootstrapTable(‘showColumn’, ‘name’);
      - 請查看： showColumn/hideCoulumn
hideColumn field 隱藏特定的列 $table.bootstrapTable(‘hideColumn’, ‘name’);
      - 請查看： showColumn/hideCoulumn

新版的CSDN有bug，因此其他的Methods另寫一個表格 [ Bootstrap table API 中文文檔 ]

方法名 參數 描述 舉例
getHiddenColumns - 獲取全部隱藏的列 $table.bootstrapTable(‘getHiddenColumns’);
getVisibleColumns - 獲取全部顯示的列 $table.bootstrapTable(‘getVisibleColumns’);
scrollTo value 滾……到哪一個位置，單位是’px’，若是設爲’bottom’，嗖，恭喜你已到表尾 $table.bootstrapTable(‘scrollTo’, 0);
      - 請查看： scrollTo
getScrollPosition none 獲取當前所滾到的位置，單位你懂得，就是’px’ $table.bootstrapTable(‘getScrollPosition’);
filterBy none 只能在客戶端（client-side，相對server-side）這邊用，過濾表中的數據 
例如： 
      - 能夠設置{age:10}來只顯示age爲10的數據 
      - 不只單的，你還能夠雙飛，甚至多p，設置{age: 10, hairColor: [「blue」, 「red」, 「green」]} ，這樣你就獲得了一羣10歲的，頭髮顏色爲藍，紅，綠的……數據		 $table.bootstrapTable(‘filterBy’, { id: [1, 2, 3] });
      - 請查看： filterBy
selectPage page 跳轉到特定的頁面 $table.bootstrapTable(‘selectPage’, 1);
      - 請查看： selectPage/prevPage/nextPage
prevPage none 跳轉到上一頁 $table.bootstrapTable(‘prevPage’);
      - 請查看： selectPage/prevPage/nextPage
nextPage none 跳轉到下一頁 $table.bootstrapTable(‘nextPage’);
      - 請查看： selectPage/prevPage/nextPage
togglePagination none 詞窮，請看例紙 $table.bootstrapTable(‘togglePagination’);
      - 請查看： togglePagination
toggleView none 改變視圖 $table.bootstrapTable(‘toggleView’);
      - 請查看： toggleView
expandRow index 可以使用條件：detail view設爲了true，否則沒法使用視圖功能，這個也沒用 
      - 經過參數index來展開此列的詳細視圖		       - 請查看： expandRow-collapseRow
collapseRow index 可以使用條件：detail view設爲了true 
      - 經過參數index來關閉此列的詳細視圖		       - 請查看： expandRow-collapseRow
expandAllRow is subtable 可以使用條件：detail view設爲了true 
      - 展開全部列的詳細視圖		 $table.bootstrapTable(‘expandAllRow’); 
      - 參考上面的實例，上面是展開（摺疊）某一行的視圖，這個是全部行的
collapseAllRow is subtable 可以使用條件：detail view設爲了true 
      - 關閉全部列的詳細視圖		 $table.bootstrapTable(‘collapseAllRow’); 
      - 參考上面

本地化，切換爲另外一種語言（Localizations）

默認顯示英文，若是想使用中文，首先引入：

<script src="bootstrap-table-zh-CN.js"></script>

而後是三種聲明使用的方法（我的只使用第2、三種），以下：

  • 第一種：

    $.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’ 「列」

有錯請留言，看到後會及時更改，若是像那種翻譯的行寫成列或漏字等低級錯誤，看英文名稱就知道有沒有錯了，主要就是爲了讓大家知道怎麼用，會持續檢查哪有誤、漏譯，若是認爲有譯得不妥的地方，也能夠留言一塊兒討論，謝謝 


其餘相關：

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程