bootstraptable固定表头和列

最新推荐文章于 2024-08-15 09:08:34 发布
最新推荐文章于 2024-08-15 09:08:34 发布
阅读量2.7k 收藏 5
点赞数
分类专栏： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangchaohpu/article/details/104419439
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap-table.css">
    <!--固定列需要引用此css文件-->
    <link rel="stylesheet" type="text/css" href="../bootstrap-table-fixed-columns.css">

    <script type="text/javascript" src="../jquery.js"></script>
    <script type="text/javascript" src="..//bootstrap.js"></script>
    <script type="text/javascript" src="../bootstrapTable/bootstrap-table.js"></script>
    <script type="text/javascript" src="../bootstrap-table-zh-CN.js"></script>
    <!--固定列需要引用此js文件-->
    <script type="text/javascript" src="../bootstrap-table-fixed-columns.js"></script>
    <style>
        body{
            width: 100%;
        }
        //固定表头样式
        #goodsList {
            padding: 0;
            height: 400px;
            overflow-y: scroll;//重要！
        }
        .fixTable thead {
            background-color: #fff;
        }



        //对于复杂的表头，固定列的时候需要调整样式，具体数值根据实际定
        /*固定第一列样式控制start*/
        #detailTableContainer .fixed-table-header-columns{
            height: 121px !important;
            top: 42px !important;
            display: block !important;
            background: #eeeeee !important;
        }
        #detailTableContainer .fixed-table-body-columns{
            top: 163px !important;
            height: 770px !important;
            width: 73px !important;

        }
        /*固定第一列样式控制end*/
    </style>
</head>
<body>
<!--固定的表头相对于此div绝对定位，故此div要position: relative相对定位-->
<div id="goodsList"  style="position: relative;width: 100%">
    <!--固定的表头跟内容对不齐的解决方法-重要代码1-->
    <!--style="table-layout: fixed;word-break:break-all;"
    table-layout:fixed 的作用是指定每列标题头的宽度
    word-break:break-all，如果单元格内的数据在被列宽限制的情况下会换行显示
    确定了每列的宽度后方便调整固定表头跟内容对齐-->
<table id="textTable"  class="table table-bordered scrollTable" style="table-layout: fixed;word-break:break-all;">
</table>
</div>
<script>
    $(function(){
        var  Columns = [
            //注意：不要有下面注释掉的这一个大表头，这样的话每列的宽度就控制不了了，
            //不知道原因，实践得来的
            // [
            //     {
            //         title: 公园绿地明细表',
            //         align: 'center',
            //         colspan: 7,
            //     }
            // ],
            [
                {
                    field: 'F3',
                    title: '合计',
                    halign:'center',
                    align:'center',
                    rowspan: 2,
                    //固定的表头跟内容对不齐的解决方法-重要代码2：width:100，
//注意后面的每列都要有width,取值建议是50的整倍数（实践经验），
//因为最终每列的宽度并不是自己写的值，而是按照倍数均分的宽度。
                    width:100
                },{
                title: '公园面积',
                halign:'center',
                align:'center',
                colspan:4,
                width:400
            },{
                field: 'F9',
                title: '山体公园',
                halign:'center',
                align:'center',
                rowspan: 2,
                width:100
            },{
                field: 'F10',
                title: '广场用地',
                halign:'center',
                align:'center',
                rowspan: 2,
                width:100
            }
            ],[
                {
                    field: 'F11',
                    title: '合计',
                    halign:'center',
                    align:'center',
                    width:100
                },{
                    field: 'F12',
                    title: '绿地面积',
                    halign:'center',
                    align:'center',
                    width:100
                },{
                    field: 'F13',
                    title: '建筑占地面积',
                    halign:'center',
                    align:'center',
                    width:100
                },{
                    field: 'F14',
                    title: '其他占地面积',
                    halign:'center',
                    align:'center',
                    width:100
                }
            ]


        ];
        var TableData = [
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
            {'F3':123,'F9':152,'F10':5556,'F11':6523,'F12':7812,'F13':1753,'F14':9526},
        ];
        $('#textTable').bootstrapTable('destroy').bootstrapTable({
            columns:Columns,
            data: TableData,
            striped:true,
            search:true, //搜索框
            pagination:false,  //设置为 true 会在表格底部显示分页条。
            //固定第一列代码
            // fixedColumns: true,
            // fixedNumber: 1 //固定列数
        });

        var $fixTable = $('#goodsList .fixTable');
        $('#goodsList').scroll(function() {
            var id = '#' + this.id;
            var scrollTop = $(id).scrollTop() || $(id).get(0).scrollTop,
                style = {
                    // 固定的表头跟内容对不齐的解决方法-重要代码3：通过width,left等参数调整固定表头的位置，使其与内容对齐
                    'position': 'absolute',
                    'left': '0',
                    'right': '0',
                    'top': scrollTop + 'px',
                    'width':'100%'
                };
            if ($fixTable.length) {
                (scrollTop === 0) ? $fixTable.addClass('hidden') : $fixTable.removeClass('hidden');
                $fixTable.css(style);
            } else {
                var html = $(id + ' .scrollTable thead').get(0).innerHTML;
                var table = $('<table class="table table-bordered fixTable"><thead>' + html + '</thead></table>');
                table.css(style);
                $(id).append(table);
                $fixTable = $(this).find('.fixTable');
            }
        });
    })
</script>

</body>
</html>

参考：https://segmentfault.com/a/1190000004713875?_ea=701754

bootstrap-table-fixed-columns.js、bootstrap-table-fixed-columns.css下载地址：https://github.com/wenzhixin/bootstrap-table-fixed-columns
一名写前端的GISer
关注
专栏目录
Bootstrap Table 如何做到 固定表头和列
毒王的博客
01-01 3515
近期工作中，碰到甲方需求：给一个bootstrap table表格，增加表头和第一列不随滚动条动而变化。即：要求固定表头和第一列。 官网上给的例子，就那么配置了几项，轻松加随意的达到效果。然而实际开发中，却是颇费了一番周折。好像我之前有个同事没解决这个需求，客户就交给我了。 A.先说固定表头： 极其简单：给table加一个height属性，不管是HTML加还是js里加，都一样~ 然后照官网的做了后...
Bootstrap Table Fixed Columns 固定列
04-02
bootstrap 固定列需要引用的js和css，同时里面含有一个简单的例子
bootstrap中固定table的表头
懒人的博客
11-02 3万+
bootstrap中固定table的表头
Bootstrap Table 固定列插件使用教程
最新发布
gitblog_00353的博客
08-15 389
Bootstrap Table 固定列插件使用教程 bootstrap-table-fixed-columns项目地址:https://gitcode.com/gh_mirrors/bo/bootstrap-table-fixed-columns 项目介绍 bootstrap-table-fixed-columns 是一个用于固定表格头和列的插件，基于 Bootstrap Table 开发。该插...
bootstrap-table实现表头固定以及列固定
热门推荐
huaweichenai的博客
03-06 3万+
之前使用bootstrap写了一个报表表格，最近突然找到我，说让我看看能不能将表格的表头和第一列进行固定，这样的话方便查看数据，于是，我开始了苦逼的研究起来，毕竟我是个后端啊，对于前端的样式问题，特别是小功能，烦的一批 这里就记录下我的研究成果 一：引入js和css &lt;!-- 引入jquery --&gt; &lt;script type="text/javascript" src=...
bootstrap table 固定表头
SSD1397713787的博客
11-27 1202
想要让表头固定 表内容可以滑动 需要设置 data-height="500"
Bootstrap Table Fixed Columns
weixin_34253126的博客
02-08 1222
最近在使用BootStrap 做项目前端，自然也用到了 Bootstrap Table。 推荐大家多去这个http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 网站看看，上面有很详细的介绍以及其他扩展功能 下面写下Fixed Columns（固定列）的使用方法。附件下载地址：http://pan.baidu.com/s/1kUEQTPt 1.引用...
bootstrap table列和表头对不齐的解决方法
10-16
在实际使用中，可能会遇到列和表头对不齐的问题，尤其是在设置了固定表格高度并出现滚动条的情况下。这种问题通常是由于数据列中的滚动条占据了额外的宽度，导致表头和数据列的div容器宽度不一致。 要解决Bootstrap...
bootstrap-table实现表头固定以及列固定的方法示例
10-17
旧版本的jQuery可能与bootstrap-table存在兼容性问题，导致固定表头等功能无法正常工作。 2. 引入Bootstrap的CSS文件以及bootstrap-table的CSS文件，这两者都是Bootstrap风格的表单、按钮、导航等组件的基础。 3. ...
bootstrap table实现iview固定列的效果实例代码详解
10-16
在本例中，通过设置固定列的宽度，并利用.max-height属性来控制表格主体内容的最大高度，确保固定列和滚动内容可以正常工作。 四、HTML结构的构建方法 在HTML结构中，需要明确区分表头（thead）、表格主体内容...
bootstrap-table固定表头固定列
weixin_30318645的博客
05-07 365
1.引入 　　bootstrap依赖于jquery 　　bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式，html、js <table id="table" class="table table-bordered table-hover" data-toggle="table" ...
BootStrap table表格插件自适应固定表头(超好用)
09-01
主要介绍了BootStrap table表格插件自适应固定表头(超好用)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
BootStrap-table 表格固定列，固定左侧列以及右侧列，可以固定特定的列
09-25
BootStrap-table 表格固定列，固定左侧列以及右侧列，可以固定特定的列，fixedColumns: true, fixedNumber: 2,fixedRightNumber:1，值可以自定义，一定要使用配套(压缩包就是配套的相关文件)的内容，否则会出现一些小问题。
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。
bootstrap-table-fixed-columns-v1.0.2.zip
06-08
FastAdmin使用bootstrap-table作为前端表格的基础组件库，通常列表交互展示已经够用了，包括通用搜索、排序、分页、导出、合并相同行/列等等。最近需要对表头进行冻结，找到了bootstrap-table-fixed-columns组件（也是bootstrap-table作者写的）能实现冻结效果，但带来了其他问题，包括：排序失效、列宽错位、合并行无效等，于是引入该组件的同时，顺便解决了这些问题，并且封装回原js中，使用时可以无忧无虑啦~
bootstrap-table-fixed-columns(css,js)
05-06
如有使用疑问，联系博主 bootstrap-table-fixed-columns.css固定列 冻结列
bootstrapTable 表头固定（可全局控制） 列与列无缝对接
unkul的专栏
04-30 332
bootstrapTable 表头固定（可全局控制） 列与列无缝对接。
Bootstrap-table固定表头并美化表头
会写Bug的攻城狮
09-27 5564
Bootstrap Table固定表头并美化表头
bootstrap 取消_bootstrap-table实现表头固定以及列固定
weixin_32461163的博客
02-01 784
之前使用bootstrap写了一个报表表格，最近突然找到我，说让我看看能不能将表格的表头和第一列进行固定，这样的话方便查看数据，于是，我开始了苦逼的研究起来，毕竟我是个后端啊，对于前端的样式问题，特别是小功能，烦的一批这里就记录下我的研究成果一：引入js和css<!-- 引入jquery --> <script type="text/javascript" src="./js/j...
bootstrap table 表头固定表体滚动
03-29
在 Bootstrap 中，可以使用固定表头和滚动表体的插件来实现这个效果。以下是实现步骤： 1. 引入必要的文件： ``` <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/bootstrap/4.3.1/js/bootstrap.min.js"></script> ``` 2. 创建一个表格，并在表格头部添加 `thead` 标签： ``` <table class="table table-bordered table-striped"> <thead> <tr> <th>列头1</th> <th>列头2</th> <th>列头3</th> </tr> </thead> <tbody> <tr> <td>行1列1</td> <td>行1列2</td> <td>行1列3</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> <td>行2列3</td> </tr> <!-- more rows --> </tbody> </table> ``` 3. 使用 JavaScript 初始化表格，并调用插件： ``` $(function() { $('.table').fixedHeaderTable({ fixedColumn: true }); }); ``` 其中，`fixedHeaderTable` 是插件名称，`fixedColumn: true` 表示需要固定表头。 4. 根据需要调整样式： ``` .table-fixed-header { overflow-y: auto; max-height: 400px; } .table-fixed-header thead th, .table-fixed-header tbody td { width: 100px; min-width: 100px; max-width: 100px; } ``` 其中，`.table-fixed-header` 是插件自动生成的类名，可以根据需要进行修改。 完整代码如下： ``` <!DOCTYPE html> <html> <head> <title>Bootstrap Table 表头固定表体滚动</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/4.3.1/css/bootstrap.min.css"> <style> .table-fixed-header { overflow-y: auto; max-height: 400px; } .table-fixed-header thead th, .table-fixed-header tbody td { width: 100px; min-width: 100px; max-width: 100px; } </style> </head> <body> <div class="container"> <table class="table table-bordered table-striped table-fixed-header"> <thead> <tr> <th>列头1</th> <th>列头2</th> <th>列头3</th> </tr> </thead> <tbody> <tr> <td>行1列1</td> <td>行1列2</td> <td>行1列3</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> <td>行2列3</td> </tr> <!-- more rows --> </tbody> </table> </div> <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/fixed-header-table@1.3.2/dist/fixed-header-table.min.js"></script> <script> $(function() { $('.table').fixedHeaderTable({ fixedColumn: true }); }); </script> </body> </html> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值