iview中Bootstrap Table实现固定列的实战教程与代码示例

boot

8 浏览量更新于2024-08-28 收藏 97KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

本篇文章主要介绍了如何在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>

<head>

<title>左右两侧固定列，中间内容可以横向拖动</title>

<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>

<thead>

<tr>

</tr>

</thead>

</table>

</div>

<tbody>

<tr>

<td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>

<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页未读，立即下载