锁定/冻结 ListView 中的表头答案

【问题标题】：Locking/freezing thead of table within a ListView锁定/冻结 ListView 中的表头
【发布时间】：2013-09-18 13:45:58
【问题描述】：

我在一个 div 中有一个 ListView。 div 的最大高度为 240px，因此当 ListView 达到一定数量的行时，div 会滚动。

我希望 ListView 中的 thead 行始终保持在 div 的顶部。我已经玩了一段时间了，并查看了以下 http://blogs.interfacett.com/dan-wahlins-blog2007-8-2-video-using-the-new-asp-net-listview-control-html-and-freezing-the-header ，但遗憾的是我没有运气。我完全按照视频教程进行操作，但是（正如页面上唯一的评论所说）它对我不起作用。

我正在使用并且希望继续使用 asp.net 3.5。

如果可能，我希望解决方案是纯 CSS 解决方案，但如果需要 JavaScript，那就这样吧。

这是我的html代码

<html code>
<asp:ListView ID="UserListView" runat="server" DataSourceID="ListViewDataSource"
                ItemPlaceholderID="UserListViewContent" EnableModelValidation="True" DataKeyNames="ID,Reference,Type"
                OnPreRender="UserListView_PreRender" OnSelectedIndexChanged="UserListView_SelectedIndexChanged">
                <LayoutTemplate>                    
                    <div id="List" class="ListViewStyle">
                        <table width="600px" cellspacing="0" cellpadding="0">
                            <thead>
                                <tr class="tableHeaderRow" style="height: 24px; text-align:left" >
                                    <th style="width: 45px">
                                        <asp:LinkButton ID="LinkButton1" runat="server" Text="ID" CommandName="Sort" CommandArgument="ID"
                                            CausesValidation="false"></asp:LinkButton>
                                    </th>
                                    <th style="width: 45px">
                                        <asp:LinkButton ID="LinkButton2" runat="server" Text="User" CommandName="Sort" CommandArgument="Reference"
                                            CausesValidation="false"></asp:LinkButton>
                                    </th>
                                    <th style="width: 75px">
                                        <asp:LinkButton ID="LinkButton3" runat="server" Text="Status" CommandName="Sort" CommandArgument="Status"
                                            CausesValidation="false"></asp:LinkButton>
                                    </th>
                                    <th style="width: 100px">
                                        <asp:LinkButton ID="LinkButton4" runat="server" Text="Level" CommandName="Sort" CommandArgument="Type"
                                            CausesValidation="false"></asp:LinkButton>
                                    </th>
                                    <th style="width: 130px">
                                        <asp:LinkButton ID="LinkButton5" runat="server" Text="First Names" CommandName="Sort" CommandArgument="FirstNames"
                                            CausesValidation="false"></asp:LinkButton>
                                    </th>
                                    <th style="width: 125px">
                                        <asp:LinkButton ID="LinkButton6" runat="server" Text="Surname" CommandName="Sort" CommandArgument="Surname"
                                            CausesValidation="false"></asp:LinkButton>
                                    </th>
                                    <th style="width: 80px">
                                    </th>
                                </tr>
                            </thead>
                            <tbody runat="server" id="UserListViewContent">                                    
                            </tbody>
                        </table>
                    </div>
                </LayoutTemplate>
                <AlternatingItemTemplate>
                    <tr class="altRowStyle" style="height: 24px">
                        <td style="width: 45px; overflow:hidden;">
                            <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
                        </td>
                        <td style="width: 45px; overflow:hidden;">
                            <asp:Label ID="ReferenceLabel" runat="server" Text='<%# Eval("Reference") %>' />
                        </td>
                        <td style="width: 75px; overflow:hidden;">
                            <asp:Label ID="StatusLabel" runat="server" Text='<%# Eval("Status") %>' />
                        </td>
                        <td style="width: 100px; overflow:hidden;">
                            <asp:Label ID="TypeLabel" runat="server" Text='<%# Eval("Type") %>' />
                        </td>
                        <td style="width: 130px; overflow:hidden;">
                            <asp:Label ID="FirstNamesLabel" runat="server" Text='<%# Eval("FirstNames") %>' />
                        </td>
                        <td style="width: 125px; overflow:hidden;">
                            <asp:Label ID="SurnameLabel" runat="server" Text='<%# Eval("Surname") %>' />
                        </td>
                        <td style="width: 80px; overflow:hidden;">
                            <asp:Button ID="ItemTemplateButton" runat="server" Text="Select" CssClass="standardButton"
                                CommandName="Select"></asp:Button>
                        </td>
                    </tr>
                </AlternatingItemTemplate>
                <ItemTemplate>
                    <tr class="rowStyle" style="height: 24px">
                        <td style="width: 45px; overflow:hidden;">
                            <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
                        </td>
                        <td style="width: 45px; overflow:hidden;">
                            <asp:Label ID="ReferenceLabel" runat="server" Text='<%# Eval("Reference") %>' />
                        </td>
                        <td style="width: 75px; overflow:hidden;">
                            <asp:Label ID="StatusLabel" runat="server" Text='<%# Eval("Status") %>' />
                        </td>
                        <td style="width: 100px; overflow:hidden;">
                            <asp:Label ID="TypeLabel" runat="server" Text='<%# Eval("Type") %>' />
                        </td>
                        <td style="width: 130px; overflow:hidden;">
                            <asp:Label ID="FirstNamesLabel" runat="server" Text='<%# Eval("FirstNames") %>' />
                        </td>
                        <td style="width: 125px; overflow:hidden;">
                            <asp:Label ID="SurnameLabel" runat="server" Text='<%# Eval("Surname") %>' />
                        </td>
                        <td style="width: 80px; overflow:hidden;">
                            <asp:Button ID="ItemTemplateButton" runat="server" Text="Select" CssClass="standardButton"
                                CommandName="Select"></asp:Button>
                        </td>
                    </tr>
                </ItemTemplate>
                <SelectedItemTemplate>
                    <tr class="selectedRowStyle" style="height: 24px">
                        <td style="width: 45px; overflow:hidden;">
                            <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
                        </td>
                        <td style="width: 45px; overflow:hidden;">
                            <asp:Label ID="ReferenceLabel" runat="server" Text='<%# Eval("Reference") %>' />
                        </td>
                        <td style="width: 75px; overflow:hidden;">
                            <asp:Label ID="StatusLabel" runat="server" Text='<%# Eval("Status") %>' />
                        </td>
                        <td style="width: 100px; overflow:hidden;">
                            <asp:Label ID="TypeLabel" runat="server" Text='<%# Eval("Type") %>' />
                        </td>
                        <td style="width: 130px; overflow:hidden;">
                            <asp:Label ID="FirstNamesLabel" runat="server" Text='<%# Eval("FirstNames") %>' />
                        </td>
                        <td style="width: 125px; overflow:hidden;">
                            <asp:Label ID="SurnameLabel" runat="server" Text='<%# Eval("Surname") %>' />
                        </td>
                        <td style="width: 80px; overflow:hidden;">
                            <asp:Button ID="ItemTemplateButton" runat="server" Text="Select" CssClass="standardButton"
                                CommandName="Select"></asp:Button>
                        </td>
                    </tr>
                </SelectedItemTemplate>
            </asp:ListView>

这是 Css

<css code>
.ListViewStyle
{
    width: 620px;
    max-height: 240px;
    height: expression( scrollHeight < 240 ? 'auto' : '240px' );
    overflow: auto;
    border-left: 1px solid #EEF5FE;
}

.ListViewStyle th
{
    position:relative;
}

我们将不胜感激。

干杯

【问题讨论】：

WPF: How to freeze a ListView header row so that it won't scroll off the screen的可能重复
@MrFox 这个问题是针对 ASP.NET，而不是 WPF

标签： c# html asp.net css listview

【解决方案1】：

你可以试试这样的：

.ListViewStyle
{
    width: 620px;
    max-height: 240px;
    height: expression( scrollHeight < 240 ? 'auto' : '240px' );
    overflow: auto;
    border-left: 1px solid #EEF5FE;
    position:relative;
    padding-top: 24px;
}

.ListViewStyle thead
{
    position:absolute;
    top: 0;
}

应该将头部放置在包装 div 的顶部，并将列表的其余部分向下填充，这样它就不会被头部遮挡。

编辑：这不起作用。对不起。

【讨论】：

【解决方案2】：

首先，您可能希望摆脱 table 标记元素，并改用 DIV。那么：

<style>
.myHeader
{
    position: absolute;

}
</style>
<script>
   $(document).ready(function(){
       $("#my240pxcontainer").on('scroll', function(){
           $("#myHeader").css("top", $("#myHeader").position().top);
       });
   });
</script>

希望，这会有所帮助。

【讨论】：