//样式实现目录树--点击文件可以解析出全路径、可以展开目录。

最新推荐文章于 2022-01-10 19:58:21 发布

zyhui65

最新推荐文章于 2022-01-10 19:58:21 发布

阅读量325

点赞数

本文链接：https://blog.csdn.net/zyhui65/article/details/41260419

版权

//样式实现目录树--点击文件可以解析出全路径、可以展开目录。
<%@ 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>    
    <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>

zyhui65

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
//样式实现目录树--点击文件可以解析出全路径、可以展开目录。

//样式实现目录树--点击文件可以解析出全路径、可以展开目录。http://www.w3.org/1999/xhtml"> AjaxHelloWorld //双机目录事件，将展开/收拢目录 function clickDir(thiss) { var DirName = StringDe
复制链接

扫一扫