Question

所以我不得不冻结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;

    }

我现在唯一的问题是标题不再保持列的大小;有没有办法强制标题保持列的大小（由于其中的数据可能会改变）。

由于

Answer 1

对于动态列宽，请使用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();
    }
});

标题冻结后，保持Gridview标题与列大小相同

1 个答案: