引语:做有难度的事情,才是成长最快的时候。前段时间,接了一个公司的稍微大点的项目,急着赶进度,本人又没有独立带过队,因此,把自己给搞懵逼了。总是没有多余的时间来做自己想做的事,而且,经常把工作带入生活,这TM真是一个糟糕的事情!这两天,终于把项目上上去了,不管结果怎么样,总算是交差了吧。趁着这空档的时间,写点东西。
本篇,就来写写关于固定表头和表列的事儿吧。
相信大家使用excel的时候,肯定都会用到一项冻结的功能,冻结之后,可以让你很方便的查看到各种标题,从而能清楚的查看到当前行的内容。
这个冻结锁定的需求,来源于页面太长,太宽。
那么,对于网页版本的冻结锁定,是不是也有相应的功能呢?去网上搜索插件,基本上又都只是固定表头的,并不能固定前几列。不过幸好,不知道从哪里捡到一部分代码,改了一下内部代码,匆忙将功能实现,进入下一步。下面就跟大家分享一下,锁定表头、前几列的这段代码,也可以认为是个小插件,希望在你需要时,能帮上点忙!(实在没有找到作者是谁,如果你知道,请告知我,我一定加上作者姓名)
独立源码如下:
(function($) { $.fn.magicTable = function(option) { $.fn.magicTable.option = { /* 浮动头部 */ 'magicTop': $('#J_MagicTableTop'), 'magicLeft': $('#J_MagicTableLeft'), /* 可能有隐藏的,所以设定浮动头部的开始索引 */ 'leftIndex': 0, 'leftFlg': false, /* 高度调整 */ "thfix": 0, "thWidth": 0, //左边显示的宽度 "thHeight": 0, "thTop": 0, "thLeft":0, "thLine": 0, "removeTotal": false }; var option = $.extend({}, $.fn.magicTable.option, option); return this.each(function() { $(this).css({'z-index': '9', 'display': '', 'position': 'relative'}); /*复制活动的表格内容*/ var leftHtml = ''; var leftHtml2 = ''; var leftFlg = option.leftFlg; var thWidth = option.thWidth; var thHeight = 0; //th的高度 var thTop = option.thTop; //th距离浏览器顶部的top高度 var thLeft = option.thLeft; //左侧未滚动时的left var removeTotal = option.removeTotal;//除去最后一行的汇总 var flagLeftLength = 0; //左侧显示浮动层时的临界点 //处理浮动的头部 option.magicTop.html($(this).find('thead').clone()).css({ 'width': $(this).width() }); var trLenght = $(this).find('>tbody>tr').length; if(removeTotal) { trLenght -= 1; } $(this).find('tr').each(function(i, item) { var maxHeight = $(this).height(); $(this).find('td').each(function(tdI, tdItem){ var height = $(this).height(); if(height > maxHeight){ maxHeight = height; } }); if (i == option.thLine){ thTop = thTop > 0 ? thTop : $(this).find('th:first').offset().top; thHeight = $(this).height(); //包围th的tr的高度 thLeft = $(this).offset().left; //表格左侧是的left flagLeftLength = $(this).find('th:eq(' + option.leftIndex + ')').offset().left; thWidth = flagLeftLength + $(this).find('th:eq(' + option.leftIndex + ')').outerWidth() - thLeft; } else if (i > option.thLine) { if (leftFlg && (i <= trLenght)){ var tmpHtml = ''; for (var j = 0; j <= option.leftIndex; j++) { tmpHtml += '<td style="height:' + maxHeight + 'px;width:' + $(this).find('td:eq(' + j + ')').innerWidth() + 'px">' + $(this).find('td:eq(' + j + ')').html() + '</td>'; } leftHtml2 += '<tr>' + tmpHtml + '</tr>'; } leftHtml = leftHtml + '<tr><td style="height:' + maxHeight + 'px">' + $(this).find('td:eq(' + option.leftIndex + ')').html() + '</td><tr>'; } }); if (leftFlg) { leftHtml = leftHtml2; option.magicLeft.html(leftHtml); } /*活动模块*/ function moveSquare(){ if ($(this).scrollTop() >= thTop){ option.magicTop.show().css({'z-index': '999', 'position': 'absolute', 'top': $(this).scrollTop() + option.thfix + 'px'}); } else { option.magicTop.css({'display': 'none'}); } if ($(this).scrollLeft() >= thLeft) { option.magicLeft.show().css({ 'z-index': '99', 'position': 'absolute', 'top': thTop + thHeight - 1 + 'px', 'left': $(this).scrollLeft() - 1 + 'px', 'width': thWidth + 'px', }); if ($(this).scrollTop() >= thTop){ option.magicLeft.show().css({ 'top': thTop + thHeight - option.thfix - 1 + 'px' }); } } else { option.magicLeft.css({'display': 'none'}); } } if (document.all) { window.attachEvent("onscroll", moveSquare); } else { window.addEventListener('scroll', moveSquare, false); } }); }; $.fn.magicTable.setDefaults = function(settings) { $.extend($.fn.magicTable.option, settings); }; })(jQuery);
使用方法:
1. 在表格之前,添加一个空的表格头table,在表格之后,添加一个空的表格列table,示例如下:
<table id="J_MagicTableTop" class="table table-bordered data-list" style="display:none;"></table> <table class="table table-bordered data-list" id="J_MagicTable"> <thead> <tr> <th style="width:80px;">产品</th> <th style="width:110px;">任务名称</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <table id="J_MagicTableLeft" class="table table-bordered data-list magic-table-left" style="display:none;"></table>
2. 添加js绑定事件
if ($("#J_MagicTable").length > 0) { var blockHeadingHeight = $("#J_BlockHeading").outerHeight(); //用于设置最上面的间隙 $('#J_MagicTable').magicTable({thfix: blockHeadingHeight, leftIndex: 2, leftFlg: true}); }
就这样就可以实现,固定表头和前3列的效果了,还是很不错的。
但是需要注意以下几点:
1. 表结构一定是table > thead > th 这种结构的,表头中一定是有th这个元素的;
2. 表头一定要加上width宽度指示,否则将出现严重错位;
3. 即使是使用了width指示,也会出现错位情况,应该让table>tr>td 设置文字打断, word-break: break-all;
4. 尽量不要使用colspan属性;
原理解析:
其实也很简单,就是利用了一个position: absolute; 起到绝对定位的作用,通过检测当前所处位置,改变他的位置。表头、表列为复制的原表格的属性,不必单独填写;
有待改进的地方:
我本人已经作了部分修改,但是鉴于时间关系,没有细改。待完善: 1. 不用指定表头及表列所在的空位,自行创建即可;2. 获取真实td,th的宽度,不必要全部计算设置;
OK,以上为今天的分享,如果有什么不对的地方,欢迎批评指正。如果你有什么疑问,也可以直接@我,我会尽快回复的!