保持Gridview標題與列凍結後列的大小相同

所以我不得不凍結一個gridview的標題欄，並且我使用asp：panel和CSS來完成此操作。保持Gridview標題與列凍結後列的大小相同

<asp:Panel ID="panelContainer" runat="server" Height="100px" Width="100%" ScrollBars="Vertical"> 

<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" Font-Size="small" CssClass="HeaderFreeze" /> 

.HeaderFreeze 
    { 
    position:absolute; 
    height: 40px; 
    top: 80px; 

    }

我現在唯一的問題是，標題不再保留列的大小;有沒有辦法強制標題保持列的大小（這可能會由於其中的數據而改變）。

謝謝

來源

2012-10-22 Limey

對於動態列寬使用JavaScript。下面是使用jQuery的解決方案：

example jsfiddle（fullscreen）

只有標題行創建一個重複表元素

<table id="panelContainerFixed"> 
    <tr class="header"> 
     <th>ID</th><th>Name</th> 
    </tr> 
</table> 

<table id="panelContainer"> 
    <tr class="header"> 
     <th>ID</th><th>Name</th> 
    </tr> 
    <tr> 
     <td>1</td><td>Name-1</td> 
    </tr> 
    <tr> 
     <td>2</td><td>Name-2</td> 
    </tr> 
    <tr> 
     <td>3</td><td>Name-3</td> 
    </tr> 
    ... 
</table>

計算列的寬度，並將這些寬度在重複頭

// cache re-usable variables 
var $window = $(window), 
    $panelContainerFixed = $('#panelContainerFixed'), 
    $panelContainer = $('#panelContainer'), 
    $header = $('.header'), 
    headerPos = $header.offset().top + $header.height(); 

// set column widths 
$panelContainer.find('th').each(function() { 
    var $that = $(this); 
    $panelContainerFixed.find('th').eq($that.index()).width($that.width()); 
});

根據scrollTop顯示/隱藏重複標題

// on window scroll toggle the fixed headers 
$window.scroll(function() { 
    if ($window.scrollTop() > headerPos) { 
     $panelContainerFixed.show(); 
    } else { 
     $panelContainerFixed.hide(); 
    } 
});

來源

2012-10-22 18:17:00 MikeM

保持Gridview標題與列凍結後列的大小相同

回答

相關問題