#jquery #file #tree
#jquery #файл #дерево
Вопрос:
Мне было интересно, может ли кто-нибудь помочь мне с файловым деревом jQuery (jQuery File Tree)
Мне было интересно, можно ли было бы установить какую-то переменную, которая сообщала бы файловому дереву, чтобы определенная папка открывалась при загрузке. (например. папка / изображения / фрукты/ должна быть открыта по умолчанию)
Вот код для вызова 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 не настолько хорош. Буду признателен за любую помощь! 🙂
Комментарии:
1. Возможно, я смогу помочь больше, если вы покажете свое содержимое контейнера..
2. bravecomm.filemanager.360southclients.com/testing.php
3. Просто интересно, сработал ли для вас хак, который я ввел в качестве ответа, для имитации щелчка.
Ответ №1:
Добавьте дополнительное свойство по умолчанию в jqueryFileTree.js для расширения папок:
if (o.expandedFolders == undefined) o.expandedFolders = [];
Обновите код для вызова filetree, чтобы включить папки по умолчанию для расширения:
$(document).ready(function () {
$('#container_id').fileTree({
root: '/',
expandedFolders: ['/images/','/images/fruit/']
}, function (file) {
alert(file);
});
});
Затем добавьте следующий код jquery непосредственно после bindTree(c);
строки в функцию showTree(c, t) в jqueryFileTree.js:
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 == не определено) o.loadMessage = ‘Загрузка…’;:
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);
});
});
Комментарии:
1. Хорошее решение, но для того, чтобы это работало, путь должен начинаться и заканчиваться косой чертой.
2. для меня работало следующим образом: $(‘#container_id’).FileTree({ root: ‘/’, script: ‘php/myScript.php ‘ , развернуто: ‘/images/fruit/’ }, функция (файл) {….
Ответ №3:
Итак, это полностью взлом, но он должен работать для того, что вы хотите. Я попытался предложить решение, в котором исходный код дерева не изменялся. Итак, что бы я сейчас сделал, это:
var pathToNode = "root/folder";
$("A[rel=pathToNode]").click();
Это имитирует щелчок по папке. Единственная проблема заключается в том, что если папка имеет глубину в несколько слоев, то вам нужно будет либо прикрепить событие к щелчку, чтобы вы знали, что они щелкают, а затем подождать столько секунд после этого, в зависимости от обычного времени загрузки. Вы можете привязать вторичное событие к методу click следующим образом:
$("A[rel=pathToNode]").click(function(){ alert("my test"); });
Итак, теперь, если вы нажмете на этот элемент в дереве, вы должны увидеть предупреждение, а также развернуть его.
Ответ №4:
Вот еще одно улучшение кода Bermo и Matija:
Добавьте это после свойств по умолчанию:
var expansion_completed = false;
Затем замените блок if после bindTree() на этот:
if (o.expanded != false) {
$(c).find(".directory.collapsed").each(function (idx, li) {
var rel = $(li).children().attr('rel');
if (!expansion_completed amp;amp; 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:
Просто запустите событие click для нее.