简单的文件树

头像
anchovy
    阅读 13 分钟

    要实现的效果
    演示

    都是在同级目录下的文件，需要服务器环境

    布局

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 14px;
        font-family: "Microsoft YaHei","Droidsansfallback","HelveticaNeue","黑体","monospace", "sans-serif", "serif";
    }
    .zh-data-box {
        height: 600px;
        padding: 10px;
        overflow: hidden;
    }
    .zh-data-box .zh-col {
        float: left;
        width: 25%;
        height: 100%;
    }
    .zh-data-box .zh-col .zh-inner {
        height: 100%;
        margin: 10px;
        border: 1px solid #ddd;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        overflow: auto;
    }
    .zh-data-box .zh-col li {
        margin: 10px 0 0 10px;
        color: #666;
    }
    .zh-data-box .zh-col .zh-node {
        height: 20px;
        cursor: pointer;
    }
    .zh-data-box .zh-col .zh-node .zh-icon-folder,
    .zh-data-box .zh-col .zh-node .zh-icon-folder-closed,
    .zh-data-box .zh-col .zh-node .zh-icon-file {
        display: inline-block;
        width: 16px;
        height: 14px;
    }
    .zh-data-box .zh-col .zh-node .zh-icon-folder {
        background: url(images/icon-folder.png) no-repeat;
    }
    .zh-data-box .zh-col .zh-node .zh-icon-folder-closed {
        background: url(images/icon-folder-closed.png) no-repeat;
    }
    .zh-data-box .zh-col .zh-node .zh-icon-file {
        width: 15px;
        background: url(images/icon-file.png) no-repeat;
    }
    .zh-data-box .zh-col .zh-node .zh-close {
        display: block;
        float: right;
        height: 100%;
        padding: 0 4px;
        margin-right: 5px;
        font-size: 16px;
        line-height: 18px;
        cursor: pointer;
    }
    .zh-data-box .zh-col .zh-node .zh-text {
        margin-left: 3px;
        cursor: pointer;
    }
    .zh-data-box .zh-col .zh-node:hover .zh-close {
        display: block;
    }
    .zh-data-box .zh-col .zh-node .zh-close:hover {
        color: #f00;
    }
    .zh-data-box .zh-col .zh-inner>ul>li>ul>li ul{
        display: none;
    }
    .zh-data-box .zh-col .zh-inner .zh-selected {
        background: #AADDFF;
    }
    </style>
    <div class="zh-data-box">
        <div class="zh-col">
            <div class="zh-inner">
                <!-- <ul>
                    <li>
                        <div class="zh-node">
                            <span class="zh-icon-folder"></span>
                            <span class="zh-text">节点1</span>
                            <span class="zh-close">x</span>
                        </div>
                        <ul>
                            <li>
                                <div class="zh-node">
                                    <span class="zh-icon-file"></span>
                                    <span class="zh-text">节点1</span>
                                    <span class="zh-close">x</span>
                                </div>
                            </li>
                            <li>
                                <div class="zh-node">
                                    <span class="zh-icon-folder"></span>
                                    <span class="zh-text">节点1</span>
                                    <span class="zh-close">x</span>
                                </div>
                                <ul>
                                    <li>
                                        <div class="zh-node">
                                            <span class="zh-icon-file"></span>
                                            <span class="zh-text">节点1</span>
                                            <span class="zh-close">x</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="zh-node">
                                            <span class="zh-icon-file"></span>
                                            <span class="zh-text">节点1</span>
                                            <span class="zh-close">x</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="zh-node">
                                            <span class="zh-icon-file"></span>
                                            <span class="zh-text">节点1</span>
                                            <span class="zh-close">x</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="zh-node">
                                            <span class="zh-icon-file"></span>
                                            <span class="zh-text">节点1</span>
                                            <span class="zh-close">x</span>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <div class="zh-node">
                                    <span class="zh-icon-folder"></span>
                                    <span class="zh-text">节点1</span>
                                    <span class="zh-close">x</span>
                                </div>
                            </li>
                            <li>
                                <div class="zh-node">
                                    <span class="zh-icon-folder"></span>
                                    <span class="zh-text">节点1</span>
                                    <span class="zh-close">x</span>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="zh-node">
                            <span class="zh-icon-folder"></span>
                            <span class="zh-text">节点1</span>
                            <span class="zh-close">x</span>
                        </div>
                    </li>
                    <li>
                        <div class="zh-node">
                            <span class="zh-icon-file"></span>
                            <span class="zh-text">节点1</span>
                            <span class="zh-close">x</span>
                        </div>
                    </li>
                </ul> -->
            </div>
        </div>
        <div class="zh-col">
            <div class="zh-inner">
                
            </div>
        </div>
        <div class="zh-col">
            <div class="zh-inner">
                
            </div>
        </div>
        <div class="zh-col">
            <div class="zh-inner">
                
            </div>
        </div>
    </div>

    <!-- 这里追加下面的JS -->
</body>
</html>

    JS脚本

    <script>
    // 递归生成节点
    function recursiveBuildNode(data) {
        if(data.length > 0) {
            var li = '';
            $.each(data, function(k, v) {
                li += '<li><div class="zh-node">';
                if(v.sub_file.length > 0) {
                    li += '<span class="zh-icon-folder-closed"></span>';
                } else {
                    li += '<span class="zh-icon-file"></span>';
                }
                li += '<span class="zh-text">'+v.file+'</span><span class="zh-close">x</span></div>';
                if(v.sub_file.length > 0) {
                    li += '<ul>';
                    li += recursiveBuildNode(v.sub_file);
                    li += '</ul>';
                }
                li += '</li>';
            });
            return li;
        }
    }

    // 请求数据
    $.ajax({
        url: 'data.php',
        type: 'get',
        success: function(res) {
            var index = 0;
            $.each(res, function(key, val) {
                var ul = '<ul>\
                            <li>\
                                <div class="zh-node"><span class="zh-icon-folder"></span><span class="zh-text">'+key+'</span></div>\
                                <ul>'+recursiveBuildNode(val)+'</ul>\
                            </li>\
                        </ul>';
                $('.zh-data-box .zh-col').eq(index).children('.zh-inner').html(ul);
                index++;
            });
        }
    });

    // 展开收起
    $('.zh-data-box').on('click', '.zh-node', function() {
        if($(this).siblings('ul').size() > 0) { // 显示/隐藏下拉
            if($(this).children('span:first-child').hasClass('zh-icon-folder-closed')) {
                $(this).children('span:first-child').removeClass('zh-icon-folder-closed').addClass('zh-icon-folder');
                $(this).siblings('ul').show();
            } else {
                $(this).children('span:first-child').removeClass('zh-icon-folder').addClass('zh-icon-folder-closed');
                $(this).siblings('ul').hide();
            }
        } else {  // 同级文件选中
            if($(this).parents('.zh-inner').find('.zh-selected').size() == 0) {
                $(this).parent().addClass('zh-selected');
            } else {
                if($(this).parent().siblings('.zh-selected').size() == 0) {
                    $(this).parents('.zh-inner').find('.zh-selected').removeClass('zh-selected');
                    $(this).parent().addClass('zh-selected');
                } else {
                    if($(this).parent().hasClass('zh-selected')) {
                        $(this).parent().removeClass('zh-selected');
                    } else {
                        $(this).parent().addClass('zh-selected');
                    }
                }
            }
        }
    });

    // 删除
    $('.zh-data-box').on('click', '.zh-close', function(e) {
        e.stopPropagation();
        $(this).parent().parent().remove();
    });
    </script>

    PHP数据：

    <?php
header('Content-Type: application/json');
$data = array (
  'pc' => 
  array (
    0 => 
    array (
      'signal' => '-',
      'path' => '/var/www/html/goms-kmg-v4/application/pc/logs/index.html',
      'file' => 'index.html',
      'sub_file' => 
      array (
      ),
    ),
    1 => 
    array (
      'signal' => '-',
      'path' => '/var/www/html/goms-kmg-v4/application/pc/logs/log-2016-11-15.log',
      'file' => 'log-2016-11-15.log',
      'sub_file' => 
      array (
      ),
    ),
    2 => 
    array (
      'signal' => '-',
      'path' => '/var/www/html/goms-kmg-v4/application/pc/logs/log-2016-11-07.log',
      'file' => 'log-2016-11-07.log',
      'sub_file' => 
      array (
      ),
    ),
    3 => 
    array (
      'signal' => '-',
      'path' => '/var/www/html/goms-kmg-v4/application/pc/logs/log-2016-11-11.log',
      'file' => 'log-2016-11-11.log',
      'sub_file' => 
      array (
      ),
    ),
    4 => 
    array (
      'signal' => '-',
      'path' => '/var/www/html/goms-kmg-v4/application/pc/logs/log-2016-11-14.log',
      'file' => 'log-2016-11-14.log',
      'sub_file' => 
      array (
      ),
    ),
    5 => 
    array (
      'signal' => '-',
      'path' => '/var/www/html/goms-kmg-v4/application/pc/logs/out.log',
      'file' => 'out.log',
      'sub_file' => 
      array (
      ),
    ),
    6 => 
    array (
      'signal' => 'd',
      'path' => '/var/www/html/goms-kmg-v4/application/pc/logs/flight_dynamic_update',
      'file' => 'flight_dynamic_update',
      'sub_file' => 
      array (
        0 => 
        array (
          'signal' => 'd',
          'path' => '/var/www/html/goms-kmg-v4/application/pc/logs/flight_dynamic_update/2016-10-17',
          'file' => '2016-10-17',
          'sub_file' => 
          array (
            0 => 
            array (
              'signal' => '-',
              'path' => '/var/www/html/goms-kmg-v4/application/pc/logs/flight_dynamic_update/2016-10-17/flight_add_sql.log',
              'file' => 'flight_add_sql.log',
              'sub_file' => 
              array (
              ),
            ),
          ),
        ),
      ),
    ),
    7 => 
    array (
      'signal' => '-',
      'path' => '/var/www/html/goms-kmg-v4/application/pc/logs/log-2016-11-13.log',
      'file' => 'log-2016-11-13.log',
      'sub_file' => 
      array (
      ),
    ),
    8 => 
    array (
      'signal' => '-',
      'path' => '/var/www/html/goms-kmg-v4/application/pc/logs/log-2016-11-08.log',
      'file' => 'log-2016-11-08.log',
      'sub_file' => 
      array (
      ),
    ),
    9 => 
    array (
      'signal' => '-',
      'path' => '/var/www/html/goms-kmg-v4/application/pc/logs/log-2016-11-04.log',
      'file' => 'log-2016-11-04.log',
      'sub_file' => 
      array (
      ),
    ),
    10 => 
    array (
      'signal' => '-',
      'path' => '/var/www/html/goms-kmg-v4/application/pc/logs/555.log',
      'file' => '555.log',
      'sub_file' => 
      array (
      ),
    ),
    11 => 
    array (
      'signal' => '-',
      'path' => '/var/www/html/goms-kmg-v4/application/pc/logs/pm.log',
      'file' => 'pm.log',
      'sub_file' => 
      array (
      ),
    ),
    12 => 
    array (
      'signal' => '-',
      'path' => '/var/www/html/goms-kmg-v4/application/pc/logs/log-2016-11-09.log',
      'file' => 'log-2016-11-09.log',
      'sub_file' => 
      array (
      ),
    ),
    13 => 
    array (
      'signal' => '-',
      'path' => '/var/www/html/goms-kmg-v4/application/pc/logs/log-2016-11-10.log',
      'file' => 'log-2016-11-10.log',
      'sub_file' => 
      array (
      ),
    ),
    14 => 
    array (
      'signal' => '-',
      'path' => '/var/www/html/goms-kmg-v4/application/pc/logs/in.log',
      'file' => 'in.log',
      'sub_file' => 
      array (
      ),
    ),
  ),
);
echo json_encode($data);

    文采不好，就不在这里详细介绍了，但是代码是全给了，想测试的话，直接把代码考过去就行了。。。

    javascriptphp
    anchovy
    1.9k 声望89 粉丝
    « 上一篇
    自定义事件
    下一篇 »
    canvas画虚线圆

    引用和评论

    推荐阅读
    头像
    react useRef的两层用法，开眼界了

    anchovy阅读 2k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 26阅读 6.7k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.3k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新