none
如何应用这段“弹出窗口”的代码???请教。。。 RRS feed

  • 问题

  •     得到了一段弹出窗口的代码。

        我正在研究把Gridview和DetailsView配合使用(点击Gridview的某一行则跳出相应的DetailsView)。

        现在我想把它们结合起来使用,也就是点击Gridview的某一行,就会把DetailsView在新窗口中弹出来。

        问题是:尽然不知道该把Gridview和DetailsView放在哪里。。。。请各位帮忙看看!后面附有完整的   “窗口弹出代码”  及  “Gridview和DetailsView配合使用的代码”

    ---------------------------------------------  “窗口弹出代码” --------------------------------------

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>无标题文档</title>
    <script type="text/javascript">
    function alertWin(str){ 
     var msgw, msgh, bordercolor;
     msgw = 300;//提示窗口的宽度
     msgh = 100;//提示窗口的高度
     titleheight = 25 //提示窗口标题高度
     bordercolor = "#A480B2";//提示窗口的边框颜色
     titlecolor = "#A480B2";//提示窗口的标题颜色
      
     //根据自己需求注意宽度和高度的调整
     var iWidth = document.documentElement.clientWidth; 
     var iHeight = document.documentElement.clientHeight; 
     //遮罩层
     var bgObj = document.createElement("div"); 
     bgObj.setAttribute("id", "bgObj");//设置ID
     bgObj.style.cssText = ";left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
     document.body.appendChild(bgObj);
    
     //弹出窗口
     var msgObj=document.createElement("div");
     msgObj.setAttribute("id", "msgDiv");//可以用bgObj.id="msgDiv"的方法,是为div指定属性值
     msgObj.setAttribute("align", "center");//为div的align赋值
     msgObj.style.background = "white";//背景颜色为白色
     msgObj.style.border = "1px solid " + bordercolor;//边框属性,颜色在上面已经赋值
     msgObj.style.position = "absolute";//绝对定位
     msgObj.style.left = (iWidth-msgw)/2  ;//从左侧开始位置
     msgObj.style.top = (iHeight-msgh)/2;//从上部开始位置
     msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性
     msgObj.style.width = msgw + "px";//提示框的宽(上面定义过)
     msgObj.style.height = msgh + "px";//提示框的高(上面定义过)
     msgObj.style.textAlign = "center";//文本位置属性,居中。
     msgObj.style.lineHeight = "25px";//行间距
     msgObj.style.zIndex = "102";//层的z轴位置
     document.body.appendChild(msgObj);
    
     //弹出窗口标题
     var title = document.createElement("div");//创建一个标题对象
     title.setAttribute("id", "msgTitle");//为标题对象填加id
     title.style.margin = "0";//浮动
     title.style.padding = "3px";//浮动
     title.style.background = titlecolor;//背景颜色
     title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
     title.style.opacity = "0.75";//透明
     //title.style.border="1px solid " + bordercolor;//边框
     title.style.height = "25px";//高度
     title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性
     //title.style.color = "red";//文字颜色
     title.style.cursor = "move";//鼠标样式
     title.innerHTML="<table border='0' width='100%'><tr><td align='left'>系统信息</td><td align=\"right\"><a href='#' onclick='closeDiv()'>关闭</a></td></tr></table>";
    
     //设置窗口可移动
    
     var moveX = 0;
     var moveY = 0;
     var moveTop = 0;
     var moveLeft = 0;
     var moveable = false;
     var docMouseMoveEvent = document.onmousemove;
     var docMouseUpEvent = document.onmouseup;
     title.onmousedown = function() {
       var evt = getEvent();
       moveable = true; 
       moveX = evt.clientX;
       moveY = evt.clientY;
       moveTop = parseInt(msgObj.style.top);
       moveLeft = parseInt(msgObj.style.left);   
       document.onmousemove = function() {   
             if (moveable){
         var evt = getEvent();
         var x = moveLeft + evt.clientX - moveX;
         var y = moveTop + evt.clientY - moveY;
         if ( x > 0 &&( x + msgw < iWidth) && y > 0 && (y + msgh < iHeight) ){
          msgObj.style.left = x + "px";
          msgObj.style.top = y + "px";
         }
        } 
       };
       document.onmouseup = function (){ 
        if (moveable) { 
         document.onmousemove = docMouseMoveEvent;
         document.onmouseup = docMouseUpEvent;
         moveable = false; 
         moveX = 0;
         moveY = 0;
         moveTop = 0;
         moveLeft = 0;
        } 
       };
      }
     //获得事件Event对象,用于兼容IE和FireFox
     function getEvent() {
      return window.event || arguments.callee.caller.arguments[0];
     }
     
     msgObj.appendChild(title);//在提示框中增加标题
     var txt = document.createElement("p");
     txt.style.margin = "1em 0";//文本浮动
     txt.setAttribute("id", "msgTxt");//为p属性增加id属性
     txt.innerHTML = str;//把传进来的值赋给p属性
     msgObj.appendChild(txt);//把p属性增加到提示框里
    }
    
    //添加关闭功能
    function closeDiv() {
        var msgTitelObject = document.getElementById("msgDiv");
        document.body.removeChild(msgTitelObject);
        var bgObj = document.getElementById("bgObj");
        document.body.removeChild(bgObj);
    
    }
    
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
    <input type="button" value="点这里" onclick="alertWin('消息主题');" />
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" 
                    InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" />
                <asp:BoundField DataField="LastName" HeaderText="LastName" 
                    SortExpression="LastName" />
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" 
                    SortExpression="FirstName" />
                <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
                <asp:BoundField DataField="TitleOfCourtesy" HeaderText="TitleOfCourtesy" 
                    SortExpression="TitleOfCourtesy" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
            SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title], [TitleOfCourtesy] FROM [Employees]">
        </asp:SqlDataSource>
        </form>
    </body>
    </html>

    -------------------------------------- “Gridview和DetailsView配合使用的代码”----------------------------------

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <%--<script language="javascript">--%>
        <script type="text/javascript">
    //******************************************************
    function controlDiv(DivID,divCase){
    var divs=document.getElementById(DivID);
    var v_left=(document.body.clientWidth-300)/2 + document.body.scrollLeft; //divs.clientWidth
    var v_top=(document.body.clientHeight-divs.clientHeight)/2 + document.body.scrollTop;
    if(divCase==1){
    divs.style.left=v_left+'px';
    divs.style.top=v_top+'px';
    divs.style.display="block"; //显示DIV
    }else if(divCase==2)
    divs.style.display="none"; //屏蔽DIV
    else
      divs.innerHTML=divCase; //输出HTML文本到DIV
    }
    //******************************************************
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
    
    <%--<div align="center">
    <p>&nbsp;</p>
    <p><a href="#" onclick="controlDiv('msgDiv',1)">点击弹出</a></p>
    </div>--%>
    <%--<div align="center"><a href="#" onclick="controlDiv('msgDiv',1)">点击弹出</a></div>--%>
    <div id="msgDiv">
    <h1><span>[<a href="#" onclick="controlDiv('msgDiv',2)">关闭</a>]</span>弹出窗口</h1>
      <%--<div align="center"><br />--%>
      <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" 
                DataKeyNames="EmployeeID" DataSourceID="SqlDataSource_DetaisView" Height="50px" 
                Width="125px" onitemupdated="DetailsView1_ItemUpdated">
                <Fields>
                    <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" 
                        InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" />
                    <asp:BoundField DataField="LastName" HeaderText="LastName" 
                        SortExpression="LastName" />
                    <asp:BoundField DataField="FirstName" HeaderText="FirstName" 
                        SortExpression="FirstName" />
                    <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" 
                        ShowInsertButton="True" />
                </Fields>
            </asp:DetailsView><br />
      <%--</div>--%>
    </div>
    
    
        <div>
        
            
        
            
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                DataKeyNames="EmployeeID" DataSourceID="SqlDataSource_GridView">
                <Columns>
                
                    <asp:TemplateField ShowHeader="False">
                        <ItemTemplate>
                        <asp:LinkButton ID="btn_Select" runat="server" CausesValidation="False" 
                         CommandName="Select" Text="选取"></asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                    
                    <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" 
                        InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" />
                        
                    <asp:BoundField DataField="LastName" HeaderText="LastName" 
                        SortExpression="LastName" />
                        
               </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource_DetaisView" runat="server" 
                ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
                DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID] = @EmployeeID" 
                InsertCommand="INSERT INTO [Employees] ([LastName], [FirstName] ) VALUES (@LastName, @FirstName)  " 
                SelectCommand="SELECT [EmployeeID], [LastName], [FirstName] FROM [Employees]  WHERE [EmployeeID] = @EmployeeID" 
                
                
                
                UpdateCommand="UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName WHERE [EmployeeID] = @EmployeeID" >
                <SelectParameters>
                    <asp:ControlParameter ControlID="GridView1" Name="EmployeeID" 
                        PropertyName="SelectedValue" />
                </SelectParameters>
                <DeleteParameters>
                    <asp:Parameter Name="EmployeeID" Type="Int32" />
                </DeleteParameters>
                <UpdateParameters>
                    <asp:Parameter Name="LastName" Type="String" />
                    <asp:Parameter Name="FirstName" Type="String" />
                    <asp:Parameter Name="EmployeeID" Type="Int32" />
                </UpdateParameters>
                <InsertParameters>
                    <asp:Parameter Name="LastName" Type="String" />
                    <asp:Parameter Name="FirstName" Type="String" />
                </InsertParameters>
            </asp:SqlDataSource>
            <asp:SqlDataSource ID="SqlDataSource_GridView" runat="server" 
                ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
                
                SelectCommand="SELECT [EmployeeID], [LastName] FROM [Employees]">
            </asp:SqlDataSource>
        
        </div>
        </form>
    </body>
    </html>


    C# 菜鸟中的雏鸟!提的问题也许很幼稚,但我是认真的。希望看在党国的面子上拉兄弟一把!

    2012年10月29日 3:03

全部回复

  • 你在DetailsView外面加一个divX,然后


    onclick="alertWin(document.getElementById('divX').innerHTML);"

    就可以了,不过,可能这样的方法可能提交不了 数据,因为这个窗口的内容可能跑到了form的外面了


    【孟子E章】

    2012年10月29日 11:55
    版主
  •     我在IE8上测试,弹出的界面中没有DetailsView;在360浏览器中在弹出的界面中能够显示我添加的DetailsView,但是我一旦点击DetailsView的“编辑”,弹出的界面就消失了。。。

        不知道该如何继续了。。。


    C# 菜鸟中的雏鸟!提的问题也许很幼稚,但我是认真的。希望看在党国的面子上拉兄弟一把!

    2012年10月31日 11:25