天天工坊

[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'));"> ...

網路參考：

tanjun