解决bootstrap-table-fixed-columns.js显示列与隐藏列按钮切换表格不对齐

<table class="table-striped table-hasthead nowrap" id="tableTest1" data-search="true" data-show-columns="true" data-fixed-columns="true" data-fixed-number="3">
</table>

含有data-show-columns="true"属性时会在右边显示可以切换列的按钮

结合bootstrap-table-fixed-columns.js插件使用时会出现列不对齐的问题

查看Dom结构发现点击一次具体列切换按钮时会增加一个class 为fixed-table-header-columns 的html片段,我们只需保留最后一个,解决方法

1、先删除多余的html

2、执行表格对齐函数

为了使排序的图标正常显示,需要在onSort的事件中执行能使图标正常显示的代码(注意如果要使固定的列有排序的功能请看我另一篇博客https://my.oschina.net/u/2612473/blog/2395979)

完整代码如下:

    <script type="text/javascript">
    $(function() {
        $('#tableTest1').bootstrapTable({
            sortable: true,
            height: $(window).height() - 360,
            onSort: function(name, order) {
               
                $(".fixed-table-header-columns").find("th[data-field]").find("div.sortable").removeClass("asc desc")
                $(".fixed-table-header-columns").find("th[data-field=" + name + "]").find("div.sortable").removeClass("asc desc").addClass(order);
                fixleftwidth()
            },
            onColumnSwitch: function(field, checked) {
                //setTimeout(function() {
                var colnumBody = $(".fixed-table-body-columns");
                var colnumHead = $(".fixed-table-header-columns");
                var len = $(".fixed-table-body-columns").length;
                for (var i = 0; i < len - 1; i++) {
                    colnumBody.eq(i).remove()
                    colnumHead.eq(i).remove()
                }
                fixleftwidth()
                //}, 0)
            },
        });

        function fixleftwidth() {
            setTimeout(function() {
                $(".fixed-table-body-columns tr td:first-child").height(22);
                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()
        });

    });
    //格式化显示,内容太长时带省略号 
    //<th data-sortable="true" class="name11" data-formatter="testFormatter">状态</th>
    function testFormatter(value, row, index, field) {
        if (value != null && value.length > 5) {
            return '<a title="' + value + '" href="javascript:void(0)" >' + value.substr(0, 5) + '...</a>';
        }
        return value;
    }
    </script>

查看表格效果

(adsbygoogle = window.adsbygoogle || []).push({});

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏蓝天

编译boost,去掉不使用的组件

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

17830
来自专栏清晨我上码

第二十节 netty源码分析之 reactor中的EventLoop01

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

11420
来自专栏A周立SpringCloud

聊聊 SpringCloud 中的父子容器

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

34020
来自专栏编程微刊

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

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

87030
来自专栏开发实战

swagger-bootstrap-ui的使用说明

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

37730
来自专栏一丘一壑

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

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

22540
来自专栏前端实习日记

JS:用rem来做响应式开发

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

25010
来自专栏运维经验分享

linux tomcat 无法关闭 :8005端口未启动

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

26920
来自专栏运维经验分享

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

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

22940
来自专栏颇忒脱的技术博客

ClassLoader(一)- 介绍

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

8630

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励