window.showModalDialog模态对话框值回传 TreeView无刷新

要求： 点击父页面的text，弹出子页面，将在子页面TreeView选择的值传回，其中子页面树选中叶子节点应有颜色变化（显示选中），且页面不刷新。

实现： 使用window.showModalDialog弹出子页面，设置页面返回值window.returnValue。

---------------------------------------------------------------------------------------------------------------------------------------------

父页面中只有一个text，部分代码如下：

<script language="javascript" src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script><script type="text/javascript">function popbox() {var contactName = window.showModalDialog("ChildPage.aspx");if (contactName != undefined) {            jQuery("#txtContactName").val(contactName);        }    }</script></head><body><form id="form1" runat="server"><div><input type="text" id="txtContactName" name="txtContactName" readonly="readonly" onclick="javascript:popbox();" /></div></form></body>

说明：在父页面上加个readonly的text，onclick事件中使用window.showModalDialog弹出子页面，使用contactName保存子页面返回值。

------------------------------------------------------------------------------------------------------------------------------------------

子页面上有一个显示当前选中联系人的asp:Label，两个button(确定、取消)和一个显示联系人的树（分组），如下图：

页面对应代码如下：

    <form id="form1" runat="server"><div><table><tr><td style="width:300px"><em>选中的联系人：</em><asp:Label ID="lblUser" runat="server"></asp:Label></td><td><input type="button" id="btnSave" name="btnSave" value="确定" onclick="javascript:submitname();" /><input type="button" id="btnCancel" name="btnCancel" value="取消" onclick="javascript:closewindow();" /></td></tr></table><asp:TreeView ID="TreeViewContactList" runat="server" ImageSet="Contacts"             NodeIndent="10"><HoverNodeStyle Font-Underline="False" /><NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"                 HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" /><ParentNodeStyle Font-Bold="True" ForeColor="#5555DD" /><SelectedNodeStyle Font-Underline="True" HorizontalPadding="0px"                 VerticalPadding="0px" /></asp:TreeView></div></form>

该页面中用到的js如下：

<script language="javascript" src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script><script type="text/javascript">function closewindow() {this.window.opener = null;        window.close();    }

function submitname() {if (jQuery("#" + '<%=lblUser.ClientID %>').text() == "") {            alert("请选择联系人");return false;        }else {            window.returnValue = jQuery("#" + '<%=lblUser.ClientID %>').text();            closewindow();        }    }

var previous_id = "";function GetTreeNode() {var evn = event;if (evn.srcElement.innerText == undefined || evn.srcElement.innerText.length <= 0 || evn.srcElement.nameProp == undefined)return true;

var id = evn.srcElement.id;var a = document.getElementById(id);

var href = a.href;var index = href.indexOf("#");var englishName = href.substr(index + 1);if (englishName != "") {            jQuery("#" + '<%=lblUser.ClientID %>').text(a.innerHTML + " (" + englishName + ")");        }else {return false;        }if (previous_id != "") {if (previous_id == id) {            }else {var backa = document.getElementById(previous_id);if (backa != undefined) {                    backa.style.backgroundColor = ""; //恢复默认                }var a = document.getElementById(id);                a.style.backgroundColor = "#7FFFD4";            }        }else {            a.style.backgroundColor = "#7FFFD4";        }        previous_id = id;return false;    }</script>

说明：

　　closewindow ->关闭当前页面；

　　submitname ->如果选择了联系人，则设置该页面返回值，并关闭当前页面；

　　getTreeNode ->获得当前click的node,设置选中节点颜色为选中颜色，如果之前选中了其他节点，则恢复之前选中节点的颜色为未选中的颜色；同时设置lblUser显示选中的联系人。

--------------------------------------- 由于在firefox和chrome中无法选择联系人，所以修改如下 -----------------------------------------------

修改上述js如下：

<script language="javascript" src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script><script type="text/javascript">function closewindow() {this.window.opener = null;        window.close();    }

function submitname() {if (jQuery("#" + '<%=lblUser.ClientID %>').text() == "") {            alert("请选择联系人");return false;        }else {            window.returnValue = jQuery("#" + '<%=lblUser.ClientID %>').text();            closewindow();        }    }

function SetSelectedUser(chinesename, englishname) {        jQuery("#" + '<%=lblUser.ClientID %>').text(chinesename + " (" + englishname + ")");    }</script>

---------------------------------------------------------------------------------------------------------------------------------------------------

子页面在页面加载时，需要加载联系人树，后台代码如下：

    public partial class ChildPage : System.Web.UI.Page    {protected void Page_Load(object sender, EventArgs e)        {if (!IsPostBack)            {                TreeViewContactList.Attributes.Add("onclick", "javascript:return getTreeNode();");

string[] groups = {"朋友", "同学" };

                List<Person> friends = new List<Person>();                friends.Add(new Person("朋友A","Peter"));                friends.Add(new Person("朋友B", "John"));                friends.Add(new Person("朋友C", "Clare"));

                List<Person> classmates = new List<Person>();                classmates.Add(new Person("同学1", "Lili"));                classmates.Add(new Person("同学2", "Bob"));                classmates.Add(new Person("同学3", "Steve"));

                Dictionary<string, List<Person>> contacts = new Dictionary<string, List<Person>>();                contacts.Add(groups[0], friends);                contacts.Add(groups[1], classmates);

foreach (string group in groups)                {                    TreeNode tn = new TreeNode();                    tn.Text = group;                    tn.NavigateUrl = "#";

foreach (Person person in contacts[group])                    {                        TreeNode ctn = new TreeNode();                        ctn.Text = person.Name;                        ctn.NavigateUrl = "#" + person.EnglishName;                        tn.ChildNodes.Add(ctn);                    }

                    TreeViewContactList.Nodes.Add(tn);                }

                TreeViewContactList.CollapseAll();            }        }    }

public class Person    {public string Name        {get;set;        }

public string EnglishName        {get;set;        }

public Person(string name, string ename)        {            Name = name;            EnglishName = ename;        }           }

说明：

　　需要设置TreeView的onclick属性 TreeViewContactList.Attributes.Add("onclick", "javascript:return getTreeNode();"); 这样点击treeview就不会刷新了，而且可在js中设置中选颜色变化及当前选中联系人；

　　node.Text为页面上节点的显示内容，对应节点的value可以存在NavigateUrl中，但是要加"#"，否则点击会打开新页面。

--------------------------------------- 由于在firefox和chrome中无法选择联系人，所以修改如下 ------------------------------------------------

修改上述后台代码如下：

    public partial class ChildPage : System.Web.UI.Page    {protected void Page_Load(object sender, EventArgs e)        {if (!IsPostBack)            {string[] groups = {"朋友", "同学" };

                List<Person> friends = new List<Person>();                friends.Add(new Person("朋友A","Peter"));                friends.Add(new Person("朋友B", "John"));                friends.Add(new Person("朋友C", "Clare"));

                List<Person> classmates = new List<Person>();                classmates.Add(new Person("同学1", "Lili"));                classmates.Add(new Person("同学2", "Bob"));                classmates.Add(new Person("同学3", "Steve"));

                Dictionary<string, List<Person>> contacts = new Dictionary<string, List<Person>>();                contacts.Add(groups[0], friends);                contacts.Add(groups[1], classmates);

foreach (string group in groups)                {                    TreeNode tn = new TreeNode();                    tn.Text = group;

foreach (Person person in contacts[group])                    {                        TreeNode ctn = new TreeNode();                        ctn.Text = string.Format("<a οnclick=\"javascript:return SetSelectedUser('{0}','{1}');\">{0}</a>", person.Name, person.EnglishName);                        tn.ChildNodes.Add(ctn);                    }

                    TreeViewContactList.Nodes.Add(tn);                }

                TreeViewContactList.CollapseAll();            }        }    }

public class Person    {public string Name        {get;set;        }

public string EnglishName        {get;set;        }

public Person(string name, string ename)        {            Name = name;            EnglishName = ename;        }           }

-------------------------------------------------------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------------------------------------------

效果：

--------------------------------------------------------------------------- 修改----------------------------------------------------------------

　　之前子页面在chrome和firefox中无法选择联系人，已做修改。具体修改如下：

　　js中定义function SetSelectedUser 设置当前选中联系人；

　　在绑定每个叶子TreeNode时，绑定js:

　　　　ctn.Text = string.Format("<a οnclick=\"javascript:return SetSelectedUser('{0}','{1}');\">{0}</a>", person.Name, person.EnglishName);

　　删除js中 function GetNode 和后台为treeview 的 onclick事件 TreeViewContactList.Attributes.Add("onclick","javascirpt:return getTreeNode();");。

转载于:https://www.cnblogs.com/Peter-Zhang/archive/2011/09/25/2190578.html

window.showModalDialog模态对话框值回传 TreeView无刷新相关推荐

showModalDialog模态对话框的使用及一般问题的解决
showModalDialog模态对话框的使用及一般问题的解决 1,使用 showModalDialog(sURL [, oArguments] [,sFeatures]) 参数 : sURL : ...
showModalDialog模态对话框的使用以及浏览器兼容
ModalDialog 是什么? showModalDialog 是js window对象的一个方法, 和window.open一样都是打开一个新的页面. 区别是: showModalDialog打开 ...
showModalDialog模态对话框的使用详解以及浏览器兼容
showModalDialog是jswindow对象的一个方法,和window.open一样都是打开一个新的页面.区别是:showModalDialog打开子窗口后,父窗口就不能获取焦点了(也就是无法 ...
Java中modal dialog,showModalDialog模态对话框的使用详解以及浏览器兼容
1.ModalDialog是什么?showModalDialog是jswindow对象的一个方法,和window.open一样都是打开一个新的页面. 区别是:showModalDialog打开子窗口后 ...
treeview 展开节点php,javascript实现TreeView 无刷新展开的实例代码_javascript技巧
{ var tempObj = objchild[i]; if(tempObj.tagName=="INPUT" && tempObj.type == " ...
前台技术--window.showModalDialog带来的浏览器兼容问题
双击域的实现:http://blog.csdn.net/gaopeng0071/article/details/21179619, 继此篇博文,讲述的双击域实现,在后续发现使用window.showM ...
java ajax无刷分页_简单实现Ajax无刷新分页效果
Ajax无刷新分页效果,如下代码实现 Ajax无刷新分页效果 function showpage(url) { var xhr = new XMLHttpRequest(); xhr.onreadys ...
关于window.showModalDialog()返回值的学习
先介绍一个showModaldialog的基本用法使用方法: vReturnValue = window.showModalDialog(URL [, Arguments] [,Features]) ...
window.showModalDialog弹出模态窗口
[转http://www.cnblogs.com/zhouzhaokun/archive/2011/11/14/2248523.html] 在我们平时的B/S web开发当中,可能很多时候我们需要有这 ...

window.showModalDialog模态对话框值回传 TreeView无刷新

window.showModalDialog模态对话框值回传 TreeView无刷新相关推荐

最新文章

热门文章

window.showModalDialog模态对话框 值回传 TreeView无刷新

window.showModalDialog模态对话框 值回传 TreeView无刷新相关推荐

最新文章

热门文章

window.showModalDialog模态对话框值回传 TreeView无刷新

window.showModalDialog模态对话框值回传 TreeView无刷新相关推荐