Tree View - three different ways to present hierarchical data
Summary of features
COLOURcode offers three different ways to present hierarchical data: (1) a purely CSS solution created as part of the template, (2) the easily extendable, themable and configurable jsTree jquery plugin, and (3) the equal extendable, themable and configurable Fancytree jquery plugin. All three can be easily customised, although some of this has been done for you as part of the template's integration.
At a glance
- Both plugins support drag & drop, checkboxes and keyboard navigation.
- Both plugins offer collapsible structuring and support inline editing.
- jsTree supports HTML/JSON data sources, AJAX loading, and fuzzy search.
- Fancytree offers lazy loading and efficient handling of large data sets.
Pure-CSS tree with icons in the markup
- Level One Link
- Level One Header/Intro
- Level two link
- Level two link
- Level two header/intro
- Level three link
- Level three header/intro
- Level two header/intro
- Level One Header/Intro
- Level two link
- Level two link
- Level two header/intro
jsTree jquery plugin
- Level One Link
- Level One Header (start open)
- Level two link
- Level two link
- Level two header (start open)
- Level three link
- Level three header (start open)
- Level two header (start open)
- Level One Header (start open)
- Level two link
- Level two link
- Level two header (start open)
The icons above have been set for the three item types (node open, node closed, and leaf) using CSS and are easy to alter in shape, colour and size.
Fancytree jquery plugin
The icons above have been set for the three item types (node open, node closed, and leaf) using CSS and are easy to alter in shape, colour and size.
Pure-CSS tree ( ul.css-tree )
- Level One Link with icon
- Level One Link
- Level One Header/Intro
- Level two link with icon
- Level two link
- Level two header/intro
- Level three link
- Level three link
- Level three link with icon
- Level three intro with icon
- Level two link
- Level two linkSecondary text (.tree-note)
- Level two link with icon
- Level two intro with icon
- Level One Header/Intro with iconSecondary text (.tree-note)
This tree uses standard 'ul > li > ul > li' markup with the .css-tree class assigned to the parent unordered list: ul.css-tree
Pure-CSS tree ( ul.css-tree.tree-styled )
- Level One Link with icon
- Level One Link
- Level One Header/Intro
- Level two link with icon
- Level two link
- Level two header/intro
- Level three link
- Level three link
- Level three link with icon
- Level three intro with icon
- Level two link
- Level two linkSecondary text (.tree-note)
- Level two link with icon
- Level two intro with icon
- Level One Header/Intro with iconSecondary text (.tree-note)
Standard markup (plus spans around non-link list items) with one extra class assigned: ul.css-tree.tree-styled
Pure-CSS tree ( in a coloured panel )
- Level One Link with icon
- Level One Link
- Level One Header/Intro
- Level two link with icon
- Level two link
- Level two header/intro
- Level three link
- Level three link
- Level three link with icon
- Level three intro with icon
- Level two link
- Level two linkSecondary text (.tree-note)
- Level two link with icon
- Level two intro with icon
- Level One Header/Intro with iconSecondary text (.tree-note)
As before, inside a coloured panel: .panel.panel-brand1 ul.css-tree.tree-styled