碼上歡樂
相關內容    簡體    繁體

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

本文轉載自   查看原文   2018-09-09 22:16   2969 

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

表格參數

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

       

名稱 標簽 類型 默認 描述
- 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.

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);。

名稱 參數 描述 例子
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:

We can import all locale files what you need:

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

And then use JavaScript to switch locale:

$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['en-US']); // $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']); // ...

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 js Table單擊事件，獲取表格行和列及單元格數值的方法 bootstrap table 列求和 動態Bootstrap Table 表格 bootstrap datepicker屬性設置 以及方法和事件 bootstrap Table實現列排序 bootstrap table刷新表格記錄 對Bootstrap Table 表格進行封裝 bootstrap-table表格導出 【Bootstrap】 bootstrap-table表格組件 vue--Element-UI Table 表格指定列添加點擊事件
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM