时间戳

首页 > 解决方案 > jQuery FileTree 2.1.x - 默认打开文件夹

javascript - jQuery FileTree 2.1.x - 默认打开文件夹

问题描述

我正在研究简单的上传机制，用户可以将文件拖放到 FileTree 目录中。我使用jQuery FileTree做的，一切都很好，除了一件事。上传后我刷新 FileTree 以向用户显示该文件确实在目标文件夹中。不幸的是，如果目标文件夹不是主目录，而是子目录之一，用户什么也看不到，因为默认情况下目录是折叠的。

我一直在寻找该问题的解决方案：“如何在重新加载时扩展一个或多个目录”并且只发现一个有趣的主题： jquery 文件树 - 默认情况下打开文件夹？- 它确实解决了完全相同的问题，但仅适用于非常旧版本的 iQuery FileTree，并且不适用于最近的版本。

我花了几个小时尝试在最近的版本中进行类似的修改，但是 jQuery FileTree 中使用的 javascript 对我来说太高级了，而且旧版本和新版本之间的差异太大了，找不到任何相似之处。

如果有人知道如何修改最新版本的 jQuery FileTree，请帮助我。谢谢。

标签： javascriptjquerycss

解决方案

查看下面的完整示例，了解如何在插件初始化后实现特定文件夹的扩展。它递归地打开路径中指定的所有文件夹。

var folderToExpand = "/folder/path/to/expand";

$('.filetree').fileTree({
        root: fileRoot,
        script: scriptUrl,
        multiFolder: false
    })
    .on('filetreeexpanded', function (e, data) {
        // clean autoexpand folder and restore animation
        if (folderToExpand == data.rel) {
            folderToExpand = null;
            data.options.expandSpeed = 500;
        }
    })
    .on('afterShowTree', function (e, data) {
        if (folderToExpand !== null) {
            var $el = $(e.target),
                flag = false;
            $el.find(".directory.collapsed").each(function (i, folder) {
                var $link = $(folder).children();
                if (folderToExpand.indexOf($link.attr('rel')) === 0) {
                    flag = true;
                    data.options.expandSpeed = 0;
                    setTimeout(function () {
                        $link.click();
                    }, 50);
                }
            });
            // match not found
            if (flag === false) {
                folderToExpand = null;
                data.options.expandSpeed = 500;
            }
        }
    });

由于与插件选项相关的 data.options，现在可以更改事件中的动画和其他选项。

推荐阅读