首页
所有分类
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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
vue的webcamjs集成方式
Nov 16 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) FuzzyWuzzy(1) 图像处理(1) 井字棋(1) Pyecharts(7) 对齐打印(1) 人工智能(2) 五子棋(12) PyTorch(1) 计算器(5)
You might like
《五等分的花嫁》漫画完结！2020年10月第2期TV动画制作组换血！
2020/03/06 日漫
用PHP开发GUI
2006/10/09 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
Python实现的端口扫描功能示例
2018/04/08 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
基于python实现高速视频传输程序
2019/05/05 Python
运动鞋中的劳斯莱斯：索康尼(SAUCONY)
2017/08/09 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
高中毕业自我评价
2014/02/08 职场文书
购房公证委托书（2014版）
2014/09/12 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
领导干部个人对照检查材料（群众路线）
2014/09/26 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
安全责任书
2015/01/29 职场文书
护士自我推荐信范文
2015/03/24 职场文书
python urllib库的使用详解
2021/04/13 Python
PHP实现考试倒计时功能代码
2021/04/16 PHP