jquery
http://www.okajax.com/demo/dialog/
http://hi.baidu.com/lidabo712/blog/item/354e86a51243e289d143589d.html
window.showModalDialog模态对话框 & 值回传 & TreeView无刷新
2011-10-07 22:52
要求： 点击父页面的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("请选择联系人");
returnfalse;
}
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)
returntrue;
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 {
returnfalse;
}
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;
returnfalse;
}
</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("请选择联系人");
returnfalse;
}
else {
window.returnValue = jQuery("#" + '<%=lblUser.ClientID %>').text();
closewindow();
}
}
function SetSelectedUser(chinesename, englishname) {
jQuery("#" + '<%=lblUser.ClientID %>').text(chinesename + " (" + englishname + ")");
}
</script>
---------------------------------------------------------------------------------------------------------------------------------------------------
子页面在页面加载时，需要加载联系人树，后台代码如下：
publicpartialclass ChildPage : System.Web.UI.Page
{
protectedvoid 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();
}
}
}
publicclass Person
{
publicstring Name
{
get;
set;
}
publicstring 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中无法选择联系人，所以修改如下 ------------------------------------------------
修改上述后台代码如下：
publicpartialclass ChildPage : System.Web.UI.Page
{
protectedvoid 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 onclick=\"javascript:return SetSelectedUser('{0}','{1}');\">{0}</a>", person.Name, person.EnglishName);
tn.ChildNodes.Add(ctn);
}
TreeViewContactList.Nodes.Add(tn);
}
TreeViewContactList.CollapseAll();
}
}
}
publicclass Person
{
publicstring Name
{
get;
set;
}
publicstring 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 onclick=\"javascript:return SetSelectedUser('{0}','{1}');\">{0}</a>", person.Name, person.EnglishName);
删除js中 function GetNode 和后台为treeview 的 onclick事件 TreeViewContactList.Attributes.Add("onclick","javascirpt:return getTreeNode();");。