2012年12月5日 星期三

GridViewScroll with jQuery 實作技巧2

延續上一篇 GridViewScroll with jQuery 實作技巧

了解如何取得正確的寬度方法後,接下來就是如何在適當的時機取得寬度並進行設定

在GridViewScroll的做法,我是採取先將GridView所產生出來的HTML使用jQuery加以加工,大略會像以下的HTML:

<div id="GridView1wrapper">
    <div id="panelHeaderGridView1">
        <table id="GridView1Copy">
            <tr>
                <td>欄位一<td>
                <td>欄位二<td>
            </tr>
        </table>
    </div>
    <div id="panelItemGridView1">
        <table id="GridView1">
            <tr>
                <td>欄位一<td>
                <td>欄位二<td>
            </tr>
            <tr>
                <td>資料一<td>
                <td>資料二<td>
            </tr>
        </table>
    </div>
</div>

藍色部分為GridView預設產生的部分,綠色則為jQuery

一個TABLE如果有將每一個TD設定不自動斷行(white-space: nowrap)將會自動撐開TABLE的大小,這樣一來使用jQuery加入每一個TD中的DIV元素也會自動因為這個因素而改變寬度,一方面利用DIV未設定寬度時,自動是100%寬度的特性,就可以知道需要設定的寬度是多少.

寬度設定的大略步驟為:

1.由GridView1標題列取得每一個TD的DIV寬度(當尚未加工時寬度是瀏覽器依據內容自動排列,這時的寬度也就是我們要設定的寬度).

2. 設定GridView1Copy標題列TD的DIV寬度與GridView1資料列第一列TD的DIV寬度.

3. 將GridView1的標題列隱藏.

接下來就可以利用DIV(panelHeaderGridView1與panelItemGridView1)的特性,來進行捲軸捲動的效果.

沒有留言:

張貼留言