Одностраничное приложение с видом на дерево файлов с использованием ajax / php

Question

В настоящее время я работаю с веб-системой управления документами, я создаю ее как одну страницу, используя соединение ajax / php. У меня есть мое дерево файлов, которое отображает папки и файлы, используя этот код:

if (isset($_GET['displayFolderAndFiles'])) {

    function listIt ($path) {
        $items = scandir($path);
        foreach ($items as $item) {

            // Ignore the . and .. folders
            if ($item != "." AND $item != "..") {
                if (is_file($path . $item)) {
                    // this is the file
                }
                else {
                    // this is the directory

                    // do the list it again!

                    echo "<li><span class='fa fa-chevron-right caret'></span><button class='btn-der' id='directory" . $id . "' onclick='directoryAction(this);' value='" . $path . $item . "/'>" . $item . "</button>";
                    echo "<ul class='nested'>";
                    listIt($path . $item . "/");
                    //echo("<input type='text' value='".$path.$item."/'>");
                    echo "</ul></li>";

                }
                $id++;
            }
        }
    }

    listIt("./My Files/");
}

с этим кодом мне трудно манипулировать видом дерева. Я использую ajax для получения результата.

То, что я хочу, это перезагрузить древовидное представление при добавлении, удалении файла или папки. Я также хочу загрузить страницу после выполнения некоторых запросов в приложении без обновления страницы.

Я хочу иметь такие функции, как пример изображения, приложение - FileRun.

Может кто-нибудь порекомендовать или предложить несколько способов решения моей проблемы. Буду ли я использовать какую-нибудь библиотеку JavaScript или еще что-нибудь?

Ссылка / образец: веб-система управления документами (FileRun)

Answer 1

Вы можете использовать что-то вроде этого:

public function treeArr($dir){
        //  First we get the directory
        $paths = scandir($dir, SCANDIR_SORT_NONE);
        //  We remove .. && . from our array
        unset($paths[array_search('.', $paths, true)]);
        unset($paths[array_search('..', $paths, true)]);
        //  Add empty array for our tree
        $arr = [];
        //  Check isour paths array empty
        if (count($paths) < 1)
            return;
        //  If not empty we get through all paths and add what we want
        foreach($paths as $path){
            $current_dir = $dir.'/'.$path;
            $isDir = is_dir($current_dir);
            $expandable = count( scandir( $current_dir ) ) > 2 ? true : false;
            //  In my case, I needed path name
            //  Is it expandable (as is it directory and does it contains or is it empty)
            //  Is it dir or file, if it is not dir it will be false so its file
            //  And path for that folder or file

            $path_data = [
                'name' => $path,
                'expandable' => $expandable,
                'isDir' => $isDir,
                'path' => $current_dir,
            ];

            if($expandable) $path_data['data'] = $this->treeArr($dir.'/'.$path);
            //  If our dir is expandable we go to read files and folders from in it and call self function with that path

            array_push($arr, $path_data);
            //  At the end we add everything into array
        }
        return $arr;
    }

Это работает для моих нужд, и на стороне клиента вы можете стилизовать и добавлять его по своему усмотрению. В рамках foreach вы можете проверить другие вещи, такие как расширение файла, дату, размер и передать все, что вам нужно об этом. Например, если это html-файл и у вас есть живой редактор, вы можете проверить, является ли он html, и добавляется ли он как 'isHTML' => true,, а затем впереди:

if(file.isHTML) { //run the code }