css實(shí)例:實(shí)現gridview仿excel凍結列
看代碼之前,先說(shuō)一說(shuō)思路,關(guān)鍵點(diǎn)有三:
1. 表格外要套兩層div，內層的用于設置滾動(dòng)條，外層的要相對定位，以便于新的子表位置設定；
2. 子表與母表的樣式要完全一致，因此，需要實(shí)現設定好GridView的樣式，運行后，查看瀏覽器源文件，以完全復制表格的樣式（提醒新手，GridView經(jīng)IIS解析后，就是普通的<table> </table>）
3. 復制后的子表位置要絕對定位，并設置z-index屬性 以下為Gridview嵌套兩層div的代碼：
<div id="grid">
<div id="gridview">
<asp:GridView ID="GridView1" runat="server" Font-Size="9pt" CssClass="datagrid">
<HeaderStyle Wrap="false" />
<RowStyle Wrap="false" />
</asp:GridView>
</div>
</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框架）：
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var d=$("<div></div>");
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 class="datagrid" cellspacing="0" rules="all" border="1" style="font-size:9pt;border-collapse:collapse;"></table>');
var trlist=view.find("tr");
for(var i=0;i<trlist.length;i++){
var tr=trlist[i];
var newTr=$('<tr style="white-space:nowrap;"></tr>');
newTr.append($(tr).children(".fixed").clone());
t.append(newTr);
}
d.append(t);
});
</script>
