擴充套件Bootstrap-table外掛使其支援通過下拉框快速跳轉至任意頁數
前言
最近專案使用的Metronic前端框架,表格外掛採用bootstrap-table V1.11.1(http://bootstrap-table.wenzhixin.net.cn/zh-cn/),是一款功能強大的表格外掛,非常適合在後臺管理系統裡使用。在此感謝作者將外掛開源(https://github.com/wenzhixin/bootstrap-table/)。
專案中需求,當資料總頁數>=10時,在分頁導航最後面顯示select,點選跳轉至任意頁數。該外掛是不支援的,需要自己進行擴充套件。
開始動手
這裡需要說明一下,下面的程式碼行數是能作為參考,可根據截圖所示附近程式碼進行查詢。
1、js程式碼321行左右,增加如下程式碼,作為外掛選項,控制是否開啟這個功能,預設true
paginationShowPageGo: true,
2、js程式碼1316行左右,增加如下程式碼,
$pagego,
3、js程式碼1488行左右,進行修改,並增加如下程式碼,就是當總頁數>=10且paginationShowPageGo===true時,在下一頁【>】按鈕後面,增加li,li裡拼裝一個select,select裡值列表為1至總頁數。
if(this.totalPages>= 10 && this.options.paginationShowPageGo){
html.push('<li class="bootstrap-table-page-go">' ,
'<select>');
for(var goi=1;goi<=this.totalPages;goi++){
html.push('<option value="'+goi+'"');
if(goi === this.options.pageNumber){
html.push(' selected');
}
html.push('>'+goi+'</option>' );
}
html.push('</select>','</li>');
}
4、js程式碼1516行左右,增加如下程式碼,$pagego表示上述的li
$pagego = this.$pagination.find('.bootstrap-table-page-go');
5、js程式碼1548行左右,增加如下程式碼,為select繫結change事件
$pagego.find('select').off('change').on('change', $.proxy(this.onPageGo, this));
6、js程式碼1625行左右,增加如下程式碼,change事件的程式碼
BootstrapTable.prototype.onPageGo = function (event) {
if (this.options.pageNumber === +$(event.currentTarget).val()) {
return;
}
this.options.pageNumber = +$(event.currentTarget).val();
this.updatePagination(event);
return false;
};
7、通過以上幾步完成了js的程式碼的新增,這一步要給select增加樣式,使其與其他按鈕統一。
css程式碼最後新增
.bootstrap-table .bootstrap-table-page-go select{
height: 34px;
border-left: none;
border-color: #dddddd;
padding:0 5px;
color: #337ab7;
}
外掛擴充套件後的原始碼下載
從這裡http://download.csdn.net/download/lhtzbj12/9933559 下載。
原始碼中包括了筆者增加了另外兩項擴充套件
1. 使用Bootstrap-select對上述select進行美化,需要在頁面中引用Bootstrap-select,並將Bootstrap-table的選項paginationUseBSSelect設定為true
2. 根據Metronic樣式,將Bootstrap-table裡用於多選和單選的checkbox和radio進行裝飾。