碼上快樂

相關內容    簡體    繁體

Bootstrap結合BootstrapTable的使用，分為兩種模試顯示列表。 自適應表格，自定義行列

本文轉載自   查看原文   2016-09-07 16:15   76301 

引用的css：

 

 <link href="@Url.Content("~/Css/bootstrap.min.css")" rel="stylesheet" type="text/css" />

  <link href="@Url.Content("~/Css/bootstrap-table.css")" rel="stylesheet" type="text/css" />

引用的JS：

<script src="../../Scripts/jquery.js" type="text/javascript"></script>

<script src="../../Scripts/bootstrap.min.js" type="text/javascript"></script>

<script src="../../Scripts/bootstrap-table.js" type="text/javascript"></script>

<script src="../../Scripts/bootstrap-table-zh-CN.js" type="text/javascript"></script>

常用方法：

刷新表格：$table.bootstrapTable('refresh');

獲取選擇的行：$table.bootstrapTable('getSelections');

 

 

$(function () {

    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();

    //2.初始化Button的點擊事件
    var oButtonInit = new ButtonInit();
    oButtonInit.Init();

});


var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {

　　　　function NameFormatter(value, row, index) {
　　　　return [
　　　　　　'<span>'+value+'</span>'
　　　　　　].join('');
　　　　};

        $('#tb_departments').bootstrapTable({
            url: '/Home/GetDepartment',         //請求后台的URL（*）
            method: 'get',                      //請求方式（*）
            toolbar: '#toolbar',                //工具按鈕用哪個容器
            striped: true,                      //是否顯示行間隔色
            cache: false,                       //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
            pagination: true,                   //是否顯示分頁（*）
            sortable: false,                     //是否啟用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//傳遞參數（*）
            sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）
            pageNumber:1,                       //初始化加載第一頁，默認第一頁
            pageSize: 10,                       //每頁的記錄行數（*）
            pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
            search: true,                       //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大
            strictSearch: true,
            showColumns: true,                  //是否顯示所有的列
            showRefresh: true,                  //是否顯示刷新按鈕
            minimumCountColumns: 2,             //最少允許的列數
            clickToSelect: true,                //是否啟用點擊選中行
            height: 500,                        //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度
            uniqueId: "ID",                     //每一行的唯一標識，一般為主鍵列
            showToggle:true,                    //是否顯示詳細視圖和列表視圖的切換按鈕
            cardView: false,                    //是否顯示詳細視圖
            detailView: false,                   //是否顯示父子表
            columns: [{
                checkbox: true
            }, {
                field: 'Name',
                title: '部門名稱',
　　　　　　　　　formatter: NameFormatter
            }, {
                field: 'ParentName',
                title: '上級部門'
            }, {
                field: 'Level',
                title: '部門級別'
            }, {
                field: 'Desc',
                title: '描述'
            }, ]
        });
    };

    //得到查詢的參數
    oTableInit.queryParams = function (params) {
        var temp = {   //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
            limit: params.limit,   //頁面大小
            offset: params.offset,  //頁碼
            departmentname: $("#txt_search_departmentname").val(),
            statu: $("#txt_search_statu").val()
        };
        return temp;
    };
    return oTableInit;
};


var ButtonInit = function () {
    var oInit = new Object();
    var postdata = {};

    oInit.Init = function () {
        //初始化頁面上面的按鈕事件
    };

    return oInit;
};

使用refreshOoption來更新頁碼到1 

$('#table').bootstrapTable('refreshOptions',{pageNumber:1,pageSize:10});

表格參數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'
 

 

 

Copy 
<script src="bootstrap-table-en-US.js"></script> <script src="bootstrap-table-zh-CN.js"></script> ...
Copy 
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['en-US']); // $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']); // ...

 

 


免責聲明！

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



猜您在找 BootstrapTable（附源碼） Bootstrap結合BootstrapTable的使用，分為兩種模試顯示列表。 JSP 定義行列數表單創建表格 Android Studio gridview 控件使用自定義Adapter, 九宮格items自適應全屏顯示 手機端自適應顯示樣式設置（兩種方式） iOS 自定義layer的兩種方式 Vant 擴展圖標 自定義圖標，以及兩種使用方式。方式2使用方便 實現CListCtrl自定義行高 Spring中使用兩種Aware接口自定義獲取bean 兩種自定義對話框的方法 自定義底部tabbar的兩種方式
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM