//样式 实现目录树--点击文件可以解析出全路径、可以展开目录。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>AjaxHelloWorld</title>
<script src="jquery-1.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
//双机目录事件,将展开/收拢目录
function clickDir(thiss)
{ var DirName = StringDel2Char(thiss.innerText);
if(thiss.nextSibling.nextSibling.style.display=="none")
{
thiss.innerText = "= " + DirName;
thiss.nextSibling.nextSibling.style.display="block";
}else
{
thiss.innerText = "+ " + DirName;
thiss.nextSibling.nextSibling.style.display="none";
}
}
//返回去掉前2个字符的字符串
function StringDel2Char(str)
{
return str.substr(2,str.length);
}
//【事件】双机文件名
function clickFileName(thiss)
{
var fn = "\\" + thiss.innerText; //得到文件名
//得到文件全路径
var FilePathAll = getParentDirPath(thiss.parentNode.previousSibling.previousSibling) + fn;
alert(FilePathAll);
}
//获取父目录的路径
function getParentDirPath(node)
{
var DirName = node.innerText;
if (DirName == "" || DirName == "undefine") {
return '';
}
DirName = StringDel2Char(DirName); //所有目录前有2个字符是多余的
var PathName= getParentDirPath(node.parentNode.previousSibling.previousSibling) + "\\" + DirName;
//父节点的哥的哥节点。 因为每行都有一个</br>
//node.parentNode.previousSibling.previousSibling
return PathName;
}
</script>
<style type="text/css">
/* 目录的缩进定义 */
.ViewDir div
{
left:30px;
position:relative;
}
</style>
</head>
<body>
<!--示例开始-->
<div></div> <!--此2个div是必要的-->
<div></div>
<div class="ViewDir">
<a href="#" οnclick="clickDir(this)">+ 目录1</a></br>
<div class="ViewDir">
<a href="#" οnclick="clickFileName(this)">文件1</a></br>
<a href="#" οnclick="clickFileName(this)">文件2</a></br>
<a href="#" οnclick="clickDir(this)">+ 目录2</a></br>
<div class="ViewDir">
<a href="#" οnclick="clickFileName(this)">文件1</a></br>
<a href="#" οnclick="clickFileName(this)">文件2</a></br>
</div>
</div>
<!-- 目录由目录名、目录内容组成 -->
<a href="#" οnclick="clickDir(this)" style="">= 目录3</a></br>
<div class="ViewDir">
<a href="#">文件1</a></br>
<a href="#">文件2</a></br>
</div>
</div>
<!--示例结束-->
</body>
</html>