首页
所有分类
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 相关文章推荐
jQuery 入门级学习笔记及源码
Jan 22 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
JQuery教学之性能优化
May 14 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
js异步上传多张图片插件的使用方法
Oct 22 Javascript
JavaScript实现世界各地时间显示
Sep 07 Javascript
vue中使用echarts的示例
Jan 03 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
postcss-px2rem(1) ECharts(3) mixin(1) 相对定位(1) 游标(1) ref(1) GTID(1) ip连接(1) props(1) 绝对定位(1)
You might like
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
js new Date()实例测试
2019/10/31 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
vue实现登录功能
2020/12/31 Vue.js
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
Python计算程序运行时间的方法
2014/12/13 Python
一张图带我们入门Python基础教程
2017/02/05 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python中生成Epoch的方法
2017/04/26 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
python程序封装为win32服务的方法
2021/03/07 Python
Python 3.8 新功能全解
2019/07/25 Python
十一酒店活动方案
2014/02/20 职场文书
高中语文课后反思
2014/04/27 职场文书
国旗下演讲稿
2014/05/08 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
公司股份合作协议书
2014/12/07 职场文书
一年级小学生评语大全
2014/12/25 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书