选择时在 GridPanel 上的 Div答案

【问题标题】：Div over GridPanel at select选择时在 GridPanel 上的 Div
【发布时间】：2009-07-07 10:36:22
【问题描述】：

我的 JavaScript 不是很好，现在我真的卡住了。我在表单上有一个更新面板。在这个更新面板中，我有一个网格视图。当我单击选择按钮时，我希望 Panel1 显示在桌子上方，并且他的左上角位于我单击的位置。

我用 JavaScript 编写了一个函数，它将鼠标坐标保存到 2 个隐藏字段中：

function  getMouseXY(event)
{
    var hiddenFieldX=$get('<%=mouseX.ClientID%>');
    var hiddenFieldY=$get('<%=mouseY.ClientID%>');

    if (navigator.appName=="Microsoft Internet Explorer")
    {
        hiddenFieldX.value = event.clientX + document.body.scrollLeft
        hiddenFieldY.value = event.clientY + document.body.scrollTop
    }
    else
    {
        hiddenFieldX.value=event.pageY
        hiddenFieldY.value=event.pageX
    }
}

之后，我必须在服务器端完成 Panel1 中的 TextBox1。如何将 Panel1 定位在我想要的位置？我有设置面板坐标的功能：

function showDetails()
{
    var hiddenFieldX=$get('<%=mouseX.ClientID%>');
    var hiddenFieldY=$get('<%=mouseY.ClientID%>');

    var elem=$get("details") ;
    elem.style.left = hiddenFieldX.value+"px"
    elem.style.top = hiddenFieldY.value+"px"
}

但你不知道我应该什么时候给它打电话。

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
         <asp:HiddenField ID="showDetails" Value="false" runat="server" />
         <asp:HiddenField ID="mouseX" Value="0" runat="server" />
         <asp:HiddenField ID="mouseY" Value="0" runat="server" />


         <asp:Panel ID="Panel1" runat="server" style="border-color:Blue; border-style:double; border-width:thick; width : 200px; height:200px; position:absolute ; top:100px ; left: 100px; z-index:0" Visible="false">
             <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
         </asp:Panel>
         <asp:SqlDataSource ID="EnvoxDataSource" runat="server" </asp:SqlDataSource>
         <asp:GridView ID="gvRecherche" runat="server" AllowPaging="True" PageSize="30" Caption="Résultats" AllowSorting="True" CssClass="tableSeparator"
AutoGenerateColumns="False" DataSourceID="EnvoxDataSource"  
OnSelectedIndexChanged="gvRecherche_SelectedIndexChanged"  
onclick="getMouseXY(event)" >
             <PagerStyle BorderStyle="None"/>
             <HeaderStyle CssClass="tableSeparator" HorizontalAlign="Left"  />
             <AlternatingRowStyle CssClass="colorBlanc" />
             <RowStyle CssClass="colorGris" />
             <SelectedRowStyle BackColor="#FFCC66" Font-Bold="true" ForeColor="#659bed" />
             <Columns>
                 <asp:CommandField InsertVisible="False" SelectImageUrl="~/App_Themes/Standard/images/selectbtn20X20.PNG" SelectText="Select" ShowCancelButton="False" ShowSelectButton="True" ButtonType="Image"   />
                <asp:BoundField DataField="ContactID" HeaderText="ContactID" ReadOnly="True" SortExpression="ContactID"/>
                <asp:BoundField DataField="TimeInIVR" HeaderText="TimeInIVR" ReadOnly="True" SortExpression="TimeInIVR" />
                <asp:BoundField DataField="TQ" HeaderText="TQ" ReadOnly="True" SortExpression="TQ"/>
           </Columns>
           <EmptyDataTemplate>
               <div class="message">Aucun résultat pour ces critères</div>
           </EmptyDataTemplate>
           <PagerSettings Mode="NumericFirstLast" Position="TopAndBottom"         LastPageText="&gt;&gt;" FirstPageText="&lt;&lt;" />
     </asp:GridView> 
     <br />
     <asp:Button ID="btnImprime" runat="server" Text="Version Imprimable" Visible="False" CssClass="bouton" PostBackUrl="<%# GetEnvoxPrintUrl() %>"  target="_blanc" />            
     &nbsp;&nbsp;&nbsp;
     <script language="javascript" type="text/javascript">showDetails()</script> 
 </ContentTemplate>
</asp:UpdatePanel>

谢谢

【问题讨论】：

标签： asp.net javascript

【解决方案1】：

试试这个。我认为 gv 按钮单击会导致部分回发，并且可以使用下面的 javascript 拦截：

<script type="text/javascript" language="javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
    function BeginRequestHandler(sender, args)
    {
        showDetails(); // Your javascript
    }
</script>

【讨论】：