iview中Bootstrap Table实现固定列的实战教程与代码示例
155 浏览量
更新于2024-08-28
收藏 97KB PDF 举报
本篇文章主要介绍了如何在Bootstrap框架中利用fixed-table插件实现iview固定列的效果，以满足特定的公司需求，尤其是在HTML代码方面。首先，作者提到Bootstrap自身的固定列功能可能无法满足全部需求，因此引入了一个第三方插件来增强表格的功能。
在提供的HTML代码中，我们看到以下关键知识点：
1. **HTML结构**: 文档使用了HTML5结构，`<doctype>`声明指定语言为英文。页面包含一个`<html>`元素，设置了`lang="en"`属性，表示文档是英文的。页面的头部区域包含了`<head>`部分，其中包括元数据（`<meta charset="UTF-8" />`），用于设定字符编码，以及页面标题`<title>`。
2. **CSS样式**:
- `.fixed-table-box`是一个类，定义了整个表格容器的宽度（800px）和居中对齐，并设置了最大高度（260px）以适应内容滚动。
- `.fixed-table_fixed`类用于固定列，限制了其`max-height`以确保与表格主体内容同步滚动。
- 对于列宽定义了多个类如`.w-150`, `.w-120`, `.w-300`, 和 `.w-100`，用于设置不同列的宽度。
3. **jQuery和插件引用**:
- 引入了jQuery库版本1.10.2，这是JavaScript库，用于处理DOM操作和事件处理。
- `fixed-table.js` 是固定列插件的脚本，实现了表格固定列的效果。
4. **表格结构**:
- 使用了`<table>`标签创建表格，`cellspacing="0"`、`cellpadding="0"`和`border="0"`属性使得表格更加简洁。
- 在`<thead>`标签内，定义了表格的表头，其中包含一个具有`data-fixed="true"`属性的`<th>`元素，表示这列应该被固定。
5. **表头和列宽度的实现**:
- 表头部分通过`.fixed-table_header`类显示，内部使用`<tr>`和`<th>`元素组织。`<th>`元素根据`.w-`类设置宽度，如`<th class="w-150">`定义了一个150px宽的固定列。
6. **按钮区（btns）**:
- 页面底部的`.btns`类设置了文本居中，而`.btns button`类定义了按钮样式，包括内边距和尺寸。
通过这些代码，开发者可以将Bootstrap与fixed-table插件结合起来，创建一个具有左右两侧固定列，中间内容可横向拖动的表格，适用于各种需要定制表格布局的场景。同时，注意该插件可能需要适当的配置和调整才能适应具体项目的需求。
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" 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
下载后可阅读完整内容，剩余6页未读，立即下载
2020-10-17 上传
2020-09-01 上传
2020-08-29 上传
2020-12-11 上传
2019-04-02 上传
点击了解资源详情
2023-05-25 上传
2021-01-19 上传
2020-11-28 上传
weixin_38665449
- 粉丝: 8
- 资源: 963
我的内容管理
展开
最新资源
- C语言数组操作：高度检查器编程实践
- 基于Swift开发的嘉定单车LBS iOS应用项目解析
- 钗头凤声乐表演的二度创作分析报告
- 分布式数据库特训营全套教程资料
- JavaScript开发者Robert Bindar的博客平台
- MATLAB投影寻踪代码教程及文件解压缩指南
- HTML5拖放实现的RPSLS游戏教程
- HT://Dig引擎接口，Ampoliros开源模块应用
- 全面探测服务器性能与PHP环境的iprober PHP探针v0.024
- 新版提醒应用v2：基于MongoDB的数据存储
- 《我的世界》东方大陆1.12.2材质包深度体验
- Hypercore Promisifier: JavaScript中的回调转换为Promise包装器
- 探索开源项目Artifice：Slyme脚本与技巧游戏
- Matlab机器人学习代码解析与笔记分享
- 查尔默斯大学计算物理作业HP2解析
- GitHub问题管理新工具：GIRA-crx插件介绍
