首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

bootstrap table实现iview固定列的效果实例代码详解

Posted in Javascript onSeptember 30, 2019

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>左右两侧固定列，中间内容可以横向拖动</title>
  <link rel="stylesheet" href="css/fixed-table.css" rel="external nofollow" />
  <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="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看</a>
                <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</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="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看</a>
                <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</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="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看</a>
                <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</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="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看</a>
                <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</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="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看</a>
                <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</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="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看</a>
                <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</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="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看</a>
                <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</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="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看</a>
                <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</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="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看</a>
                  <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</a>
                </div>
              </td>
            </tr>
            <tr>
              <td class="w-100">
                <div class="table-cell">
                  <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看</a>
                  <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</a>
                </div>
              </td>
            </tr>
            <tr>
              <td class="w-100">
                <div class="table-cell">
                  <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看</a>
                  <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</a>
                </div>
              </td>
            </tr>
            <tr>
              <td class="w-100">
                <div class="table-cell">
                  <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看</a>
                  <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</a>
                </div>
              </td>
            </tr>
            <tr>
              <td class="w-100">
                <div class="table-cell">
                  <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看</a>
                  <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</a>
                </div>
              </td>
            </tr>
            <tr>
              <td class="w-100">
                <div class="table-cell">
                  <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看</a>
                  <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</a>
                </div>
              </td>
            </tr>
            <tr>
              <td class="w-100">
                <div class="table-cell">
                  <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看</a>
                  <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</a>
                </div>
              </td>
            </tr>
            <tr>
              <td class="w-100">
                <div class="table-cell">
                  <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看</a>
                  <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</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="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看</a>';
          html += '      <a href="###" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</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固定列的效果实例代码详解 

总结

以上所述是小编给大家介绍的bootstrap table实现iview固定列的效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

bootstrap table实现iview固定列的效果实例代码详解

- Author -

九九儿

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 #Javascript
浅探express路由和中间件的实现
Sep 30 #Javascript
JavaScript实现单图片上传并预览功能
Sep 30 #Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 #Javascript
laravel实现中文和英语互相切换的例子
Sep 30 #Javascript
JavaScript键盘事件响应顺序详解
Sep 30 #Javascript
vue自动化路由的实现代码
Sep 30 #Javascript
帝国时代(1) 巫师(1) explain(2) 暴雪(1) 守望先锋(1) 小缇娜的奇幻之地(1) Docker(14) 艾尔登法环(1) 我的世界(1) 最终幻想(1)
You might like
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
php 无限级分类，超级简单的无限级分类，支持输出树状图
2014/06/29 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
微信小程序（订阅消息）功能
2019/10/25 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
Python中的exec、eval使用实例
2014/09/23 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
Vision Directa智利眼镜网：框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
联想法国官方网站：Lenovo法国
2018/10/18 全球购物
Belstaff英国官方在线商店：Belstaff.co.uk
2021/02/09 全球购物
迎八一活动主题
2014/01/31 职场文书
什么样的创业计划书可行性高？
2014/02/01 职场文书
室内拓展活动方案
2014/02/13 职场文书
家长通知书家长评语
2014/04/17 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
师德先进个人材料
2014/12/20 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书