时间戳

首页 > 解决方案 > 使用 ajax/php 具有文件树视图的单页应用程序

javascript - 使用 ajax/php 具有文件树视图的单页应用程序

问题描述

我目前正在使用基于 Web 的文档管理系统，我正在使用 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库还是其他？

参考/示例：基于 Web 的文档管理系统 (FileRun)

标签： javascriptphpajaxweb

解决方案

你可以使用这样的东西：

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 }

推荐阅读