具有固定頂行和左列的excel樣式HTML表格的更好實現？（jsFiddle的例子）

我有一個非常簡單的問題：是否有更高效的方式來實現一個固定的行和列比這更大的表stripped down jsFiddle example我創建，或有沒有更好的方式來編寫幾行jQuery那力量呢？具有固定頂行和左列的excel樣式HTML表格的更好實現？（jsFiddle的例子）

在任何人跳過我發佈類似於其他人的問題之前，讓我解釋一下自己。我意識到有很多插件可以完成類似於我上面的示例的效果。但是，他們中沒有一個（我能找到）提供了我需要的靈活性和功能。

下面是我的實現必須支持幾個注意事項：

必須有隱藏和取消隱藏整個行
必須支持動態高度
（理想情況下）使用的細胞的能力瀏覽器的滾動條來瀏覽表
必須快爲了支持大表
該表必須能夠與knockoutjs動態生成

我看到我的實現的主要問題是，它滯後於Chrome和IE。我很難注意到我在示例中提供的表格，但左欄和上欄需要一些時間來「趕上」表格的其餘部分。這個問題在表格很大並且在後臺運行其他JavaScript時會變得更加明顯。

那麼，有沒有更好的方法來實現這個給我的警告？

非常感謝任何人提供的答案！

來源

2012-07-06 ihake

是不是這個問題與[你的上一個問題]幾乎相同（http://stackoverflow.com/questions/11346327/force-javascript-to-run-before-browser-redraw-jsfiddle-examle）？ – lanzz 2012-07-06 12:18:10

我以前的問題使用了相同的例子，我仍然在想方法來改進它，但除此之外，沒有。我正在尋找一個特定的解決方案來解決我的問題，然後使用js。這個問題更一般。 – ihake 2012-07-06 12:21:03

您可能能夠通過更改此獲得的性能提升：

var offset = $(this).next().offset(); 
     $(this).offset(offset); 
     $(this).css('left', '0'); 
     $(this).height($(this).next().height());

要這樣：

 var $this = $(this) 
     var offset = $this.next().offset(); 
     $this.offset(offset); 
     $this.css('left', '0'); 
     $this.height($this.next().height());

使用變量比連續一遍又一遍地包裝同一個對象要快。

來源

2012-07-07 16:19:44

感謝您的建議，史蒂夫。我選擇你的答案，因爲這是我得到的最好的答案。 – ihake 2012-07-10 13:32:39

這個jQuery插件非常適合您的要求：http://www.jtable.org/Demo

來源

2012-07-06 12:15:57

是嗎？它看起來不像它支持excel樣式的固定頭行和左列，這正是我試圖實現的。 – ihake 2012-07-06 12:25:53

我喜歡jTable，這看起來比dataTables等常見網格新鮮多了，雖然性能問題可能會解決這個問題，以便與其他網站相提並論。順便說一句，我能夠凍結與一個小JS/jQuery。有一件事我討厭過濾器是需要點擊一個按鈕..它不是2008 .. – Fr0zenFyr 2014-01-08 11:44:23

具有固定頂行和左列的excel樣式HTML表格的更好實現？ （jsFiddle的例子）

回答

相關問題

具有固定頂行和左列的excel樣式HTML表格的更好實現？（jsFiddle的例子）