BootstrapTable冻结表头（二）

BootstrapTable冻结表头，这个方法根据客户需求，找了好久没找到合适的方法，第一次用的这种方法，BootstrapTable冻结表头（一）无意在正在开发的项目中发现了不知道那个大佬做的，挺不错的。记录一下

一、冻结表头效果

可能细心的你发现了，上面错位了，这个根据你的情况适当调整，看注释6

二、冻结表头demo2

使用时要注意的有注释，共6条

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>BootstrapTable冻结表头-Demo2</title><!-- 引入bootstrap样式 --><link rel="stylesheet" href="css/bootstrap.min.css" /><!-- 引入bootstrap-table样式 --><link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" /><style type="text/css">/******注释1.表头固定 Start******/    .fixed-table-container .no-records-found>td:last-of-type{display:block !important;position:absolute;width:100%;}.fixed-table-container{height:auto !important;}p{margin-bottom:0;}table thead, tbody tr {display:table;width:100%;table-layout:fixed;}/**注释6.有事会错位，根据情况适当调整这里**/table thead {width: calc( 100% - 0.4em )}#table,#table1{background:#efefef;border-top:2px solid #ddd;}#table tbody,#table1 tbody{background:#fff;}.table thead:first-child tr:first-child th{border-top:none;}        /******表头固定 end******/</style></head><body style="width: 95%;margin: 0 auto;"><h2>BootstrapTable冻结表头-Demo2</h2><!-- 注释2.bootstrap-table表格外div的class="bootstrap-table-fixed-header"，名字可以变但是JS也同步--><!-- 注释3.列数过多会挤到一起，这时候就自己设置data-width="140px" --><div class="bootstrap-table-fixed-header"><table id="table" data-toolbar="#toolbar"data-toggle="table"  data-ajax="ajaxRequest"   data-search="false"     data-side-pagination="server" data-click-to-select="true" data-single-select="true"data-pagination="true"data-page-size= "10"><thead style="background:#efefef;"><tr><th  data-width="140px" data-checkbox="true"></th><th  data-width="140px" data-field="id">标题标题ID-1</th><th  data-width="140px" data-field="name">标题标题Name-1</th><th  data-width="140px" data-field="price">标题标题Price-1</th><th  data-width="140px" data-field="id">标题标题ID-2</th><th  data-width="140px" data-field="name">标题标题Name-2</th><th  data-width="140px" data-field="price">标题标题Price-2</th><th  data-width="140px" data-field="id">标题标题ID-3</th><th  data-width="140px" data-field="name">标题标题Name-3</th><th  data-width="140px" data-field="price">标题标题Price-3</th><th  data-width="140px" data-field="id">标题标题ID-4</th><th  data-width="140px" data-field="name">标题标题Name-4</th><th  data-width="140px" data-field="price">标题标题Price-4</th><th  data-width="140px" data-field="id">标题标题ID-5</th><th  data-width="140px" data-field="name">标题标题Name-5</th><th  data-width="140px" data-field="price">标题标题Price-5</th></tr></thead></table></div><!-- jquery --><script type="text/javascript" src="js/jquery.min.js" ></script><!-- bootstrap --><script type="text/javascript" src="js/bootstrap.min.js" ></script><!-- bootstrap-table --><script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js" ></script><!-- 引入中文语言包 --><script type="text/javascript" src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" ></script><script type="text/javascript">//自定义ajax方法function ajaxRequest(params){//debugger;$.ajax({url: "/bootstrap-table/data4.json",type: "POST",dataType: "json",success: function(rs){console.log(rs)var message = rs.array;params.success({total: rs.total,rows: message});},error: function(rs){console.log(rs)}});}/******注释4.表头固定 Start******/$(function(){var winH=$(window).height();var tabH=Math.floor(winH*0.4)+"px";var tabH2=Math.floor(winH*0.10)+"px";//注释5.注意这里的.bootstrap-table-fixed-header可根据情况改变$(".bootstrap-table-fixed-header .fixed-table-body tbody").css({'max-height':tabH,'overflow-Y':"scroll",'display':'block'})$(".listboxline .fixed-table-body tbody").css({'max-height':tabH2,'overflow-Y':"scroll",'display':'block'})});/******表头固定 end******/</script></body>
</html>

BootstrapTable冻结表头（二）相关推荐

BootstrapTable冻结表头（一）
BootstrapTable冻结表头,使用别人写的 JS,这种方法表头置顶后就不会动了.改正一个隐含的bug就是拉动滚定条时表头与数据列不对应.还有一种方法 BootstrapTable冻结表头(二) ...
关于bootstrap-table冻结列生成多个冻结表头和表格主体的问题
Write By Monkeyfly 以下内容均为原创,如需转载请注明出处. 前提项目中有3个页面的表格使用到了 bootstrap-table 冻结列的功能其中,某个表格要实现如下图所示的功能: ...
冻结html表格标题列,jQuery实现冻结表头的方法
本文实例讲述了jQuery实现冻结表头的方法.分享给大家供大家参考.具体如下: 前段时间做项目时候由于需要显示一个列表,但是由于数据太多在滚动的时候表头必须冻结住,所以就写了下面这个脚本(曾经在网上也 ...
bootstrap-table固定表头固定列
bootstrap-table固定表头固定列 1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-tabl ...
原生html冻结表头,Table冻结表头示例代码
Table冻结表头: function fixupFirstRow(tab) { var div=tab.parentNode; if(div.className.toLowerCase()==&qu ...
bootstrap 冻结表格，冻结表头
需要的文件下载: bootstrap-table:https://github.com/wenzhixin/bootstrap-table bootstrap-table-fiex-column:ht ...
Bootstrap-table组合表头
写在前面: 当表格有多个表头需要进行组合的时候,这个时候就需要用到列的多维数组来实现了.由于项目中并没有涉及到太多,这里就不再写demo了,可以直接参考其他人写的博客,写的比较好. 相关参考连接:(b ...
bootstrapTable表格表头换行
使用bootstrapTable组件,达到表头中有一格显示两行,其他表头均为一行,效果图如下: 代码: [javascript] view plain copy { field : 'pay_date ...
C# GridView 冻结列冻结表头
主要是这四个引用我的是复杂表头如果不是复杂表头 headerRows: 2 这个属性设置1即可 width: "100%", height: "480px" ...

BootstrapTable冻结表头（二）

BootstrapTable冻结表头（二）相关推荐

最新文章

热门文章