1

所以我不得不冻结gridview的标题栏，我使用asp：panel和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;

    }

我现在唯一的问题是标题不再保持列的大小；有什么方法可以强制标题保持列的大小（这可能会因其中的数据而改变）。

谢谢

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 回答