2013年1月25日 星期五

GridViewScroll with jQuery 實作技巧3

要做到固定標題列與凍結欄位,就必須要先知道要使用何種的HTML才有辦法排列出這樣的效果,下面的兩張圖也就是排列的方法.

1. 藍色區域:固定標題列
2. 紅色區域:內容資料列


3. 黃色區域:當有凍結欄位時的標題列
4. 綠色區域:當有凍結欄位時的資料列


上述的4個區域,在HTML中我們都可以使用DIV的方式來進行處理,不過首先一般我們資料表格輸出HTML時,大概會像以下的內容:

<table id="GridView1">
    <tr>
        <td>標題欄位一<td>
        <td>標題欄位二<td>
    </tr>
    <tr>
        <td>資料一<td>
        <td>資料二<td>
    </tr>
</table>

為了要製作出符合的HTML必須使用jQuery來進行DOM的操作,修改為以下的HTML

<div id="GridView1_Header">
    <table id="GridView1_Copy">
        <tr>
             <td>標題欄位一</td>
             <td>標題欄位二</td>
        </tr>
    </table>
</div>
<div id="GridView1_Item">
    <table id="GridView1">
        <tr>
            <td>標題欄位一<td>
            <td>標題欄位二<td>
        </tr>
        <tr>
            <td>資料一<td>
            <td>資料二<td>
        </tr>
    </table>
</div>
<div id="GridView1_Header_Freeze">
    <table id="GridView1_Copy">
        <tr>
             <td>標題欄位一</td>
             <td>標題欄位二</td>
        </tr>
    </table>
</div>
<div id="GridView1_Item_Freeze">
    <table id="GridView1_Copy">
        <tr>
            <td>資料一<td>
            <td>資料二<td>
        </tr>
    </table>
</div>

1. 首先必須要計算出每個欄位適當的寬度,可以參考GridViewScroll with jQuery 實作技巧2
2. 捲軸的部份我們可以透過設定DIV的寬度高度與overflow來進行顯示.
3. 凍結欄位(GridView_Header_Freeze,GridView_Item_Freeze)的部分,則是透過position: absolute並設定top與left來指定他要顯示的位置.

沒有留言:

張貼留言