GirdView凍結列2

上篇文章中，初步探討了利用改變表格中需要固定列的屬性（與滾動條的位置關係）而實現的表格凍結列效果，但遺憾的是僅能支援IE，和OPERA。

事實上，各瀏覽器對錶格的解析很不一樣，在CSS程式碼中改變表格的位置屬性本身就是不太明智的，好在那個專案使用人群極小，因此，IE only 湊合也能說的過去。

後來在HJ大俠的提醒下，設想了另一種思路：將表格中需要固定的列複製到另一個表中，母表與字表的樣式定義要完全一致，然後將字表的位置定義死，並覆蓋母表中相關的列。母表依舊隨著滾動條移動，完全不做改變。（實際上是一種視覺欺騙效果）

實現該效果的關鍵思路在於

1. 表格外要套兩層div，內層的用於設定滾動條，外層的要相對定位，以便於新的子表位置設定；

2. 子表與母表的樣式要完全一致，因此，需要實現設定好GridView的樣式，執行後，檢視瀏覽器原始檔，以完全複製表格的樣式（提醒新手，GridView經IIS解析後，就是普通的

）

3. 複製後的子表位置要絕對定位，並設定z-index屬性

以下為Gridview巢狀兩層div的程式碼：

<asp:GridView ID="GridView1" runat="server" Font-Size="9pt" CssClass="datagrid">

asp:GridView>

div>

然後是CSS樣式表：

<style>

.datagrid td {padding:4px; height:20px; text-align:center}

.fixed{ background:#fcc; z-index:2; }

.gridWidth{ width:4000px;}

.unfixed{ border:none;}

#grid {position:relative;display:block; width:90%; margin:30px auto; background:#fff; overflow:hidden;}

#gridview{position:relative;display:block;width:100%; background:#fff; overflow-y: hidden;overflow-x: scroll;}

style>

再是JS程式碼（用Jquery框架）：

$(document).ready(function(){

var d=$("

");

var height=0;

var width=0;

d.css({position:"absolute",left:"0",top:"0",background:"#fff"});

$("#grid").append(d);

var view=$(".datagrid");

var t=$('

'); /*這裡的table樣式是在瀏覽器中檢視GridView解析後的表格的樣式，直接複製就行！*/

var trlist=view.find("tr");

for(var i=0;i

var tr=trlist[i];

var newTr=$(''); /*這裡tr的樣式也一樣，但要注意的是，有時gridview會隔一行換一種樣式，這裡的JS程式碼需要做一些處理*/

newTr.append($(tr).children(".fixed").clone());

t.append(newTr);

}

d.append(t);

});

script>

效果圖，與上文的無差，略去！

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-659714/，如需轉載，請註明出處，否則將追究法律責任。

相關文章