bootstrap table表格屬性、列屬性、事件、方法

時間  2019-11-11
標籤 bootstrap table 表格 屬性 事件 方法 欄目 Bootstarp 简体版
原文   原文鏈接

留存一份，原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/css

表格參數

表格的參數定義在 jQuery.fn.bootstrapTable.defaults。html

       

名稱 標籤 類型 默認 描述
- data-toggle String 'table' 不用寫 JavaScript 直接啓用表格。
classes data-classes String 'table table-hover' 表格的類名稱。默認狀況下，表格是有邊框的，你能夠添加 'table-no-bordered' 來刪除表格的邊框樣式。
sortClass data-sort-class String undefined 被排序的td元素的類名。
height data-height Number undefined 定義表格的高度。
undefinedText data-undefined-text String '-' 當數據爲 undefined 時顯示的字符。
striped data-striped Boolean false 設置爲 true 會有隔行變色效果。
sortName data-sort-name String undefined 定義排序列，經過url方式獲取數據填寫字段名，不然填寫下標。
sortOrder data-sort-order String 'asc' 定義排序方式，'asc' 或者 'desc'。
sortStable data-sort-stable Boolean false 設置爲 true 將得到穩定的排序，咱們會添加\_position屬性到 row 數據中。
iconsPrefix data-icons-prefix String 'glyphicon' 定義字體庫 ('Glyphicon' or 'fa' for FontAwesome)，使用"fa"時需引用 FontAwesome，而且配合 icons 屬性實現效果。
Glyphicon 集成於Bootstrap可無償使用，參考： http://glyphicons.com/
FontAwesome 參考： http://fortawesome.github.io/
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'
}		 自定義圖標
columns - Array [] 列配置項，詳情請查看 列參數 表格.
data - Array [] 加載json格式的數據。
ajax data-ajax Function undefined 自定義 AJAX 方法，須實現 jQuery AJAX API。
method data-method String 'get' 服務器數據的請求方式 'get' 或 'post'。
url data-url String undefined 服務器數據的加載地址。
cache data-cache Boolean true 設置爲 false 禁用 AJAX 數據緩存。
contentType data-content-type String 'application/json' 發送到服務器的數據編碼類型。
dataType data-data-type String 'json' 服務器返回的數據類型。
ajaxOptions data-ajax-options Object {} 提交ajax請求時的附加參數，可用參數列請查看http://api.jquery.com/jQuery.ajax.
queryParams data-query-params Function function(params) {
return params;
}		 請求服務器數據時，你能夠經過重寫參數的方式添加一些額外的參數，例如 toolbar 中的參數 若是 queryParamsType = 'limit' ,返回參數必須包含
limit, offset, search, sort, order 不然, 須要包含: 
pageSize, pageNumber, searchText, sortName, sortOrder. 
返回false將會終止請求。
queryParamsType data-query-params-type String 'limit' 設置爲 'limit' 則會發送符合 RESTFul 格式的參數。
responseHandler data-response-handler Function function(res) {
return res;
}		 加載服務器數據以前的處理程序，能夠用來格式化數據。
參數：res爲從服務器請求到的數據。
pagination data-pagination Boolean false 設置爲 true 會在表格底部顯示分頁條。
paginationLoop data-pagination-loop Boolean true 設置爲 true 啓用分頁條無限循環的功能。
onlyInfoPagination data-only-info-pagination Boolean false 設置爲 true 只顯示總數據數，而不顯示分頁按鈕。須要設置 pagination='true'。
sidePagination data-side-pagination String 'client' 設置在哪裏進行分頁，可選值爲 'client' 或者 'server'。設置 'server'時，必須設置服務器數據地址（url）或者重寫ajax方法。
pageNumber data-page-number Number 1 若是設置了分頁，首頁頁碼。
pageSize data-page-size Number 10 若是設置了分頁，頁面數據條數。
pageList data-page-list Array [10, 25, 50, 100, All] 若是設置了分頁，設置可供選擇的頁面數據條數。設置爲 All 或者 Unlimited，則顯示全部記錄。
selectItemName data-select-item-name String 'btSelectItem' radio 或者 checkbox 的字段 name 名。
smartDisplay data-smart-display Boolean true 設置爲 true 是程序自動判斷顯示分頁信息和 card 視圖。
escape data-escape Boolean false 轉義HTML字符串，替換 &, <, >, ", \`, 和 ' 字符。
search data-search Boolean false 是否啓用搜索框。
searchOnEnterKey data-search-on-enter-key Boolean false 設置爲 true時，按回車觸發搜索方法，不然自動觸發搜索方法。
strictSearch data-strict-search Boolean false 設置爲 true啓用全匹配搜索，不然爲模糊搜索。
searchText data-search-text String '' 初始化搜索文字。
searchTimeOut data-search-time-out Number 500 設置搜索超時時間。
trimOnSearch data-trim-on-search Boolean true 設置爲 true 將自動去掉搜索字符的先後空格。
showHeader data-show-header Boolean true 是否顯示列頭。
showFooter data-show-footer Boolean false 是否顯示列腳。
showColumns data-show-columns Boolean false 是否顯示內容列下拉框。
showRefresh data-show-refresh Boolean false 是否顯示刷新按鈕。
showToggle data-show-toggle Boolean false 是否顯示切換視圖（table/card）按鈕。
showPaginationSwitch data-show-pagination-switch Boolean false 是否顯示切換分頁按鈕。
showFullscreen data-show-fullscreen Boolean false 是否顯示全屏按鈕。
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 設置爲 true將顯示card視圖，適用於移動設備。不然爲table試圖，適用於pc端。
detailView data-detail-view Boolean false 設置爲 true 能夠顯示詳細頁面模式。
detailFormatter data-detail-formatter Function function(index, row) {
return '';
}		 格式化詳細頁面模式的視圖。
searchAlign data-search-align String 'right' 指定 搜索框 水平方向的位置。'left' 或 'right'。
buttonsAlign data-buttons-align String 'right' 指定 按鈕欄 水平方向的位置。'left' 或 'right'。
toolbarAlign data-toolbar-align String 'left' 指定 toolbar 水平方向的位置。'left' 或 'right'。
paginationVAlign data-pagination-v-align String 'bottom' 指定 分頁條 在垂直方向的位置。'top'，'bottom' 或 'both'。
paginationHAlign data-pagination-h-align String 'right' 指定 分頁條 在水平方向的位置。'left' 或 'right'。
paginationDetailHAlign data-pagination-detail-h-align String 'left' 指定 分頁詳細信息 在水平方向的位置。'left' 或 'right'。
paginationPreText data-pagination-pre-text String '<' 指定分頁條中上一頁按鈕的圖標或文字。
paginationNextText data-pagination-next-text String '>' 指定分頁條中下一頁按鈕的圖標或文字。
clickToSelect data-click-to-select Boolean false 設置 true 將在點擊行時，自動選擇 rediobox 和 checkbox。
ignoreClickToSelectOn data-ignore-click-to-select-on Function { return $.inArray(element.tagName, ['A', 'BUTTON']); } 包含一個參數：
element: 點擊的元素。
返回 true 是點擊事件會被忽略，返回 false 將會自動選中。該選項只有在 clickToSelect 爲 true 時才生效。
singleSelect data-single-select Boolean false 設置 true 將禁止多選。
toolbar data-toolbar String undefined 一個jQuery 選擇器，指明自定義的 toolbar。例如:
#toolbar, .toolbar.
buttonsToolbar data-buttons-toolbar String | Node undefined 一個jQuery 選擇器，指明自定義的 buttons toolbar。例如:
    #buttons-toolbar, .buttons-toolbar 或 DOM 節點。
checkboxHeader data-checkbox-header Boolean true 設置 false 將在列頭隱藏全選複選框。
maintainSelected data-maintain-selected Boolean false 設置爲 true 在點擊分頁按鈕或搜索按鈕時，將記住checkbox的選擇項。
sortable data-sortable Boolean true 設置爲false 將禁止全部列的排序。
silentSort data-silent-sort Boolean true 設置爲 false 將在點擊分頁按鈕時，自動記住排序項。僅在 sidePagination設置爲 server時生效。
rowStyle data-row-style Function function(row,index) {
return class;
}		 自定義行樣式 參數爲：
row: 行數據
index: 行下標
返回值能夠爲class或者css
rowAttributes data-row-attributes Function function(row,index) {
return attributes;
}		 自定義行屬性 參數爲：
row: 行數據
index: 行下標
返回值能夠爲class或者css 支持全部自定義屬性
customSearch data-custom-search Function $.noop 自定義搜索方法來替代內置的搜索功能，它包含一個參數：
        text：搜索文字。
用法示例：
        function customSearch(text) {
            //Search logic here.
            //You must use `this.data` array in order to filter the data. NO use `this.options.data`.
        }
customSort data-custom-sort Function $.noop 自定義排序方法來替代內置的搜索功能，它包含一個參數：
sortName: 排序名。
sortOrder: 排序順序。
用法示例：
        function customSort(sortName, sortOrder) {
            //Sort logic here.
            //You must use `this.data` array in order to sort the data. NO use `this.options.data`.
        }

列參數

The column options is defined in jQuery.fn.bootstrapTable.columnDefaults.jquery

Name Attribute Type Default Description
radio data-radio Boolean false True to show a radio. The radio column has fixed width.
checkbox data-checkbox Boolean false True to show a checkbox. The checkbox column has fixed width.
field data-field String undefined The column field name.
title data-title String undefined The column title text.
titleTooltip data-title-tooltip String undefined The column title tooltip text. This option also support the title HTML attribute
class class / data-class String undefined The column class name.
rowspan rowspan / data-rowspan Number undefined Indicate how many rows a cell should take up.
colspan colspan / data-colspan Number undefined Indicate how many columns a cell should take up.
align data-align String undefined Indicate how to align the column data. 'left', 'right', 'center' can be used.
halign data-halign String undefined Indicate how to align the table header. 'left', 'right', 'center' can be used.
falign data-falign String undefined Indicate how to align the table footer. 'left', 'right', 'center' can be used.
valign data-valign String undefined Indicate how to align the cell data. 'top', 'middle', 'bottom' can be used.
width data-width Number {Pixels or Percentage} undefined The width of column. If not defined, the width will auto expand to fit its contents. Also you can add '%' to your number and the bootstrapTable will use the percentage unit, otherwise, you can add or no the 'px' to your number and then the bootstrapTable will use the pixels
sortable data-sortable Boolean false True to allow the column can be sorted.
order data-order String 'asc' The default sort order, can only be 'asc' or 'desc'.
visible data-visible Boolean true False to hide the columns item.
cardVisible data-card-visible Boolean true False to hide the columns item in card view state.
switchable data-switchable Boolean true False to disable the switchable of columns item.
clickToSelect data-click-to-select Boolean true True to select checkbox or radiobox when the column is clicked.
formatter data-formatter Function undefined The context (this) is the column Object. 
The cell formatter function, take three parameters: 
value: the field value. 
row: the row record data.
index: the row index.
footerFormatter data-footer-formatter Function undefined The context (this) is the column Object. 
The function, take one parameter: 
data: Array of all the data rows. 
the function should return a string with the text to show in the footer cell.
events data-events Object undefined The cell events listener when you use formatter function, take three parameters: 
event: the jQuery event. 
value: the field value. 
row: the row record data.
index: the row index.
sorter data-sorter Function undefined The custom field sort function that used to do local sorting, take two parameters: 
a: the first field value.
b: the second field value.
rowA: the first row.
rowB: the second row.
sortName data-sort-name String undefined Provide a customizable sort-name, not the default sort-name in the header, or the field name of the column. For example, a column might display the value of fieldName of "html" such as "<b><span >abc</span></b>", but a fieldName to sort is "content" with the value of "abc".
cellStyle data-cell-style Function undefined The cell style formatter function, take three parameters: 
value: the field value.
row: the row record data.
index: the row index.
field: the row field.
Support classes or css.
searchable data-searchable Boolean true True to search data for this column.
searchFormatter data-search-formatter Boolean true True to search use formated data.
escape data-escape Boolean false Escapes a string for insertion into HTML, replacing &, <, >, ", \`, and ' characters.
showSelectTitle data-show-select-title Boolean false True to show the title of column with 'radio' or 'singleSelect' 'checkbox' option.

事件

Option 事件 jQuery 事件 參數 描述
onAll all.bs.table name, args 全部的事件都會觸發該事件，參數包括：
name：事件名，
args：事件的參數。
onClickRow click-row.bs.table row, $element 當用戶點擊某一行的時候觸發，參數包括：
row：點擊行的數據，
$element：tr 元素，
field：點擊列的 field 名稱。
onDblClickRow dbl-click-row.bs.table row, $element 當用戶雙擊某一行的時候觸發，參數包括：
row：點擊行的數據，
$element：tr 元素，
field：點擊列的 field 名稱。
onClickCell click-cell.bs.table field, value, row, $element 當用戶點擊某一列的時候觸發，參數包括：
field：點擊列的 field 名稱，
value：點擊列的 value 值，
row：點擊列的整行數據，
$element：td 元素。
onDblClickCell dbl-click-cell.bs.table field, value, row, $element 當用戶雙擊某一列的時候觸發，參數包括：
field：點擊列的 field 名稱，
value：點擊列的 value 值，
row：點擊列的整行數據，
$element：td 元素。
onSort sort.bs.table name, order 當用戶對某列進行排序時觸發，參數包括：
name：排序列的 filed 名稱，
order：排序順序。
onCheck check.bs.table row 當用戶選擇某一行時觸發，參數包含：
        row：與點擊行對應的記錄，
        $element：選擇的DOM元素。
onUncheck uncheck.bs.table row 當用戶反選某一行時觸發，參數包含：
row：與點擊行對應的記錄，
        $element：選擇的DOM元素。
onCheckAll check-all.bs.table rows 當用戶全選全部的行時觸發，參數包含：
rows：最新選擇的全部行的數組。
onUncheckAll uncheck-all.bs.table rows 當用戶反選全部的行時觸發，參數包含：
rows：最新選擇的全部行的數組。
onCheckSome check-some.bs.table rows 當用戶選擇某些行時觸發，參數包含：
rows：相對於以前選擇的行的數組。
onUncheckSome uncheck-some.bs.table rows 當用戶反選某些行時觸發，參數包含：
rows：相對於以前選擇的行的數組。
onLoadSuccess load-success.bs.table data 遠程數據加載成功時觸發成功。
onLoadError load-error.bs.table status 遠程數據加載失敗時觸發成功。
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 在表格 body 渲染以前觸發。
onPostBody post-body.bs.table none 在表格 body 渲染完成後觸發。
onPostHeader post-header.bs.table none 在表格 header 渲染完成後觸發。
onExpandRow expand-row.bs.table index, row, $detail 當點擊詳細圖標展開詳細頁面的時候觸發。
onCollapseRow collapse-row.bs.table index, row 當點擊詳細圖片收起詳細頁面的時候觸發。
onRefreshOptions refresh-options.bs.table options 刷新選項以後並在銷燬和初始化表以前觸發。
onRefresh refresh.bs.table params 點擊刷新按鈕後觸發。
onScrollBody scroll-body.bs.table   表格 body 滾動時觸發。

方法

使用方法的語法：$('#table').bootstrapTable('method', parameter);。git

名稱 參數 描述 例子
getOptions none 返回表格的 Options。 getOptions
getSelections none 返回所選的行，當沒有選擇任何行的時候返回一個空數組。 getSelections
getAllSelections none 返回全部選擇的行，包括搜索過濾前的，當沒有選擇任何行的時候返回一個空數組。 getAllSelections
getData useCurrentPage 或者當前加載的數據。假如設置 useCurrentPage 爲 true，則返回當前頁的數據。 getData
getRowByUniqueId id 根據 uniqueId 獲取行數據。 getRowByUniqueId
load data 加載數據到表格中，舊數據會被替換。 load
showAllColumns none 顯示全部列。 showAllColumns
hideAllColumns none 隱藏全部列。 hidAllColumns
append data 添加數據到表格在現有數據以後。 append
prepend data 插入數據到表格在現有數據以前。 prepend
remove params 從表格中刪除數據，包括兩個參數： field: 須要刪除的行的 field 名稱，
values: 須要刪除的行的值，類型爲數組。		 remove
removeAll - 刪除表格全部數據。 removeAll
removeByUniqueId id 根據 uniqueId 刪除指定的行。 removeByUniqueId
insertRow params 插入新行，參數包括：
index: 要插入的行的 index，
row: 行的數據，Object 對象。		 insertRow
updateRow params 更新指定的行，參數包括：
index: 要更新的行的 index，
row: 行的數據，Object 對象。		 updateRow
showRow params 顯示指定的行，參數包括：
index: 要更新的行的 index 或者 uniqueId，
isIdField: 指定 index 是否爲 uniqueid。		 showRow-hideRow
hideRow params 顯示指定的行，參數包括：
index: 要更新的行的 index，
uniqueId: 或者要更新的行的 uniqueid。		 showRow-hideRow
getHiddenRows show 獲取全部隱藏的行，若是show參數爲true，行將再次顯示，不然，只返回隱藏的行。
mergeCells options 將某些單元格合併到一個單元格，選項包含如下屬性： 
index: 行索引，
field: 字段名稱，
rowspan: 要合併的rowspan數量，
colspan: 要合併的colspan數量。
updateCell params 更新一個單元格，params包含如下屬性：
index: 行索引。
field: 字段名稱。
value: 新字段值。
refresh params 刷新遠程服務器數據，能夠設置{silent: true}以靜默方式刷新數據，並設置{url: newUrl}更改URL。 要提供特定於此請求的查詢參數，請設置{query: {foo: 'bar'}}。
refreshOptions options 刷新選項。
resetSearch text 設置搜索文本。
showLoading none 顯示加載狀態。
hideLoading none 隱藏加載狀態。
checkAll none 選中當前頁面全部行。
uncheckAll none 取消選中當前頁面全部行。
check index 選中某一行，行索引從0開始。
uncheck index 取消選中某一行，行索引從0開始。
checkBy params 按值或數組選中某行，參數包含：
field: 用於查找記錄的字段的名稱，
values: 要檢查的行的值數組。
例子: 
$("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]})
uncheckBy params 按值數組取消選中某行，參數包含：
field: 用於查找記錄的字段的名稱，
values: 要檢查的行的值數組。
例子: 
$("#table").bootstrapTable("uncheckBy", {field:"field_name", values:["value1","value2","value3"]})
resetView params 重置引導表視圖，例如重置表高度。
resetWidth none 調整頁眉和頁腳的大小以適合當前列寬度。
destroy none 銷燬表。
showColumn field 顯示指定的列。
hideColumn field 隱藏指定的列。
getHiddenColumns - 獲取隱藏的列。
getVisibleColumns - 獲取可見列。
scrollTo value 滾動到指定位置，單位爲 px，設置 'bottom' 表示跳到最後。
getScrollPosition none 獲取當前滾動條的位置，單位爲 px。
filterBy params （只能用於 client 端）過濾表格數據， 你能夠經過過濾{age: 10}來顯示 age 等於 10 的數據。
selectPage page 跳到指定的頁。
prevPage none 跳到上一頁。
nextPage none 跳到下一頁。
togglePagination none 切換分頁選項。
toggleView none 切換 card/table 視圖
expandRow index 若是詳細視圖選項設置爲True，可展開索引爲 index 的行。
collapseRow index 若是詳細視圖選項設置爲True，可收起索引爲 index 的行。.
expandAllRows none 若是詳細視圖選項設置爲True，可展開全部行。
collapseAllRows none 若是詳細視圖選項設置爲True，可收起開全部行。

多語言

Name Parameter Default
formatLoadingMessage - 'Loading, please wait…'
formatRecordsPerPage pageNumber '%s records per page'
formatShowingRows pageFrom, pageTo, totalRows 'Showing %s to %s of %s rows'
formatDetailPagination totalRows 'Showing %s rows'
formatSearch - 'Search'
formatNoMatches - 'No matching records found'
formatRefresh - 'Refresh'
formatToggle - 'Toggle'
formatColumns - 'Columns'
formatAllRows - 'All'
formatFullscreen - 'Fullscreen'

PS:github

We can import all locale files what you need:ajax

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

And then use JavaScript to switch locale:json

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