BootstrapTable冻结表头（一）

BootstrapTable冻结表头，使用别人写的 JS，这种方法表头置顶后就不会动了。改正一个隐含的bug就是拉动滚定条时表头与数据列不对应。还有一种方法 BootstrapTable冻结表头（二）

bootstrap-table-fixed-header的js和css下载

链接：https://pan.baidu.com/s/1d8qB1bldjhLEWQp6jsMBOQ 提取码：r57g

一、冻结表头效果：

二、冻结表头demo

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

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>BootstrapTable冻结表头-Demo</title><!-- 引入bootstrap样式 --><link rel="stylesheet" href="css/bootstrap.min.css" /><!-- 引入bootstrap-table样式 --><link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" /><!-- 1、固定表头样式 --><link rel="stylesheet" href="js/plugins/bootstrap-table-fixed-header/bootstrap-table-fixed-header.css" /></head><body style="width: 95%;margin: 0 auto;"><h2>BootstrapTable冻结表头-Demo</h2><!--2、bootstrap-table表格放到DIV中，加个松开鼠标时执行的事件来模拟模拟鼠标滚动事件，以实现横向滚动条的移动，表头跟数据对应--><div style="overflow-x: auto;overflow-y: auto;" onmouseup="onmouseUP()"><!--3、给表格加样式 class="table table-striped 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"class="table table-striped table-fixed-header" ><thead style="background:#efefef;"><tr><th data-checkbox="true"></th><th  data-field="id">标题标题ID-1</th><th  data-field="name">标题标题Name-1</th><th  data-field="price">标题标题Price-1</th><th  data-field="id">标题标题ID-2</th><th  data-field="name">标题标题Name-2</th><th  data-field="price">标题标题Price-2</th><th  data-field="id">标题标题ID-3</th><th  data-field="name">标题标题Name-3</th><th  data-field="price">标题标题Price-3</th><th  data-field="id">标题标题ID-4</th><th  data-field="name">标题标题Name-4</th><th  data-field="price">标题标题Price-4</th><th  data-field="id">标题标题ID-5</th><th  data-field="name">标题标题Name-5</th><th  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><!-- 4、固定表头JS--><script type="text/javascript" src="js/plugins/bootstrap-table-fixed-header/bootstrap-table-fixed-header.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)}});}/*************5、固定表头start********************///固定表头$("#table").on("post-body.bs.table",function(){//alert(1);$("#table thead").addClass("header");$(".table-fixed-header").fixedHeader();onmouseUP();});//onmouseup松开鼠标时执行//模拟鼠标滚动事件，以实现横向滚动条的移动，表头跟数据对应function onmouseUP(){var scrollTop = document.getElementsByTagName("body")[0].scrollTop;scrollTop -= 10;$(".table-fixed-header").fixedHeader();//alert(scrollTop)}/*************5、固定表头end********************/</script></body>
</html>

data4.json

{
"code": 0,
"total": 1314,
"message": "success",
"array" :
[
{
"id": 0,
"name": "Item 0",
"price": "$1"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$1"
},
{
"id": 5,
"name": "Item 5",
"price": "$1"
},
{
"id": 6,
"name": "Item 6",
"price": "$1"
},
{
"id": 7,
"name": "Item 7",
"price": "$1"
},
{
"id": 8,
"name": "Item 8",
"price": "$1"
},
{
"id": 9,
"name": "Item 9",
"price": "$1"
},
{
"id": 0,
"name": "Item 0",
"price": "$1"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$1"
},
{
"id": 5,
"name": "Item 5",
"price": "$1"
},
{
"id": 6,
"name": "Item 6",
"price": "$1"
},
{
"id": 7,
"name": "Item 7",
"price": "$1"
},
{
"id": 8,
"name": "Item 8",
"price": "$1"
},
{
"id": 9,
"name": "Item 9",
"price": "$1"
}
]
}

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

BootstrapTable冻结表头（二）
BootstrapTable冻结表头,这个方法根据客户需求,找了好久没找到合适的方法,第一次用的这种方法,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冻结表头（一）相关推荐

最新文章

热门文章