2010-06-23 28 views
3

我想知道是否有人可以幫助我與jQuery的文件樹(jQuery File Treejquery文件樹 - 默認打開文件夾?

我想知道是否/怎麼會是可以設置一些類型的變量,會告訴文件樹有一定的文件夾打開負載。 (如:文件夾/圖片/水果/是默認打開的)

下面的代碼來調用文件樹:

$('#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

我也許能幫助更多的如果你表現出你對容器的內容.. – Kai 2010-06-23 05:31:30

+0

http://bravecomm.filemanager.360southclients.com/testing.php – SoulieBaby 2010-06-23 05:42:59

+0

只是想知道如果我把作爲一個答案破解爲你工作好模擬點擊。 – spinon 2010-07-04 17:39:11

回答

10

添加一個額外的默認屬性jqueryFileTree.js的文件夾,擴大:

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

更新的代碼來調用文件樹,包括默認文件夾,擴大:

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

然後在bindTree(c);行之後直接添加以下jquery代碼到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'); 
     } 
    }); 
} 
0

只需觸發點擊事件就可以了。

+0

已經嘗試過,但無法讓它正常工作。 – SoulieBaby 2010-06-23 05:33:20

1

所以這完全是一個黑客,但它應該爲你想要的工作。我試圖給出一個解決方案,它不修改樹源代碼。所以我現在要做的是:

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

這將模擬點擊文件夾。唯一的問題是,如果該文件夾是幾層深,那麼您將需要附加一個事件到點擊,以便您知道他們正在點擊,然後根據正常的加載時間等待那麼多秒。如果您單擊樹該項目應該會看到一個警告,以及有它擴大所以現在

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

:您可以將次級事件綁定到這樣的點擊方法。

4

有一種更簡單的方式來展開預定義的文件夾,而無需使用文件夾數組。

我修改Bermo的真棒破解,所以你不必寫每個父文件夾(下面的一個文件夾,你想看到打開)的陣列,而是使用正則表達式來自動尋找父文件夾:

jqueryFileTree.js

47行,如果(o.loadMessage ==未定義)o.loadMessage =「加載之後...「;

​​3210

線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); 
    }); 
}); 
+0

好的解決方案,但爲了使這項工作的路徑必須以斜線開始和結束。 – Michiel 2014-01-24 12:30:59

1

這裏的另一個改進Bermo和Matija代碼:

默認屬性後補充一點:

var expansion_completed = false; 

然後更換bi後的if塊ndTree()與此:

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. 它突出顯示當前選定的文件夾。