簡單的文件樹

時間 2019-12-04

標籤簡單文件简体版

原文原文鏈接

要實現的效果
php

都是在同級目錄下的文件，須要服務器環境html

佈局node

<!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腳本jquery

<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數據：ajax

<?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);

文采很差，就不在這裏詳細介紹了，可是代碼是全給了，想測試的話，直接把代碼考過去就好了。。。sql

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。