扩展Bootstrap-table插件使其支持通过下拉框快速跳转至任意页数

不念不忘少年蓝@ 2021-09-14 02:42 593阅读 0赞

# 前言 #

最近项目使用的Metronic前端框架，表格插件采用bootstrap-table V1.11.1（[http://bootstrap-table.wenzhixin.net.cn/zh-cn/][http_bootstrap-table.wenzhixin.net.cn_zh-cn]），是一款功能强大的表格插件，非常适合在后台管理系统里使用。在此感谢作者将插件开源（[https://github.com/wenzhixin/bootstrap-table/][https_github.com_wenzhixin_bootstrap-table]）。  
项目中需求，当数据总页数>=10时，在分页导航最后面显示select，点击跳转至任意页数。该插件是不支持的，需要自己进行扩展。

# 开始动手 #

这里需要说明一下，下面的代码行数是能作为参考，可根据截图所示附近代码进行查找。  
1、js代码321行左右，增加如下代码，作为插件选项，控制是否开启这个功能，默认true

paginationShowPageGo: true,

![这里写图片描述][SouthEast]  
2、js代码1316行左右，增加如下代码，

$pagego,

![这里写图片描述][SouthEast 1]  
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>');
    }

![这里写图片描述][SouthEast 2]  
4、js代码1516行左右，增加如下代码，$pagego表示上述的li

$pagego = this.$pagination.find('.bootstrap-table-page-go');

![这里写图片描述][SouthEast 3]  
5、js代码1548行左右，增加如下代码，为select绑定change事件

$pagego.find('select').off('change').on('change', $.proxy(this.onPageGo, this));

![这里写图片描述][SouthEast 4]  
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;
        };

![这里写图片描述][SouthEast 5]  
7、通过以上几步完成了js的代码的添加，这一步要给select增加样式，使其与其他按钮统一。  
css代码最后添加

.bootstrap-table .bootstrap-table-page-go select{ height: 34px; border-left: none; border-color: #dddddd; padding:0 5px; color: #337ab7; }

8、如果需要的话可以对修改后的js和css进行压缩，压缩方法见另外一篇博客[《结合YUI Compressor在WebStrom添加Watcher实现编辑js（css）文件时自动压缩（包括自定义监听范围Scope）》][YUI Compressor_WebStrom_Watcher_js_css_Scope]  
至此就完成了对插件的扩展，效果如下图所示  
![这里写图片描述][SouthEast 6]

# 插件扩展后的源码下载 #

从这里[http://download.csdn.net/download/lhtzbj12/9933559][http_download.csdn.net_download_lhtzbj12_9933559] 下载。  
源码中包括了笔者增加了另外两项扩展  
1. 使用Bootstrap-select对上述select进行美化，需要在页面中引用Bootstrap-select，并将Bootstrap-table的选项paginationUseBSSelect设置为true  
2. 根据Metronic样式，将Bootstrap-table里用于多选和单选的checkbox和radio进行装饰。

[http_bootstrap-table.wenzhixin.net.cn_zh-cn]: http://bootstrap-table.wenzhixin.net.cn/zh-cn/
[https_github.com_wenzhixin_bootstrap-table]: https://github.com/wenzhixin/bootstrap-table/
[SouthEast]: /images/20210809/0377a5e90565498eb7722273ef4e4d66.png
[SouthEast 1]: /images/20210809/12409f6bdefb4839888dbb19e9334361.png
[SouthEast 2]: /images/20210809/5f6896419766410aaa9f71f78c62bb91.png
[SouthEast 3]: /images/20210809/d76127c3c09945caa744dc2af496cfe0.png
[SouthEast 4]: /images/20210809/52522048cf944ec5846654f36b37609f.png
[SouthEast 5]: /images/20210809/970ba8e4c7e14a9db5b4fc4e7f9c64f2.png
[YUI Compressor_WebStrom_Watcher_js_css_Scope]: http://blog.csdn.net/lhtzbj12/article/details/54988439
[SouthEast 6]: /images/20210809/90f65a536ae5433b91a26044752b4ede.png
[http_download.csdn.net_download_lhtzbj12_9933559]: http://download.csdn.net/download/lhtzbj12/9933559