中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

什么是Bootstrap Table API 中文版

發布時間:2020-07-10 13:55:23 來源:億速云 閱讀:353 作者:Leah 欄目:web開發

本篇文章為大家展示了什么是Bootstrap Table API 中文版,代碼簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。

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

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 文件內

名稱屬性類型默認值作用描述
-data-toggleStringtable只要引入 jquery、bootstrap 、bootstrap-table的包,不用在js里面定義就可以使用
默認有寫data-toggle="table",data-toggle應該知道吧,常用的有"tooltip、popover等等",這邊就不說了
classesdata-classesStringtable table-hover表的class屬性,如果沒有自己定義,則默認有邊框,并且當鼠標懸浮在那一行,背景會變為淺灰色.
sortClassdata-sort-classStringundefined聲明表格td的class名,代表此列元素的class名將被排序
heightdata-heightNumberundefined表格的高度
undefinedTextdata-undefined-textString-當不寫任何內容默認顯示'-'
stripeddata-stripedBooleanfalse默認false,當設為true,則每行表格的背景會顯示灰白相間
sortNamedata-sort-nameStringundefined定義哪一列的值會被排序,寫data-field的自定義名,沒定義默認都不排列,同下面的sortOrder結合使用,沒寫的話列默認遞增(asc)
sortOrderdata-sort-orderStringasc同上面的結合使用,默認遞增(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定義的圖標大小:
      - undefined =>默認表示默認的按鈕尺寸(btn)
      - xs   =>超小按鈕的尺寸(btn-xs)
      - sm  =>小按鈕的尺寸(btn-sm)
      - lg    =>大按鈕的尺寸(btn-lg)
buttonsClassdata-buttons-classStringdefault按鈕的類,默認為default。
            - 可選的有:primary、danger、warning等等
     - 寫了之后會自動轉換為btn-primary(藍色)、btn-danger(紅色)、btn-warning(黃色)等格式,所以前面不要再加"btn-",默認為btn-default(白色)
     - 參考菜鳥教程:Bootstrap 按鈕
iconsdata-iconsObject{ 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",后面是服務器發來的字段名
dataFielddata-data-fieldStringrows- 名稱寫自己定義的每列的字段名,也就是key,通過key才能給某行的某列賦value。
     -  原文:獲取每行數據json內的key
     - 例如:{"name":"zz","age":20},name和age就是key,如果這是從服務端請求的json,那可能和每列定義的字段不同,但都是唯一的
ajaxdata-ajaxFunctionundefined- ajax方法,和jQuery的ajax方法類似
methoddata-methodStringget向服務器請求遠程數據的方式,默認為'get',可選'post'
urldata-urlStringundefined向服務器請求的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)
cachedata-cacheBooleantrue默認緩存ajax請求,設為false則禁用緩存
contentTypedata-content-typeStringapplication/json請求數據的contentType(內容類型),用于定義文件的類型,決定接收方以什么形式讀取這個文件。
     - 默認application/json,用來告訴接收端從服務器發來的消息是序列化后的json字符串
dataTypedata-data-typeStringjson期望從服務器獲取的數據的類型,默認為json格式字符串
ajaxOptionsdata-ajax-optionsObject{}向服務器請求ajax時的附加項,默認無附加
     - 參考 jQuery.ajax()
queryParamsdata-query-paramsFunction
function(params){
return params;}
當請求數據時,你可以通過修改queryParams向服務器發送其余的參數。
     - queryParamsType="limit",它的參數包括:limit,offset,search,sort,order Else
     - params包括:pageSize,pageNumber,searchText,sortName,sortOrder
     - 當return false,請求則終止
queryParamsTypedata-query-params-typeStringlimit默認"limit",設置該屬性用來發送符合RESTful格式的參數
responseHandlerdata-response-handlerFunction
function(res){
return res;}
在加載服務器發送來的數據之前,處理數據的格式,參數res表示the response data(獲取的數據)
paginationdata-paginationBooleanfalse默認為false,表格的底部工具欄不會顯示分頁條(pagination toolbar),可以設為true來顯示
paginationLoopdata-pagination-loopBooleantrue默認true,分頁條無限循環
onlyInfoPaginationdata-only-info-paginationBooleanfalse前提:pagination設為true,啟用了分頁功能。
     - 默認false,設為true顯示總記錄數
sidePaginationdata-side-paginationStringclient設置在哪進行分頁,默認"client",可選"server",如果設置 "server",則必須設置url或者重寫ajax方法
     - 請記住,如果服務端分頁選項使用了自定義的,那么請求的服務器響應格式是不同的,參考下面兩個數據格式:
     Without server-side pagination(沒有啟用服務端分頁)
     With server-side pagination(啟用服務端分頁)
pageNumberdata-page-numberNumber1前提:pagination設為true,啟用了分頁功能。
     - 默認第1頁,用于設置初始的頁數
pageSizedata-page-sizeNumber10前提:pagination設為true,啟用了分頁功能。
     - 默認每頁顯示10條記錄,用于設置每頁初始顯示的條數
pageListdata-page-listArray[10, 25, 50, 100]前提:pagination設為true,啟用了分頁功能。
     - 默認為[10, 25, 50, 100],即可以選擇"每頁顯示10/25/50/100條記錄",用于設置選擇每頁顯示的條數
selectItemNamedata-select-item-nameStringbtSelectItemradio(單選按鈕)或checkbox(復選框)的字段名
smartDisplaydata-smart-displayBooleantrue默認為true,會機智地(<_<)根據情況顯示分頁(pagination)或卡片視圖(card view)
escapedata-escapeBooleanfalse跳過插入HTML中的字符串,替換掉特殊字符(后面符號沒有逗號):&,<,>,",`,'
searchdata-searchBooleanfalse默認false不顯示表格右上方搜索框 ,可設為true,在搜索框內只要輸入內容即開始搜索
searchOnEnterKeydata-search-on-enter-keyBooleanfalse默認false不啟用,設為true啟用,比功能是與上面相比,在搜索框內輸入內容并且按下回車鍵才開始搜索
strictSearchdata-strict-searchBooleanfalse設為true,開啟精確搜索
searchTextdata-search-textString""前提:search設為true,啟用了搜索功能。
     - 搜索框初始顯示的內容,默認空字符串
searchTimeOutdata-search-time-outNumber500前提:search設為true,啟用了搜索功能。
     - 設置搜索文件的超時時間(原文:Set timeout for search fire,不知道是寫錯了還是我知識面太窄,"search fire"是什么意思,官方API錯了?給我整蒙逼了)
trimOnSearchdata-trim-on-searchBooleantrue默認true,自動忽略空格
showHeaderdata-show-headerBooleantrue默認為true顯示表頭,設為false隱藏
showFooterdata-show-footerBooleanfalse默認為false隱藏表尾,設為true顯示
showColumnsdata-show-columnsBooleanfalse默認為false隱藏某列下拉菜單,設為true顯示
showRefreshdata-show-refreshBooleanfalse默認為false隱藏刷新按鈕,設為true顯示
showToggledata-show-toggleBooleanfalse默認為false隱藏視圖切換按鈕,設為true顯示
showPaginationSwitchdata-show-pagination-switchBooleanfalse默認為false隱藏每頁數據條數選擇,設為true顯示
minimumCountColumnsdata-minimum-count-columnsNumber1每列的下拉菜單最小數
idFielddata-id-fieldStringundefined表明哪個是字段是標識字段
uniqueIddata-unique-idStringundefined表明每行唯 一的標識符
cardViewdata-card-viewBooleanfalse默認false,設為true顯示card view(卡片視圖)
detailViewdata-card-viewBooleanfalse默認false,設為true顯示detail view(細節視圖)
detailFormatterdata-detail-formatterFunctionfunction(index, row, element){
return '';}
前提:detailView設為true,啟用了顯示detail view。
     - 用于格式化細節視圖
     - 返回一個字符串,通過第三個參數element直接添加到細節視圖的cell(某一格)中,其中,element為目標cell的jQuery element
searchAligndata-search-alignStringright搜索框的位置,默認right(最右),可選left
buttonsAligndata-buttons-alignStringright工具欄按鈕的位置,默認right(最右),可選left
toolbarAligndata-toolbar-alignStringleft自定義工具欄的位置,默認right(最右),可選left
paginationVAligndata-pagination-v-alignStringbottom分頁條垂直方向的位置,默認bottom(底部),可選top、both(頂部和底部均有分頁條)
paginationHAligndata-pagination-h-alignStringright分頁條水平方向的位置,默認right(最右),可選left
paginationDetailHAligndata-pagination-detail-h-alignStringleft如果解譯的話太長,舉個例子,paginationDetail就是“顯示第 1 到第 8 條記錄,總共 15 條記錄  每頁顯示 8  條記錄”,默認left(最左),可選right
paginationPreTextdata-pagination-pre-textString?還是舉例子,如果你內容太多,底部最右邊會顯示:"? 1 2 3 4 5 ?"來選擇頁數,默認就是最左邊那個符號,下同
paginationNextTextdata-pagination-next-textString?參考上面一條
clickToSelectdata-click-to-selectBooleanfalse默認false不響應,設為true則當點擊此行的某處時,會自動選中此行的checkbox(復選框)或radiobox(單選按鈕)
singleSelectdata-single-selectBooleanfalse默認false,設為true則允許復選框僅選擇一行
toolbardata-toolbarString | NodeundefinedjQuery的選擇器,例如:#toolbar,.toolbar,或者是DOM 結點
checkboxHeaderdata-checkbox-headerBooleantrue如果你有聲明復選框,默認顯示表頭行的全選復選框,設為false隱藏(就是表格第一行的不顯示,從第二行往后都顯示)
maintainSelecteddata-maintain-selectedBooleanfalse設為true則保持被選的那一行的狀態
sortabledata-sortableBooleantrue默認true,設為false禁用所有的行排列(也就是每列表頭不會顯示排序的按鈕,這個需要在th聲明data-sortable="true",寫在js中只是啟不啟用)
slientSortdata-silent-sortBooleantrue前提:sidePagination設為server(服務端)
     - 默認true,設為false則靜默排序數據
rowStyledata-row-styleFunction{}改變某行的格式,需要兩個參數:
     - row:此行的數據
     - index:此行的索引
支持classes和css,用法如下: function rowStyle(row, index){
   return {    classes: 'text-nowrap another-class',
   css: {"color": "blue", "font-size": "50px"}
 }; }
rowAttributesdata-row-attributesFunction{}改變某行的屬性,需要兩個參數:
     - row:此行的數據                  
     - index:此行的索引
支持所有自定義的屬性。
customSearchdata-custom-searchFunction$.noop自定義搜索功能(用來代替自帶的搜索功能),需要一個參數:
     - text:想要搜索的內容
用法如下:
function customSearch(text){
    //必須使用'this.data'對數據進行過濾(filter the data,感覺這個詞也不用譯),不要使用'this.options.data' }
customSortdata-custom-sortFunction$.noop自定義排序功能(用來代替自帶的排序功能),需要兩個參數(可以參考前面):
     - sortName:需要排序的那列
     - sortOrder:排序方式
用法:和上面一樣,不用擔心,注釋也一模一樣
localedata-localeStringundefined本地化(動詞)。
本地化的文件必須被預加載,允許fallback(簡單來說就是如果要使用的文件不可用,就可以用別的替代它,例如球場替補,沒替補,如果有人受傷了,比賽不就廢了),如果加載,將按如下順序:
     - 首先嘗試加載的是指定的"本地化"文件
     - 然后是'_'(下劃線)寫成'-'(破折號),并且區域代碼被大寫的
     - 然后是短區域代碼(例如:用'fr'代替'fr-CA')
     - 最后使用的是剩下的本地化文件(當沒有文件可加載則使用默認的)
如果剩余的undefined,或者是空字符,則使用最后一次使用的那個文件(當沒有本地化文件可被加載,則使用自帶的'en_US')
footerStyledata-footer-styleFunction{}改變footer格式,需要兩個參數:
     - row:此行的數據
     - index:此行的索引
支持classes和css,用法如下:
function rowStyle(value,row, index){
   return {    css: { "font-weight": "bold" }  };  }

列的各項(Column options )

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

名稱屬性類型默認值作用描述
radiodata-radioBooleanfalse默認false不顯示radio(單選按鈕),設為true則顯示,radio寬度是固定的
checkboxdata-checkboxBooleanfalse默認false不顯示checkbox(復選框),設為true則顯示,checkbox的每列寬度已固定
fielddata-fieldStringundefined是每列的字段名,不是表頭所顯示的名字,通過這個字段名可以給其賦值,相當于key,表內唯一
titledata-titleStringundefined這個是表頭所顯示的名字,不唯一,如果你喜歡,可以把所有表頭都設為相同的名字
titleTooltipdata-title-tooltipStringundefined當懸浮在某控件上,出現提示
      - 參考 Bootstrap 提示工具(Tooltip)插件
classclass/data-classStringundefined沒什么好說的,就是class
rowspanrowspan/data-rowspanNumberundefined每格所占的行數
colspancolspan/data-colspanNumberundefined每格所占的列數
aligndata-alignStringundefined每格內數據的對齊方式,有:left(靠左)、right(靠右)、center(居中)
haligndata-halignStringundefinedtable header(表頭)的對齊方式,有:left(靠左)、right(靠右)、center(居中)
faligndata-falignStringundefinedtable footer(表腳,就這樣譯,任性,其實隨便譯啦,知道就好)的對齊方式,有:left(靠左)、right(靠右)、center(居中)
valigndata-valignStringundefined每格數據的對齊方式,有:top(靠上)、middle(居中)、bottom(靠下)
widthdata-widthNumber(單位:px或%)undefined每列的寬度。
      - 如果沒有自定義寬度,那么寬度會根據內容的寬度自適應。
      - 如果表是左適應(left responsive)或者設置的寬度小于內容的寬度,那么,寬度還是會自適應(可以在class或其他的屬性中使用 min-width 或 max-width)。
      - 你也可以使用"%"作為單位,這樣的話,bootstapTable將按百分比劃分,如果你想使用"pixels(像素值)",你可以只寫數字(只要不加"%",單位默認"px",不嫌麻煩,或者想更清晰,你也可以加上"px")
sortabledata-sortableBooleanfalse默認false就默認顯示,設為true則會被排序
orderdata-orderStringasc默認的排序方式為"asc(升序)",也可以設為"desc(降序)"。
      - 與上面的結合使用,不然都不讓排序了,你還考慮什么升降。
visibledata-visibleBooleantrue默認為true顯示該列,設為false則隱藏該列。
      - 還是很有用的,例如隱藏自定義index列,按某屬性排序后會變亂,你可以讀取某行的index來進行賦值
cardVisibledata-card-visibleBooleantrue默認為true顯示該列,設為false則隱藏。
switchabledata-switchableBooleantrue默認為true顯示該列,設為false則禁用列項目的選項卡。
clickToSelectdata-click-to-selectBooleantrue默認true不響應,設為false則當點擊此行的某處時,不會自動選中此行的checkbox(復選框)或radiobox(單選按鈕)
formatterdata-formatterFunctionundefined需要此列的對象。      
      某格的數據轉換函數,需要三個參數:      
        -value: field(字段名)      
        -row:行的數據      
        -index:行的(索引)index
footerFormatterdata-footer-formatterFunctionundefined需要此列的對象。      
      某格的數據轉換函數,需要一個參數:      
        -data: 所有行數據的數組      
      函數需要返回(return)footer某格內所要顯示的字符串的格式,還要包括內容
eventsdata-eventsObjectundefined當某格使用formatter函數時,事件監聽會響應,需要四個參數:
        -event:jQuery事件(參考Events)。
        - value:字段名
        - row:行數據
        - index:此行的index
舉個例子:
    <th .. data-events="operateEvent"> var operateEvents = {'click .like': function (e, value, row, index) {}};
sorterdata-sorterFunctionundefined自定義的排序函數,實現本地排序,需要兩個參數:
        - a:第一個字段名
        - b:第二個字段名
sortNamedata-sort-nameStringundefined除了表頭默認的sort-name或列的字段名,還可以使用自定義的sort-name
      對特殊情況說明:
        - 一個列顯示的內容或許是"html"代碼,如:<b><span style="color:red">abc</span></b>,但是被排列的是html代碼中的內容(content):abc
cellStyledata-cell-styleFunctionundefined對某格中顯示樣式(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-searchableBooleantrue默認true,表示此列數據可被查詢
searchFormatterdata-search-formatterBooleantrue默認true,可使用格式化的數據查詢
escapedata-escapeBooleanfalse跳過插入HTML中的字符串,替換掉特殊字符(后面符號沒有逗號):&,<,>,",`,'

事件(Events)

定義事件的格式:

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

$(’#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) {
// …
});
事件名定義在jQuery中的事件名參數作用描述
onAllall.bs.tablename, args當所有觸發器被觸發時都執行此函數,就是所有的事件都會觸發該事件,參數包括:      
        - name:事件名
        - args:事件的數據
onClickRowclick-row.bs.tablerow, $element, field當單擊此行的任意一處,就會觸發該事件,所需參數如下(只是按原文譯過來的,在bootstraptable的js中不需要這些參數,因為單擊該行就會獲得一個row,row中包括此行所有數據,只要通過此行某列的字段名即可取出):      
        - row:哪一行(從0開始)  
        - $element:該行(tr)    
        - field:當點擊該行,你想獲取此行哪一格的數據,field就是此列字段名  
onDblClickRowdbl-click-row.bs.tablerow, $element, field和上面差不多,當雙擊(666)此行的任意一處,就會觸發該事件,所需參數如下(只是按原文譯過來的,在bootstraptable的js中不需要這些參數,因為雙擊該行就會獲得一個row,row中包括此行所有數據,只要通過此行某列的字段名即可取出):      
        - row:哪一行(從0開始)  
        - $element:該行(tr)    
        - field:當點擊該行,你想獲取此行哪一格的數據,field就是此列字段名  
onClickCellclick-cell.bs.tablefield, value, row, $element當單擊某一格,就會觸發該事件,所需參數如下:      
        - field:此格所在列的字段名  
        - value:此格的數據    
        - $element:此行的此列,就是此格(td)
onDblClickCelldbl-click-cell.bs.table                  field, value, row, $element當雙擊某一格,就會觸發該事件,所需參數如下:      
        - field:此格所在列的字段名  
        - value:此格的數據    
        - $element:此行的此列,就是此格(td)
onSortsort.bs.tablename, order當對某列進行排序時觸發該事件,所需參數如下:      
        - name:所排序的列的字段名  
        - order:所排的順序
onCheckcheck.bs.tablerow, $element當選擇(check)此行時觸發,所需的參數如下:      
        - row:所選擇的行的字段名  
        - $element:此行的DOM元素
onUncheckuncheck.bs.tablerow, $element當取消選擇(uncheck)此行時觸發,所需的參數如下:      
        - row:所取消選擇的行的字段名  
        - $element:此行的DOM元素
onCheckAllcheck-all.bs.tablerows當全選行時觸發,所需的參數如下:      
        - rows:最近(newly)所選擇的行的字段名的數組
onUncheckAlluncheck-all.bs.tablerows當取消全選行時觸發,所需的參數如下:      
        - rows:之前或上次(previously)所選擇的行的字段名的數組
onCheckSome                  check-some.bs.tablerows當選擇(check)某些行(多行,rows)時觸發,所需的參數如下:      
        - rows:之前或上次(previously)所選擇的行的字段名的數組
onUncheckSomeuncheck-some.bs.tablerows當取消選擇(uncheck)某些行(多行,rows)時觸發,所需的參數如下:      
        - rows:之前或上次(previously)所選擇的行的字段名的數組
onLoadSuccess                  load-success.bs.tabledata當所有數據被加載時觸發
onLoadErrorload-error.bs.tablestatus, res當加載某些數據出現錯誤時觸發
onColumnSwitchcolumn-switch.bs.tablefield, checked當某列改變是否可見的狀態時觸發
onColumnSearchcolumn-search.bs.tablefield, text當某列被查詢時觸發
onPageChangepage-change.bs.tablenumber, size當改變此頁所顯示的數據條數或改變頁碼時觸發
onSearchsearch.bs.tabletext當查詢此表時觸發
onToggletoggle.bs.tablecardView當改變表的視圖時觸發
onPreBodypre-body.bs.tabledata當<tbody></tbody>中的內容沒顯示前觸發
onPostBodypost-body.bs.tabledata當<tbody></tbody>中的內容被加載完后或者在你所用的DOM中有定義則被觸發
onPostHeaderpost-header.bs.tablenone當<thead></thead>中的內容被加載完后或者在你所用的DOM中有定義則被觸發
onExpandRowexpand-row.bs.tableindex, row, $detail當查看詳細視圖(點擊查看detail的圖標)時觸發
onCollapseRowcollapse-row.bs.tableindex, row當關閉詳細視圖(再次點擊查看detail的圖標)時觸發
onRefreshOptionsrefresh-options.bs.tableoptions當刷新各項后或在初始化表(也包括銷毀了再初始化)之前觸發
onResetViewreset-view.bs.table
當重置(reset)表的視圖時觸發
onRefresh                  refresh.bs.tableparams當點擊刷新按鈕(refresh,不是瀏覽器的,而是表格右上角的刷新按鈕)后觸發

方法(Methods)

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

方法名參數描述舉例
getOptionsnone返回各項的object$table.bootstrapTable('getOptions');
     - 請查看:  getOptions
getSelectionsnone返回被選擇的行,當沒有行被選擇,則返回空數組(但并不是undefined,也不是null,是長度為0的空數組,所以可以判斷長度是否大于0來確定是否選擇了行)$table.bootstrapTable('getSelections');
     - 請查看: getSelections
getAllSelectionsnone返回所有被選的行(原文中:contain search or filter,其實就是你選擇的篩選之后的數據),當沒有行被選擇,則返回空數組$table.bootstrapTable('getAllSelections');
     - 請查看: getAllSelections
showAllColumnsnone顯示所有的列$table.bootstrapTable('showAllColumns');
     -  就是顯示所有的列,并沒什么可說的
hideAllColumnsnone隱藏所有的列$table.bootstrapTable('hideAllColumns');
     - 就是隱藏所有的列
getDatauseCurrentPage獲取被加載的表的數據,如果你設置了使用當前頁的數據(useCurrentPage),則返回當前頁的數據$table.bootstrapTable('getData');
     - 請查看: getData
getRowByUniqueIdid獲取你想要的某行的數據(設置某行的id)$table.bootstrapTable('getRowByUniqueId', 1);后面的1就是你要的那一行的ID
     - 請查看: getRowByUniqueId
loaddata向表中加載數據,原來的數據將被移除$table.bootstrapTable('load', data);
     - 請查看: load
appenddata將數據追加在最后一行后$table.bootstrapTable('append', data);data可以是數組
     - 請查看: append
prependdata也是追加,只是在第一行之前$table.bootstrapTable('prepend', data);data可以是數組
     - 請查看: prepend
removeparams移除一行或多行你所選的數據$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
insertRowparams新增一行,所需的參數如下:
     - index:你想插入到哪(只要愿意,想插哪就插哪,想插誰就插誰)
     - row:你想插入的數據
$table.bootstrapTable('insertRow', {index: 1, row: row});      
     - 請查看: insertRow
updateRowparams更新行數據,所需的參數如下:
     - index:所要更新的行的索引(index)
     - row:你想換的新的數據
$table.bootstrapTable('updateRow', {index: 1, row: row});      
     - 請查看: updateRow        
updateByUniqueIdparams更新某行數據,所需的參數如下:
     - id:你想更新那行的id(唯一),(只要愿意,想換哪個換哪個)
     - row:你想換的新的數據
$table.bootstrapTable('updateByUniqueId', {id: 3, row: row});      
     - 請查看: updateByUniqueId
showRowparams顯示特定行,所需的參數至少包括下面所列的一個:
     - id:所要顯示的行的索引(index)
     - uniqueId:那一行的id
$table.bootstrapTable('showRow', {index:1});      
     - 請查看: showRow/hideRow
hideRowparams隱藏特定行,所需的參數至少包括下面所列的一個:
     - id:所要隱藏的行的索引(index)
     - uniqueId:那一行的id
$table.bootstrapTable('hideRow', {index:1});      
     - 請查看: showRow/hideRow
getRowsHiddenboolean獲取隱藏的行(官方原話很多,其實總結起來就前面那一句)$table.bootstrapTable('getRowsHidden');
mergeCellsoptions融合~(把多格合并為一格),所需的參數如下:
     - index:所要合并的格所在行的索引(index)
     - field:所在列的字段名
     - rowspan:合并的行總數目
     - colspan:合并的列總數目
$table.bootstrapTable('mergeCells', {index: 1, field: 'name', colspan: 2, rowspan: 3});
     - 請查看: mergeCells
updateCellparams更新某格數據,所需的參數如下:
     - index:所要合并的格所在行的索引(index)
     - field:所在列的字段名
     - value:要換的新的數據
你也可以設置{reinit:false}來禁用表格的再次初始化
$table.bootstrapTable('updateCell',{index:index,field:'id',value:value});
refreshparams刷新服務端的數據:
     - 可以設置{silent:true}來偷偷地(<_<)刷新
     - 設置{url:newUrl,pageNumber:pageNumber,
pageSize:pageSize}改變請求的地址,頁數,每頁所顯示的條數
     - 可以設置{query:{foo:'bar'}}增加特定的參數
$table.bootstrapTable('refresh');
     - 請查看: refresh
refreshOptionsoptions看例子吧- 請查看: refreshOptions
resetSearchtext重置搜索的文本(text)- 請查看: resetSearch
showLoadingnone顯示正在加載……- 請查看: showLoading/hideLoading
hideLoadingnone隱藏正在加載……- 請查看: showLoading/hideLoading
checkAllnone選擇當前頁的所有行$table.bootstrapTable('checkAll');
     - 請查看: checkAll/uncheckAll
uncheckAllnone取消選擇當前頁的所有行$table.bootstrapTable('uncheckAll');
     - 請查看: checkAll/uncheckAll
checkInvertnone反向選擇,不難理解吧$table.bootstrapTable('checkInvert');
checkindex選擇某一行,索引(index)從0開始$table.bootstrapTable('check', 1);
     - 請查看: check/uncheck
uncheckindex取消選擇某一行,索引(index)從0開始$table.bootstrapTable('uncheck', 1);
     - 請查看: check/uncheck
checkByparams通過數組選擇某一行,所需的參數如下:
     - field:所要選的字段名
     - values:所要選的那些值(數組)
官方沒,啊,有例紙:
- $("#table").bootstrapTable("checkBy", { field:"field_name",  values:["value1","value2","value3"]});
     - 請查看: checkBy/uncheckBy
uncheckByparams通過數組選擇某一行,所需的參數如下:
     - field:所要取消選擇的字段名
     - values:所要取消選擇的那些值(數組)
$("#table").bootstrapTable("uncheckBy", { field:"field_name",  values:["value1","value2","value3"]});
     - 請查看: checkBy/uncheckBy
resetViewparams改變表格的樣式,例如改變表格的高度(height)$table.bootstrapTable('resetView');
     - 請查看: resetView
resetWidthnone自動改變表頭和表腳(就譯成腳,任性)的寬度來適應每列的寬度$table.bootstrapTable('resetWidth');
destroynone銷毀表格 A!T!T!A!C!K!$table.bootstrapTable('destroy');
     - 請查看: destroy
showColumnfield顯示特定的列$table.bootstrapTable('showColumn', 'name');
     - 請查看: showColumn/hideCoulumn
hideColumnfield隱藏特定的列$table.bootstrapTable('hideColumn', 'name');
     - 請查看: showColumn/hideCoulumn
getHiddenColumns-獲取所有隱藏的列$table.bootstrapTable('getHiddenColumns');
getVisibleColumns-獲取所有顯示的列$table.bootstrapTable('getVisibleColumns');
scrollTovalue滾……到哪個位置,單位是'px',如果設為'bottom',嗖,恭喜你已到表尾$table.bootstrapTable('scrollTo', 0);
     - 請查看: scrollTo
getScrollPositionnone獲取當前所滾到的位置,單位你懂得,就是'px'$table.bootstrapTable('getScrollPosition');
filterBynone只能在客戶端(client-side,相對server-side)這邊用,過濾表中的數據
例如:
     - 可以設置{age:10}來只顯示age為10的數據
     - 不僅單的,你還可以雙飛,甚至多p,設置{age: 10, hairColor: ["blue", "red", "green"]} ,這樣你就得到了一群10歲的,頭發顏色為藍,紅,綠的……數據
$table.bootstrapTable('filterBy', {    id: [1, 2, 3] });
     - 請查看: filterBy
selectPagepage跳轉到特定的頁面$table.bootstrapTable('selectPage', 1);
     - 請查看: selectPage/prevPage/nextPage
prevPagenone跳轉到上一頁$table.bootstrapTable('prevPage');
     - 請查看: selectPage/prevPage/nextPage
nextPagenone跳轉到下一頁$table.bootstrapTable('nextPage');
     - 請查看: selectPage/prevPage/nextPage
togglePaginationnone詞窮,請看例紙$table.bootstrapTable('togglePagination');
     - 請查看: togglePagination
toggleViewnone改變視圖$table.bootstrapTable('toggleView');
     - 請查看: toggleView
expandRowindex可使用條件:detail view設為了true,不然無法使用視圖功能,這個也沒用
     - 通過參數index來展開此列的詳細視圖
- 請查看: expandRow-collapseRow
collapseRowindex可使用條件:detail view設為了true
     - 通過參數index來關閉此列的詳細視圖
- 請查看: expandRow-collapseRow
expandAllRows
新版有更改(原來為"expandAllRow"),下同
感謝 @zhq449681061
is subtable可使用條件:detail view設為了true
     - 展開所有列的詳細視圖
$table.bootstrapTable('expandAllRows');
     - 參考上面的實例,上面是展開(折疊)某一行的視圖,這個是所有行的
collapseAllRowsis 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…'“加載中,請等待……”
formatRecordsPerPagepageNumber'%s records per page'“每頁顯示 15  條記錄”
formatShowingRowspageFrom, pageTo, totalRows'Showing %s to %s of %s rows'“顯示第 1 到第 15 條記錄”
formatDetailPaginationtotalRows'Showing %s rows'“總共 15 條記錄”
formatSearch-'Search'“搜索”(占位符)
formatNoMatches-'No matching records found'“沒有找到匹配的記錄”
formatRefresh-'Refresh'“刷新”(鼠標懸浮顯示的文字,下同)
formatToggle-'Toggle'“切換”
formatColumns-'Columns'“列”


上述內容就是什么是Bootstrap Table API 中文版,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

灯塔市| 桦甸市| 万山特区| 景德镇市| 衡南县| 桂阳县| 沁水县| 班戈县| 秭归县| 台北市| 监利县| 安西县| 漯河市| 塘沽区| 东山县| 永平县| 偏关县| 泸溪县| 蒙自县| 特克斯县| 鄢陵县| 平昌县| 翁牛特旗| 兖州市| 德令哈市| 辽阳市| 融水| 陇南市| 田林县| 泰和县| 固始县| 滨海县| 万荣县| 北碚区| 含山县| 太保市| 洞口县| 满城县| 金川县| 竹北市| 新泰市|