[DHTML] 網頁 DataGrid 製作筆記
一般的HTML頁面不像Flash或是VB等軟體,有DataGrid元件可以使用,所以要在普通Html頁面做到類似效果,需要藉助一些Javascript寫成DHTML的頁面,網路上有一堆範例可以參考,複雜度大小有異,懶懶的自己做了一個超簡單的樣本,有興趣參考看看囉!
»DG樣本
使用重點:
- 製作兩的Table,一個為TabHead一個為TabBody分別是DG的標題欄位及資料欄位。
- 撰寫一個取得DGScroll位置的function adjustScroll(如Code1)
- 使用onscroll事件呼叫adjustScroll函式於TabBody,於托拉Scroll時即時更改DG的TabHead的位置。(如Code2)
- 使用onResize事件呼叫adjustScroll函式於body,解決視窗縮放時即時更改DG的TabHead的位置。(如Code3)
Code1
<SCRIPT>
function adjustScroll(obj){
document.getElementById("tabHead").scrollLeft=document.getElementById(obj.id).scrollLeft;
document.getElementById("tabHead").style.width=document.getElementById(obj.id).clientWidth;
}
</SCRIPT>
Code2
...
<div id="tabBody" onscroll="adjustScroll(this);">
...
Code3
...
<body onResize="adjustScroll(document.getElementById('tabBody'));">
...
網路參考: