[DHTML] 網頁 DataGrid 製作筆記

一般的HTML頁面不像Flash或是VB等軟體,有DataGrid元件可以使用,所以要在普通Html頁面做到類似效果,需要藉助一些Javascript寫成DHTML的頁面,網路上有一堆範例可以參考,複雜度大小有異,懶懶的自己做了一個超簡單的樣本,有興趣參考看看囉!


»DG樣本

使用重點:

  1. 製作兩的Table,一個為TabHead一個為TabBody分別是DG的標題欄位及資料欄位。
  2. 撰寫一個取得DGScroll位置的function adjustScroll(如Code1)
  3. 使用onscroll事件呼叫adjustScroll函式於TabBody,於托拉Scroll時即時更改DG的TabHead的位置。(如Code2)
  4. 使用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'));">
...

網路參考:

發表迴響