Question

在浏览器上启用滚动条似乎有很多混乱和不必要的复杂性。

我有一个asp.net应用程序，我试图显示一个用asp.net转发器创建的队列。垂直滚动条没有问题，正如预期的那样。然而，在窗口底部（不在div或应用程序中的任何其他元素，在浏览器窗口上）有一个默认的水平滚动条已被证明是一个巨大的痛苦，没有我能够解决的解决方案找到。

如何确保在浏览器上启用水平滚动条？

另外，作为奖励问题，如何在屏幕上固定转发器表的标题？代码如下。

<asp:Repeater ID="ResultsTableRepeater" runat="server">
            <HeaderTemplate>
                <table id="RepeaterTable" class="td-table-bordered" style="font-size: small>
                    <tr id="FixedHeader" >
                        <th>Change #</th>
                        <th>Change Title</th>
                        <th>Description</th>
                        <th>Change Sponsor</th>
                        <th>Clarity Id</th>
                        <th>Assigned To</th>
                        <th>Intake Received</th>
                        <th>Risk Rating</th>
                        <th>Risk Analysis Completed</th>
                        <th>Performance Testing?</th>
                        <th>PRA Status</th>
                        <th>Lab Request Status</th>
                        <th>Target Production Date</th>
                        <th>Overall Status</th>
                    </tr>
            </HeaderTemplate>
            <ItemTemplate>
                <tr style='<%#(Eval("AssignedTo").ToString() == "1" || Eval("AssignedTo").ToString() == "2")? "": "font-weight:bold; background-color:cornsilk" %>'>
                    <td>
                        <asp:Label ID="ChangeLabel" runat="server" Text='<%# Eval("ChangeId") %>'></asp:Label></td>
                    <td>
                        <asp:HyperLink ID="UpdateLink" NavigateUrl='<%# Eval("ChangeId", "http://dev.rlaninfrastructure.tdbank.ca/RCGViewForm?ChangeId={0}") %>' runat="server"><%# Eval("ChangeTitle") %></asp:HyperLink></td>
                    <td><%# Eval("ChangeDescription") %></td>
                    <td><%# Eval("ChangeSponsor") %></td>
                    <td><%# Eval("ClarityId") %></td>
                    <td><%# (Eval("EmployeeName").ToString() == string.Empty) ? "" : Eval("EmployeeName")%></td>
                    <td><%# ((DateTime)Eval("DateSubmitted")).ToShortDateString() %></td>
                    <td><%# (Eval("OverallRiskRating").ToString() == string.Empty) ? "Not Completed" : (Eval("OverallRiskRating").ToString() == "3") ? "High" : (Eval("OverallRiskRating").ToString() == "2") ? "Med" : "Low" %></td>
                    <td><%# (Eval("RiskAnalysisComplete").ToString() != string.Empty) ? ((DateTime)Eval("RiskAnalysisComplete")).ToShortDateString() : "Not Completed"%></td>
                    <td>
                        <asp:Label ID="PRALabel" runat="server"
                            Text='<%# (Eval("PRAComplete").ToString() == "1") ? "PRA Form Submitted" : (Eval("IsPCoERequired").ToString() == "1" 
                    || Eval("IsCanadianRetailBranch").ToString() == "1") ? "Yes" : "No" %>'>
                        </asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="PRACompleteLabel" runat="server"
                            Text='<%# (Eval("PRAComplete").ToString() == "1") ? "Completed" 
                              : ((Eval("IsPCoERequired").ToString() != "1" || Eval("IsCanadianRetailBranch").ToString() != "1") 
                              ? "Not Required" : "Pending") %>'></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="LabRequestedLabel" runat="server" Text='<%# (Eval("LabRequested").ToString() == "1") ? "Lab Requested" 
                                                                            : ((Eval("IsLabRequired").ToString() != "1") ? "Not Required" 
                                                                            : "Pending Lab Form Completion") %>'></asp:Label>
                    </td>
                    <td><%# ((DateTime)Eval("TargetDate")).ToShortDateString() %></td>
                    <td><%# Eval("OverallChangeStatus").ToString() == "1"? "In Progress" 
                            : Eval("OverallChangeStatus").ToString() == "2"? "Completed" 
                            : Eval("OverallChangeStatus").ToString() == "3" ? "Pending" 
                            : Eval("OverallChangeStatus").ToString() == "4"? "Under Review"
                            : Eval("OverallChangeStatus").ToString() == "5"? "On Hold"
                            : Eval("OverallChangeStatus").ToString() == "6"? "Rejected"  
                            : "" %>

                    </td>
                </tr>
            </ItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>

Answer 1

只要您想在页面中滚动，就提供溢出滚动。

要处理相对于转发器标题的水平滚动，您可以使用jquery滚动

将div包装器放在转发器中的标头表

上

<div id="divHeader" class="overflowhidden">

                            <table class="table-serviceline table table-hover table-bordered">
                                <tr class="child-header-dark child-header">
                                   ......
                                </tr>
                            </table>
                        </div>

将另一个div添加到项目模板下面的类

<div id="divItem" class="box-content overflowauto maxh">
<table>
.....
</table>
</div>

现在使用以下代码为Jquery维护基于内容水平滚动的滚动。

 $(function () {
        $('#divItem').scroll(function () {
            $('#divHeader').scrollLeft($(this).scrollLeft());
        });
    });

asp.net转发器垂直和水平滚动条和固定标头

1 个答案: