1

So I had to freeze the header bar of a gridview, and I did this using an asp:panel and CSS.

<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;

    }

My only issue now is that the headers no longer stay the size of the column; is there any way to force the headers to keep the size of the columns (which may change due to the data in them).

Thanks

4

1 に答える 1

1

動的な列幅にはJavaScriptを使用してください。jQueryを使用したソリューションは次のとおりです。

例jsfiddle（フルスクリーン）

ヘッダー行だけで重複するテーブル要素を作成します

<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-22T18:17:00.913 に答える