ZZCS/coding/zz-jd/js/table_flow.js

$(function(){
    var sourceTable = $("#table");//table id 获取表对象
    var sourceTableHead = $("#table_head");//table thead tr id 获取表头thead
    var headHeight = sourceTableHead.outerHeight();//table thead tr height 获取资源表的宽度

    //copy table and thead html tag from source table,
    $('#table').append('<div id="shelter"><table id="fixed_table" class="table  table-bordered table-hover permission"><thead></thead></table></div>'); //重建一个table添加到body中
    //only set top and left,beacuse i need the top bar can scroll left
    $("#shelter").css({'height':headHeight,'position':'fixed','top':'0','left':'50px', 'z-index': 30}); // 设置目标表格的高度等于源表格的高度，高度是一定的

    $('#table_head th').bind('DOMNodeInserted', function(e){
        // 当窗口变化时重复以上步骤
        var sourceTable = $("#table");//table id
        var sourceTableHead = $("#table_head");//table thead tr id
        var headHeight = sourceTableHead.outerHeight();//table thead tr height
        $('#shelter').remove();
        $('#table').append('<div id="shelter" class="shelter"><table id="fixed_table" class="table  table-bordered table-hover permission"><thead></thead></table></div>');
        //only set top and left,beacuse i need the top bar can scroll left
        $("#shelter").css({'height':headHeight,'position':'fixed','top':'0','left':'50px', 'z-index':30});

        var targetHead = sourceTableHead.clone();
        targetHead.attr('id','fix_head');
        targetHead.appendTo('#fixed_table thead');
        targetHead.find('input').attr('onclick', 'alterCheck(this)');
        var sourceTableWidth = sourceTable.outerWidth(); //get source table width

        $("#fixed_table").css({'width': sourceTableWidth + "px"});
        // $('.shelter').remove();
        // 获取源表格的头部，遍历头部的th标签，设置目标表格的头的宽度
        $("#table_head th").each(function(index,value){
            var tempWidth = $(value).outerWidth();
            var tempHeight = $(value).outerHeight();
            $("#fixed_table th").eq(index).css({'width':tempWidth+"px",'height':tempHeight+"px"});
        });
        $("#shelter").hide();
    });

    $(window).resize(function()
    {
        // 当窗口变化时重复以上步骤
        var sourceTable = $("#table");//table id
        var sourceTableHead = $("#table_head");//table thead tr id
        var headHeight = sourceTableHead.outerHeight();//table thead tr height

        $('#table').append('<div id="shelter" class="shelter removeShelter"><table id="fixed_table" class="table table-bordered table-hover permission"><thead></thead></table></div>');
        //only set top and left,beacuse i need the top bar can scroll left
        $("#shelter").css({'height':headHeight,'position':'fixed','top':'0','left':'50px', 'z-index':30});
        var sourceTableWidth = sourceTable.outerWidth(); //get source table width
        $("#fixed_table").css({'width':sourceTableWidth+"px"});
        $('.removeShelter').remove();
        // 窗口变化时获取源表格的头部，遍历头部的th标签，设置目标表格的头的宽度
        $("#table_head th").each(function(index,value){
            var tempWidth = $(value).outerWidth();
            var tempHeight = $(value).outerHeight();
            $("#fixed_table th").eq(index).css({'width':tempWidth+"px",'height':tempHeight+"px"});
        });

        /*var targetHead = sourceTableHead.clone();
        targetHead.attr('id','fix_head');
        targetHead.appendTo('#fixed_table thead');
        targetHead.find('input').attr('onclick', 'alterCheck(this)');*/
    });

    // 克隆源表格的头部并设置目标表格的id=fix_head
    var targetHead = sourceTableHead.clone();
    targetHead.attr('id','fix_head');
    targetHead.appendTo('#fixed_table thead');
    targetHead.find('input').attr('onclick', 'alterCheck(this)');

    // 根据源表的宽度和高度设置目标的宽和高
    $("#table_head th").each(function(index,value){
        var tempWidth = $(value).outerWidth();
        var tempHeight = $(value).outerHeight();
        $("#fixed_table th").eq(index).css({'width':tempWidth+"px",'height':tempHeight+"px"});
    });

    // 先将目标表头隐藏
    $("#shelter").hide();

    // 窗口滚动时触发的事件
    $(window).scroll(function(){
        var sl=-Math.max($('body').scrollLeft(), $('document').scrollLeft());
        if(isNaN(sl)){
            sl = - $(window).scrollLeft();
        }

        $('#shelter').css("left", 50 + sl +'px');

        var scroll_top = $(document).scrollTop() - sourceTable.offset().top;
        //control  show or hide
        if (scroll_top > 0) {
            // console.log(scroll_top);
            $('#shelter').show();
        }else {
            // console.log(scroll_top);
            $('#shelter').hide();
        }
    });

});
/*
提取函数，减少冗余代码
setNewTbTh('table', 'table_head', 'table table-bordered table-hover permission', 50)

function setNewTbTh(table, table_head, taClass, taRemove, left)
{
    var sourceTable = $("#" + table);//table id
    var sourceTableHead = $("#" + table_head);//table thead tr id
    var headHeight = sourceTableHead.outerHeight();//table thead tr height

    if(taRemove == 1)
    {
        $('#shelter').remove();
    }

    $('#table').append('<div id="shelter" class="shelter"><table id="fixed_table" class="taClass"><thead></thead></table></div>');
    //only set top and left,beacuse i need the top bar can scroll left
    $("#shelter").css({'height':headHeight,'position':'fixed','top':'0','left': left + 'px', 'z-index':30});

    var targetHead = sourceTableHead.clone();
    targetHead.attr('id','fix_head');
    targetHead.appendTo('#fixed_table thead');
    targetHead.find('input').attr('onclick', 'alterCheck(this)');
    var sourceTableWidth = sourceTable.outerWidth(); //get source table width

    $("#fixed_table").css({'width': sourceTableWidth + "px"});
    // $('.shelter').remove();
    // 获取源表格的头部，遍历头部的th标签，设置目标表格的头的宽度
    $("#" +  table_head + " th").each(function(index,value){
        var tempWidth = $(value).outerWidth();
        var tempHeight = $(value).outerHeight();
        $("#fixed_table th").eq(index).css({'width':tempWidth+"px",'height':tempHeight+"px"});
    });
    $("#shelter").hide();
}*/