专栏首页前端之攻略Bootstrap Table 插件实现固定左侧列

Bootstrap Table 插件实现固定左侧列

Bootstrap Table 插件本身是不带固定列功能的,需要额外引用

bootstrap-table-fixed-columns.css与bootstrap-table-fixed-columns.js

但是引用这2个文件后,列有时候不对齐,用js处理下效果还好

完整的代码如下:

    <link rel="stylesheet" href="../../plugins/bootstrap-table-develop/src/bootstrap-table.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-table-develop/src/bootstrap-table-fixed-columns.css">
<table class="table-striped table-hasthead nowrap" id="tableTest1" data-search="true" data-fixed-columns="true" data-fixed-number="3">
    <thead>
        <tr>
            <th></th>
            <th data-sortable="true">状态描述状态描述</th>
            <th data-sortable="true">客户号</th>
            <th data-sortable="true">客户名称</th>
            <th data-sortable="true">监测设备编号</th>
            <th data-sortable="true">提醒余额</th>
            <th data-sortable="true">收费单价</th>
            <th data-sortable="true">结算金额</th>
            <th data-sortable="true">结算时间</th>
            <th data-sortable="true">实时结算金额</th>
            <th data-sortable="true">实时结算时间</th>
            <th class="lastcolumn">客户编辑</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><i class="fa fa-square blue"></i></td>
            <td>5</td>
            <td>8</td>
            <td>常州公司常州公司常州公司常州公司</td>
            <td>常州公司</td>
            <td>5</td>
            <td>8</td>
            <td>5</td>
            <td>8</td>
            <td>5</td>
            <td>8</td>
            <td>8</td>
        </tr>
        <tr>
            <td><i class="fa fa-square blue"></i></td>
            <td>客户号6</td>
            <td>客户号客户号</td>
            <td></td>
            <td></td>
            <td>6</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
    <!-- jQuery 2.1.4 -->
    <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="../../bootstrap/js/bootstrap.js"></script>
    <script src="../../dist/js/sidebarHeight.js"></script>
    <script src="../../plugins/bootstrap-table-develop/src/bootstrap-table.js"></script>
    <script src="../../plugins/bootstrap-table-develop/src/bootstrap-table-fixed-columns.js"></script>
    <script src="../../plugins/bootstrap-table-develop/src/locale/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript">
    $(function() {
        $('#tableTest1').bootstrapTable({
            height: $(window).height() - 360,
            onAll: function(name, args) {
                fixleftwidth()
            }
        });

        function fixleftwidth() {
            setTimeout(function() {
                var fixColumnTds = $(".fixed-table-body-columns tr:first-child td");
                var fixNum = fixColumnTds.length;
                var tableBody = $(".fixed-table-body tbody tr:first-child td");
                for (var i = 0; i < fixNum; i++) {
                    fixColumnTds.eq(i).width(tableBody.eq(i).width())
                }
            }, 0)
        }
        fixleftwidth()
        $(window).resize(function() {
            $('#tableTest1').bootstrapTable('resetView');
            fixleftwidth()
        });
    });
    </script>

由于是用js 强制对齐的,所以在触发任何事件时都要执行下fixleftwidth(),并在窗口改变时也执行fixleftwidth()函数。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • tomcat shutdown.sh结束不了,Could not contact localhost:8005

    使用./shutdown.sh关闭Tomcat,有时会关闭成功,有时会出现关闭错误;

    拓荒者
  • JS:用rem来做响应式开发

    电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是...

    yuezhongbao
  • 用 jQuery 和 Bootstrap 在 WordPress 中添加进度条

    昨天整理了一下Genesis的系列教程的翻译进度,汇总成了一个页面 神级 WordPress 主题框架 Genesis 从入门到精通 。今天突然想放一个进度条...

    丘壑
  • ClassLoader(一)- 介绍

    讲到bootstrap class loader就不得不说三种常见的ClassLoader实现。

    颇忒脱
  • 编译boost,去掉不使用的组件

    说明:下面内容仅针对Linux环境(boost官网为:http://www.boost.org/,可从这里下载它的源代码包,这里要求下载.tar.gz包,而...

    一见
  • 聊聊 SpringCloud 中的父子容器

    在引入 SpringCloud 的项目中会多次创建 Spring 容器,本篇从源码角度深入分析具体哪些点会创建 Spring 容器,以及这些容器之间的区别与联系...

    用户1516716
  • linux tomcat 无法关闭 :8005端口未启动

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_25283709/article/details/550...

    拓荒者
  • Bootstrap Table表格分页的使用及分页数据(Excel)导出

    1:引入Bootstrap Table表格插件相关链接:这里直接拿来用就可以了,如果要下载到本地,可以自行去官网下载。

    祈澈菇凉
  • 第二十节 netty源码分析之 reactor中的EventLoop01

    (如果使用到的是 NIO, 那么通常是 NioEventLoopGroup), 那么这个 NioEventLoopGroup 在 Netty 中到底扮演着什么角...

    用户1418372
  • swagger-bootstrap-ui的使用说明

    有些朋友在使用这个jar包的时候会出现接口出不来的情况,或者只出现ui默认的几个接口,项目的api接口没有出来,

    八一菜刀

扫码关注云+社区

领取腾讯云代金券