bootstrap中使用table实现iview固定列效果的示例分析
更新:HHH   时间:2023-1-7


这篇文章给大家分享的是有关bootstrap中使用table实现iview固定列效果的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

因为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固定列效果的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

返回web开发教程...