首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

BootStraptable表格插件自适应固定表头(超好用)

作者：uikankan | 来源：互联网 | 2022-09-17 02:17
这篇文章主要介绍了BootStraptable表格插件自适应固定表头(超好用)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

首先是简单的页面形式，大家可以按照平常画表格的方式来创建html表格，然后通过js控制特殊的样式等操作（优点是表格更加直观，方便调整表格样式等，速度快）

当然，也可以只在页面上放一个table标签，之后的所有数据和样式都通过js控制也是可以的，后面会说（优点方便控制修改数据，尤其是ajax方式获取的json格式，但是调整样式比较麻烦）

ps：这个是插件的官网，里面有英文api和例子：http://bootstrap-table.wenzhixin.net.cn/zh-cn/

还有，使用前请引入bootstrap的相关css，js，jQuery，以及bootstrap-table的css，js至少这5个基本文件

一，html表格方式

例一：需求，简单的表格数据呈现，表头是两行，还有一个上下浮的箭头

分析：很简单，只需要html就可以实现，按照常规的表格来画，添加上bootstrap-table独有的自定义属性即可，注意如果不使用js请在最开始的table标签中加上data-toggle

html代码：







来耗存
当日
本周
本月




本期
同比
环比
本期
同比
环比
本期
同比
环比






来煤量
21341
0.31
0.21
334322
1.13
4.21
3125113
2.21
2.94




来煤量
76573
4.21
1.45
234534
4.35
2.75
44225
0.74
3.45




耗煤量
43363
0.31
0.21
32422
1.13
4.21
13345
2.21
2.94




来煤量
34624
4.35
1.23
452346
2.32
0.05
94524
2.21
2.94




耗煤量
21341
0.31
0.21
334322
1.13
4.21
3125113
2.21
2.94




耗煤量
21341
0.31
0.21
334322
1.13
4.21
3125113
2.21
2.94




耗煤量
21341
0.31
0.21
334322
1.13
4.21
3125113
2.21
2.94




耗煤量
21341
0.31
0.21
334322
1.13
4.21
3125113
2.21
2.94




耗煤量
21341
0.31
0.21
334322
1.13
4.21
3125113
2.21
2.94




耗煤量
21341
0.31
0.21
334322
1.13
4.21
3125113
2.21
2.94

例二：需求，第二个表格后面有个显示进度的自定义单元格，并且第一行要求是做一个合计的统计展示，这两个功能需要用js来设定自定义行列

html代码：







序号
供应商
品种
热值
煤价
标煤单价
当日来煤
累计来煤
月计划量
月计划完成进度






2
双欣矿业
低硫煤




6686.08
30000
22%




3
伊泰股份
工程煤




51888.72
70000
74%




4
嘉远公司
中高硫煤




20041.86
90000
100%




5
爱地能源
低硫煤




5191.08
30000
0%




6
恒泰煤炭
中高硫煤




18265.56
0
22%




7
双欣矿业
低硫煤




6686.08
30000
22%




8
双欣矿业
低硫煤




6686.08
30000
22%




9
双欣矿业
低硫煤




6686.08
30000
22%

js代码：

//声明用来统计合计（累计来煤，月计划）的变量
var yjhArr=[];
var ljlmArr=[];
//显示进度条的自定义列
function progress (value,row){
var width=parseInt(row.yjhjd);
var red='#e63737';
var blue='#b6ccf4';
yjhArr.push(row.yjhl);
ljlmArr.push(row.ljlm);
return "
　　　　　　　　　　(width>=100&＃63;red:blue)+";'>"+value+"
"
}
//计算合计数值的方法
function yjhTotal(){
var subyjh=0;
var subljlm=0;
var row=[];
for(var i=0;i

分析：自定义行列需要添加data-formatter=‘方法名'，其中progress（）方法中的参数row，会在表格生成行的时候每生成一行就执行一次并将该行的对象传进来。

二：js方式

通过这种方法，可以很方便的为表格设置参数，处理数据方面十分便捷，尤其是设置请求方式和地址时，不过这个项目暂时只是静态页面，有关数据的以后接触在写上来

例一：同上例一

html：

js：

//表格插件(表一)开始
$('#tableL01').bootstrapTable({
height:268,
//模拟数据
columns: [[{
align:'center',
valign:'middle',
field: 'lhc',
title: '来耗存',
rowspan:2
}, {
align:'center',
valign:'middle',
field: 'dr',
title: '当日',
colspan:3
}, {
align:'center',
valign:'middle',
field: 'bz',
title: '本周',
colspan:3
},{
align:'center',
valign:'middle',
field: 'by',
title: '本月',
colspan:3}],
[{
align:'center',
valign:'middle',
field: 'drbq',
title: '本期'
}, {
align:'center',
valign:'middle',
field: 'drtb',
title: '同比',
formatter:trend
},{
align:'center',
valign:'middle',
field: 'drhb',
title: '环比',
formatter:trend}, {
align:'center',
valign:'middle',
field: 'bzbq',
title: '本期'
}, {
align:'center',
valign:'middle',
field: 'bztb',
title: '同比',
formatter:trend
},{
align:'center',
valign:'middle',
field: 'bzhb',
title: '环比',
formatter:trend}, {
align:'center',
valign:'middle',
field: 'bybq',
title: '本期'
}, {
align:'center',
valign:'middle',
field: 'bytb',
title: '同比',
formatter:trend},{
align:'center',
valign:'middle',
field: 'byhb',
title: '环比',
formatter:trend
}]],
data:[{
id:1,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:2,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:3,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:4,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:5,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:6,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:7,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:8,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:9,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:10,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:11,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
},{
id:12,
lhc:'来存量',
drbq:'21341',
drtb:'0.21',
drhb:'0.33',
bzbq:'35624',
bztb:'1.62',
bzhb:'3.16',
bybq:'42613',
bytb:'2.78',
byhb:'1.59'
}]});
//模拟数据结束
//上下浮动箭头样式添加
function trend(value,row){
var trendIcon=row.id%2===0&＃63;'glyphicon glyphicon-arrow-down':'glyphicon glyphicon-arrow-up';
return ""+value
}
//表格插件一结束

分析：$('#tableL01').bootstrapTable（{}）是插件开始的标志，在其中添加表格的参数，然后在data：是表格的数据，而columns中则是设置列参数以及表格数据的地方，其中这个项目有代表性的是表头分为两部分，因此需要在columns中加两个数组【{}】，【{}】。之前都写在一个数组里，而源代码遍历的是columns的length

例二：

html相同都是只需要一个带id的table标签即可

js：

//表格插件(表二)开始
//声明用来统计合计（累计来煤，月计划）的变量
var yjhArr=[];
var ljlmArr=[];
$('#tableL02').bootstrapTable({
height:268,
//模拟数据
columns: [{
align:'center',
valign:'middle',
field: 'id',
title: '序号'
}, {
align:'center',
valign:'middle',
field: 'gys',
title: '供应商'
}, {
align:'center',
valign:'middle',
field: 'pz',
title: '品种'
},{
align:'center',
valign:'middle',
field: 'rz',
title: '热值'
},{
align:'center',
valign:'middle',
field: 'mj',
title: '煤价'
},{
align:'center',
valign:'middle',
field: 'bmdj',
title: '标煤单价'
},{
align:'center',
valign:'middle',
field: 'drlm',
title: '当日来煤'
},{
align:'center',
valign:'middle',
field: 'ljlm',
title: '累计来煤'
},{
align:'center',
valign:'middle',
field: 'yjhl',
title: '月计划量'
},{
align:'center',
valign:'middle',
field: 'yjhjd',
title: '月计划完成进度',
formatter:progress
}],
data:[{
id:2,
gys:'双欣矿业',
pz:'低硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'6686.08',
yjhl:'30000',
yjhjd:'22%'
},{
id:3,
gys:'伊泰股份',
pz:'工程煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'51888.72',
yjhl:'70000',
yjhjd:'74%'
},{
id:4,
gys:'嘉远公司',
pz:'中高硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'20041.86',
yjhl:'90000',
yjhjd:'100%'
},{
id:5,
gys:'爱地能源',
pz:'低硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'5191.08',
yjhl:'',
yjhjd:'0%'
},{
id:6,
gys:'恒泰煤炭',
pz:'中高硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'18265.56',
yjhl:'',
yjhjd:'0%'
},{
id:6,
gys:'恒泰煤炭',
pz:'中高硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'18265.56',
yjhl:'',
yjhjd:'0%'
},{
id:6,
gys:'恒泰煤炭',
pz:'中高硫煤',
rz:'',
mj:'',
bmdj:'',
drlm:'',
ljlm:'18265.56',
yjhl:'',
yjhjd:'0%'
}
]});
//模拟数据结束
//显示进度条的自定义列
function progress (value,row){
var width=parseInt(row.yjhjd);
var red='#e63737';
var blue='#b6ccf4';
yjhArr.push(row.yjhl);
ljlmArr.push(row.ljlm);
return "
=100&＃63;red:blue)+";'>"+value+"
"
}
//计算合计数值的方法
function yjhTotal(){
var subyjh=0;
var subljlm=0;
var row=[];
for(var i=0;i

这个其实和第一种方式差别不大，只不过把自定义列放在数据中设置罢了。比较好理解。而关于其他参数可以参考官网，数据是动态的如何添加网上也有不少例子，只要都放在.bootstrapTable（{}）中就可以了

以上所述是小编给大家介绍的BootStrap table表格插件自适应固定表头(超好用)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！


推荐阅读
  • html

    2019年前端技术趋势及职业发展路径

    本文探讨了2019年前端技术的发展趋势，包括工具化、配置化和泛前端化等方面，并提供了详细的学习路线和职业规划建议。 ... [详细]
  • hover

    分页插件3指定到某一页

    前言--页数多了以后需要指定到某一页（只做了功能，样式没有细调）html ... [详细]
  • html

    Ionic框架在HTML5中的应用与实践

    本文详细介绍了Ionic框架的使用方法及其与Angular的集成。Ionic框架是一个强大的前端开发工具，适用于构建跨平台的移动应用程序。文章将探讨如何引入必要的CSS和JavaScript文件，并解释bundle.js中包含的核心功能，如路由等。 ... [详细]
  • html

    深入理解ExtJS：从入门到精通

    深入理解ExtJS：从入门到精通
    本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析，帮助初学者快速掌握ExtJS的核心概念，并提供实用技巧和最佳实践。 ... [详细]
  • html

    Spring Boot 中静态资源映射详解

    Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理，包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文，您将了解如何高效地管理和引用静态资源。 ... [详细]
  • hover

    一个登陆界面

    一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • html

    JavaScript前端开发中常用的四种继承方法详解

    本文深入探讨了JavaScript中实现继承的四种常见方法，包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说，理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • html

    ThinkPHP6多数据库部署指南

    本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署，包括读写分离的策略，以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]
  • 正则

    JavaScript 实战与基础案例解析

    本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例，涵盖从入门到进阶的各个阶段，帮助读者全面提升JavaScript编程能力。 ... [详细]
  • hover

    HTML 文件上传按钮的样式设计

    本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化，使用户界面更加友好和美观。 ... [详细]
  • html

    当unique验证运到图片上传时

    当unique验证运到图片上传时
    2019独角兽企业重金招聘Python工程师标准model：public$imageFile;publicfunctionrules(){return[[[na ... [详细]
  • html

    理解文档对象模型（DOM）

    理解文档对象模型（DOM）
    本文介绍了文档对象模型（DOM）的基本概念，包括其作为HTML文档的节点树结构，以及如何通过JavaScript操作DOM来实现网页的动态交互。 ... [详细]
  • html

    Spring Boot 解决 AJAX 跨域请求及自定义 Headers 方法

    本文探讨了浏览器的同源策略限制及其对 AJAX 请求的影响，并详细介绍了如何在 Spring Boot 应用中优雅地处理跨域请求，特别是当请求包含自定义 Headers 时的解决方案。 ... [详细]
  • json

    深入解析ES6至ES8的新特性与应用

    深入解析ES6至ES8的新特性与应用
    本文详细介绍了自2015年发布的ECMAScript 6.0（简称ES6）以来，JavaScript语言的多项重要更新，旨在帮助开发者更好地理解和利用这些新特性进行复杂应用的开发。 ... [详细]
  • html

    理解ServletContext的作用与应用

    ServletContext接口在Java Web开发中扮演着重要角色，它提供了一种方式来获取关于整个Web应用程序的信息。通过ServletContext，开发者可以访问初始化参数、共享数据以及应用资源。 ... [详细]
author-avatar
uikankan
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有