jquery 文件树 - 默认打开的文件夹？

Posted 2023-03-31

【中文标题】jquery 文件树 - 默认打开的文件夹？

【英文标题】：jquery file tree - folder open by default?

【发布时间】：2010-06-23 03:56:19

【问题描述】：

我想知道是否有人可以帮助我处理 jQuery 文件树 (jQuery File Tree)

我想知道是否/如何设置某种变量来告诉文件树在加载时打开某个文件夹。 （例如文件夹/images/fruit/默认打开）

这是调用文件树的代码：

$('#container_id').fileTree( 
  root: '/images/' 
, function(file) 
  alert(file);
);

这是 filetree.js 文件：

// jQuery File Tree Plugin
//
// Version 1.01
//
// Cory S.N. LaViska
// A Beautiful Site (http://abeautifulsite.net/)
// 24 March 2008
//
// Visit http://abeautifulsite.net/notebook.php?article=58 for more information
//
// Usage: $('.fileTreeDemo').fileTree( options, callback )
//
// Options:  root           - root folder to display; default = /
//           script         - location of the serverside AJAX file to use; default = jqueryFileTree.php
//           folderEvent    - event to trigger expand/collapse; default = click
//           expandSpeed    - default = 500 (ms); use -1 for no animation
//           collapseSpeed  - default = 500 (ms); use -1 for no animation
//           expandEasing   - easing function to use on expand (optional)
//           collapseEasing - easing function to use on collapse (optional)
//           multiFolder    - whether or not to limit the browser to one subfolder at a time
//           loadMessage    - Message to display while initial tree loads (can be html)
//
// History:
//
// 1.01 - updated to work with foreign characters in directory/file names (12 april 2008)
// 1.00 - released (24 March 2008)
//
// TERMS OF USE
// 
// This plugin is dual-licensed under the GNU General Public License and the MIT License and
// is copyright 2008 a Beautiful Site, LLC. 
//
if(jQuery) (function($)

    $.extend($.fn, 
        fileTree: function(o, h) 
            // Defaults
            if( !o ) var o = ;
            if( o.root == undefined ) o.root = '/';
            if( o.script == undefined ) o.script = 'jqueryFileTree.php';
            if( o.folderEvent == undefined ) o.folderEvent = 'click';
            if( o.expandSpeed == undefined ) o.expandSpeed= 500;
            if( o.collapseSpeed == undefined ) o.collapseSpeed= 500;
            if( o.expandEasing == undefined ) o.expandEasing = null;
            if( o.collapseEasing == undefined ) o.collapseEasing = null;
            if( o.multiFolder == undefined ) o.multiFolder = true;
            if( o.loadMessage == undefined ) o.loadMessage = 'Loading...';

            $(this).each( function() 

                function showTree(c, t) 
                    $(c).addClass('wait');
                    $(".jqueryFileTree.start").remove();
                    $.post(o.script,  dir: t , function(data) 
                        $(c).find('.start').html('');
                        $(c).removeClass('wait').append(data);
                        if( o.root == t ) $(c).find('ul:hidden').show(); else $(c).find('ul:hidden').slideDown( duration: o.expandSpeed, easing: o.expandEasing );
                        bindTree(c);
                    );
                
                function bindTree(t) 
                    $(t).find('li a').bind(o.folderEvent, function() 
                        if( $(this).parent().hasClass('directory') ) 
                            if( $(this).parent().hasClass('collapsed') ) 
                                // Expand
                                if( !o.multiFolder ) 
                                    $(this).parent().parent().find('ul').slideUp( duration: o.collapseSpeed, easing: o.collapseEasing );
                                    $(this).parent().parent().find('li.directory').removeClass('expanded').addClass('collapsed');
                                
                                $(this).parent().find('ul').remove(); // cleanup
                                showTree( $(this).parent(), escape($(this).attr('rel').match( /.*\// )) );
                                $(this).parent().removeClass('collapsed').addClass('expanded');
                             else 
                                // Collapse
                                $(this).parent().find('ul').slideUp( duration: o.collapseSpeed, easing: o.collapseEasing );
                                $(this).parent().removeClass('expanded').addClass('collapsed');
                            
                         else 
                            h($(this).attr('rel'), $(this).attr('name'), $(this).attr('title'), $(this).attr('id'));
                        
                        return false;
                    );
                    // Prevent a from triggering the # on non-click events
                    if( o.folderEvent.toLowerCase != 'click' ) $(t).find('li a').bind('click', function()  return false; );
                
                // Loading message
                $(this).html('<ul class="jqueryFileTree start"><li class="wait">' + o.loadMessage + '<li></ul>');
                // Get the initial file list
                showTree( $(this), escape(o.root) );
            );
        
    );

)(jQuery);

每次我试图弄乱它时，我都会一直杀死它，因为我的 javascript 不是那么好。任何帮助，将不胜感激！ :)

【问题讨论】：

如果您展示容器中的内容，我可能会提供更多帮助..

bravecomm.filemanager.360southclients.com/testing.php

只是想知道我作为答案提供的 hack 是否可以让您模拟点击。

【参考方案1】：

为 jqueryFileTree.js 添加一个额外的默认属性以扩展文件夹：

if (o.expandedFolders == undefined) o.expandedFolders = [];

更新代码以调用文件树以包含要展开的默认文件夹：

$(document).ready(function () 
        $('#container_id').fileTree( 
             root: '/', 
             expandedFolders: ['/images/','/images/fruit/'] 
            , function (file) 
            alert(file);
        );
    );

然后在jqueryFileTree.js中的showTree(c, t)函数的bindTree(c);行之后直接添加以下jquery代码：

if (o.expandedFolders != null) 
    $(c).find(".directory.collapsed").each(function (i,f) 
       if ($.inArray($(f).children().attr('rel'), $(o.expandedFolders)) != -1) 
           showTree($(f), escape($(f).children().attr('rel').match(/.*\//)));
           $(f).removeClass('collapsed').addClass('expanded');
       
    );

【参考方案2】：

有一种更简单的方法可以扩展预定义的文件夹，而无需使用文件夹数组。

我已经修改了 Bermo 的绝妙技巧，因此您不必将每个父文件夹（您希望打开的文件夹下方的文件夹）写入数组，而是使用正则表达式自动查找父文件夹：

jqueryFileTree.js

第 47 行，if( o.loadMessage == undefined ) o.loadMessage = 'Loading...';:

if(o.expanded == undefined) o.expanded = '';

第 58 行，bindTree(c);:

if (o.expanded != null) 
    $(c).find('.directory.collapsed').each(function (i, f) 
        if ((o.expanded).match($(f).children().attr('rel'))) 
            showTree($(f), escape($(f).children().attr('rel').match(/.*\//)));
            $(f).removeClass('collapsed').addClass('expanded');
        ;
    );

yourpage.htm

$(document).ready(function () 
    $('#container_id').fileTree( 
         root: '/', 
         expanded: '/images/fruit/'
        , function (file) 
        alert(file);
    );
);

【讨论】：

很好的解决方案，但为了使这项工作有效，路径必须以斜线开头和结尾。

对我来说是这样工作的： $('#container_id').fileTree( root: '/', script: 'php/myScript.php' , expand: '/images/fruit/ ' , 函数（文件）....

【参考方案3】：

所以这完全是一个 hack，但它应该可以满足您的需求。我试图给出一个不修改树源代码的解决方案。所以我现在要做的是：

var pathToNode = "root/folder";
$("A[rel=pathToNode]").click();

这将模拟对文件夹的单击。唯一的问题是，如果文件夹有几层深，那么您需要将一个事件附加到点击，以便您知道他们正在点击，然后根据正常加载时间等待这么多秒。您可以像这样将辅助事件绑定到 click 方法：

$("A[rel=pathToNode]").click(function() alert("my test"); );

所以现在，如果您单击树中的该项目，您应该会看到一条警报并展开它。

【参考方案4】：

这是对 Bermo 和 Matija 代码的另一项改进：

在默认属性后添加：

var expansion_completed = false;

然后将 bindTree() 之后的 if 块替换为：

if (o.expanded != false) 
    $(c).find(".directory.collapsed").each(function (idx, li) 
        var rel = $(li).children().attr('rel');
        if (!expansion_completed && o.expanded.substr(0, rel.length) == rel) 
            showTree(li, rel);
            $(li).removeClass('collapsed').addClass('expanded');
        
        if (o.expanded == rel) 
            expansion_completed = true;
            $(li).children("a").css('background-color', '#6080e0').css('color', 'white').css('font-weight', 'bold');
        
    );

有几个优点：

首先，它不使用正则表达式，所以它应该更快，更不容易出错。 它会记住完成扩展的时间，如果您关闭父级然后重新扩展它，它不会重新扩展所有内容。 突出显示当前选定的文件夹。

【参考方案5】：

只要触发点击事件就可以了。