bootstrap-table固定表头、固定列、拖动调整列宽大小

bootstrap-table API：https://www.bootstrap-table.com.cn/doc/api/column-options/

$('#table').bootstrapTable({
            url: '',         //请求后台的URL（*）
            method: 'get',              //请求方式（*）
            toolbar: '#toolbar',        //工具按钮用哪个容器
            striped: false,             //是否显示行间隔色
            cache: false,              //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,          //是否显示分页（*）
            sortable: false,            //是否启用排序
            sortOrder: "asc",           //排序方式
            queryParams: null,            //传递参数（*）
            sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,             //初始化加载第一页，默认第一页
            pageSize: 10,             //每页的记录行数（*）
            pageList: [10, 20, 50, 100],//可供选择的每页的行数（*）
            search: false,                //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
            showColumns: true,            //是否显示所有的列
            showRefresh: false,           //是否显示刷新按钮
            minimumCountColumns: 2,      //最少允许的列数
            clickToSelect: true,         //是否启用点击选中行
            height: $(window).height(),  //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            showToggle:true,             //是否显示详细视图和列表视图的切换按钮
            cardView: true,                //是否显示详细视图
            detailView: false             //是否显示父子表
        });

height属性：表的高度，表头固定

//高度自适应
$("#table").bootstrapTable('resetView', { height: $(window).height()});

固定表头可能会出现表头和内容对不齐问题：修改 bootstrap-table.js 文件

 

showColumns属性：类型: Boolean； 设置为true，可设置列为显示或隐藏

 

列固定依赖包：

代码：

$("#table").bootstrapTable('destroy').bootstrapTable({
     fixedColumns: true, 
     fixedNumber: 2 //固定列数
 });

拖动改变列宽大小依赖包：

代码：

 $("#table").resizableColumns();  

拖动改变列宽大小存在一个问题：固定表头时拖动列宽大小会导致表头与内容不一致，是因为内容大小变化表头没有跟着变。

这个问题不知道如何解决！