我想知道是否有人可以帮助我使用jQuery文件树（jQuery File Tree）
我想知道是否/如何设置某种变量可以告诉文件树在加载时打开某个文件夹。 （例如，文件夹/ images / fruit /默认打开）
以下是调用filetree的代码：
$('#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并不是那么好。任何帮助，将不胜感激！ ：）
答案 0 :(得分：10)
为 jqueryFileTree.js 添加额外的默认属性，以便展开文件夹：
if (o.expandedFolders == undefined) o.expandedFolders = [];
更新代码以调用filetree以包含要展开的默认文件夹：
$(document).ready(function () {
$('#container_id').fileTree({
root: '/',
expandedFolders: ['/images/','/images/fruit/']
}, function (file) {
alert(file);
});
});
然后将bindTree(c);行后面的以下jquery代码直接添加到 jqueryFileTree.js中的 showTree（c，t） 函数：
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');
}
});
}
答案 1 :(得分：4)
有一种更简单的方法来扩展预定义文件夹而无需使用文件夹数组。
我修改了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);
});
});
答案 2 :(得分：1)
所以这完全是一个黑客，但它应该适合你想要的。我试图给出一个解决方案，它没有修改树源代码。所以我现在要做的是：
var pathToNode = "root/folder";
$("A[rel=pathToNode]").click();
这将模拟文件夹上的单击。唯一的问题是，如果文件夹是多层深，那么您需要将一个事件附加到单击，以便您知道它们正在单击，然后根据正常加载时间等待这么多秒。您可以将辅助事件绑定到click方法，如下所示：
$("A[rel=pathToNode]").click(function(){ alert("my test"); });
现在，如果您单击树中的该项目，您应该看到一个警报并将其展开。
答案 3 :(得分：1)
这是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');
}
});
}
有一些优点：
答案 4 :(得分：0)
只需触发点击事件即可。