TreeView

@@adsense
TreeView
  • Favorites
    • Projects
    • Downloads
    • Desktop
  • Location
  • Computers
  • Network
    • ASUS
    • BARACUDA
    • EPSON
    • VUSOLO
    • GALAXY S4
Checkbox & Radio
  • Checkboxes
    • Play animations
    • Play sounds
    • Disabled leaf
    • Read only
  • Radio buttons
    • Play animations
    • Play sounds
    • Disabled leaf
    • Show pictures
  • Mixed
    • Play animations
    • Play animations
    • Play sounds
Indeterminate
  • Indeterminate
    • Play video
      • AVI
      • MPEG
      • VIDX
      • XVID
    • Options
      • Option 1
      • Option 2
      • Sub Options
        • Sub Option 1
        • Sub Option 2
        • Sub Option 3
    • Other
Simple tree

                <div class="treeview" data-role="treeview">
                    <ul>
                        <li><span class="leaf">Leaf name</span></li>
                        ...
                        <li>
                            <span class="leaf">Leaf name</span>
                            <ul>
                                <li><span class="leaf">Leaf name</span></li>
                                ...
                                <li><span class="leaf">Leaf name</span></li>
                            </ul>
                        </li>
                    </ul>
                </div>
Create node

                <li class="node">
                    <span class="leaf">Leaf name</span>
                    <span class="node-toggle"></span>
                    <ul>
                        <li><span class="leaf">Leaf name</span></li>
                        ...
                        <li><span class="leaf">Leaf name</span></li>
                    </ul>
                </li>
Create collapsed node

                <li class="node collapsed">
                    <span class="leaf">Leaf name</span>
                    <span class="node-toggle"></span>
                    <ul>
                        <li><span class="leaf">Leaf name</span></li>
                        ...
                        <li><span class="leaf">Leaf name</span></li>
                    </ul>
                </li>
Create anchor leaf

                <li>
                    <a href="..." class="leaf">Leaf name</a>
                </li>
Create leaf with icon (ex: Font Awesome), required class icon 

                <li>
                    <span class="leaf"><span class="icon mif-tablet"></span> Leaf name</span>
                </li>
Create leaf with icon (ex: img), required class icon 

                <li>
                    <span class="leaf"><img src="..." class="icon"> Leaf name</span>
                </li>
Create leaf with checkbox

                <li data-mode="checkbox" data-name="checkbox_name" data-checked="true">
                    <span class="leaf">Leaf name</span>
                </li>
Create leaf with radio button

                <li data-mode="radio" data-name="radio_name" data-checked="true">
                    <span class="leaf">Leaf name</span>
                </li>

Additional examples

Add leaf on click on leaf

Click on Root or any leaf

  • Root


                <div class="treeview"
                     data-role="treeview"
                     id="tree_add_leaf_example"
                     data-double-click="false"
                     data-on-click="tree_add_leaf_example_click">
                    <ul>
                        <li><span class="leaf">Root</span></li>
                    </ul>
                </div>

                <script>
                    function tree_add_leaf_example_click(leaf, node, pnode, tree){
                        tree.addLeaf(node, "Leaf item");
                    }
                </script>
Add leaf on runtime

Click on leaf, then click button "Add leaf" or click button "Add root"

  • Root


                <div class="treeview"
                     data-role="treeview"
                     id="tree_add_leaf_runtime_example">
                    <ul>
                        <li><span class="leaf">Root</span></li>
                    </ul>
                </div>

                <script>
                    function tree_add_root_runtime_example_click(){
                        var tree = $("#tree_add_leaf_runtime_example").data("treeview");

                        tree.addLeaf(false, "Root");
                    }

                    function tree_add_leaf_runtime_example_click(){
                        var tree = $("#tree_add_leaf_runtime_example").data("treeview");
                        var node = tree.element.find('li.active');

                        tree.addLeaf(node, "Leaf item");
                    }
                </script>
Add leaf with checkbox and radio

Click on leaf, then click button "Add leaf" or click button "Add root"

  • Root


                <div class="treeview"
                     data-role="treeview"
                     id="tree_add_leaf_runtime_example2">
                    <ul>
                        <li><span class="leaf">Root</span></li>
                    </ul>
                </div>

                <script>
                    function tree_add_leaf_checkbox_example_click(){
                        var tree = $("#tree_add_leaf_runtime_example2").data("treeview");
                        var node = tree.element.find('li.active');

                        tree.addLeaf(node, "Leaf item", {
                            mode: 'checkbox',
                            checked: (Math.round(Math.random()) === 0 ? false : true)
                        });
                    }

                    function tree_add_leaf_radio_example_click(){
                        var tree = $("#tree_add_leaf_runtime_example2").data("treeview");
                        var node = tree.element.find('li.active');

                        tree.addLeaf(node, "Leaf item", {
                            mode: 'radio',
                            name: 'r1',
                            checked: (Math.round(Math.random()) === 0 ? false : true)
                        });
                    }
                </script>