jquery tree for items

Hi all

What is the best jquery treeview that can be used to represen开发者_开发问答t some transactions(leaves,vacations...) items.

i found a great treeview on the internet,but the problem is this tree is for folders and directory and not for text items.

when the user click on sub leave for example it will print some text beside that subleave

note: i work on PHP codeigniter framework.

Thank You

---

jsTree is a good jQuery plugin. It has a ton of options and API calls for working with the tree. I would say that the learning curve at first might be a little steep but it was worth it for me. If you're familiar with jQuery, you'll be able to manipulate the tree in many different ways.

Here is the home page...... http://www.jstree.com/.

---

A tree is probably not the best design idiom to use for this information. Consider, perhaps, an accordion.

Trees tend to have small nodes, so hard to click and break Fitt's Law. And they really only make sense to programmers and computer geeks. Accordions are a little better, as they have become more common and are at least easier to manipulate.

They are also way easier to code for. And there are tons of jquery plugins that can do it. Even nested, which it sounds like you need.

The goal isn't always to have the fastest UI, either. Consider how common this task is and if it will be better suited to something easier to learn in the first place. Maybe links and sub-pages are the best way to present the information. Don't disregard the useful but old for the flashy and new.

---

I've used this JQuery plug-in in the past and it works great : http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

It works in an non-intrusive way over nested ul and li HTML elements.

It can work through AJAX to lazy-load nodes by configuring a URL from which you want to load the children of a node. This works great if your tree is big.

$(document).ready(function() {
    $('#concept-tree ul').treeview({
        url: 'concepts/node'
    });
});

To dynamically load content related to a node in another page element you could use some JQuery. You could set an event handler for a node being clicked and fetch extra content through AJAX and append it to the DOM.