PHP+jQuery+HTML目录树

最新推荐文章于 2022-04-18 22:46:19 发布

小_青_年

最新推荐文章于 2022-04-18 22:46:19 发布

阅读量227

点赞数

分类专栏： PHP 文章标签： PHP目录树目录树 php+html+jquery目录树

本文链接：https://blog.csdn.net/Rong_Study/article/details/102966734

版权

PHP 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

PHP+jQuery+HTML目录树可跳转(仅做参考)

展示结果
warngin
在请求地址的参数 path 中会携带根目录，在生产环境中需谨慎使用

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container span {
            display: block;
        }

        .container .dir {
            color: blue;
            cursor: pointer;
        }

        .container .file:hover{
            cursor: default;
            color: red;
        }

        li {
            list-style: none;
        }

        ul {
            padding: 0;
            margin: 0;
        }

        ul, li {
            width: fit-content;
            width: -moz-fit-content;
        }

    </style>
</head>
<body>
<div class="container">
    <ul></ul>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(function () {
        let path = "<?php echo str_replace('\\', '/', dirname(__FILE__));?>";
        $.post('./api/dir_tree.php', {path: path}, function (ret) {
            let html = '';
            if (ret.code == 1) {
                let key = 0;
                $.each(ret.data, function (dk, dv) {

                    let classer = dv.type;
                    if (dv.type == 'dir') {
                        key += 1;
                        html += "<ul level=1 key=" + key + " parent_path='' name='" + dv.file_name + "' type='" + dv.type + "' class='" + classer + "' οnclick='clicker(this)'>┝┅ " + dv.file_name + "</ul>";
                    } else {
                        html += "<li level=1 parent_path='' name='" + dv.file_name + "' type='" + dv.type + "' class='" + classer + "' οnclick='clicker(this)'>┝┅ " + dv.file_name + "</li>";
                    }
                });
            }
            $('.container').html(html);
        }, 'json');
    });

    function clicker(t) {
        if ($(t).attr('type') == 'dir') {
            let p_key = $(t).attr('key');
            let append = (p_key + '_append');
            if ($(t).hasClass('is_open')) { // 关闭点击的目录
                $("." + append).remove();
                $(t).removeClass('is_open');
                return false;
            } else {
                $(t).addClass('is_open');
            }
            let path = "<?php echo str_replace('\\', '/', dirname(__FILE__));?>";
            let cur_path = $(t).attr('name');
            path = path + $(t).attr('parent_path') + '/' + cur_path;
            let level = Number($(t).attr('level')) + 1;
            let make_table = '';
            for (i = 1; i <= level; i++) {
                make_table += '┝┅ '; // 制表符
            }

            $.post('./api/dir_tree.php', {path: path}, function (ret) {
                let html = '';
                if (ret.code == 1) {
                    let parent_path = $(t).attr('parent_path') + '/' + cur_path;
                    let key = 0;
                    $.each(ret.data, function (dk, dv) {
                        let classer = dv.type;
                        if (dv.type == 'dir') {
                            key = (p_key + '_' + (key + 1));
                            html += "<ul key=" + key + " level=" + level + " parent_path='" + parent_path + "' name='" + dv.file_name + "' type='" + dv.type + "' class='" + classer + ' ' + append + "' οnclick='clicker(this)'>" + make_table + dv.file_name + "</ul>";
                        } else {
                            html += "<li level=" + level + " parent_path='" + parent_path + "' name='" + dv.file_name + "' type='" + dv.type + "' class='" + classer + ' ' + append + "' οnclick='clicker(this)'>" + make_table + dv.file_name + "</li>";
                        }
                    });
                }
                $(t).after(html);
            }, 'json')
        } else {
            let path = '.' + $(t).attr('parent_path') + '/' + $(t).attr('name');
            top.location.href = path; // 当前标签页打开
            // window.open(path, '_blank'); // 新标签页打开
        }
    }
</script>
</html>

dir_tree.php

<?php

$path = $_POST['path'];
define('DS', '/'); # 文件分隔符
define('FILTER', array('.idea', '.svn')); # 过滤

if (!is_dir($path)) {
    exit(json_encode(array('code' => -1, 'data' => array(), 'msg' => '不是目录')));
}

$data = array();
if ($handler = opendir($path)) {
    while (($file = readdir($handler)) !== false) {
        if ($file == '.' || $file == '..' || in_array($file, FILTER, true)) {
            continue;
        }
        $data[] = array(
            'file_name' => $file,
            'type' => is_dir($path . DS . $file) ? 'dir' : 'file'
        );
    }
}
closedir($handler);

exit(json_encode(array('code' => 1, 'data' => $data, 'msg' => '获取成功')));