asp.net中加载TreeView的模态对话框

最新推荐文章于 2025-09-03 20:18:32 发布

转载最新推荐文章于 2025-09-03 20:18:32 发布 · 861 阅读

文章标签：

#asp.net #function #button #tree #javascript #server

本文介绍如何在ASP.NET中自定义模态对话框以展示TreeView，通过JavaScript和HTML实现遮罩层和对话层，解决直接加载TreeView时的节点点击问题，提升用户体验。

asp.net中加载TreeView的模态对话框 (2008-12-07 20:07:53)

转载

标签：

it

分类： IT技术

由于TreeView的特性，直接用IE的模态对话框加载Treeview时，点击节点会弹出新的窗体，这当让不是我们想要的。更何况这种模态对话框又土又丑很是影响用户的使用体验。上网一搜，发现很多网友都在使用JavaScript加Div的方式自定义模态对话框，于是决定试一试。
实现思路：可以利用层的概念，分别做一个遮罩层，对话层。当打开对话层的时候同时打开遮罩层，使遮罩层介于对话层和应用层之间来“阻隔”用户对其他功能的使用。
至于实现方式我就不用废话了，大家开code吧：
<%@ Page Language="C#" CodeFile="TreeViewNode.aspx.cs" Inherits="TreeViewNode" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language="javascript" type="text/javascript">
var t_DiglogX,t_DiglogY,t_DiglogW,t_DiglogH;

function show()
{
var node = document.getElementByIdx("tree");
if(node != null)
{
ScreenConvert();
node.style.width = "300px"
node.style.height = "300px"
t_DiglogW = "1";
t_DiglogH = "1";
DialogLoc();
node.style.display = "block";
node.style.marginLeft = "200px";
node.style.marginTop = "10px";
}
}

function DialogHide(){
ScreenClean();
var objDialog = document.getElementByIdx("tree");
if (objDialog)
{
objDialog.style.display = "none";
}
}

function DialogLoc(){
var dde = document.documentElement;
var ww,wh,bgX,bgY;
if (windows.innerWidth){
ww = windows.innerWidth;
wh = windows.innerHeight;
bgX = window.pageXOffset;
bgY = window.pageYOffset;
}else{
ww = dde.offsetWidth;
wh = dde.offsetHeight;
bgX = dde.scrollLeft;
bgY = dde.scrollTop;
}
t_DiglogX = (bgX + ((ww - t_DiglogW)/2));
t_DiglogY = (bgY + ((wh - t_DiglogH)/2));
}

function ScreenConvert(){
var objScreen = document.getElementByIdx("ScreenOver");
var oS = objScreen.style;
oS.display = "block";
oS.top = oS.left = oS.margin = oS.padding = "0px";

oS.width = window.screen.availWidth;
oS.height = window.screen.availHeight;
oS.filter = "alpha(opacity=50)";
oS.opacity = 40/100;
oS.MozOpacity = 40/100;
var allselect = document.getElementsByTagName_r("select");
for (var i=0; i<allselect.length; i++)
{
allselect[i].style.visibility = "hidden";
}
}

function ScreenClean(){
var objScreen = document.getElementByIdx("ScreenOver");
if (objScreen)
{
objScreen.style.display = "none";
}
var allselect = document.getElementsByTagName_r("select");
for (var i=0; i<allselect.length; i++)
{
allselect[i].style.visibility = "visible";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="ScreenOver" style="position:absolute;z-index:3;background:#cccccc"></div>
<br />
<div id="tree" style="position:absolute;display:none;background:#FFF;border:solid #000 1px;z-index:6;" >
<asp:TreeView ID="treeViewTest" runat="server" ExpandDepth="0" NodeIndent="30" ShowCheckBoxes="All" ShowLines="True" OnTreeNodeExpanded="treeViewTest_TreeNodeExpanded" OnSelectedNodeChanged="treeViewTest_SelectedNodeChanged">
</asp:TreeView>
<input type="button" onclick="DialogHide();" value="关闭" runat="server" id="Button1" onserverclick="Button1_ServerClick"/>
</div>
<div style="position:absolute;">
<input type="button" onclick="show()" value="tree show"/>
</div>
</form>
</body>
</html>

需要注意的是，每个层的z-index属性一定要静态地设定在div的style中，否则会出现层出现的次序混乱问题。另外，使用z-index属性就一定要指定position属性。