bootstrap table实现iview固定列的效果
因为bootstrap自带的固定列效果满足不了公司需求，所以借助fixed-table这个插件完成了iview固定列的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>左右两侧固定列，中间内容可以横向拖动</title>
<link rel="stylesheet" href="css/fixed-table.css" />
<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="###">查看</a>
<a href="###">编辑</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="###">查看</a>
<a href="###">编辑</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="###">查看</a>
<a href="###">编辑</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="###">查看</a>
<a href="###">编辑</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="###">查看</a>
<a href="###">编辑</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="###">查看</a>
<a href="###">编辑</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="###">查看</a>
<a href="###">编辑</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="###">查看</a>
<a href="###">编辑</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="###">查看</a>
<a href="###">编辑</a>
</div>
</td>
</tr>
<tr>
<td class="w-100">
<div class="table-cell">
<a href="###">查看</a>
<a href="###">编辑</a>
</div>
</td>
</tr>
<tr>
<td class="w-100">
<div class="table-cell">
<a href="###">查看</a>
<a href="###">编辑</a>
</div>
</td>
</tr>
<tr>
<td class="w-100">
<div class="table-cell">
<a href="###">查看</a>
<a href="###">编辑</a>
</div>
</td>
</tr>
<tr>
<td class="w-100">
<div class="table-cell">
<a href="###">查看</a>
<a href="###">编辑</a>
</div>
</td>
</tr>
<tr>
<td class="w-100">
<div class="table-cell">
<a href="###">查看</a>
<a href="###">编辑</a>
</div>
</td>
</tr>
<tr>
<td class="w-100">
<div class="table-cell">
<a href="###">查看</a>
<a href="###">编辑</a>
</div>
</td>
</tr>
<tr>
<td class="w-100">
<div class="table-cell">
<a href="###">查看</a>
<a href="###">编辑</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="###">查看</a>';
html += ' <a href="###">编辑</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固定列的效果的更多相关文章
- tableZen maxHeight 解决方案 如果数据条数小于N，不进行高度设置，超过N条，直接设置高度，解决原生iview Table 对于右侧固定列，不能计算出正确数值的解决方案
tableZen maxHeight 解决方案 如果数据条数小于N,不进行高度设置,超过N条,直接设置高度,解决原生iview Table 对于右侧固定列,不能计算出正确数值的解决方案 if (thi ...
- layui table 数据表格固定列的行高和table其他列的行高不一致
1.问题描述:使用layui的table数据表格,固定某一列,这样表格中数据的宽度超出屏幕宽度时,固定列可以一直显示在屏幕中,不会随着底部滚动栏左右的拖动而变化位置.但是遇到一个问题,就是固定列的行高 ...
- bootstrap table表格属性、列属性、事件、方法
留存一份,原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 表格参数 表格的参数定义在 jQuery.fn.bootst ...
- 好用的自适应表格插件-bootstrap table （支持固定表头）
最近工作中找到了一款十分好用的表格插件,不但支持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他自带的冻结表头功能,让开发制作表格十分容易,不过网上大多都是英文文档,第一次使用会比较麻烦 ...
- bootstrap table footerFormatter用法 统计列求和 sum、average等
其实上一篇blog里已经贴了代码,简单解释一下吧: 1.showFooter: true,很重要,设置footer显示: $(cur_table).bootstrapTable({ url: '/et ...
- C# Bootstrap table之 分页
效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...
- [转]C# Bootstrap table之 分页
本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...
- bootstrap-table固定表头固定列
1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js <tabl ...
- 161222、Bootstrap table 服务器端分页示例
bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...
随机推荐
- 2019 Multi-University Training Contest 3 T7 Find the answer
Find the answer Time Limit: 4000/4000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tota ...
- HDU 6012 Lotus and Horticulture（离散化）
题目代号:HDU 6012 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6012 Lotus and Horticulture Time Limit: ...
- java list去重方式，以及效率问题
之前面试被问到关于java如何去重的问题,当时没怎么留意,今天刚好项目中用到了,所以记录一下. 实体类: /** * 用户类 */ class User{ private String usernam ...
- [CSP-S模拟测试]:异或（数学）
题目描述 给定$L,R$,我们希望你求出:$$\sum\limits_{i=L}^R\sum\limits_{j=L}^R(i\oplus j)$$其中这里的$\oplus$表示异或运算.答案对$10 ...
- StringBuffer的s1.capacity()是多少?
定义有StringBuffer s1=new StringBuffer(10);s1.append(“1234”)则s1.length()和s1.capacity()分别是多少? StringBuff ...
- linux可用的跨平台C# .net standard2.0 写的高性能socket框架
能在window(IOCP)/linux(epoll)运行,基于C# .net standard2.0 写的socket框架,可使用于.net Framework/dotnet core程序集,.使用 ...
- 洛谷P4095新背包问题
传送 这道题最最暴力的方法就是对于每一个询问都跑一边多重背包问题,但显然q不会那么友好的让我们用暴力过掉这道题. 考虑优化.我们可以先把裸的多重背包搞成二进制优化后的多重背包.但是复杂度依然无法接受. ...
- ICML 2019 分析
ICML 2019 分析 Word Embeddings Understanding the Origins of Bias in Word Embeddings Popular word embed ...
- Golang基础(3)：数组，切片和字典
一:数组 数组是一个具有相同类型元素,固定长度的有序集合,一般定义如下:var x [5]int表示数组是一个整数型数组,长度为5数组的几种定义方式 a: var来定义数组,然后依次赋值 packag ...
- css之——div模拟textarea文本域的实现
1.问题的出现: <textarea>标签为表单元素,但一般用于多行文本的输入,但是有一个明显的缺点就是不能实现高度自适应,内容过多就回出现滚动条. 为了实现高度自适应:用div标签来代模 ...