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

时间:2019-04-02 10:22:48

标签: javascript php ajax web

我目前正在使用基于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库吗?

Reference/Sample: Web-based Document Management System (FileRun)

1 个答案:

答案 0 :(得分:0)

您可以使用以下内容:

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 }