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 ...
随机推荐
- Python3学习笔记(五)：列表和元组
一.列表 列表是可变的--可以改变列表的内容 list函数可以把各种类型的序列拆分列表 >>> list('Hello') ['H', 'e', 'l', 'l', 'o'] 二.列 ...
- windows7 中 wacom数位板如何关闭点击水波 和长按右键这两个特效
就是点住笔尖不动,就会弹出右键,这个功能是微软操作系统具有的一项功能,,如果您感觉不便,可以按以下方法将其去掉: 1.打开"控制面板--笔和触摸--笔选项--按下并保持--设置": ...
- 理解BFC以及BFC相关布局问题解决
写页面时会遇到: 子元素float父元素的高度不会撑开; 在布局时,box1and box2,其中box1 float:left,这是box2会在box1下面,(如果文字过多就会形成文字环绕效果),但 ...
- express中redirect传递数据
redirect中无法跟render一样传递数据 在index中,可以通过session重定向到login 在login.js 中获取req.session,渲染到login.ejs中,最后js获取
- java第二周小结
这是接触Java的第一周,了解这个语言的一些基础知识,下面是对这段时间重要知识点的汇总 一.Java是一种面向对象的语言 特点为:简洁高效.可移植性.适合分布式计算.健壮防患于未然的特性.多线程 ...
- Loading class `com.mysql.jdbc.Driver'. This is deprecated警告处理，jdbc更新处
1.报错信息是这样的; 处理:提示信息表明数据库驱动com.mysql.jdbc.Driver'已经被弃用了.应当使用新的驱动com.mysql.cj.jdbc.Driver' 所以,按照提示更改jd ...
- sqlalchemy.exc.InvalidRequestError: Table 'run_result' is already defined for this MetaData instance
临时解决办法: 在models文件导入db后,加上如下代码: db.metadata.clear() 但解决问题的根本之处还是在于找到,为何会声明了2次类的定义呢? 解析: table 'roles_ ...
- Jquery Ajax调用asmx出错问题
1.//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释. [System.Web.Script.Services.ScriptService] 这个 ...
- 阶段2 JavaWeb+黑马旅游网_15-Maven基础_第4节 maven生命周期和概念模型图_09maven概念模型图
项目自身的信息 项目运行所依赖的扎包 运行环境信息:tomcat啊,JDK啊这些都属于运行环境 一个jar包的坐标由三个最基本的信息组成. 第一部分就是依赖管理. 第二个部分
- Jmeter之检查点
检查点 Jmeter中检查点也叫断言,Jmeter中有很多类型的断言,但是最常用的是响应断言,即根据服务器返回的结果来判断测试是否通过. 响应断言 添加断言结果用于运行完毕后查看结果 测试通过 测试不 ...