码迷，mamicode.com
首页 > 其他好文 > 详细

bootstrap table实现iview固定列的效果

时间：2019-09-29 12:41:46      阅读：78      评论：0      收藏：0      [点我收藏+]

标签：code   border   data   image   ble   技术   button   需要   添加   

因为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固定列的效果

标签：code   border   data   image   ble   技术   button   需要   添加   

原文地址：https://www.cnblogs.com/jiajiamiao/p/11606893.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！