G23 Expandable Tree Widget

Basic hierarchical node tree.

This example is for use inside the sr03 component. It simply shows the formatting of search filter content within the g23 tree. When the node tree is used inside the sr03 component, you will see a few style changes to component elements.

Use of the results count [n,nnn] is optional.

The addition of "multi" to the classname triggers the appearance of expand/collapse all controls for user convenience. "expand all" and "collapse all" text can be localized in menucontent.js.

This example shows how to indicate the current node, which is done by using a <strong> element. This technique can be used on the g23v2 Static Hierarchical Node Tree.

Hierarchical node tree with check boxes and behavior to auto-check children boxes and indicate hidden checked boxes. The check boxes must be the first child element of the list item, and not be wrapped in any other element. For example <li><span><input type="checkbox" value="foo"><span> Foo</li> will break the widget. Any list item may or may not contain a check box.

Non-interactive node tree. For situations where there are too many nodes to reasonably send to the client in a single page. As the user navigates the tree, the server sends back different representations of the tree using this component. There are three kinds of nodes: leaf nodes, expanded branch nodes, and collapsed branch nodes. These are coded as <li>, <li class="expanded branch">, and <li class="collapsed branch"> respectively.

Note: It's up to the server-side programmer to ensure the tree expands and collapses consistently across multiple page views.

The text labels "expand all" and "collapse all" can be localized or replaced with   so just the icons appear.

They're still links, but they just don't look like links so as not to overwhelm the user. However leaf node links will appear as links. Also, if JavaScript is turned off, the links will look like links, since the plus/minus won't be active.