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>具体网址忘了存了，有需要的小伙伴可自己查一下~

次案例从一个网站下载，

实现效果为：

原文地址：https://www.cnblogs.com/jiajiamiao/p/11606893.html

时间： 2024-08-28 20:31:58

bootstrap table实现iview固定列的效果的相关文章

好用的自适应表格插件-bootstrap table （支持固定表头）

最近工作中找到了一款十分好用的表格插件,不但支持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他自带的冻结表头功能,让开发制作表格十分容易,不过网上大多都是英文文档,第一次使用会比较麻烦,因此在此记录一些简单的使用方式,方便扩展学习 首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说

bootstrap table使用小记

bootstrap table是一个非常不错的,基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等. 最近基于bootstrap开发一个开台发布系统,就开发过程中,使用bootstap table遇到的一些问题及收获记录如下: 开始使用: 需要在你自己的页面中引入以下样式及脚本: <link rel="stylesheet" href="bootstrap.min.css"><l

JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能有一点bug,于是和同事讨论该如何解决,于是就有了这篇文章. 一.起因回顾 最近项目里面有一个表格需求,该表格列是动态产生的,而且列的数量操作一定值以后就会出现横向滚动条,滚动的时候需要前面几列固定.也就是所谓的excel的冻结列功能.该如何实现呢?不用多说,当然是查文档,于是找到了这篇http:/

HTML+CSS+JS实现TABLE固定列（常见浏览器兼容）的最佳实践

BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好.一些重量级的JS组件库也都有这个功能,那么有没有更简单的方法实现这个功能呢? 这个需求常见的解决方案是使用表格拼接的方法,这个方案如果要制作静态的网页,或者功能简单的动态页面,逻辑比较简单,技术上也不复杂,很容易实现,但是如果要做成组件,动态功能较多的话,就需要写大量的冗余代码,难以维护,甚至于一个简单的功能,都需要些很多的代码,比如事件处理等,

asp.net table表格表头及列固定实现

在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看不见了,于是需求就出来了,就是需要固定table的表头和列. demo结构如下图所示: demo下载地址:http://download.csdn.net/detail/taomanman/9124949 示例运行效果如下图所示: 版权声明:本文为博主原创文章,未经博主允许不得转载.

bootstrap table 实现固定悬浮table 表头并可以水平滚动

在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚动 html code(source table): <table id="top_fix_table" border="0" cellpadding="4" cellspacing="0" class="tabl

固定table的表头同时固定列

table表格是我们最常使用的数据显示一种形式,但有时候数据比较多的时候 就需要我们去固定表头,固定列.我这里用简单的css样式配合两句js脚本来实现,希望能够去帮到你. <div class="tableContainer"> <div class="sideTable"> <span>产品小类</span> <div id="sideTable"> <table> <

TABLE CONTROL隐藏列和固定列的实现

一.设置固定列 需求:为了方便对主要关心信息地查看,用户希望TABLE CONTROL左边的一列或者几列在屏幕上固定.针对用户这样子的需求, 我们首先会想到类似与屏幕编辑/可见等字段属性设置,但是此方法行不通.解决方法:通过设置Table Control自带的属性,定义最左边的某些列不可滚动.在Screen Layout中,双击Table Control的右上角,弹出"表控制"属性,即可设置.如下图所示: 二.隐藏列 需求:隐藏TABEL CONTROL的某一列或者多列,其实针对这样子

使用bootstrap table时不能显示筛选列和分页每页显示的行数

使用bootstrap table时不能显示筛选列和分页每页显示的行数 后来在同事的帮助下,才发现没有引用bootstrap的js文件 <script src="/Scripts/bootstrap/js/bootstrap.js"></script> 这个引用了就可以了