bootstrap參數詳解

原創 疾跑的蜗牛 2018-08-27 19:35

剛開始學習bootstrap容易被裏面各種參數搞暈。此文無關實現，只是爲了記住各個參數的意義，方便開發的時候查詢。


表格參數Edit on GitHub

表格的參數定義在 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 The class name of the td elements which are sorted.  
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' or 'post'  
url data-url String undefined 服務器數據的加載地址  
cache data-cache Boolean true 設置爲 true 禁用 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 則顯示所有記錄。  
selectItemName data-select-item-name String 'btSelectItem' radio or checkbox 的字段名  
smartDisplay data-smart-display Boolean true True to display pagination or card view smartly.  
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 是否顯示 數據條數選擇框  
minimumCountColumns data-minimum-count-columns Number 1 當列數小於此值時，將隱藏內容列下拉框。  
idField data-id-field String undefined 指定主鍵列  
uniqueId data-unique-id String undefined Indicate an unique identifier for each row.  
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' or 'right'  
buttonsAlign data-buttons-align String 'right' 指定 按鈕 水平方向的位置。'left' or 'right'  
toolbarAlign data-toolbar-align String 'left' 指定 toolbar 水平方向的位置。'left' or 'right'  
paginationVAlign data-pagination-v-align String 'bottom' 指定 分頁條 在垂直方向的位置。'top' or 'bottom' or 'bonth'  
paginationHAlign data-pagination-h-align String 'right' 指定 分頁條 在水平方向的位置。'left' or 'right'  
paginationDetailHAlign data-pagination-detail-h-align String 'left' 指定 分頁詳細信息 在水平方向的位置。'left' or 'right'  
paginationPreText data-pagination-pre-text String '<' 指定分頁條中上一頁按鈕的圖標或文字  
paginationNextText data-pagination-next-text String '>' 指定分頁條中下一頁按鈕的圖標或文字  
clickToSelect data-click-to-select Boolean false 設置true 將在點擊行時，自動選擇rediobox 和 checkbox  
singleSelect data-single-select Boolean false 設置True 將禁止多選  
toolbar data-toolbar String undefined 一個jQuery 選擇器，指明自定義的toolbar 例如:
#toolbar, .toolbar.		  
checkboxHeader data-checkbox-header Boolean true 設置false 將在列頭隱藏check-all checkbox .  
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 The custom search function is executed instead of built-in search function, takes one parameters: 
text: the search text.
Example usage:
            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 The custom sort function is executed instead of built-in sort function, takes two parameters: 
sortName: the sort name.
sortOrder: the sort order.
Example usage:
            function customSort(sortName, sortOrder) {
                //Sort logic here.
                //You must use `this.data` array in order to sort the data. NO use `this.options.data`.
            }
 
 

列參數Edit on GitHub

 

 

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.
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 style="color:red">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.
 
 
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 Fires when user sort a column, the parameters contains: 
name: the sort column field name
order: the sort column order.
onCheck check.bs.table row Fires when user check a row, the parameters contains: 
row: the record corresponding to the clicked row. $element: the DOM element checked.
onUncheck uncheck.bs.table row Fires when user uncheck a row, the parameters contains: 
row: the record corresponding to the clicked row. $element: the DOM element unchecked.
onCheckAll check-all.bs.table rows Fires when user check all rows, the parameters contains: 
rows: array of records corresponding to newly checked rows.
onUncheckAll uncheck-all.bs.table rows Fires when user uncheck all rows, the parameters contains: 
rows: array of records corresponding to previously checked rows.
onCheckSome check-some.bs.table rows Fires when user check some rows, the parameters contains: 
rows: array of records corresponding to previously checked rows.
onUncheckSome uncheck-some.bs.table rows Fires when user uncheck some rows, the parameters contains: 
rows: array of records corresponding to previously checked rows.
onLoadSuccess load-success.bs.table data Fires when remote data is loaded successfully.
onLoadError load-error.bs.table status Fires when some errors occur to load remote data.
onColumnSwitch column-switch.bs.table field, checked Fires when switch the column visible.
onColumnSearch column-search.bs.table field, text Fires when search by column.
onPageChange page-change.bs.table number, size Fires when change the page number or page size.
onSearch search.bs.table text Fires when search the table.
onToggle toggle.bs.table cardView Fires when toggle the view of table.
onPreBody pre-body.bs.table data Fires before the table body is rendered
onPostBody post-body.bs.table none Fires after the table body is rendered and available in the DOM
onPostHeader post-header.bs.table none Fires after the table header is rendered and availble in the DOM
onExpandRow expand-row.bs.table index, row, $detail 當點擊詳細圖標展開詳細頁面的時候觸發。
onCollapseRow collapse-row.bs.table index, row 當點擊詳細圖片收起詳細頁面的時候觸發。
onRefreshOptions refresh-options.bs.table options Fires after refresh the options and before destroy and init the table.
onRefresh refresh.bs.table params Fires after the click the refresh button.
 

 

 

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

 
名稱
 
參數
 
描述
 
例子
 
getOptions none 返回表格的 Options。  
getSelections none 返回所選的行，當沒有選擇任何行的時候返回一個空數組。  
getAllSelections none 返回所有選擇的行，包括搜索過濾前的，當沒有選擇任何行的時候返回一個空數組。  
getData useCurrentPage 或者當前加載的數據。假如設置 useCurrentPage 爲 true，則返回當前頁的數據。  
getRowByUniqueId id 根據 uniqueId 獲取行數據。  
load data 加載數據到表格中，舊數據會被替換。  
showAllColumns none Show All the columns.  
hideAllColumns none Hide All the columns.  
append data 添加數據到表格在現有數據之後。  
prepend data 插入數據到表格在現有數據之前。  
remove params 從表格中刪除數據，包括兩個參數： field: 需要刪除的行的 field 名稱。
values: 需要刪除的行的值，類型爲數組。		  
removeAll - 刪除表格所有數據。  
removeByUniqueId id 根據 uniqueId 刪除指定的行。  
insertRow params 插入新行，參數包括：
index: 要插入的行的 index。
row: 行的數據，Object 對象。		  
updateRow params 更新指定的行，參數包括：
index: 要更新的行的 index。
row: 行的數據，Object 對象。		  
showRow params 顯示指定的行，參數包括：
index: 要更新的行的 index 或者 uniqueId。
isIdField: 指定 index 是否爲 uniqueid。		  
hideRow params 顯示指定的行，參數包括：
index: 要更新的行的 index。
uniqueId: 或者要更新的行的 uniqueid。		  
getRowsHidden show Get all rows hidden and if you pass the show parameter true the rows will be shown again, otherwise, the method only will return the rows hidden.
mergeCells options Merge some cells to one cell, the options contains following properties: 
index: the row index. 
field: the field name.
rowspan: the rowspan count to be merged. 
colspan: the colspan count to be merged.
updateCell params Update one cell, the params contains following properties: 
index: the row index. 
field: the field name.
value: the new field value.
refresh params Refresh the remote server data, you can set {silent: true} to refresh the data silently, and set {url: newUrl} to change the url. To supply query params specific to this request, set {query: {foo: 'bar'}}
refreshOptions options Refresh the options
resetSearch text Set the search text
showLoading none Show loading status.
hideLoading none Hide loading status.
checkAll none Check all current page rows.
uncheckAll none Uncheck all current page rows.
check index Check a row, the row index start with 0.
uncheck index Uncheck a row, the row index start with 0.
checkBy params Check a row by array of values, the params contains:
field: name of the field used to find records
values: array of values for rows to check
Example: 
$("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]})
uncheckBy params Uncheck a row by array of values, the params contains:
field: name of the field used to find records
values: array of values for rows to uncheck
Example: 
$("#table").bootstrapTable("uncheckBy", {field:"field_name", values:["value1","value2","value3"]})
resetView params Reset the bootstrap table view, for example reset the table height.
resetWidth none Resizes header and footer to fit current columns width
destroy none Destroy the bootstrap table.
showColumn field Show the specified column.
hideColumn field Hide the specified column.
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 Expand the row that has the index passed by parameter if the detail view option is set to True.
collapseRow index Collapse the row that has the index passed by parameter if the detail view option is set to True.
expandAllRows is subtable Expand all rows if the detail view option is set to True.
collapseAllRows is subtable Collapse all rows if the detail view option is set to True.
 

多語言Edit on GitHub

 

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'
 

 


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Jquery選擇器集錦

疾跑的蜗牛 2018-08-27 19:35:01