客户要求实现对表格数据的头几行或者头几列进行冻结，即滚动时保持这几行/列不动，通过网上查找代码，参考已有的代码的思路，实现了可以任意对行、列进行冻结。
实现原理：
创建多个div，div之间通过css实现层叠，每个div放置当前表格的克隆。例如：需要行冻结时，创建存放冻结行表格的div，通过设置z-index属性和position属性，让冻结行表格在数据表格的上层。同理，需要列冻结时，创建存放冻结列表格的div，并放置在数据表格的上层。如果需要行列都冻结时，则除了创建冻结行、冻结列表格的div，还需要创建左上角的固定行列表格的div，并放置在所有div的最上层。
处理表格的滚动事件，在表格横向或者纵向滚动时，同时让相应的冻结行和冻结列也同步滚动。
处理html的resize事件，同步修改表格的滚动区域宽度和高度
代码如下:
/* * 锁定表头和列 * * 参数定义 * table - 要锁定的表格元素或者表格id * freezerownum - 要锁定的前几行行数，如果行不锁定，则设置为0 * freezecolumnnum - 要锁定的前几列列数，如果列不锁定，则设置为0 * width - 表格的滚动区域宽度 * height - 表格的滚动区域高度 */function freezetable(table, freezerownum, freezecolumnnum, width, height) { if (typeof(freezerownum) == 'string') freezerownum = parseint(freezerownum) if (typeof(freezecolumnnum) == 'string') freezecolumnnum = parseint(freezecolumnnum) var tableid; if (typeof(table) == 'string') { tableid = table; table = $('#' + tableid); } else tableid = table.attr('id'); var divtablelayout = $(# + tableid + _tablelayout); if (divtablelayout.length != 0) { divtablelayout.before(table); divtablelayout.empty(); } else { table.after(
); divtablelayout = $(# + tableid + _tablelayout); } var html = ''; if (freezerownum > 0 && freezecolumnnum > 0) html += '
'; if (freezerownum > 0) html += '
'; if (freezecolumnnum > 0) html += '
'; html += '
'; $(html).appendto(# + tableid + _tablelayout); var divtablefix = freezerownum > 0 && freezecolumnnum > 0 ? $(# + tableid + _tablefix) : null; var divtablehead = freezerownum > 0 ? $(# + tableid + _tablehead) : null; var divtablecolumn = freezecolumnnum > 0 ? $(# + tableid + _tablecolumn) : null; var divtabledata = $(# + tableid + _tabledata); divtabledata.append(table); if (divtablefix != null) { var tablefixclone = table.clone(true); tablefixclone.attr(id, tableid + _tablefixclone); divtablefix.append(tablefixclone); } if (divtablehead != null) { var tableheadclone = table.clone(true); tableheadclone.attr(id, tableid + _tableheadclone); divtablehead.append(tableheadclone); } if (divtablecolumn != null) { var tablecolumnclone = table.clone(true); tablecolumnclone.attr(id, tableid + _tablecolumnclone); divtablecolumn.append(tablecolumnclone); } $(# + tableid + _tablelayout table).css(margin, 0); if (freezerownum > 0) { var headheight = 0; var ignorerownum = 0; $(# + tableid + _tablehead tr:lt( + freezerownum + )).each(function () { if (ignorerownum > 0) ignorerownum--; else { var td = $(this).find('td:first, th:first'); headheight += td.outerheight(true); ignorerownum = td.attr('rowspan'); if (typeof(ignorerownum) == 'undefined') ignorerownum = 0; else ignorerownum = parseint(ignorerownum) - 1; } }); headheight += 2; divtablehead.css(height, headheight); divtablefix != null && divtablefix.css(height, headheight); } if (freezecolumnnum > 0) { var columnswidth = 0; var columnsnumber = 0; $(# + tableid + _tablecolumn tr:eq( + freezerownum + )).find(td:lt( + freezecolumnnum + ), th:lt( + freezecolumnnum + )).each(function () { if (columnsnumber >= freezecolumnnum) return; columnswidth += $(this).outerwidth(true); columnsnumber += $(this).attr('colspan') ? parseint($(this).attr('colspan')) : 1; }); columnswidth += 2; divtablecolumn.css(width, columnswidth); divtablefix != null && divtablefix.css(width, columnswidth); } divtabledata.scroll(function () { divtablehead != null && divtablehead.scrollleft(divtabledata.scrollleft()); divtablecolumn != null && divtablecolumn.scrolltop(divtabledata.scrolltop()); }); divtablefix != null && divtablefix.css({ overflow: hidden, position: absolute, z-index: 50 }); divtablehead != null && divtablehead.css({ overflow: hidden, width: width - 17, position: absolute, z-index: 45 }); divtablecolumn != null && divtablecolumn.css({ overflow: hidden, height: height - 17, position: absolute, z-index: 40 }); divtabledata.css({ overflow: scroll, width: width, height: height, position: absolute }); divtablefix != null && divtablefix.offset(divtablelayout.offset()); divtablehead != null && divtablehead.offset(divtablelayout.offset()); divtablecolumn != null && divtablecolumn.offset(divtablelayout.offset()); divtabledata.offset(divtablelayout.offset());}/* * 调整锁定表的宽度和高度，这个函数在resize事件中调用 * * 参数定义 * table - 要锁定的表格元素或者表格id * width - 表格的滚动区域宽度 * height - 表格的滚动区域高度 */function adjusttablesize(table, width, height) { var tableid; if (typeof(table) == 'string') tableid = table; else tableid = table.attr('id'); $(# + tableid + _tablelayout).width(width).height(height); $(# + tableid + _tablehead).width(width - 17); $(# + tableid + _tablecolumn).height(height - 17); $(# + tableid + _tabledata).width(width).height(height);}function pageheight() { if ($.browser.msie) { return document.compatmode == css1compat ? document.documentelement.clientheight : document.body.clientheight; } else { return self.innerheight; }};//返回当前页面宽度function pagewidth() { if ($.browser.msie) { return document.compatmode == css1compat ? document.documentelement.clientwidth : document.body.clientwidth; } else { return self.innerwidth; }};$(document).ready(function() { var table = $(table); var tableid = table.attr('id'); var freezerownum = table.attr('freezerownum'); var freezecolumnnum = table.attr('freezecolumnnum'); if (typeof(freezerownum) != 'undefined' || typeof(freezecolumnnum) != 'undefined') { freezetable(table, freezerownum || 0, freezecolumnnum || 0, pagewidth(), pageheight()); var flag = false; $(window).resize(function() { if (flag) return ; settimeout(function() { adjusttablesize(tableid, pagewidth(), pageheight()); flag = false; }, 100); flag = true; }); }});
使用时，只要在table元素设置freezerownum和freezecolumnnum属性值，即可实现冻结效果
复制代码 代码如下:
...
以上所述就是本文的全部内容了，希望大家能够喜欢。