ASP.NET ListView - 使用CSS可固定标头滚动

时间:2010-05-20 18:03:23

标签: .net asp.net html css web-applications

我正在使用ASP.NET ListView控件,目前我有一个可滚动的网格:

(以下示例简化并包含嵌入式样式以便提问)

<asp:ListView ID="ListView" runat="server" DataKeyNames="Id">
        <LayoutTemplate>
            <div style="height:225px; overflow:auto;">
                <table runat="server">
                    <tr>
                        <th>
                            <span>Column1</span>
                        </th>
                        <th>
                            <span>Column2</span>
                        </th>
                        <th>
                            <span>Column3</span>
                        </th>
                    </tr>
                    <tr id="itemPlaceholder" runat="server" />
                </table>
            </div>
        </LayoutTemplate>
        <ItemTemplate>
            <tr id="items" runat="server">
                <td class="first">
                    <%#Eval("Column1")%>
                </td>
                <td>
                    <%#Eval("Column2")%>
                </td>
                <td>
                    <%#Eval("Column3")%>
                </td>
            </tr>
        </ItemTemplate>
    </asp:ListView>

我想应用CSS以便我的标题得到修复。

我可以添加哪些样式以使其有效?

2 个答案:

答案 0 :(得分:2)

答案 1 :(得分:1)

我刚刚提出这个问题:您不需要使用CSS,只需将布局模板中的标题行定义为单独的表格即可。然后将一个新表格包装在一个带有overflow=scroll的div中,然后将你的内容库持有者放入。

注意标题中有一个额外的列,这是为滚动条腾出空间。然后将列的宽度设置为与标题相同,即可完成。

您必须包含一些JavaScript才能在回发后保持滚动位置,但这是一个不同的主题。这是我如何完成它的一个例子。

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">                       
        <EmptyDataTemplate>
            <table id="Table1" runat="server" 
                style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
                <tr>
                    <td>
                        No data was returned.</td>
                </tr>
            </table>
        </EmptyDataTemplate>            
        <ItemTemplate>
            <tr style="background-color: #E0FFFF;color: #333333;">
                <td style="width:100px;">
                    <asp:LinkButton ID="Butpullacct" OnClick="Butpullacct_Click" runat="server">Reaccess</asp:LinkButton>
                </td>
                <td style="display:none">
                    <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' />
                </td>
                <td style="width:100px;">
                    <asp:Label ID="BTNRSLabel" runat="server" Text='<%# Eval("BTNRS") %>' />
                </td>
                <td style="width:100px;">
                    <asp:Label ID="NoticeDueLabel" runat="server" 
                        Text='<%# Eval("NoticeDue")%>' />
                </td>
                <td style="width:75px;">
                    <asp:Label ID="NoticeTypeLabel" runat="server" 
                        Text='<%# Eval("NoticeType") %>' />
                </td>
                <td style="width:200px;">
                    <asp:Label ID="DispDescLabel" runat="server" Text='<%# Eval("DispDesc") %>' />
                </td>
                <td style="width:175px;">
                    <asp:Label ID="AccessTimeLabel" runat="server" 
                        Text='<%# Eval("AccessTime") %>' />
                </td>
                <td style="width:175px;">
                    <asp:Label ID="ExitTimeLabel" runat="server" Text='<%# Eval("ExitTime") %>' />
                </td>
            </tr>
        </ItemTemplate>
        <LayoutTemplate>
            <table id="Table2" runat="server">
                <tr id="Tr1" runat="server">
                    <td id="Td1" runat="server">
                        <table ID="itemPlaceholderContainer" runat="server" border="1" 
                            style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
                            <tr id="Tr2" runat="server" style="background-color: #E0FFFF;color: #333333;">
                                <th id="Th1" runat="server" style="width:100px;"></th>
                                <th id="Th2" runat="server" style="display:none">
                                    id</th>
                                <th id="Th3" runat="server" style="width:100px;">
                                    BTNRS</th>
                                <th id="Th4" runat="server" style="width:100px;">
                                    Notice Due Date</th>
                                <th id="Th5" runat="server" style="width:75px;">
                                    Notice Type</th>
                                <th id="Th6" runat="server" style="width:200px;">
                                    Action</th>
                                <th id="Th7" runat="server" style="width:175px;">
                                    Access Time</th>
                                <th id="Th8" runat="server" style="width:175px;">
                                    Exit Time</th>
                                <th id="Th9" style="width:13px;" runat="server">
                                    </th>
                            </tr>                       
                        </table>
                        <div style="overflow:scroll; height:500px;">
                            <table border="1" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
                                <tr ID="itemPlaceholder" runat="server">
                                </tr>
                            </table>                            
                        </div>
                    </td>
                </tr>
                <tr id="Tr3" runat="server">
                    <td id="Td2" runat="server" 
                        style="text-align: center;background-color: #5D7B9D;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF">
                    </td>
                </tr>
            </table>
        </LayoutTemplate>          
    </asp:ListView>