jQuery Hierarchical Data Tree Examples

  1. Basic use
  2. Using parameters

Basic use

Example

  • 1 - Chapter 1
  • 1.1 - Chapter 1, Subchapter 1
  • 1.1.1 - Chapter 1, Subchapter 1, Page 1
  • 1.1.2 - Chapter 1, Subchapter 1, Page 2
  • 1.1.2.1 - Chapter 1, Subchapter 1, Page 2, Paragraph 1
  • 1.2 - Chapter 1, Subchapter 2
  • 1.3 - Chapter 1, Subchapter 3
  • 1.3.1 - Chapter 1, Subchapter 3, Page 1
  • 2 - Chapter 2
  • 2.1 - Chapter 2, Subchapter 1
  • 2.2 - Chapter 2, Subchapter 2
  • 2.2.1 - Chapter 2, Subchapter 2, Page 1
  • 2.2.2 - Chapter 2, Subchapter 2, Page 2
  • 2.3 - Chapter 2, Subchapter 3
  • 3 - Chapter 3

html

<ul id="tree">
    <li data-tree-branch="1"><span data-tree-click="1">1</span> - Chapter 1</li>
    <li data-tree-branch="1.1"><span data-tree-click="1.1">1.1</span> - Chapter 1, Subchapter 1</li>
    <li data-tree-branch="1.1.1"><span data-tree-click="1.1.1">1.1.1</span> - Chapter 1, Subchapter 1, Page 1</li>
    <li data-tree-branch="1.1.2"><span data-tree-click="1.1.2">1.1.2</span> - Chapter 1, Subchapter 1, Page 2</li>
    <li data-tree-branch="1.1.2.1"><span data-tree-click="1.1.2.1">1.1.2.1</span> - Chapter 1, Subchapter 1, Page 2, Paragraph 1</li>
    <li data-tree-branch="1.2"><span data-tree-click="1.2">1.2</span> - Chapter 1, Subchapter 2</li>
    <li data-tree-branch="1.3"><span data-tree-click="1.3">1.3</span> - Chapter 1, Subchapter 3</li>
    <li data-tree-branch="1.3.1"><span data-tree-click="1.3.1">1.3.1</span> - Chapter 1, Subchapter 3, Page 1</li>
    <li data-tree-branch="2"><span data-tree-click="2">2</span> - Chapter 2</li>
    <li data-tree-branch="2.1"><span data-tree-click="2.1">2.1</span> - Chapter 2, Subchapter 1</li>
    <li data-tree-branch="2.2"><span data-tree-click="2.2">2.2</span> - Chapter 2, Subchapter 2</li>
    <li data-tree-branch="2.2.1"><span data-tree-click="2.2.1">2.2.1</span> - Chapter 2, Subchapter 2, Page 1</li>
    <li data-tree-branch="2.2.2"><span data-tree-click="2.2.2">2.2.2</span> - Chapter 2, Subchapter 2, Page 2</li>
    <li data-tree-branch="2.3"><span data-tree-click="2.3">2.3</span> - Chapter 2, Subchapter 3</li>
    <li data-tree-branch="3"><span data-tree-click="3">3</span> - Chapter 3</li>
</ul>

javascript

<script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script src="src/jquery.dataTree.min.js"></script>
<script>
    $(function () {
        $('#tree').dataTree();
    });
</script>

css

#tree {
    list-style-type:none;
    color: #666666;
}
#tree [data-tree-click] {
    cursor: pointer;
    color: #999999;
    font-weight: bold;
    font-size: 1.2em;
}
#tree .closed [data-tree-click]{
    padding-left: 12px;
    background-image: url('pix/plus_minus.gif');
    background-repeat: no-repeat;
    background-position: 0px 6px;
    color: #FF00000 !important;
}
#tree .open [data-tree-click]{
    padding-left: 12px;
    background-image: url('pix/plus_minus.gif');
    background-repeat: no-repeat;
    background-position: 0px -94px;
    color: #FF00000 !important;
}
#tree .end {
    padding-left: 12px;
    color: #BBBBBB;
}
#tree .data-tree-level1 {
    margin-left: 10px;
}
#tree .data-tree-level2 {
    margin-left: 20px;
}
#tree .data-tree-level3 {
    margin-left: 30px;
}
Top of page

Using parameters (also can be any html element)

Example

England Premier League Arsenal Aston Villa Cardiff Liverpool Manchester City Manchester United Championship Brighton Leicester Nottingham Forest Watford League 1 League 2 Chesterfield York Scotland Scottish Premier League Aberdeen Celtic Dundee United Hearts Hibernian Scottish First DIvision Scottish Second DIvision

html

<div id="football">
    <span data-tree-branch="eng" data-tree-click="eng">England</span>
    <span data-tree-branch="eng-epl" data-tree-click="eng-epl">Premier League</span>
    <span data-tree-branch="eng-epl-arse" data-tree-click="eng-epl-arse">Arsenal</span>
    <span data-tree-branch="eng-epl-villa" data-tree-click="eng-epl-villa">Aston Villa</span>
    <span data-tree-branch="eng-epl-cdff" data-tree-click="eng-epl-cdff">Cardiff</span>
    <span data-tree-branch="eng-epl-lpool" data-tree-click="eng-epl-lpool">Liverpool</span>
    <span data-tree-branch="eng-epl-city" data-tree-click="eng-epl-city">Manchester City</span>
    <span data-tree-branch="eng-epl-utd" data-tree-click="eng-epl-utd">Manchester United</span>
    <span data-tree-branch="eng-chm" data-tree-click="eng-chm">Championship</span>
    <span data-tree-branch="eng-chm-brig" data-tree-click="eng-chm-brig">Brighton</span>
    <span data-tree-branch="eng-chm-leic" data-tree-click="eng-chm-leic">Leicester</span>
    <span data-tree-branch="eng-chm-forest" data-tree-click="eng-chm-forest">Nottingham Forest</span>
    <span data-tree-branch="eng-chm-wat" data-tree-click="eng-chm-wat">Watford</span>
    <span data-tree-branch="eng-lg1" data-tree-click="eng-lg1">League 1</span>
    <span data-tree-branch="eng-lg2" data-tree-click="eng-lg2">League 2</span>
    <span data-tree-branch="eng-lg2-chest" data-tree-click="eng-lg2-chest">Chesterfield</span>
    <span data-tree-branch="eng-lg2-york" data-tree-click="eng-lg2-york">York</span>
    <span data-tree-branch="sco" data-tree-click="sco">Scotland</span>
    <span data-tree-branch="sco-spl" data-tree-click="sco-spl">Scottish Premier League</span>
    <span data-tree-branch="sco-spl-aber" data-tree-click="sco-spl-aber">Aberdeen</span>
    <span data-tree-branch="sco-spl-cel" data-tree-click="sco-spl-cel">Celtic</span>
    <span data-tree-branch="sco-spl-utd" data-tree-click="sco-spl-utd">Dundee United</span>
    <span data-tree-branch="sco-spl-hearts" data-tree-click="sco-spl-hearts">Hearts</span>
    <span data-tree-branch="sco-spl-hibs" data-tree-click="sco-spl-hibs">Hibernian</span>
    <span data-tree-branch="sco-div1" data-tree-click="sco-div1">Scottish First DIvision</span>
    <span data-tree-branch="sco-div2" data-tree-click="sco-div2">Scottish Second DIvision</span>
</div>

javascript

<script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script src="src/jquery.dataTree.min.js"></script>
<script>
    $(function () {
        $('#football').dataTree({
            delimeter: '-',
            openCSS: 'open2',
            closedCSS: 'closed2',
            endCSS: 'end2',
            opened: ['eng-epl', 'sco']
        });
    });
</script>

css

#football {
    color: #333333;
}
#football .open2 {
    text-transform: uppercase;
    font-weight: bold;
}
#football [data-tree-branch]{
    display: block;
}
#football .data-tree-level1 {
    margin-left: 20px;
}
#football .data-tree-level2 {
    margin-left: 40px;
}
#football .data-tree-level3 {
    margin-left: 60px;
}
#football .end2.data-tree-level0, #football .end2.data-tree-level1 {
    color: #CCCCCC;
}
#football .end2.data-tree-level2 {
    color: #CC0000;
}
Top of page