Question

Hello StackOverflow我正在使用：

http://bootstrap-table.wenzhixin.net.cn/

问题是，当屏幕尺寸为桌面时，我有数据卡-view =＆＃34; false＆＃34;，但当屏幕尺寸是移动设备或调整屏幕尺寸时，我想更改属性数据-card视图=＆＃34;假＆＃34; to data-card-view =＆＃34; true＆＃34;并获取数据卡视图的版本。问题是我用jquery更改它，但表格不会随时改变。

如何在不刷新所有页面的情况下实现这一目标？

Answer 1

有一个插件：bootstrap-table-mobile

Answer 2

使用以下代码。在你的Html底部。

$(document).ready(function () {
var $table = $('#fresh-table'),
       full_screen = false;
var windowsize = $(window).width();
function checkWidth() {
   windowsize = $(window).width();
   if (windowsize >= 440) {
//Get the cardView 
       var data = JSON.stringify($table.bootstrapTable('getOptions'));
       var CardData = JSON.parse(data).cardView;
       if (CardData == true) {
           $table.bootstrapTable('toggleView');
       }
        $table.bootstrapTable({
            cardView: false,
        });
        $table.bootstrapTable('resetView');

    }
    else {
        var data = JSON.stringify($table.bootstrapTable('getOptions'));
        var CardData = JSON.parse(data).cardView;
        if (CardData == false) {
            $table.bootstrapTable('toggleView');
        }
        $table.bootstrapTable({
            cardView: true,
        });
    }
    $table.bootstrapTable('resetView');

}
    checkWidth();
    $(window).resize(function () {
        checkWidth();
    });
});

Answer 3

您也可以只使用引导程序提供的display properties。

创建表格视图和卡片视图。

然后使用

<div class="row d-none d-sm-block ">包裹表格以在大屏幕或中型屏幕上显示表格

和<div class="row d-sm-none">来包装您的卡片以在移动设备上显示

屏幕调整大小时，从表格到数据卡视图制作Bootstrap-table？

3 个答案: