2012年12月4日 星期二

GridViewScroll with jQuery 實作技巧

本篇將會說明GridViewScroll實作上最重要的技巧!

要固定標題列,基本的做法就是將標題的那一列獨立到另一個DIV中,就像以下的HTML語法一樣:

<div id="tableHeader">
    <table>
        <tr>
            <td style="width:180px;">欄位一<td>
            <td style="width:100px;">欄位二<td>
        </tr>
    </table>
</div>

<div id="tableItem" style="height:200px;overflow:auto;">
    <table>
        <tr>
            <td style="width:180px;">資料一<td>
            <td style="width:100px;">資料二<td>
        </tr>
    </table>
</div>

將每個欄位設定固定的寬度,並將tableItem設定為固定高度且超出高度顯示捲軸(overflow:auto)就可以做到簡易的固定標題列.

但上述的做法,遇到的最大問題在於"標題列與項目資料有可能不對齊",在不同的瀏覽器中,不對齊的狀況又會不太一樣.

使用Javascript來操作DOM相關的屬性並設定寬度,也會因為框線(border)或間距(cellspacing,cellpadding)的關係,造成無法容易計算出正常的寬度.

後來我發現,如果在每一個欄位(TD)中,再用一個DIV將裡面的資料包起來,並使用這個DIV來進行寬度的設定,幾乎就可以完整的解決上述的問題,可以參考下圖:




從上圖可以看到,其實每一個欄位都另外加了DIV,這樣一來就可以正確的對齊每個欄位.

沒有留言:

張貼留言