Question

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

有人可以帮忙吗？

Answer 1

注意：

您知道您不需要手动添加项目吗？如果是这样，请阅读本节。如果您确实想手动添加项目，请继续下一部分。图书馆通过“连接器”为您解决这个问题。下载库时，您将拥有一个带有各种语言连接器的子文件夹。我正在运行IIS服务器，所以我使用jqueryFileTree.aspx连接器。在我的JavaScript中，我运行以下代码将filetree添加到元素#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行代码（如果你排除了注释）。

无法弄清楚如何配置jquery文件树

1 个答案:

注意：

手动添加项目