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"/>. 根文件夹由 first 表示，该<ul/>文件夹中的每个项目由 a 表示，<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 行代码（如果您排除注释）。

于 2013-03-05T16:37:13.870 回答