Can't figure out how to configure jquery file tree

Question

I just saw a file tree on http://www.abeautifulsite.net/blog/2008/03/jquery-file-tree/, and I don't know to configure it. I want to add the items and subitems manually but I don't get how to do this.

Can someone help?

Answer 1

NOTE:

Do you know that you don't need to add items manually? If so, read this section. If you really do want to add items manually, continue to the next section. The library takes care of that for you with a 'connector'. When you download the library, you'll have a subfolder with connectors in various languages. I'm running an IIS server so I use the jqueryFileTree.aspx connector. In my JavaScript I run the following code to add a filetree to the element #filetree:

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

So adding items is really just a matter of adding files or directories to the path referenced by the root parameter.

Adding Items Manually

If you really want to add items manually, you'll need to first look at the structure of the underlying DOM element. Here's an example:

<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>

As you can see in this example, the FileTree was added to the <div id="#filetree"/>. The root folder is represented by the first <ul/>, and each item in that folder is represented by a <li/> with a class of either 'file' or 'directory'. Within the directory in this example, another <ul/> with the same format is nested under the 'sub' <li/> to represent the 'sub' folder's contents. It is a recursive structure that could continue on indefinitely.

Adding items manually would be as simple as using jQuery.append() or jQuery.appendTo() to add a new <li/> with the correct attributes. You'll just need to select the correct element that will be the target of your added item.

An example of a file would be:

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

That creates the following HTML: <li class="file ext_txt"><a href="#" rel="/file4.txt">file4.txt</a></li>.

Now just select the correct element to add it to. If you're just adding it to the root, this should be easy, just do the following:

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

You might also take a look at the source code for the FileTree library. It is only about 60 lines of code (if you exclude the comments).