Ajax Files browser ; What are the good practices

I'm working on a file browser (a very ligth file manager if you prefer) based on PHP and Javascript.

I'm building a treeview with my folders :

<ul id="treeview">
    <li><a href="#">Folder 1</a></li>
    <li><a href="#">Folder 2</a>
        <ul>
            <li><a href="#">Folder 2.1</a></li>
            <li><a href="#">Folder 2.2</a></li>
        </ul>
    </li>
    <li><a href="#">Folder 3</a></li>
</ul>

Each link represent a folder. What I want to do from here is loading the content of a folder after cliking on it.

I have this PHP code to do that :

public function getContent($path)
{
    //fetch the content of $path directory
}

I have this JS code to handle the events :

$('#treeview a').live('click',function(e){
    e.preventDefault();
    var folder = //here : get the path
    loadContentInPanel(folder);
});

But I don't know how to get the path of the clicked folder safely. Should I add it directly in attribute like this? :

<li><a href="root/folder2/folder2.1/"> Folder 2.1</a></li>

Ideally I would like the path be not visible( not clearly readable at least) to the end user. I was thinking to build link with base64_encode() but is that a good idea ?

Thanks for your suggestions.

Solution

You're already giving away the path to the folder with your treeview, I don't see a problem with adding it to the actual element.

<li><a href="root/folder2/folder2.1/"> Folder 2.1</a></li>

Will be in

<ul id="treeview">//root
    <li><a href="#">Folder 1</a></li>
    <li><a href="#">Folder 2</a> //folder2

Perform all your security checks at the "getContent" function and you'll be fine.