asp.net下用js实现弹出子窗口选定值并返回

时间:2023-03-09 04:56:25
asp.net下用js实现弹出子窗口选定值并返回

对应上一篇博客代码:

父页面:

 <head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=9" >
<title></title>
<script type="text/javascript">
function test() {
//window.showModalDialog("test.aspx?tabname=book", window, 'dialogHeight=400px;dialogWidth=600px;');
window.showModalDialog("B.aspx", window, 'dialogHeight=400px;dialogWidth=600px;');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="跳转到B页面" OnClientClick="test();"/><br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>

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

框架子页面:

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=9" >
<title></title>
<script type="text/javascript">
function test() {
var child;
child = window.document.getElementById("child").contentWindow;
window.dialogArguments.document.getElementById("TextBox1").value = child.document.getElementById("tb_name").value;
window.close();
}
</script>
</head>
<frameset>
<frame id="child" src="CZB.aspx?tabname=<%=set_tabname()%>"></frame>
</frameset>
</html>

gridview页面:

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=9" >
<title></title>
<script type="text/javascript">
function set() {
window.parent.test();
}
</script>
</head>
<body>
<form id="form1" runat="server" >
<div>
<asp:TextBox ID="tb_name" runat="server"></asp:TextBox>
<asp:Button ID="bt_in" runat="server" Text="搜索" onclick="bt_in_Click" />
<asp:Button ID="bt_re" runat="server" Text="重置" />
<asp:Button ID="Button1" runat="server" Text="确认选择" onclick="Button1_Click" />
<input id="Button2" type="button" value="回传" onclick="set();"/> <asp:GridView ID="gvSell" runat="server"
onpageindexchanging="GridView1_PageIndexChanging" PageSize="5" >
<Columns>
<asp:TemplateField HeaderText="数据选择">
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerSettings FirstPageText="首页" LastPageText="末页" NextPageText="下一页" PageButtonCount="5" PreviousPageText="上一页" />
<PagerStyle Font-Names="宋体" Font-Size="15px" />
</asp:GridView>
<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>
<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> </div>
</div> </form>
</body>
</html>

gridview后台页面:

 public partial class CZB : System.Web.UI.Page
{
string str = WebConfigurationManager.ConnectionStrings["TempleConnectionString"].ConnectionString; protected void databind(string sql)
{
using (SqlConnection conn = new SqlConnection(str))
{
conn.Open();
using (SqlCommand cmd = conn.CreateCommand())
{ cmd.CommandText = sql;
SqlDataAdapter ap = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
ap.Fill(ds);
gvSell.DataSource = ds.Tables[];
gvSell.DataBind();
}
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
databind("select * from book");
}
}
protected void Button1_Click(object sender, EventArgs e)
{
string strs="";
for (int i = ; i <= gvSell.Rows.Count - ; i++)
{
CheckBox cbox = (CheckBox)gvSell.Rows[i].FindControl("CheckBox1");
if (cbox.Checked == true)
{
strs = gvSell.Rows[i].Cells[].Text.ToString();
tb_name.Text = strs;
}
}
} protected string getvalue()
{
string str;
for (int i = ; i <= gvSell.Rows.Count - ; i++)
{
CheckBox cbox = (CheckBox)gvSell.Rows[i].FindControl("CheckBox1");
if (cbox.Checked == true)
{
return gvSell.Rows[i].Cells[].Text.ToString();
}
}
return "";
} protected void bt_in_Click(object sender, EventArgs e)
{
string sql = "select * from book where bookName like '%" + tb_name.Text + "%'";
databind(sql);
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
gvSell.PageIndex = e.NewPageIndex;
databind("select * from book");
}
}

js实现方法:

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function getvalue() {
var table = document.getElementById("gvSell");
var s=0;
for(var i=1;i<table.rows.length;i++) {
var input = table.rows[i].cells[0].getElementsByTagName("input")[0].checked;
if (input == true)
{
window.dialogArguments.document.getElementById("TextBox1").value = table.rows[i].cells[3].innerHTML;
s = 1;
window.close();
}
}
if(s!=1)
alert("您未勾选任何一个选项!");
}
//搜索
function search() {
var content = document.getElementById(tb_name).value;
if (content == "") {
alert("您未输入任何内容!");
return;
}
var table = document.getElementById("gvSell");
var txt = document.getElementById("tb_name").value;
var arr = new Array();
var j = 0;var judge = 0;
//获取相关行数
for (var i = 1; i < table.rows.length; i++) {
if (table.rows[i].cells[3].innerHTML == txt || table.rows[i].cells[3].innerHTML.indexOf(txt) > -1)
{
arr[j] = i;
j++;
}
}
if (j == 0) {
alert("未找到有关数据!");
return;
}
//删除无关的行
for (i = i-1; i > 0; i--) {
judge=0;
for (var k = 0; k < j; k++)
if (arr[k] == i)
judge = 1;
if (judge == 0)
document.getElementById("gvSell").deleteRow(i); }
y();
} function delet() {
document.getElementById("tb_name").value = "";
}
</script> </head>
<body>
<form id="form1" runat="server">
<div>
<input id="tb_name" type="text" />
<input id="Button3" type="button" value="搜索" onclick="search();"/>
<input id="Button1" type="button" value="选择" onclick="getvalue();"/>
<input id="Button2" type="button" value="重置" onclick="delet();"/>
<input id="tb_hidden" type="text" style="visibility: hidden" />
<asp:GridView ID="gvSell" runat="server" >
<Columns>
<asp:TemplateField HeaderText="数据选择">
<ItemTemplate>
<input id="Checkbox2" type="checkbox" />
</ItemTemplate>
</asp:TemplateField>
</Columns> </asp:GridView>
<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>
<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>
</div>
</div>
<script type="text/javascript">
var theTable = document.getElementById("gvSell");
var txtValue = document.getElementById("Text1").value;
function y() {
theTable = document.getElementById("gvSell");
txtValue = document.getElementById("Text1").value;
renovate();
}
function x() {
var txtValue2 = document.getElementById("Text1").value;
if (txtValue != txtValue2) {
if (txtValue2 > pageCount()) { }
else if (txtValue2 <= 0) { }
else if (txtValue2 == 1) {
first(); }
else if (txtValue2 == pageCount()) {
last(); }
else {
hideTable();
page = txtValue2;
pageNum2.value = page; currentRow = pageSize * page;
maxRow = currentRow - pageSize;
if (currentRow > numberRowsInTable) currentRow = numberRowsInTable;
for (var i = maxRow; i < currentRow; i++) {
theTable.rows[i].style.display = '';
}
if (maxRow == 0) { preText(); firstText(); }
showPage();
nextLink();
lastLink();
preLink();
firstLink();
} txtValue = txtValue2;
}
}
function renovate() {
numberRowsInTable = theTable.rows.length - 1; //table值发生变化 更新分页
for (var i = pageSize + 1; i < numberRowsInTable + 1; i++) {
theTable.rows[i].style.display = 'none';
}
for (var j = 0; j <= 5; j++) {
if (j > numberRowsInTable)
break;
theTable.rows[j].style.display = '';
}
inforCount(); totalPage.innerHTML = pageCount();
showPage();
pageNum2.value = page; if (pageCount() > 1) {
nextLink();
lastLink();
}
}
</script>
<script type="text/javascript" src="Pagging.js"></script>
</form>
</body>
</html>

相关js代码:

 var totalPage = document.getElementById("spanTotalPage");
var pageNum = document.getElementById("spanPageNum");
var totalInfor = document.getElementById("spanTotalInfor");
var pageNum2 = document.getElementById("Text1"); var spanPre = document.getElementById("spanPre");
var spanNext = document.getElementById("spanNext");
var spanFirst = document.getElementById("spanFirst");
var spanLast = document.getElementById("spanLast");
var pageSize = 5; var numberRowsInTable = theTable.rows.length-1; var page = 1;
//下一页
function next() { if (pageCount() <= 1) {
}
else { hideTable();
currentRow = pageSize * page + 1;
maxRow = currentRow + pageSize;
if (maxRow > numberRowsInTable) maxRow = numberRowsInTable+1;
for (var i = currentRow; i < maxRow; i++) {
theTable.rows[i].style.display = '';
}
page++;
pageNum2.value = page; if (maxRow == numberRowsInTable) { nextText(); lastText(); }
showPage();
if (page == pageCount()) {
nextText();
lastText();
}
preLink();
firstLink();
}
} //上一页
function pre() { if (pageCount() <= 1) {
}
else { hideTable(); page--;
pageNum2.value = page; currentRow = pageSize * page + 1;
maxRow = currentRow - pageSize;
if (currentRow > numberRowsInTable) currentRow = numberRowsInTable;
for (var i = maxRow; i < currentRow; i++) {
theTable.rows[i].style.display = '';
}
if (maxRow == 0) { preText(); firstText(); }
showPage();
if (page == 1) {
firstText();
preText();
}
nextLink();
lastLink();
}
} //第一页
function first() { if (pageCount() <= 1) {
}
else {
hideTable();
page = 1;
pageNum2.value = page;
for (var i = 1; i < pageSize+1; i++) {
theTable.rows[i].style.display = '';
}
showPage(); firstText();
preText();
nextLink();
lastLink();
}
} //最后一页
function last() { if (pageCount() <= 1) {
}
else { hideTable();
page = pageCount(); pageNum2.value = page;
currentRow = pageSize * (page - 1)+1;
for (var i = currentRow; i < numberRowsInTable+1; i++) {
theTable.rows[i].style.display = '';
} showPage();
lastText();
nextText();
preLink();
firstLink();
}
} function hideTable() {
for (var i = 0; i < numberRowsInTable+1; i++) {
theTable.rows[i].style.display = 'none';
}
theTable.rows[0].style.display = '';
} function showPage() {
pageNum.innerHTML = page; } function inforCount() {
spanTotalInfor.innerHTML = numberRowsInTable;
} //总共页数
function pageCount() {
var count = 0;
if (numberRowsInTable % pageSize != 0) count = 1;
return parseInt(numberRowsInTable / pageSize) + count;
} //显示链接
function preLink() { spanPre.innerHTML = "<a href='javascript:pre();'><img src='../Images/Common/back.png'/></a>"; }
function preText() { spanPre.innerHTML = "<img src='../Images/Common/back.png'/>"; } function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'><img src='../Images/Common/front.png'/></a>"; }
function nextText() { spanNext.innerHTML = "<img src='../Images/Common/front.png'/>"; } function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'><img src='../Images/Common/first.png'/></a>"; }
function firstText() { spanFirst.innerHTML = "<img src='../Images/Common/first.png'/>"; } function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'><img src='../Images/Common/last.png'/></a>"; }
function lastText() { spanLast.innerHTML = "<img src='../Images/Common/last.png'/>"; } //隐藏表格
function hide() {
for (var i = pageSize + 1; i < numberRowsInTable+1 ; i++) {
theTable.rows[i].style.display = 'none';
}
theTable.rows[0].style.display = ''; inforCount(); totalPage.innerHTML = pageCount();
showPage();
pageNum2.value = page; if (pageCount() > 1) {
nextLink();
lastLink();
} } function renovate() {
numberRowsInTable = theTable.rows.length - 1; //table值发生变化 更新分页
for (var i = pageSize + 1; i < numberRowsInTable + 1; i++) {
theTable.rows[i].style.display = 'none';
}
for (var j = 0; j <= 5;j++ ){
if(j>numberRowsInTable)
break;
theTable.rows[j].style.display = '';
}
inforCount(); totalPage.innerHTML = pageCount();
showPage();
pageNum2.value = page; if (pageCount() > 1) {
nextLink();
lastLink();
}
}
hide();