使用bootstrap-table固定表格前4列

2024年3月13日 109次阅读 来源: LeAn_He

1、首先要导入相应的css和js：

    <link href="../static/css/bootstrap.min.css" rel="stylesheet" /> 
    <link href="../static/css/bootstrap-table.min.css" rel="stylesheet" />
    <link href="../static/css/bootstrap-table-fixed-columns.css" rel="stylesheet" />
    <script src="../static/jq/jquery-3.3.1.min.js"></script>    
    <script src="../static/js/bootstrap-table.min.js"></script>
    <script src="../static/js/bootstrap-table-fixed-columns.js"></script>    
    <script src="../static/js/bootstrap-table-zh-CN.js"></script>

2、然后调用下面这个js方法来固定表格前4列，并设置表格的参数（这个方法bootstrap-table会根据表格的内容，自动生成一个新的表格，并会覆盖掉），data_table是要引用的表格id，后面的格式固定：

$("#data_table").bootstrapTable('destroy').bootstrapTable({
        // search: true, //是否开启搜索栏
        toolbar : '.toolbar', //用哪个DOM作为工具栏
        //pagination : true, // 是否显示分页（*）
        //sidePagination : "client", // 分页方式：client客户端分页，server服务端分页（*）
        //pageNumber : 1, // 初始化加载第一页，默认第一页
        //pageSize : 2, // 每页的记录行数（*）
        fixedColumns : true, //是否开启固定列
        fixedNumber : 4,    //固定几列
        height : 表格高度 //设置表格高度
    });

bootstrap-table文件下载：
链接: https://pan.baidu.com/s/1Un3t…
提取码: yh2w

    原文作者：LeAn_He
    原文地址: https://segmentfault.com/a/1190000018569934
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞