带有固定标题和列的表格 - IE8优化 [英] Table with fixed header and column - IE8 optimization

问题描述

我创建了如下所示的布局：

这是如何工作的：

正如你所看到的，标题是固定的但是可以滚动，同样的行为是针对1列的。

以下是此演示的代码：

• 第二个问题是滚动功能 - 在FF上一切正常，但IE8一直有问题。当我点击内部包装div并使用箭头滚动我的表格div时，FF工作正常，但IE有时会随机滚动或返回顶部（尝试按箭头随机）。它应该只允许一次移动。

---

有人可以帮我解决这个问题并优化代码和css吗？ / p>

---

我不想使用像DataTables这样的插件。在我的情况下，最好在服务器上生成4个表格，而不是在客户端调用插件 - 对于非常大的表格和较旧的PC，使用FixedColumn运行DataTable需要将近3分钟。

解决方案

我已经设法使用css和jQuery进行所有修复。
http://jsfiddle.net/Misiu/9j5Xy/26/

这是我的jQuery代码：

  $（document）.ready（function（）{
 function scrollHandler（e）{
 $（'＃row'）。css（'left'， -  $（'＃table'）。get 0）.scrollLeft）; 
 $（'＃col'）。css（'top'， -  $（'＃table'）。get（0）.scrollTop）; 
} 
 $（'＃table'）。scroll（scrollHandler）; 
 $（'＃table'）。resize（scrollHandler）; 
 
 var animate = false; 
 $（' （事件）{
 if（animate）{
 event.preventDefault（）; 
}; 
 if（event.keyCode == 37& amp; ;&！animate）{
 animate = true; 
 $（'＃table'）。animate（{
 scrollLeft： -  = 200
}，fast ，function（）{
 animate = false; 
}）; 
 event.preventDefault（）; 
} else if（event.keyCode == 39&&！anim a）{
 animate = true; 
 $（'＃table'）。animate（{
 scrollLeft：+ = 200
}，fast，function（） {
 animate = false; 
}）; 
 event.preventDefault（）; 
} else if（event.keyCode == 38&&！animate）{
 animate = true; 
 $（'＃table'）。animate（{
 scrollTop： -  = 200
}，fast，function（）{
 animate = false; 
}）; 
 event.preventDefault（）; 
} else if（event.keyCode == 40&&！animate）{
 animate = true; 
 $（'＃table'）。animate（{
 scrollTop：+ = 200
}，fast，function（）{
 animate = false; 
}）; 
 event.preventDefault（）; 
} 
}）; 
}）; 
  

但欢迎评论和优化：）

I have created layout that looks like this:

This is how it works:

As You can see header is fixed but scrollable, the same behaviour is for 1 column.

Here is code for this demo: http://jsfiddle.net/Misiu/9j5Xy/7/

Everything works fine, but only on FF, on IE8 I have 2 problems:

• In FF I have border in head and row divs (inside tables in them), but IE8 cuts the bottom border.

UPDATE: Border error fixed (workaround) - I've added extra border to head, col and row divs. http://jsfiddle.net/Misiu/9j5Xy/12/

• Second problem is with scroll functionality-on FF everything works, but IE8 as always has problems. When I click inside wrapper div and use arrows to scroll my table div, FF works fine, but IE sometimes scrolls randomly or returns to top (try pressing arrow randomly). It should allow only one move at time.

---

Could someone help me with fixing this in IE and optimize code and css?

---

I don't want to use any plugins like DataTables. In my case it is better to generate 4 tables on server than calling plugins on client-side-for very large tables and on older pc's it took almost 3 minutes to run DataTables with FixedColumn.

解决方案

I've managed to do all fixes with css and jQuery. http://jsfiddle.net/Misiu/9j5Xy/26/

This is my jQuery code:

$(document).ready(function () {
function scrollHandler(e) {
    $('#row').css('left', -$('#table').get(0).scrollLeft);
    $('#col').css('top', -$('#table').get(0).scrollTop);
}
$('#table').scroll(scrollHandler);
$('#table').resize(scrollHandler);

var animate = false;
$('#wrapper').keydown(function (event) {
    if (animate) {
        event.preventDefault();
    };
    if (event.keyCode == 37 && !animate) {
        animate = true;
        $('#table').animate({
            scrollLeft: "-=200"
        }, "fast", function () {
            animate = false;
        });
        event.preventDefault();
    } else if (event.keyCode == 39 && !animate) {
        animate = true;
        $('#table').animate({
            scrollLeft: "+=200"
        }, "fast", function () {
            animate = false;
        });
        event.preventDefault();
    } else if (event.keyCode == 38 && !animate) {
        animate = true;
        $('#table').animate({
            scrollTop: "-=200"
        }, "fast", function () {
            animate = false;
        });
        event.preventDefault();
    } else if (event.keyCode == 40 && !animate) {
        animate = true;
        $('#table').animate({
            scrollTop: "+=200"
        }, "fast", function () {
            animate = false;
        });
        event.preventDefault();
    }
});
});

But comments and optimizations are always welcome :)

这篇关于带有固定标题和列的表格 - IE8优化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！