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();  

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

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

发布了13 篇原创文章 · 获赞 2 · 访问量 488

猜你喜欢

转载自blog.csdn.net/m_crayon/article/details/103017786