为文件夹和子文件夹创建ul和li元素

时间:2019-06-12 09:57:54

标签: jquery html html-lists

我需要显示FTP服务器上的目录和子目录,如下所示:

https://www.jquery-az.com/jquery/demo.php?ex=77.0_1

我已经使用PHP函数ftp_list_files_recursive完成了此操作:

/* contents - ftp function */
    function ftp_list_files_recursive($ftp_stream, $path){
        $lines = ftp_rawlist($ftp_stream, $path);

        $result = array();

        foreach ($lines as $line){
            $tokens = explode(" ", $line);
            $name = $tokens[count($tokens) - 1];
            $type = $tokens[0][0];
            $filepath = $path . "/" . $name;

            if ($type == 'd'){
                $result = array_merge($result, ftp_list_files_recursive($ftp_stream, $filepath));
            } else {
                $result[] = $filepath;
            }
        }
        return $result;
    }

    /* contents - ftp */
    $contents = ftp_list_files_recursive($conn_id, ".");

    echo '<pre>';
    print_r($contents);
    echo '</pre>';

使用上述功能,它会向我返回文件夹,子文件夹和文件的列表:

Array
(
    [0] => ./Forze.Vacation.2016-Italy/Hotel01/Forze.Hotel-Italy.mp4
    [1] => ./Forze.Vacation.2016-Italy/Hotel01/Forze.Hotel-Italy.txt
    [2] => ./Forze.Vacation.2016-Italy/Hotel01/DSC0586.png
    [3] => ./Forze.Vacation.2016-Italy/Hotel01/DSC0587.png
    [4] => ./Forze.Vacation.2016-Italy/Hotel01/Rooms/DSC0597.png
    [5] => ./Forze.Vacation.2016-Italy/Hotel01/Rooms/DSC0598.png
    [6] => ./Forze.Vacation.2016-Italy/Hotel01/Rooms/Beths/DSC0600.png
    [7] => ./Forze.Vacation.2016-Italy/Hotel01/Rooms/Beths/DSC0601.png
    [8] => ./Forze.Vacation.2016-Italy/Hotel01/Rooms/Kitchen/DSC0602.png
    [9] => ./Forze.Vacation.2016-Italy/Hotel01/Rooms/Kitchen/DSC0603.png
    [10] => ./Unsorted.Hotel.Room.[Room-123].png
    [11] => ./Unsorted.Hotel.Bathroom.[Bathroom-124].png
)

所以它应该看起来像这样:

    Forze.Vacation.2016-Italy
       -> Hotel01
             Forze.Hotel-Italy.mp4
             Forze.Hotel-Italy.txt
             DSC0586.png
             DSC0587.png
             -> Rooms
                DSC0597.png
                DSC0598.png
                -> Beths
                   DSC0600.png
                   DSC0601.png
                   -> Kitchen
                      DSC0602.png
                      DSC0603.png
    Unsorted.Hotel.Room.[Room-123].png
    Unsorted.Hotel.Bathroom.[Bathroom-124].png

我尝试使用PHP函数检查文件夹和子文件夹是否生成<ul> <li></ul></ul>

<div id="treeview-checkbox-demo">
                        <ul>
                            <?php
                                $f = -1;
                                $sub = -1;
                                $files = 1;

                                foreach ($result as &$value) {
                                    /* check - subdirectory */
                                    if (strpos($value, 'SUBDIR') !== false) {
                                        $folder = str_replace($folder, '', $value);
                                        $folder = str_replace('SUBDIR.//', '', $folder);
                                        echo '<li>&nbsp;'.$folder;
                                        echo '<ul>';
                                        $sub = 1;
                                        $files++;
                                    }

                                    /* check - folder */
                                    if (strpos($value, 'FOLDER') !== false) {
                                        /* end folder */
                                        if ($f == 0) {
                                            echo '</ul>';
                                            echo '</li>';
                                        }
                                        $folder = explode('./', $value)[1];
                                        echo '<li>&nbsp;'.$folder;
                                        echo '<ul>';
                                        $f = 0;
                                    } else {
                                        if ($sub == 1) {
                                            /* show filename */
                                            $file = explode('./', $value)[$files];
                                            $file = explode('/', $file)[$files+1];
                                            if ($file) {
                                                echo '<li data-value="'.$value.'">&nbsp;'.$file.'</li>';
                                                $f = 0;
                                            }
                                        } else {
                                            /* show filename */
                                            $file = explode('./', $value)[$files];
                                            $file = explode('/', $file)[$files];
                                            echo '<li data-value="'.$value.'">&nbsp;'.$file.'</li>';
                                            $f = 0;
                                        }
                                    }
                                }
                            ?>
                        </ul>
                    </div>

但是它会在其中创建文件夹以及不匹配的子文件夹和文件...并且需要具有以下结构:

https://www.jquery-az.com/jquery/demo.php?ex=77.0_1

我正在建立用于管理酒店的管理站点,以将文件下载/上传到ftp服务器,但是我一直坚持<ul> <li>的{​​{1}}的生成方式

0 个答案:

没有答案