zoukankan      html  css  js  c++  java
  • asp.net下用js实现弹出子窗口选定值并返回

    对应上一篇博客代码:

    父页面:

     1 <head runat="server">
     2 <meta http-equiv="X-UA-Compatible" content="IE=9" >
     3     <title></title>
     4     <script type="text/javascript">
     5         function test() {
     6             //window.showModalDialog("test.aspx?tabname=book", window, 'dialogHeight=400px;dialogWidth=600px;');
     7             window.showModalDialog("B.aspx", window, 'dialogHeight=400px;dialogWidth=600px;');
     8         }
     9     </script>
    10 </head>
    11 <body>
    12     <form id="form1" runat="server">
    13     <div>
    14         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    15         <asp:Button ID="Button1" runat="server" Text="跳转到B页面"  OnClientClick="test();"/><br />
    16         <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    17     </div>
    18     </form>
    19 </body>
    20 </html>

    框架法(fream包含gridview页面):

    框架子页面:

     1 <html xmlns="http://www.w3.org/1999/xhtml">
     2 <head runat="server">
     3 <meta http-equiv="X-UA-Compatible" content="IE=9" >
     4     <title></title>
     5     <script type="text/javascript">
     6         function test() {
     7             var child;
     8             child = window.document.getElementById("child").contentWindow;
     9             window.dialogArguments.document.getElementById("TextBox1").value = child.document.getElementById("tb_name").value;
    10             window.close();
    11         }
    12     </script>
    13 </head>
    14     <frameset>
    15         <frame id="child" src="CZB.aspx?tabname=<%=set_tabname()%>"></frame>
    16     </frameset>
    17 </html>

    gridview页面:

     1 <html xmlns="http://www.w3.org/1999/xhtml">
     2 
     3 <head runat="server">
     4 <meta http-equiv="X-UA-Compatible" content="IE=9" >
     5     <title></title>
     6     <script type="text/javascript">
     7         function set() {
     8             window.parent.test();
     9         }
    10     </script>
    11 </head>
    12 <body>
    13     <form id="form1" runat="server" >
    14     <div>
    15         <asp:TextBox ID="tb_name" runat="server"></asp:TextBox>
    16         <asp:Button ID="bt_in" runat="server" Text="搜索" onclick="bt_in_Click" />
    17         <asp:Button ID="bt_re" runat="server" Text="重置" />
    18         <asp:Button ID="Button1" runat="server" Text="确认选择" onclick="Button1_Click" />
    19          <input id="Button2" type="button" value="回传"  onclick="set();"/>
    20 
    21         <asp:GridView ID="gvSell" runat="server" 
    22             onpageindexchanging="GridView1_PageIndexChanging" PageSize="5" >
    23             <Columns>
    24                  <asp:TemplateField HeaderText="数据选择">                           
    25                         <ItemTemplate>
    26                             <asp:CheckBox ID="CheckBox1" runat="server" />
    27                         </ItemTemplate>
    28                 </asp:TemplateField>   
    29             </Columns>
    30             <PagerSettings FirstPageText="首页" LastPageText="末页"  NextPageText="下一页" PageButtonCount="5" PreviousPageText="上一页" />
    31             <PagerStyle  Font-Names="宋体"  Font-Size="15px" />
    32         </asp:GridView>
    33         <div class="gridItem" style="padding: 5px; margin: 0px; border: 0;  40%; float: left; text-align: left; height: 20px; font-size: 15px;" aria-multiselectable="True"> 共有<span id="spanTotalInfor"></span>条记录  当前第<span id="spanPageNum"></span>页  共<span id="spanTotalPage"></span></div>
    34         <div class="gridItem" style=" border-style: none; border-color: inherit; border- 0; padding: 5px;  225px; float: right; text-align: center; height: 20px; vertical-align: middle; font-size: 15px;">   <span id="spanFirst" ><img src='img/first.png'/></span> <span id="spanPre"><img src='img/back.png'/></span><span id="spanInput" style="margin: 0px; padding: 0px 0px 4px 0px; height:100%; "><input  id="Text1" type="text" class="TextBox" onkeyup="x()"   style="height:20px; text-align: center" /></span><span id="spanNext"><img src='img/front.png'/></span> <span  id="spanLast"><img src='img/last.png'/></span> 
    35 
    36         </div>
    37         </div>
    38 
    39     </form>
    40 </body>
    41 </html>

    gridview后台页面:

     1 public partial class CZB : System.Web.UI.Page
     2 {
     3     string str = WebConfigurationManager.ConnectionStrings["TempleConnectionString"].ConnectionString; 4     protected void databind(string sql)
     5     {
     6         using (SqlConnection conn = new SqlConnection(str))
     7         {
     8             conn.Open();
     9             using (SqlCommand cmd = conn.CreateCommand())
    10             {
    11 
    12                 cmd.CommandText = sql;
    13                 SqlDataAdapter ap = new SqlDataAdapter(cmd);
    14                 DataSet ds = new DataSet();
    15                 ap.Fill(ds);
    16                 gvSell.DataSource = ds.Tables[0];
    17                 gvSell.DataBind();
    18             }
    19         }
    20     }
    21     protected void Page_Load(object sender, EventArgs e)
    22     {
    23         if (!IsPostBack)
    24         {
    25               databind("select * from book");
    26         }
    27     }
    28     protected void Button1_Click(object sender, EventArgs e)
    29     {
    30         string strs="";
    31         for (int i = 0; i <= gvSell.Rows.Count - 1; i++)
    32         {
    33             CheckBox cbox = (CheckBox)gvSell.Rows[i].FindControl("CheckBox1");
    34             if (cbox.Checked == true)
    35             {
    36                 strs = gvSell.Rows[i].Cells[3].Text.ToString();
    37                 tb_name.Text = strs;
    38             }
    39         }
    40     }
    41 
    42 
    43     protected string getvalue() 
    44     {
    45         string str;
    46         for (int i = 0; i <= gvSell.Rows.Count - 1; i++)
    47         {
    48             CheckBox cbox = (CheckBox)gvSell.Rows[i].FindControl("CheckBox1");
    49             if (cbox.Checked == true)
    50             {
    51                 return gvSell.Rows[i].Cells[3].Text.ToString();
    52             }
    53         }
    54         return "0";
    55     }
    56 
    57     protected void bt_in_Click(object sender, EventArgs e)
    58     {
    59         string sql = "select * from book where bookName like '%" + tb_name.Text + "%'";
    60         databind(sql);
    61     }
    62     protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    63     {
    64         gvSell.PageIndex = e.NewPageIndex;
    65         databind("select * from book");
    66     }
    67 }

    js实现方法:

      1 <html xmlns="http://www.w3.org/1999/xhtml">
      2 <head runat="server">
      3     <title></title>
      4     <script type="text/javascript">
      5         function getvalue() {
      6             var table = document.getElementById("gvSell");
      7             var s=0;
      8             for(var i=1;i<table.rows.length;i++) {
      9                 var input = table.rows[i].cells[0].getElementsByTagName("input")[0].checked;
     10                 if (input == true) 
     11                 {
     12                     window.dialogArguments.document.getElementById("TextBox1").value = table.rows[i].cells[3].innerHTML;
     13                     s = 1;
     14                     window.close();
     15                 }
     16             }
     17             if(s!=1)
     18                 alert("您未勾选任何一个选项!");
     19         }
     20         //搜索
     21         function search() {
     22            var content = document.getElementById(tb_name).value;
     23             if (content == "") {
     24                alert("您未输入任何内容!");
     25                return;
     26             }
     27             var table = document.getElementById("gvSell");
     28             var txt = document.getElementById("tb_name").value;
     29             var arr = new Array();
     30             var j = 0;var judge = 0;
     31             //获取相关行数
     32             for (var i = 1; i < table.rows.length; i++) {
     33                 if (table.rows[i].cells[3].innerHTML == txt || table.rows[i].cells[3].innerHTML.indexOf(txt) > -1) 
     34                 {
     35                     arr[j] = i;
     36                     j++; 
     37                 }
     38             }
     39             if (j == 0) {
     40                 alert("未找到有关数据!");
     41                 return;
     42             }
     43             //删除无关的行
     44             for (i = i-1; i > 0; i--) {
     45                 judge=0;
     46                 for (var k = 0; k < j; k++)
     47                     if (arr[k] == i)
     48                         judge = 1;
     49                 if (judge == 0)
     50                     document.getElementById("gvSell").deleteRow(i);
     51                   
     52             }
     53             y();
     54         }
     55 
     56         function delet() {   
     57             document.getElementById("tb_name").value = "";
     58         }
     59     </script>
     60 
     61 
     62 </head>
     63 <body>
     64     <form id="form1" runat="server">
     65     <div>
     66         <input id="tb_name" type="text" />
     67         <input id="Button3" type="button" value="搜索"  onclick="search();"/>
     68         <input id="Button1" type="button" value="选择"  onclick="getvalue();"/>
     69         <input id="Button2" type="button" value="重置"  onclick="delet();"/>
     70         <input id="tb_hidden" type="text"  style="visibility: hidden" />
     71         <asp:GridView ID="gvSell" runat="server" >
     72             <Columns>
     73                  <asp:TemplateField HeaderText="数据选择">                           
     74                         <ItemTemplate>
     75                             <input id="Checkbox2" type="checkbox" />
     76                         </ItemTemplate>
     77                 </asp:TemplateField>   
     78             </Columns>
     79           
     80     
     81         </asp:GridView>
     82         <div class="gridItem" style="padding: 5px; margin: 0px; border: 0;  40%; float: left; text-align: left; height: 20px; font-size: 15px;" aria-multiselectable="True"> 共有<span id="spanTotalInfor"></span>条记录  当前第<span id="spanPageNum"></span>页  共<span id="spanTotalPage"></span></div>
     83         <div class="gridItem" style=" border-style: none; border-color: inherit; border- 0; padding: 5px;  225px; float: right; text-align: center; height: 20px; vertical-align: middle; font-size: 15px;">   <span id="spanFirst" ><img src='img/first.png'/></span> <span id="spanPre"><img src='img/back.png'/></span><span id="spanInput" style="margin: 0px; padding: 0px 0px 4px 0px; height:100%; "><input  id="Text1" type="text" class="TextBox" onkeyup="x()"   style="height:20px; text-align: center" /></span><span id="spanNext"><img src='img/front.png'/></span> <span  id="spanLast"><img src='img/last.png'/></span> 
     84         </div>
     85         </div>
     86         <script type="text/javascript">
     87             var theTable = document.getElementById("gvSell");
     88             var txtValue = document.getElementById("Text1").value;
     89             function y() {
     90                 theTable = document.getElementById("gvSell");
     91                 txtValue = document.getElementById("Text1").value;
     92                 renovate();
     93             }
     94             function x() {
     95                 var txtValue2 = document.getElementById("Text1").value;
     96                 if (txtValue != txtValue2) {
     97                     if (txtValue2 > pageCount()) {
     98 
     99                     }
    100                     else if (txtValue2 <= 0) {
    101 
    102                     }
    103                     else if (txtValue2 == 1) {
    104                         first();
    105 
    106                     }
    107                     else if (txtValue2 == pageCount()) {
    108                         last();
    109 
    110                     }
    111                     else {
    112                         hideTable();
    113                         page = txtValue2;
    114                         pageNum2.value = page;
    115 
    116                         currentRow = pageSize * page;
    117                         maxRow = currentRow - pageSize;
    118                         if (currentRow > numberRowsInTable) currentRow = numberRowsInTable;
    119                         for (var i = maxRow; i < currentRow; i++) {
    120                             theTable.rows[i].style.display = '';
    121                         }
    122                         if (maxRow == 0) { preText(); firstText(); }
    123                         showPage();
    124                         nextLink();
    125                         lastLink();
    126                         preLink();
    127                         firstLink();
    128                    }
    129 
    130                     txtValue = txtValue2;
    131                 }
    132             }
    133             function renovate() {
    134                 numberRowsInTable = theTable.rows.length - 1; //table值发生变化 更新分页
    135                 for (var i = pageSize + 1; i < numberRowsInTable + 1; i++) {
    136                     theTable.rows[i].style.display = 'none';
    137                 }
    138                 for (var j = 0; j <= 5; j++) {
    139                     if (j > numberRowsInTable)
    140                         break;
    141                     theTable.rows[j].style.display = '';
    142                 }
    143                 inforCount();
    144 
    145                 totalPage.innerHTML = pageCount();
    146                 showPage();
    147                 pageNum2.value = page;
    148 
    149                 if (pageCount() > 1) {
    150                     nextLink();
    151                     lastLink();
    152                 }
    153             }
    154 </script>
    155 <script type="text/javascript" src="Pagging.js"></script>
    156     </form>
    157 </body>
    158 </html>

    相关js代码:

      1 var totalPage = document.getElementById("spanTotalPage");
      2 var pageNum = document.getElementById("spanPageNum");
      3 var totalInfor = document.getElementById("spanTotalInfor");
      4 var pageNum2 = document.getElementById("Text1");
      5 
      6 var spanPre = document.getElementById("spanPre");
      7 var spanNext = document.getElementById("spanNext");
      8 var spanFirst = document.getElementById("spanFirst");
      9 var spanLast = document.getElementById("spanLast");
     10 var pageSize = 5;
     11 
     12 var numberRowsInTable = theTable.rows.length-1;
     13 
     14 var page = 1;
     15 //下一页
     16 function next() {
     17     
     18     if (pageCount() <= 1) {
     19     }
     20     else {
     21         
     22 
     23             hideTable();
     24             currentRow = pageSize * page + 1;
     25             maxRow = currentRow + pageSize;
     26             if (maxRow > numberRowsInTable) maxRow = numberRowsInTable+1;
     27             for (var i = currentRow; i < maxRow; i++) {
     28                 theTable.rows[i].style.display = '';
     29             }
     30             page++;
     31             pageNum2.value = page;
     32 
     33             if (maxRow == numberRowsInTable) { nextText(); lastText(); }
     34             showPage();
     35             if (page == pageCount()) {
     36                 nextText();
     37                 lastText();
     38             }
     39             preLink();
     40             firstLink();
     41         }
     42     }
     43 
     44 
     45 
     46 //上一页
     47 function pre() {
     48     
     49     if (pageCount() <= 1) {
     50     }
     51     else {
     52 
     53         
     54             hideTable();
     55 
     56             page--;
     57             pageNum2.value = page;
     58 
     59             currentRow = pageSize * page + 1;
     60             maxRow = currentRow - pageSize;
     61             if (currentRow > numberRowsInTable) currentRow = numberRowsInTable;
     62             for (var i = maxRow; i < currentRow; i++) {
     63                 theTable.rows[i].style.display = '';
     64             }
     65             if (maxRow == 0) { preText(); firstText(); }
     66             showPage();
     67             if (page == 1) {
     68                 firstText();
     69                 preText();
     70             }
     71             nextLink();
     72             lastLink();
     73         }
     74     }
     75 
     76 
     77 //第一页
     78 function first() {
     79     
     80     if (pageCount() <= 1) {
     81     }
     82     else {
     83         hideTable();
     84         page = 1;
     85         pageNum2.value = page;
     86         for (var i = 1; i < pageSize+1; i++) {
     87             theTable.rows[i].style.display = '';
     88         }
     89         showPage();
     90 
     91         firstText();
     92         preText();
     93         nextLink();
     94         lastLink();
     95     }
     96 }
     97 
     98 
     99 //最后一页
    100 function last() {
    101    
    102     if (pageCount() <= 1) {
    103     }
    104     else {
    105 
    106         hideTable();
    107         page = pageCount();
    108       
    109         pageNum2.value = page;
    110         currentRow = pageSize * (page - 1)+1;
    111         for (var i = currentRow; i < numberRowsInTable+1; i++) {
    112             theTable.rows[i].style.display = '';
    113         }
    114 
    115         showPage();
    116         lastText();
    117         nextText();
    118         preLink();
    119         firstLink();
    120     }
    121 }
    122 
    123 
    124 function hideTable() {
    125     for (var i = 0; i < numberRowsInTable+1; i++) {
    126         theTable.rows[i].style.display = 'none';
    127     }
    128     theTable.rows[0].style.display = '';
    129 }
    130 
    131 
    132 function showPage() {
    133     pageNum.innerHTML = page;
    134    
    135 }
    136 
    137 function inforCount() {
    138     spanTotalInfor.innerHTML = numberRowsInTable;
    139 }
    140 
    141 
    142 
    143 //总共页数
    144 function pageCount() {
    145     var count = 0;
    146     if (numberRowsInTable % pageSize != 0) count = 1;
    147     return parseInt(numberRowsInTable / pageSize) + count;
    148 }
    149 
    150 
    151 //显示链接
    152 function preLink() { spanPre.innerHTML = "<a href='javascript:pre();'><img src='../Images/Common/back.png'/></a>"; }
    153 function preText() { spanPre.innerHTML = "<img src='../Images/Common/back.png'/>"; }
    154 
    155 
    156 
    157 function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'><img src='../Images/Common/front.png'/></a>"; }
    158 function nextText() { spanNext.innerHTML = "<img src='../Images/Common/front.png'/>"; }
    159 
    160 
    161 function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'><img src='../Images/Common/first.png'/></a>"; }
    162 function firstText() { spanFirst.innerHTML = "<img src='../Images/Common/first.png'/>"; }
    163 
    164 
    165 function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'><img src='../Images/Common/last.png'/></a>"; }
    166 function lastText() { spanLast.innerHTML = "<img src='../Images/Common/last.png'/>"; }
    167 
    168 
    169 //隐藏表格
    170 function hide() {
    171     for (var i = pageSize + 1; i < numberRowsInTable+1 ; i++) {
    172         theTable.rows[i].style.display = 'none';
    173     }
    174     theTable.rows[0].style.display = '';
    175 
    176     inforCount();
    177 
    178     totalPage.innerHTML = pageCount();
    179     showPage();
    180     pageNum2.value = page;
    181 
    182     if (pageCount() > 1) {
    183         nextLink();
    184         lastLink();
    185     }
    186 
    187 }
    188 
    189 function renovate() {
    190     numberRowsInTable = theTable.rows.length - 1; //table值发生变化 更新分页
    191     for (var i = pageSize + 1; i < numberRowsInTable + 1; i++) {
    192         theTable.rows[i].style.display = 'none';
    193     }
    194     for (var j = 0; j <= 5;j++ ){
    195         if(j>numberRowsInTable)
    196             break;
    197         theTable.rows[j].style.display = '';
    198     }
    199     inforCount();
    200 
    201     totalPage.innerHTML = pageCount();
    202     showPage();
    203     pageNum2.value = page;
    204 
    205     if (pageCount() > 1) {
    206         nextLink();
    207         lastLink();
    208     }
    209 }
    210 hide();
    潮平帆远,击水三千
  • 相关阅读:
    背景图
    PKUWC 2019~2020 游记
    前置内容2:复杂度分析
    前置内容1:算法与数据结构
    莫比乌斯反演学习笔记2
    莫比乌斯反演学习笔记1
    CSP-J&S-2019 游记
    最近面试的一些感触
    算法学习-整数反转
    入行九年,入园8年,突然想写一点东西.
  • 原文地址:https://www.cnblogs.com/yfsmooth/p/4422228.html
Copyright © 2011-2022 走看看