因为bootstrap自带的固定列效果满足不了公司需求,所以借助fixed-table这个插件完成了iview固定列的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>左右两侧固定列,中间内容可以横向拖动</title>
    <link rel="stylesheet" href="css/fixed-table.css" />
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="js/fixed-table.js"></script>
    <style>
        .fixed-table-box{
            width: 800px;
            margin: 50px auto;
        }
        .fixed-table-box>.fixed-table_body-wraper{/*内容了表格主体内容有纵向滚动条*/
            max-height: 260px;
        }
        
        .fixed-table_fixed>.fixed-table_body-wraper{/*为了让两侧固定列能够同步表格主体内容滚动*/
            max-height: 240px;
        }
        .w-150{
            width: 150px;
        }
        .w-120{
            width: 120px;
        }
        .w-300{
            width: 300px;
        }
        .w-100{
            width: 100px;
        }
        .btns{
            text-align: center;
        }
        .btns button{
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <div class="fixed-table-box row-col-fixed">
        <!-- 表头 start -->
        <div class="fixed-table_header-wraper">
            <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0">
                <thead>
                    <tr>
                        <th class="w-150" data-fixed="true"><div class="table-cell">日期</div></th>
                        <th class="w-120"><div class="table-cell">姓名</div></th>
                        <th class="w-120"><div class="table-cell">省份</div></th>
                        <th class="w-120"><div class="table-cell">市区</div></th>
                        <th class="w-300"><div class="table-cell">地址</div></th>
                        <th class="w-120"><div class="table-cell">邮编</div></th>
                        <th class="w-100" data-fixed="true" data-direction="right"><div class="table-cell">操作</div></th>
                    </tr>
                </thead>
            </table>
        </div>
        <!-- 表头 end -->
        <!-- 表格内容 start -->
        <div class="fixed-table_body-wraper">
            <table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0">
                <tbody>
                    <tr>
                        <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
                        <td class="w-120"><div class="table-cell">王小虎</div></td>
                        <td class="w-120"><div class="table-cell">上海</div></td>
                        <td class="w-120"><div class="table-cell">普陀区</div></td>
                        <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
                        <td class="w-120"><div class="table-cell">200333</div></td>
                        <td class="w-100">
                            <div class="table-cell">
                                <a href="###">查看</a>
                                <a href="###">编辑</a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
                        <td class="w-120"><div class="table-cell">王小虎</div></td>
                        <td class="w-120"><div class="table-cell">上海</div></td>
                        <td class="w-120"><div class="table-cell">普陀区</div></td>
                        <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
                        <td class="w-120"><div class="table-cell">200333</div></td>
                        <td class="w-100">
                            <div class="table-cell">
                                <a href="###">查看</a>
                                <a href="###">编辑</a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
                        <td class="w-120"><div class="table-cell">王小虎</div></td>
                        <td class="w-120"><div class="table-cell">上海</div></td>
                        <td class="w-120"><div class="table-cell">普陀区</div></td>
                        <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
                        <td class="w-120"><div class="table-cell">200333</div></td>
                        <td class="w-100">
                            <div class="table-cell">
                                <a href="###">查看</a>
                                <a href="###">编辑</a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
                        <td class="w-120"><div class="table-cell">王小虎</div></td>
                        <td class="w-120"><div class="table-cell">上海</div></td>
                        <td class="w-120"><div class="table-cell">普陀区</div></td>
                        <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
                        <td class="w-120"><div class="table-cell">200333</div></td>
                        <td class="w-100">
                            <div class="table-cell">
                                <a href="###">查看</a>
                                <a href="###">编辑</a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
                        <td class="w-120"><div class="table-cell">王小虎</div></td>
                        <td class="w-120"><div class="table-cell">上海</div></td>
                        <td class="w-120"><div class="table-cell">普陀区</div></td>
                        <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
                        <td class="w-120"><div class="table-cell">200333</div></td>
                        <td class="w-100">
                            <div class="table-cell">
                                <a href="###">查看</a>
                                <a href="###">编辑</a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
                        <td class="w-120"><div class="table-cell">王小虎</div></td>
                        <td class="w-120"><div class="table-cell">上海</div></td>
                        <td class="w-120"><div class="table-cell">普陀区</div></td>
                        <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
                        <td class="w-120"><div class="table-cell">200333</div></td>
                        <td class="w-100">
                            <div class="table-cell">
                                <a href="###">查看</a>
                                <a href="###">编辑</a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
                        <td class="w-120"><div class="table-cell">王小虎</div></td>
                        <td class="w-120"><div class="table-cell">上海</div></td>
                        <td class="w-120"><div class="table-cell">普陀区</div></td>
                        <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
                        <td class="w-120"><div class="table-cell">200333</div></td>
                        <td class="w-100">
                            <div class="table-cell">
                                <a href="###">查看</a>
                                <a href="###">编辑</a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
                        <td class="w-120"><div class="table-cell">王小虎</div></td>
                        <td class="w-120"><div class="table-cell">上海</div></td>
                        <td class="w-120"><div class="table-cell">普陀区</div></td>
                        <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
                        <td class="w-120"><div class="table-cell">200333</div></td>
                        <td class="w-100">
                            <div class="table-cell">
                                <a href="###">查看</a>
                                <a href="###">编辑</a>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 表格内容 end -->
        <!-- 固定列 start -->
        <div class="fixed-table_fixed fixed-table_fixed-left">
            <div class="fixed-table_header-wraper">
                <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0">
                    <thead>
                        <tr>
                            <th class="w-150"><div class="table-cell">日期</div></th>
                        </tr>
                    </thead>
                </table>
            </div>
            
            <div class="fixed-table_body-wraper">
                <table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0">
                    <tbody>
                        <tr>
                            <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
                        </tr>
                        <tr>
                            <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
                        </tr>
                        <tr>
                            <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
                        </tr>
                        <tr>
                            <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
                        </tr>
                        <tr>
                            <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
                        </tr>
                        <tr>
                            <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
                        </tr>
                        <tr>
                            <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
                        </tr>
                        <tr>
                            <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="fixed-table_fixed fixed-table_fixed-right">
            <div class="fixed-table_header-wraper">
                <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0">
                    <thead>
                        <tr>
                            <th class="w-100"><div class="table-cell">操作</div></th>
                        </tr>
                    </thead>
                </table>
            </div>
            
            <div class="fixed-table_body-wraper">
                <table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0">
                    <tbody>
                        <tr>
                            <td class="w-100">
                                <div class="table-cell">
                                    <a href="###">查看</a>
                                    <a href="###">编辑</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="w-100">
                                <div class="table-cell">
                                    <a href="###">查看</a>
                                    <a href="###">编辑</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="w-100">
                                <div class="table-cell">
                                    <a href="###">查看</a>
                                    <a href="###">编辑</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="w-100">
                                <div class="table-cell">
                                    <a href="###">查看</a>
                                    <a href="###">编辑</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="w-100">
                                <div class="table-cell">
                                    <a href="###">查看</a>
                                    <a href="###">编辑</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="w-100">
                                <div class="table-cell">
                                    <a href="###">查看</a>
                                    <a href="###">编辑</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="w-100">
                                <div class="table-cell">
                                    <a href="###">查看</a>
                                    <a href="###">编辑</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="w-100">
                                <div class="table-cell">
                                    <a href="###">查看</a>
                                    <a href="###">编辑</a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 固定列 end -->
    </div>
    <div class="btns">
        <button type="button" id="empty_data">清空数据</button>
        <button type="button" id="add_data">添加数据</button>
        <button type="button" id="del_row">删除行</button>
    </div>
    <script>
        //初始化FixedTable
        $(".fixed-table-box").fixedTable();
        //清空表格
        $("#empty_data").on("click", function (){
            $(".fixed-table-box").emptyTable();
        });
        //添加数据
        $("#add_data").on("click", function (){
            $(".fixed-table-box").addRow(function (){
                var html = '';
                for(var i = 0; i < 5; i ++){
                    html += '<tr>';
                    html += '    <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>';
                    html += '    <td class="w-120"><div class="table-cell">王小虎</div></td>';
                    html += '    <td class="w-120"><div class="table-cell">上海</div></td>';
                    html += '    <td class="w-120"><div class="table-cell">普陀区</div></td>';
                    html += '    <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>';
                    html += '    <td class="w-120"><div class="table-cell">200333</div></td>';
                    html += '    <td class="w-100">';
                    html += '        <div class="table-cell">';
                    html += '            <a href="###">查看</a>';
                    html += '            <a href="###">编辑</a>';
                    html += '        </div>';
                    html += '    </td>';
                    html += '</tr>';
                }
                return html;
            });
        });
        //删除指定行
        $("#del_row").on("click", function (){
            $(".fixed-table-box").deleteRow($(".fixed-table-box").children('.fixed-table_fixed-left').children('.fixed-table_body-wraper').find('tr').eq(0));
        });
    </script>
</body>
</html>具体网址忘了存了,有需要的小伙伴可自己查一下~
次案例从一个网站下载,
 
实现效果为:

bootstrap table实现iview固定列的效果的更多相关文章

  1. tableZen maxHeight 解决方案 如果数据条数小于N,不进行高度设置,超过N条,直接设置高度,解决原生iview Table 对于右侧固定列,不能计算出正确数值的解决方案

    tableZen maxHeight 解决方案 如果数据条数小于N,不进行高度设置,超过N条,直接设置高度,解决原生iview Table 对于右侧固定列,不能计算出正确数值的解决方案 if (thi ...

  2. layui table 数据表格固定列的行高和table其他列的行高不一致

    1.问题描述:使用layui的table数据表格,固定某一列,这样表格中数据的宽度超出屏幕宽度时,固定列可以一直显示在屏幕中,不会随着底部滚动栏左右的拖动而变化位置.但是遇到一个问题,就是固定列的行高 ...

  3. bootstrap table表格属性、列属性、事件、方法

    留存一份,原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 表格参数 表格的参数定义在 jQuery.fn.bootst ...

  4. 好用的自适应表格插件-bootstrap table (支持固定表头)

    最近工作中找到了一款十分好用的表格插件,不但支持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他自带的冻结表头功能,让开发制作表格十分容易,不过网上大多都是英文文档,第一次使用会比较麻烦 ...

  5. bootstrap table footerFormatter用法 统计列求和 sum、average等

    其实上一篇blog里已经贴了代码,简单解释一下吧: 1.showFooter: true,很重要,设置footer显示: $(cur_table).bootstrapTable({ url: '/et ...

  6. C# Bootstrap table之 分页

    效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...

  7. [转]C# Bootstrap table之 分页

    本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...

  8. bootstrap-table固定表头固定列

    1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js <tabl ...

  9. 161222、Bootstrap table 服务器端分页示例

    bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...

随机推荐

  1. Python3学习笔记(五):列表和元组

    一.列表 列表是可变的--可以改变列表的内容 list函数可以把各种类型的序列拆分列表 >>> list('Hello') ['H', 'e', 'l', 'l', 'o'] 二.列 ...

  2. windows7 中 wacom数位板如何关闭点击水波 和长按右键这两个特效

    就是点住笔尖不动,就会弹出右键,这个功能是微软操作系统具有的一项功能,,如果您感觉不便,可以按以下方法将其去掉: 1.打开"控制面板--笔和触摸--笔选项--按下并保持--设置": ...

  3. 理解BFC以及BFC相关布局问题解决

    写页面时会遇到: 子元素float父元素的高度不会撑开; 在布局时,box1and box2,其中box1 float:left,这是box2会在box1下面,(如果文字过多就会形成文字环绕效果),但 ...

  4. express中redirect传递数据

    redirect中无法跟render一样传递数据 在index中,可以通过session重定向到login 在login.js 中获取req.session,渲染到login.ejs中,最后js获取

  5. java第二周小结

    这是接触Java的第一周,了解这个语言的一些基础知识,下面是对这段时间重要知识点的汇总 一.Java是一种面向对象的语言    特点为:简洁高效.可移植性.适合分布式计算.健壮防患于未然的特性.多线程 ...

  6. Loading class `com.mysql.jdbc.Driver'. This is deprecated警告处理,jdbc更新处

    1.报错信息是这样的; 处理:提示信息表明数据库驱动com.mysql.jdbc.Driver'已经被弃用了.应当使用新的驱动com.mysql.cj.jdbc.Driver' 所以,按照提示更改jd ...

  7. sqlalchemy.exc.InvalidRequestError: Table 'run_result' is already defined for this MetaData instance

    临时解决办法: 在models文件导入db后,加上如下代码: db.metadata.clear() 但解决问题的根本之处还是在于找到,为何会声明了2次类的定义呢? 解析: table 'roles_ ...

  8. Jquery Ajax调用asmx出错问题

    1.//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释.      [System.Web.Script.Services.ScriptService] 这个 ...

  9. 阶段2 JavaWeb+黑马旅游网_15-Maven基础_第4节 maven生命周期和概念模型图_09maven概念模型图

    项目自身的信息 项目运行所依赖的扎包 运行环境信息:tomcat啊,JDK啊这些都属于运行环境 一个jar包的坐标由三个最基本的信息组成. 第一部分就是依赖管理. 第二个部分

  10. Jmeter之检查点

    检查点 Jmeter中检查点也叫断言,Jmeter中有很多类型的断言,但是最常用的是响应断言,即根据服务器返回的结果来判断测试是否通过. 响应断言 添加断言结果用于运行完毕后查看结果 测试通过 测试不 ...