最近测试向我提了一个需求,页面显示下拉锁定表头,还要我实现导出excel把表头锁住,这个导出功能是在jsp页面实现的,没有在后台使用POI导出,锁表头功能我实现不了,也不知道能不能实现。下面贴一下页面锁表头的代码
<script>
(function($){
/**
* 表头悬浮插件
* @date 2017-07-18 13:17:54
*/
$.fn.fixedTableHeader = function () {
var t = $(this);
var tableOffset = t.offset().top;
// 创建一个表格,设置样式 width="96%" align="center" cellpadding="0" cellspacing="1"
var fixed_table = $('<table width="96%" style="margin-left: 2%"></table>').css({ 'display':'none', 'position':'fixed', 'top':'0px', 'background-color':'white' });
// 把标题的标题clone过来
t.parent().append(fixed_table.append(t.find("thead").clone()));
// 设置表格属性和样式
fixed_table.attr("border",t.attr("border"));
fixed_table.css("border-collapse",t.css("border-collapse"));
fixed_table.attr("cellspacing",t.attr("cellspacing"));
// 设置表格的宽度
fixed_table.width(t.outerWidth());
// 用于判断宽度该加多少
if(t.css("border-collapse")=="collapse"){
var borderWith = parseInt(t.attr("border"));
}else{
var borderWith = 0;
}
// 设置表格悬浮标题单元格的宽度
fixed_table.find("th").each(function (i) {
var width = t.find("th").eq(i).css("width");
$(this).width(parseInt(width)+borderWith+"px");
});
$(window).bind("scroll", function () {
var offset = $(this).scrollTop();
if (offset >= tableOffset && fixed_table.is(":hidden")) {
fixed_table.show();
}
else if (offset < tableOffset) {
fixed_table.hide();
}
});
return t;
}
}(jQuery));
$(function () {
$("#myTable").fixedTableHeader();
})
</script>
















