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

最新推荐文章于 2024-11-14 10:56:19 发布

dengwen9264

最新推荐文章于 2024-11-14 10:56:19 发布

阅读量176

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/Peter-Zhang/archive/2011/09/25/2190578.html

版权

要求： 点击父页面的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;
        }       
    }

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

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

效果：