### Navigation

- index
- modules |
- next |
- previous |
- TurboGears 2.1.5 documentation »
- Search:
- Extended Table of Contents »
- Tips and Recipes »

# JQuery TreeView Widget Tutorial

## Installation

    easy_install tw.jquery

## Usage

The TreeView widget supports the following optional parameters:

### Parameters:

- treeDiv The id of the div element which contains the unordered

    list to be rendered as a tree. (Default: treeDiv = tree)

For example the widget is instantiated as:

    from tw.jquery import TreeView

    myTree = TreeView(treeDiv='navTree')

This tree is served up to the user via a controller method like this:

    @expose('mypackage.templates.navtree')
    def navtree(self, **kw):
        pylons.c.w.tree = myTree
        return dict()

And your template would display the tree like this:

    ${tmpl_context.w.tree()}

The template should have a div with id navTree containing an unordered list as:

    <div id="navTree">
      <ul>
        <li class="open">TurboGears2
          <ul>
             <li><a href="http://docs.turbogears.org/2.0">Documentation</a></li>
             <li><a href="http://docs.turbogears.org/2.0/API">API Reference</a></li>
             <li><a href="http://trac.turbogears.org/turbogears/">Bug Tracker</a></li>
             <li><a href="http://groups.google.com/group/turbogears">Mailing List</a></li>
          </ul>
         </li>
        <li class="closed">Pylons
          <ul>
             <li><a href="http://wiki.pylonshq.com/display/pylonsdocs/Home">Documentation</a></li>
             <li><a href="http://wiki.pylonshq.com/display/pylonsfaq/Home">FAQ</a></li>
             <li><a href="http://pylonshq.com/project/">Bug Tracker</a></li>
             <li><a href="http://groups.google.com/group/pylons-discuss">Mailing List</a></li>
          </ul>
         </li>
        <li class="closed">SQLAlchemy
          <ul>
             <li><a href="http://www.sqlalchemy.org/docs/">Documentation</a></li>
             <li><a href="http://www.sqlalchemy.org/trac/wiki/FAQ">FAQ</a></li>
             <li><a href="http://www.sqlalchemy.org/trac/query">Bug Tracker</a></li>
             <li><a href="http://groups.google.com/group/sqlalchemy">Mailing List</a></li>
          </ul>
         </li>
      </ul>
    </div>

Note that some items have class=”closed”. These would show up as collapsed nodes.

Here is the resulting field when viewed from a browser: