Javascript 自动滚动所选gridview行旁边的detailsview_Javascript_Css_Asp.net_Gridview_Detailsview

Javascript 自动滚动所选gridview行旁边的detailsview

javascript css asp.net gridview

Javascript 自动滚动所选gridview行旁边的detailsview,javascript,css,asp.net,gridview,detailsview,Javascript,Css,Asp.net,Gridview,Detailsview,我有一个ASP.NET gridview，它有两个关联的DetailsView和一个辅助gridview。当用户单击gridview中的一行时，DetailsView会在gridview的右侧弹出。这很好，但是随着gridview行数的增加，DetailsView在页面上被推得越来越低，这使得用户很难找到它们我想做的是，当用户选择他们感兴趣的行时，将detailsview的顶部与所选行对齐我已尝试使用以下设置CSS： [id$="ContentPlaceHolder1_dvProductio

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

我想做的是，当用户选择他们感兴趣的行时，将detailsview的顶部与所选行对齐

我已尝试使用以下设置CSS：

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

这不管用。我还尝试使用JavaScript定位它（在本例中仅使用第一个选择器），使用：

我可以看到

位置的CSS:absolute显示在所有三个相关的DetailsView（2）和gridview（1）上。如果我在Chrome>Inspect>Developer工具中检查样式，我会看到position:absolute
在第一个视图中显示所有三个元素，但在第二个视图中显示为一行（不确定这些元素的名称，但它们会显示所选元素的CSS样式）。我还尝试使用：
[id$="ContentPlaceHolder1_dvProductionReport"], 
[id$="ContentPlaceHolder1_dvOraclePartDetails"], 
[id$="ContentPlaceHolder1_gvReceipts"] 
{
    position: absolute !important;
}

这也显示为一行通过
这是完整的…
，很抱歉太长了，但可能会有帮助：
        <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>


您可以保留detailsview的位置：绝对
，这样它将保留在您的页面/视图中。当有人在主gridview中单击用户时，您可能会将其数据绑定到次gridview，然后显示它。在容器div/table
的style
中将其position
设置为absolute
，将其保留在视图中。您还可以在包含次网格视图的div的右上方放置一个十字按钮，该按钮设置事件onclick
的display:none，谢谢您的建议，我还无法实现此功能，请用我尝试过的内容查看我编辑的问题。
[id$="ContentPlaceHolder1_dvProductionReport"], 
[id$="ContentPlaceHolder1_dvOraclePartDetails"], 
[id$="ContentPlaceHolder1_gvReceipts"] 
{
    position: absolute !important;
}

        <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>