固定表头/锁定前几列的代码参考[JS篇]

　　引语：做有难度的事情，才是成长最快的时候。前段时间，接了一个公司的稍微大点的项目，急着赶进度，本人又没有独立带过队，因此，把自己给搞懵逼了。总是没有多余的时间来做自己想做的事，而且，经常把工作带入生活，这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，以上为今天的分享，如果有什么不对的地方，欢迎批评指正。如果你有什么疑问，也可以直接@我，我会尽快回复的！