我有一个 ASP.NET GridView ,它有几个关联的详细信息 View 和一个辅助 GridView 。当用户单击 gridview 中的一行时,detailsviews 会在 gridview 的右侧弹出。这很好,但是随着 gridview 行数的增加,详细信息 View 在页面上被推得越来越低,使用户很难找到它们,并且令人沮丧。
我想做的是当用户选择他们感兴趣的行时,将详细信息 View 的顶部与所选行对齐。
我试过设置 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 中不起作用,因为显然“animate”是 Chrome 中的关键字,但是 example适用于 Firefox。
问题:
我如何在用户滚动时保持细节 View 在 View 中,或者至少弹出与他们选择的 GridView 中的行对齐的细节 View ?
编辑:
回应@rexroxm 的建议:
我已经添加:
<div style="position: absolute"><td>...</td></div>
围绕第一个细节 View 。这没有任何区别,所以我将其添加到 .CSS 文件中:
[id$="ContentPlaceHolder1_dvProductionReport"],
[id$="ContentPlaceHolder1_dvOraclePartDetails"],
[id$="ContentPlaceHolder1_gvReceipts"]
{
position: absolute;
}
我可以看到 position: absolute;
的 CSS显示在所有三个相关的详细信息 View (2) 和 GridView (1) 上。如果我在 Chrome > Inspect > Developer tools 中检查样式,我会看到 position: absolute;
在第一个 View 中显示了所有三个,但在第二个 View 中显示了它(不确定这些被称为什么,但它们会向您显示您选择的元素的 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>
最佳答案
您可以保留 detailsview 的 position:absolute
这样它将保留在您的页面/ View 中。当有人在主 gridview 中单击用户时,您可能会将其数据绑定(bind)到辅助 gridview,然后显示它。在容器 div/table
的 style
中将其 position
设置为 absolute
将使它保持在 View 中。您还可以在包含辅助 Gridview 的 div 的右上角放置一个十字按钮,它使用事件 onclick
设置 display:none
。
关于javascript - 在选定的 gridview 行旁边自动滚动 detailsview,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41947581/