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; width: 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-width: 0; padding: 5px; width: 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; width: 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-width: 0; padding: 5px; width: 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();

 

posted @ 2015-04-13 15:04  yfsmooth  阅读(559)  评论(0)  编辑  收藏  举报