Дерево файлов jquery - папка открыта по умолчанию? - PullRequest
3 голосов
/ 23 июня 2010

Мне было интересно, может ли кто-нибудь помочь мне с деревом файлов jQuery ( Дерево файлов jQuery )

Мне было интересно, можно ли / как установить какую-то переменную, которая сообщит дереву файлов, чтобы при загрузке была открыта определенная папка. (например, папка / 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 не так уж и хорош. Любая помощь будет оценена! :)

Ответы [ 5 ]

10 голосов
/ 01 июля 2010

Добавление дополнительного свойства по умолчанию к jqueryFileTree.js для папок для расширения:

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

Обновление кода для вызова файлового дерева для включения папок по умолчанию для расширения:

$(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');
       }
    });
}
4 голосов
/ 26 апреля 2011

Существует более простой способ расширения предопределенной папки без использования массива папок.

Я изменил удивительный взлом Bermo, чтобы вам не приходилось писать каждую родительскую папку (папки ниже той, которую вы хотите)чтобы видеть открытый) в массиве, вместо этого он использует регулярное выражение для автоматического поиска родительских папок:

jqueryFileTree.js

Строка 47, после if (o.loadMessage == undefined) 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 голос
/ 18 июня 2012

Вот еще одно улучшение кода Бермо и Матия:

Добавьте это после свойств по умолчанию:

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 && 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');
        }
    });
}

Есть несколько преимуществ:

  1. Во-первых, он не использует регулярные выражения, поэтому он должен быть быстрее и менее подвержен ошибкам.
  2. Он запоминает, когда он завершил расширение, и не будет заново раскрывать все, если вы закроете родительский элемент, а затем повторно развернете его.
  3. Подсвечивает текущую выбранную папку.
1 голос
/ 02 июля 2010

Так что это полный взлом, но он должен работать на то, что вы хотите.Я попытался дать решение, где оно не изменило исходный код дерева.Итак, что бы я сделал сейчас:

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

Это будет симулировать щелчок по папке.Единственная проблема заключается в том, что если папка имеет несколько уровней в глубину, то вам нужно либо прикрепить событие к щелчку, чтобы вы знали, что он щелкает, а затем ждать так много секунд после того, как зависит от нормального времени загрузки.Вы можете привязать вторичное событие к методу щелчка следующим образом:

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

Так что теперь, если вы щелкнете по этому элементу в дереве, вы должны увидеть предупреждение и развернуть его.

0 голосов
/ 23 июня 2010

Просто вызвать событие клика на нем.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...