21天前2019-09-28 09:44:23 |    抢沙发  53 
bootstrapTable是挺好用的,虽然自带了刷新按钮和视图切换的功能,但是如果你要在其他位置使用这些功能的话就有点人蛋疼了,本文就介绍如何自定义刷新按钮和自适应PC手机视图切换实现代码。

Bootstrap Table

至于配置选项就不在这里介绍了网上一大把。这里主要讲一下刷新功能和视图切换

1,刷新功能:

JS代码:

//外部刷新表格数据
function refresh_data(){
    var opt = {
        url: "<?php echo base_url('test/test_data'); ?>",
        silent: true,
        query:{
            offset:0//设置传递的参数,如果已经存在会重写
        }
    };
    $("#exampleTableToolbar").bootstrapTable('refresh', opt);
}
上面的参数需要解释一下:

url    就是刷新的时候请求的地址。

query    里面是需要传递的参数,这里可以进行扩展进行参数传递,如果原配置中已经有传递的参数就替换,如果没有就新增。

刷新可以扩展成自定义参数筛选功能。


2,自适应视图切换:

JS代码:

// 封装好的视图切换方法
function setDataCardView(id) {
    var options = $(id).bootstrapTable('getOptions');
    if ($(window).width() < 768) {
        if (options.cardView === false) {
            $(id).bootstrapTable('toggleView');
        }
    } else {
        if (options.cardView === true) {
            $(id).bootstrapTable('toggleView');
        }
    }
}

// 表格ID
var tableId = '#exampleTableToolbar';
// 页面加载完成时首次调用
$(document).ready(function () {
    setDataCardView(tableId);
});
// 窗口缩放时调用
$(window).resize(function () {
    setDataCardView(tableId);
});

发表评论

暂无评论

登录

忘记密码 ?

切换登录

注册

扫一扫二维码分享