1. 程式人生 > >bootstrap引數詳解

bootstrap引數詳解

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

表格的引數定義在 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可免費使用 參考:
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 {}
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`.
            }
            

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.
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'

相關推薦

bootstrap引數

剛開始學習bootstrap容易被裡面各種引數搞暈。此文無關實現,只是為了記住各個引數的意義,方便開發的時候查詢。 表格的引數定義在 jQuery.fn.bootstrapTable.defaul

關於bootstrap-datetimepicker 外掛的配置引數

所有需要"Date" 的選項都可以處理Date 物件; a String formatted according to the given format; or a timedelta relative to today, eg '-1d', '+6m +1y', etc, where valid uni

Bootstrap Table 表格引數

{   paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',   paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',   refresh: 'glyphicon

mencoder和ffmpeg引數2 (轉)

有很多軟體能夠擷取影片影象、合併影象,但如果影片太多,比如視訊網站為使用者上傳的影象生成預覽圖之類的,人工在gui方式下操作就不可取了,我們需要在命令列方式下來擷取、合併。 首先,擷取影片影象使用最多的就是mplayer或者ffmpeg,我用mplayer比較熟,本文就以此為例了,ffmpe

學習筆記--JDK中的URLConnection引數

JDK中的URLConnection引數詳解 針對JDK中的URLConnection連線Servlet的問題,網上有雖然有所涉及,但是隻是說明了某一個或幾個問題,是以FAQ的方式來解決的,而且比較零散,現在對這個類的使用就本人在專案中的使用經驗做如下總結:  1:>

MySQL 8.0.12 mysqlbinlog命令引數

1.版本號不同: # /usr/local/mysql57/bin/mysqlbinlog --version /usr/local/mysql57/bin/mysqlbinlog Ver 3.4 for linux-glibc2.12 at x86_64 # /usr/local/mysql8

maven配置引數

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apach

資料庫mysqldump指令引數

資料庫mysqldump命令引數詳解 --all-databases , -A 匯出全部資料庫。 mysqldump -uroot -p --all-databases --all-tablespaces , -Y 匯出全部表空間。 mysqldump -uroot -p --all-databa

sklearn 神經網路MLPclassifier引數

class sklearn.neural_network.MLPClassifier(hidden_layer_sizes=(100, ), activation=’relu’, solver=’adam’, alpha=0.0001, batch_size=’auto’, learnin

jQuery非同步請求ajax()之complete引數

請求完成後回撥函式 (請求success 和 error之後均呼叫)。這個回撥函式得到2個引數:XMLHTTPRequest) 物件和一個描述請求狀態的字串("success", "notmodified", "nocontent","error", "timeout", "abort", 或者 "

配置 sysctl.conf 系統引數

配置 sysctl.conf 系統引數(vi /etc/sysctl.conf) 引數: 1.記憶體&快取 kernel.sysrq = 0 核心設定驗證為0 kernel.core_uses_pid = 1 控制核心的系統請求除錯功能開啟,控制核心轉儲附加PID到核心檔名,適用於多

Springboot專案java -jar 啟動jar包引數

命令例項: nohup java -Xms500m -Xmx500m -Xmn250m -Xss256k -server -XX:+HeapDumpOnOutOfMemoryError -jar $JAR_PATH/test-0.0.1-SNAPSHOT.jar --spring.profile

Post方式與引數

定義和用法 enctype 屬性規定在傳送到伺服器之前應該如何對錶單資料進行編碼。 預設地,表單資料會編碼為 "application/x-www-form-urlencoded"。就是說,在傳送到伺服器之前,所有字元都會進行編碼(空格轉換為 "+" 加號,特殊符號轉換為 ASCII HEX 值

RabbitMQ-Channel引數

- channel.exchangeDeclare(): type:有direct、fanout、topic三種 durable:true、false true:伺服器重啟會保留下來Exchange。警告:僅設定此選項,不代表訊息持久化。即不保證重啟後訊息還在。原文:true if we

php curl引數

curl_close — 關閉一個cURL會話curl_copy_handle — 複製一個cURL控制代碼和它的所有選項curl_errno — 返回最後一次的錯誤號curl_error — 返回一個保護當前會話最近一次錯誤的字串curl_escape — 使用 URL 編碼給定的字串curl_exec —

部署FTP服務、FTP服務主配置檔案引數

FTP服務 概述: FTP(File Transfer Protocol),是檔案傳輸協議的簡稱。用於Internet上的控制檔案的雙向傳輸。同時, 它也是一個應用程式(Application),使用者可以通過它把自己的PC機與世界各地所有執行FTP協議的伺服器相連, 訪問伺服器上的

JVM配置引數

一、堆引數設定 -XX:+PrintGC 使用這個引數,虛擬機器啟動後,只要遇到GC就會列印日誌 -XX:+UseSerialGC 配置序列回收器 -XX:+PrintGCDetails 可以檢視詳細資訊,包括各個區的情況 -Xms:設定Java程式啟動

HTML——Header:請求頭引數

  Header 解釋 示例 Accept 指定客戶端能夠接收的內容型別 Accept: text/plain, text/html,application/json

U_boot 的 bootcmd 和bootargs引數

U-boot的環境變數值得注意的有兩個: bootcmd 和bootargs。 bootcmd     前面有說過bootcmd是自動啟動時預設執行的一些命令,因此你可以在當前環境中定義各種不同配置,不同環境的引數設定,然後設定bootcmd為你經常使用的那種引數。

Java命令列引數

最近在學習Gradle相關的知識。下載Gradle原始碼後,未能成功匯入IDEA執行。所以想另闢蹊徑,通過命令列來除錯執行Gradle程式。經過一番搜尋和思考。發現Java通過jdwp可以遠端除錯java程式的。在實踐的過程中,對一些命令列引數的含義不是特別清楚。故有此篇文章。 1.