不知道如何配置 jquery 文件树

Question

我刚刚在http://www.abeautifulsite.net/blog/2008/03/jquery-file-tree/上看到一个文件树，我不知道如何配置它。我想手动添加项目和子项，但我不知道该怎么做。

有人能帮忙吗?

Answer 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/>嵌套在'sub' <li/>下面，以表示'sub'文件夹的内容。它是一个递归结构，可以无限地继续下去。

手动添加项目就像使用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行代码(如果排除注释的话)。