A-A+

JS实现Table冻结行列

2016年08月08日 技术 评论 1 条 阅读 8,101 次

最近要实现冻结表格行列的效果,如下:

fix_tab

于是找了几个JavaScript插件试了一下,比如"Fixed-Header-Table",这个插件第一感觉是比较好的,从调用和配置的方式上来说,比较符合日常使用的习惯,但是唯一的问题在于,一旦Table内包含中文,它的样式就会走形,反复调试了多次,因为时间的关系,就放弃了。

后来用的是网上找的一段代码,因为它不是以插件方式开放的,就是引用JS脚本,然后再以函数方式调用,虽然感觉很别扭,但是倒是可以实现效果。据说在大数据场景下表现的不好,毕竟它的实现其实是将表格复制到4个DIV中,再辅以绝对定位而实现的,那么数据量过大,会导致复制的内容过多,不过一般情况下(比如我现在的应用)足以应付,而且表现还不错。

原文地址在这里:http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html

源码如下:

  1. /*
  2.  * 锁定表头和列
  3.  *
  4.  * 参数定义
  5.  *  TableID - 要锁定的表格元素或者表格ID
  6.  *  FixColumnNumber - 要锁定列的个数,从0列开始
  7.  *  width - 表格的滚动区域宽度
  8.  *  height - 表格的滚动区域高度
  9.  */
  10. jQuery.extend({
  11.     browser: function()
  12.     {
  13.         var
  14.             rwebkit = /(webkit)\/([\w.]+)/,
  15.             ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
  16.             rmsie = /(msie) ([\w.]+)/,
  17.             rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,
  18.             browser = {},
  19.             ua = window.navigator.userAgent,
  20.             browserMatch = uaMatch(ua);
  21.         if (browserMatch.browser) {
  22.             browser[browserMatch.browser] = true;
  23.             browser.version = browserMatch.version;
  24.         }
  25.         return { browser: browser };
  26.     },
  27. });
  28. function uaMatch(ua)
  29. {
  30.     ua = ua.toLowerCase();
  31.     var match = rwebkit.exec(ua)
  32.         || ropera.exec(ua)
  33.         || rmsie.exec(ua)
  34.         || ua.indexOf("compatible") < 0 && rmozilla.exec(ua)
  35.         || [];
  36.     return {
  37.         browser : match[1] || "",
  38.         version : match[2] || "0"
  39.     };
  40. }
  41. function FixTable(TableID, FixColumnNumber, width, height) {
  42.     /// <summary>
  43.     ///     锁定表头和列
  44.     ///     <para> sorex.cnblogs.com </para>
  45.     /// </summary>
  46.     /// <param name="TableID" type="String">
  47.     ///     要锁定的Table的ID
  48.     /// </param>
  49.     /// <param name="FixColumnNumber" type="Number">
  50.     ///     要锁定列的个数
  51.     /// </param>
  52.     /// <param name="width" type="Number">
  53.     ///     显示的宽度
  54.     /// </param>
  55.     /// <param name="height" type="Number">
  56.     ///     显示的高度
  57.     /// </param>
  58.     if ($("#" + TableID + "_tableLayout").length != 0) {
  59.         $("#" + TableID + "_tableLayout").before($("#" + TableID));
  60.         $("#" + TableID + "_tableLayout").empty();
  61.     }
  62.     else {
  63.         $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
  64.     }
  65.     $('<div id="' + TableID + '_tableFix"></div>'
  66.         + '<div id="' + TableID + '_tableHead"></div>'
  67.         + '<div id="' + TableID + '_tableColumn"></div>'
  68.         + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
  69.     var oldtable = $("#" + TableID);
  70.     var tableFixClone = oldtable.clone(true);
  71.     tableFixClone.attr("id", TableID + "_tableFixClone");
  72.     $("#" + TableID + "_tableFix").append(tableFixClone);
  73.     var tableHeadClone = oldtable.clone(true);
  74.     tableHeadClone.attr("id", TableID + "_tableHeadClone");
  75.     $("#" + TableID + "_tableHead").append(tableHeadClone);
  76.     var tableColumnClone = oldtable.clone(true);
  77.     tableColumnClone.attr("id", TableID + "_tableColumnClone");
  78.     $("#" + TableID + "_tableColumn").append(tableColumnClone);
  79.     $("#" + TableID + "_tableData").append(oldtable);
  80.     $("#" + TableID + "_tableLayout table").each(function () {
  81.         $(this).css("margin""0");
  82.     });
  83.     var HeadHeight = $("#" + TableID + "_tableHead thead").height();
  84.     HeadHeight += 2;
  85.     $("#" + TableID + "_tableHead").css("height", HeadHeight);
  86.     $("#" + TableID + "_tableFix").css("height", HeadHeight);
  87.     var ColumnsWidth = 0;
  88.     var ColumnsNumber = 0;
  89.     $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
  90.         ColumnsWidth += $(this).outerWidth(true);
  91.         ColumnsNumber++;
  92.     });
  93.     ColumnsWidth += 2;
  94.     if ($.browser.msie) {
  95.         switch ($.browser.version) {
  96.             case "7.0":
  97.                 if (ColumnsNumber >= 3) ColumnsWidth--;
  98.                 break;
  99.             case "8.0":
  100.                 if (ColumnsNumber >= 2) ColumnsWidth--;
  101.                 break;
  102.         }
  103.     }
  104.     $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
  105.     $("#" + TableID + "_tableFix").css("width", ColumnsWidth);
  106.     $("#" + TableID + "_tableData").scroll(function () {
  107.         $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
  108.         $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
  109.     });
  110.     $("#" + TableID + "_tableFix").css({ "overflow""hidden""position""relative""z-index""50""background-color""Silver" });
  111.     $("#" + TableID + "_tableHead").css({ "overflow""hidden""width": width - 17, "position""relative""z-index""45""background-color""Silver" });
  112.     $("#" + TableID + "_tableColumn").css({ "overflow""hidden""height": height - 17, "position""relative""z-index""40""background-color""Silver" });
  113.     $("#" + TableID + "_tableData").css({ "overflow""scroll""width": width, "height": height, "position""relative""z-index""35" });
  114.     if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
  115.         $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
  116.         $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
  117.     }
  118.     if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
  119.         $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
  120.         $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
  121.     }
  122.     $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
  123.     $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
  124.     $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
  125.     $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
  126. }

1 条留言  访客:0 条  博主:0 条

  1. QQ-61732055

    学习带来乐趣,谢谢博主!

给我留言

Copyright © 字痕随行 保留所有权利.   Theme  Ality

用户登录

分享到: