0

http://www.abeautifulsite.net/blog/2008/03/jquery-file-tree/でファイル ツリーを見たところですが、それを構成する方法がわかりません。アイテムとサブアイテムを手動で追加したいのですが、その方法がわかりません。

誰か助けてくれませんか？

4

1 に答える 1

1

ノート：

項目を手動で追加する必要がないことをご存知ですか? その場合は、このセクションをお読みください。項目を手動で追加したい場合は、次のセクションに進んでください。ライブラリは、「コネクタ」を使用してそれを処理します。ライブラリをダウンロードすると、さまざまな言語のコネクタを含むサブフォルダーが作成されます。IIS サーバーを実行しているので、jqueryFileTree.aspx コネクタを使用します。私の JavaScript では、次のコードを実行して、要素にファイル ツリーを追加します#filetree。

$('#filetree').fileTree({
    root: '/',
    script: '/jqueryFileTree.aspx'
}, function(filename) {
    alert('You selected ' + filename);
});

したがって、アイテムの追加は、実際には、rootパラメーターによって参照されるパスにファイルまたはディレクトリを追加するだけの問題です。

アイテムを手動で追加する

項目を手動で追加したい場合は、まず、基礎となる DOM 要素の構造を確認する必要があります。次に例を示します。

<div id="filetree" class="">
<ul class="jqueryFileTree" style="">
    <li class="directory expanded">
        <a href="#" rel="/sub/">sub</a>
        <ul class="jqueryFileTree" style="">
            <li class="file ext_txt">
                <a href="#" rel="/sub/file3.txt">file3.txt</a>
            </li>
        </ul>
    </li>
    <li class="file ext_txt"><a href="#" rel="/file1.txt">file1.txt</a></li>
    <li class="file ext_txt"><a href="#" rel="/file2.txt">file2.txt</a></li>
</ul>
</div>

この例でわかるように、FileTree が に追加されました<div id="#filetree"/>。ルート フォルダは最初の で表され、<ul/>そのフォルダ内の各アイテムは または のいずれかのクラスを持つ で表され<li/>ます。この例のディレクトリ内では、同じ形式の別のディレクトリが「サブ」の下にネストされ、「サブ」フォルダの内容を表しています。これは無限に続く可能性のある再帰的な構造です。'file''directory'<ul/><li/>

項目を手動で追加するのは、jQuery.append() または jQuery.appendTo() を使用<li/>して正しい属性を持つ新しい項目を追加するのと同じくらい簡単です。追加したアイテムのターゲットとなる正しい要素を選択するだけです。

ファイルの例は次のとおりです。

var liFile = $('<li/>',{
    'class' = 'file ext_txt'
}).append(
    $('<a/>',{
        'href' = '#',
        'rel'  = '/file4.txt'
    }).append(
        'file4.txt'
    )
);

これにより、次の HTML が作成されます<li class="file ext_txt"><a href="#" rel="/file4.txt">file4.txt</a></li>。

追加する正しい要素を選択するだけです。ルートに追加するだけの場合、これは簡単なはずです。次の手順を実行するだけです。

$('#filetree ul').append(liFile);

FileTree ライブラリのソース コードも参照してください。わずか 60 行のコードです (コメントを除くと)。

于 2013-03-05T16:37:13.870 に答える