沿着所选的gridview行自动滚动detailsview答案

【问题标题】：Automatically scroll detailsview alongside chosen gridview row沿着所选的gridview行自动滚动detailsview
【发布时间】：2017-06-16 07:11:11
【问题描述】：

我有一个 ASP.NET 网格视图，它有几个关联的详细信息视图和一个辅助网格视图。当用户单击gridview 中的一行时，会在gridview 的右侧弹出detailsviews。这很好，但是随着 gridview 行数的增加，详细信息视图在页面上被推得越来越低，这使用户很难找到它们。

我想做的是当用户选择他们感兴趣的行时，将详细信息视图的顶部与所选行对齐。

我尝试使用以下方式设置 CSS：

[id$="ContentPlaceHolder1_dvProductionReport"], 
[id$="ContentPlaceHolder1_dvOraclePartDetails"], 
[id$="ContentPlaceHolder1_gvReceipts"] 
{
    position: fixed;
}

这不起作用。我还尝试使用 this example 使用 JavaScript 定位它（在此示例中仅使用第一个选择器）：

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $().ready(function () {
        //var $scrollingDiv = [id$ = "ContentPlaceHolder1_dvProductionReport"];
        var elements = document.querySelector('[id$="ContentPlaceHolder1_dvProductionReport"]');
        console.log(elements);

        $(window).scroll(function () {
            elements
                .stop()
                .animate({ "marginTop": ($(window).scrollTop() + 30) + "px" }, "slow");
        });
    });
</script>

但这在 Chrome 中不起作用，因为显然“动画”是 Chrome 中的一个关键字，但 example 在 Firefox 中起作用。

问题：

如何在用户滚动时保持详细信息视图，或者至少弹出与他们选择的网格视图中的行对齐的详细信息视图？

编辑： 针对@rexroxm 的建议：我已经添加： <div style="position: absolute"><td>...</td></div> 第一个细节视图。这没有什么区别，所以我将它添加到 .CSS 文件中：

[id$="ContentPlaceHolder1_dvProductionReport"], 
[id$="ContentPlaceHolder1_dvOraclePartDetails"], 
[id$="ContentPlaceHolder1_gvReceipts"] 
{
    position: absolute;
}

我可以看到position: absolute; 的 CSS 显示在所有三个相关的详细信息视图 (2) 和网格视图 (1) 上。如果我在 Chrome > Inspect > Developer tools 中检查样式，我看到position: absolute; 在第一个视图中显示所有三个，但它在第二个视图中被划线（不确定这些被称为什么，但它们向您展示了您选择的元素的 CSS 样式）。我也试过使用：

[id$="ContentPlaceHolder1_dvProductionReport"], 
[id$="ContentPlaceHolder1_dvOraclePartDetails"], 
[id$="ContentPlaceHolder1_gvReceipts"] 
{
    position: absolute !important;
}

这也显示为划线。

这是完整的<td>...</td>，很抱歉，它可能会有所帮助：

        <td>
        <div style="position: absolute">
            <asp:DetailsView ID="dvProductionReport" runat="server" Height="50px" 
            Width="125px"
            EnableModelValidation="True" AutoGenerateRows="False" 
            DataKeyNames="PartNumber" Caption="Part Details" >
            <AlternatingRowStyle BackColor="#66FF66" ForeColor="Black" />
            <Fields>
                <asp:BoundField DataField="PartNumber" HeaderText="Part Number:" 
                    SortExpression="PartNumber" >
                <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" 
                    Wrap="False" />
                <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="AssemblyPartNumber" 
                    HeaderText="Assembly Part Number:" SortExpression="AssemblyPartNumber" >
                <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" 
                    Wrap="False" />
                <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                </asp:BoundField>
                <asp:TemplateField HeaderText="Line Down:" SortExpression="LineDown">
                    <EditItemTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Convert.ToBoolean(Eval("LineDown")) %>' />
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Convert.ToBoolean(Eval("LineDown")) %>' />
                    </InsertItemTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Convert.ToBoolean(Eval("LineDown")) %>' 
                            Enabled="false" />
                    </ItemTemplate>
                <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                </asp:TemplateField>
                <asp:BoundField DataField="Product" HeaderText="Product:" 
                    SortExpression="Product" >
                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="Assembly" HeaderText="Assembly:" 
                    SortExpression="Assembly" >
                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="OrderNumber" HeaderText="Order Number:" 
                    SortExpression="OrderNumber" >
                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="Department" HeaderText="Department:" 
                    SortExpression="Department" >
                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="DateAdded" HeaderText="Date Added:" 
                    SortExpression="DateAdded" DataFormatString="{0:d}" >
                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="DateRequired" HeaderText="Date Required:" 
                    SortExpression="DateRequired" DataFormatString="{0:d}" >
                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="QuantityRequired" HeaderText="Quantity Required:" 
                    SortExpression="QuantityRequired" >
                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                </asp:BoundField>
                <asp:TemplateField HeaderText="Filled:" SortExpression="Filled">
                    <EditItemTemplate>
                        <asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Convert.ToBoolean(Eval("Filled")) %>' />
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Convert.ToBoolean(Eval("Filled")) %>' />
                    </InsertItemTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Convert.ToBoolean(Eval("Filled")) %>' 
                            Enabled="false" />
                    </ItemTemplate>
                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Closed:" SortExpression="Closed">
                    <EditItemTemplate>
                        <asp:CheckBox ID="CheckBox3" runat="server" Checked='<%# Convert.ToBoolean(Eval("Closed")) %>' />
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <asp:CheckBox ID="CheckBox3" runat="server" Checked='<%# Convert.ToBoolean(Eval("Closed")) %>' />
                    </InsertItemTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox3" runat="server" Checked='<%# Convert.ToBoolean(Eval("Closed")) %>' 
                            Enabled="false" />
                    </ItemTemplate>
                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                </asp:TemplateField>
                <asp:BoundField DataField="ProductionCell" HeaderText="Production Cell:" 
                    SortExpression="ProductionCell" >
                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="ProductionReason" HeaderText="Production Reason:" 
                    SortExpression="ProductionReason" >
                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
                </asp:BoundField>
                <asp:BoundField DataField="ProductionComments" 
                    HeaderText="Production Comments:" SortExpression="ProductionComments" >
                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
                </asp:BoundField>
                <asp:BoundField DataField="ReportingAssociate" 
                    HeaderText="Reporting Associate:" SortExpression="ReportingAssociate" >
                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                </asp:BoundField>
                <asp:HyperLinkField DataTextField="EmailAddress" HeaderText="Email Address:" 
                    SortExpression="EmailAddress" >
                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                </asp:HyperLinkField>
                <asp:BoundField DataField="RootCause" HeaderText="Root Cause:" 
                    SortExpression="RootCause" >
                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="BuyerComments" HeaderText="Buyer Comments:" 
                    SortExpression="BuyerComments" >
                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
                </asp:BoundField>
            </Fields>
</asp:DetailsView>
        </div>
    </td>

【问题讨论】：

标签： javascript css asp.net gridview detailsview

【解决方案1】：

您可以保留 detailsview 的 position:absolute，这样它将保留在您的页面/视图中。当有人在主网格视图中单击用户时，您可能会将其数据绑定到辅助网格视图，然后显示它。在容器div/table 的style 中将其position 设置为absolute 会将其保留在视图中。您还可以在包含辅助 Gridview 的 div 的右上角放置一个十字按钮，该辅助 Gridview 将 display:none 设置为事件 onclick。

【讨论】：

感谢您的建议，我无法使其正常工作，请查看我已尝试的编辑问题。