bootstrap table實現(xiàn)iview固定列的效果實例代碼詳解
更新時間：2019年09月30日 09:31:45 作者：九九兒
這篇文章主要介紹了bootstrap table實現(xiàn)iview固定列的效果,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
因為bootstrap自帶的固定列效果滿足不了公司需求，所以借助fixed-table這個插件完成了iview固定列的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>左右兩側(cè)固定列，中間內(nèi)容可以橫向拖動</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{/*內(nèi)容了表格主體內(nèi)容有縱向滾動條*/
max-height: 260px;
}
.fixed-table_fixed>.fixed-table_body-wraper{/*為了讓兩側(cè)固定列能夠同步表格主體內(nèi)容滾動*/
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">市區(qū)</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 -->
<!-- 表格內(nèi)容 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">普陀區(qū)</div></td>
<td class="w-300"><div class="table-cell">上海市普陀區(qū)金沙江路 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">普陀區(qū)</div></td>
<td class="w-300"><div class="table-cell">上海市普陀區(qū)金沙江路 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">普陀區(qū)</div></td>
<td class="w-300"><div class="table-cell">上海市普陀區(qū)金沙江路 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">普陀區(qū)</div></td>
<td class="w-300"><div class="table-cell">上海市普陀區(qū)金沙江路 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">普陀區(qū)</div></td>
<td class="w-300"><div class="table-cell">上海市普陀區(qū)金沙江路 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">普陀區(qū)</div></td>
<td class="w-300"><div class="table-cell">上海市普陀區(qū)金沙江路 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">普陀區(qū)</div></td>
<td class="w-300"><div class="table-cell">上海市普陀區(qū)金沙江路 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">普陀區(qū)</div></td>
<td class="w-300"><div class="table-cell">上海市普陀區(qū)金沙江路 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>
<!-- 表格內(nèi)容 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">清空數(shù)據(jù)</button>
<button type="button" id="add_data">添加數(shù)據(jù)</button>
<button type="button" id="del_row">刪除行</button>
</div>
<script>
//初始化FixedTable
$(".fixed-table-box").fixedTable();
//清空表格
$("#empty_data").on("click", function (){
$(".fixed-table-box").emptyTable();
});
//添加數(shù)據(jù)
$("#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">普陀區(qū)</div></td>';
html += ' <td class="w-300"><div class="table-cell">上海市普陀區(qū)金沙江路 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>
具體網(wǎng)址忘了存了，有需要的小伙伴可自己查一下~
次案例從一個網(wǎng)站下載，
實現(xiàn)效果為：
總結(jié)
以上所述是小編給大家介紹的bootstrap table實現(xiàn)iview固定列的效果,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要為大家詳細介紹了jQuery初級教程之網(wǎng)站品牌列表效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
方便實用的jQuery checkbox復(fù)選框全選功能簡單實例
這篇文章介紹了jQuery checkbox復(fù)選框全選功能的代碼實例，有需要的朋友可以參考一下2013-10-10
jquery關(guān)于圖形報表的運用實現(xiàn)代碼
jquery 關(guān)于圖形報表的運用實現(xiàn)代碼，需要的朋友可以參考下。2011-01-01
Easyui 關(guān)閉jquery-easui tab標簽頁前觸發(fā)事件的解決方法
這篇文章主要介紹了Easyui 關(guān)閉jquery-easui tab標簽頁前觸發(fā)事件 ,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
jQuery Uploadify 上傳插件出現(xiàn)Http Error 302 錯誤的解決辦法
本文給大家介紹jQuery Uploadify 上傳插件出現(xiàn)Http Error 302 錯誤的解決辦法，涉及到uploadify上傳錯誤302相關(guān)問題，對本文感興趣的朋友一起看看吧2015-12-12
這篇文章主要介紹了實例講解JQuery中this和$(this)的區(qū)別,this表示當前的上下文對象是一個html對象,可以調(diào)用html對象所擁有的屬性和方法,$(this),代表的上下文對象是一個jquery的上下文對象,可以調(diào)用jquery的方法和屬性值,需要的朋友可以參考下2014-12-12
基于Jquery與WebMethod投票功能實現(xiàn)代碼
基于Jquery與WebMethod投票功能實現(xiàn)代碼，需要的朋友可以參考下。2011-01-01
jQuery快速上手：寫jQuery與直接寫JS的區(qū)別詳細解析
jQuery代碼具體的寫法和原生的Javascript寫法在執(zhí)行常見操作時的區(qū)別如下所示。需要的朋友可以過來參考下2013-08-08
這篇文章主要介紹了jQuery遍歷節(jié)點樹方法,結(jié)合實例形式分析了3種常見的節(jié)點遍歷技巧,需要的朋友可以參考下2016-09-09
jQuery操作attr、prop、val()/text()/html()、class屬性
這篇文章主要介紹了jQuery操作attr、prop、val()/text()/html()、class屬性 ，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05