jQuery File Tree 只顯示 資料夾 與中文亂碼修正

        jQuery File Tree是一套滿好用的檔案樹套件，可以顯示遠端Server的檔案路徑。不過他目前只能選擇檔案，不能只選資料夾，而且若是中文檔名，取得的路徑還會是亂碼，以下做一點小修改，讓他支援中文檔名以及可以選取資料夾。

       首先，針對他的connector動手腳，以下是php的範例，不過各版本其實是相同原理

jqueryFileTree.php

foreach( $files as $file ) {
    if( file_exists($root . $_POST['dir'] . $file) && $file != '.' && $file != '..' && !is_dir($root . $_POST['dir'] . $file) ) {
    $ext = preg_replace('/^.*\./', '', $file);
    echo "<li class=\"file ext_$ext\"><a href=\"#\" rel=\"" . htmlentities($_POST['dir'] . $file) . "\">" . htmlentities($file) . "</a></li>";
    }
}

接下來修改
jQueryFileTree.js
先把所有escape換成encodeURIComponent，然後再把點擊資料夾的部分回傳資料以及加入CSS方便辨識

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';
    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(), encodeURIComponent($(this).attr('rel').match( /.*\// )) );
                        $(this).parent().removeClass('collapsed').addClass('expanded');
                        $("a").removeClass("hover"); // 移除所有hover class
                        $(this).addClass('hover');   // 現有資料夾加入hover class
                        h($(this).attr('rel'));      // 回傳路境
                    } else {
                        // Collapse
                        $(this).parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing });
                        $(this).parent().removeClass('expanded').addClass('collapsed');
                    }
                } else {
                    h($(this).attr('rel'));
                }
                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), encodeURIComponent(o.root) );
    });
}
});
 
})(jQuery);