首页
所有分类
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 相关文章推荐
取选中的radio的值
Jan 11 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
js下载文件并修改文件名
May 08 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
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
sql模式(1) postcss-px2rem(1) lua(3) into outfile(1) 全表扫描(1) 索引树扫描(1) geoserver(1) 绝对定位(1) 匹配(1) 相对定位(1)
You might like
我的论坛源代码(二)
2006/10/09 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
用C/C++来实现 Node.js 的模块（二）
2014/09/24 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
Python实现的RSS阅读器实例
2015/07/25 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
python实现代码统计器
2019/09/19 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
python 发送get请求接口详解
2020/11/17 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
公司新人试用期自我评价
2014/09/17 职场文书
个人工作保证书
2015/02/28 职场文书
开除员工通知
2015/04/22 职场文书
优秀员工演讲稿
2019/06/21 职场文书