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

要求： 点击父页面的text，弹出子页面，将在子页面TreeView选择的值传回，其中子页面树选中叶子节点应有颜色变化（显示选中），且页面不刷新。
实现： 使用window.showModalDialog弹出子页面，设置页面返回值window.returnValue。
父页面中只有一个text， 部分代码如下：

="javascript:popbox();" />

说明： 在父页面上加个readonly的text，onclick事件中使用window.showModalDialog弹出子页面，使用contactName保存子页面返回值。
---------------------------------------------------------------------------------------------------------------------------------------------------------
子页面上有一个显示当前选中联系人的asp:Label， 两个button(确定、取消)和一个显示联系人的树（分组），如下图：

页面对应代码如下：

选中的联系人：

="javascript:submitname();" /> ="javascript:closewindow();" />

该页面中用到的js如下：

说明：
closewindow ->关闭当前页面；
submitname ->如果选择了联系人，则设置该页面返回值，并关闭当前页面；
getTreeNode ->获得当前click的node,设置选中节点颜色为选中颜色，如果之前选中了其他节点，则恢复之前选中节点的颜色为未选中的颜色；同时设置lblUser显示选中的联系人。
子页面在页面加载时，需要加载联系人树，后台代码如下：
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 friends = new List(); friends.Add(new Person("朋友A","Peter")); friends.Add(new Person("朋友B", "John")); friends.Add(new Person("朋友C", "Clare")); List classmates = new List(); classmates.Add(new Person("同学1", "Lili")); classmates.Add(new Person("同学2", "Bob")); classmates.Add(new Person("同学3", "Steve")); Dictionary contacts = new Dictionary(); 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中，但是要加"#"，否则点击会打开新页面。 ---------------------------------------------------------------------------------------------------------------------------------------------------------
效果：

Tags: 

延伸阅读