bootstrap-treeview.html

---
alert-message: ', <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="https://github.com/patternfly/patternfly-bootstrap-treeview">https://github.com/patternfly/patternfly-bootstrap-treeview</a>.'
categories: [Widgets]
layout: page
title: Bootstrap Tree View
resource: true
url-js-extra: '//rawgit.com/patternfly/patternfly-bootstrap-treeview/v2.1.3/dist/bootstrap-treeview.min.js'
---
      <div class="row">
        <div class="col-sm-4">
          <h2>Default</h2>
          <div id="treeview1"></div>
        </div><!--/col-->
        <div class="col-sm-4">
          <h2>Collapsed</h2>
          <div id="treeview2"></div>
        </div><!--/col-->
        <div class="col-sm-4">
          <h2>Expanded</h2>
          <div id="treeview3"></div>
        </div><!--/col-->
      </div><!--/row-->
      <div class="row">
        <div class="col-sm-4">
          <h2>Link enabled</h2>
          <div id="treeview4"></div>
        </div><!--/col-->
        <div class="col-sm-4">
          <h2>Events</h2>
          <div id="treeview5"></div>
        </div><!--/col-->
        <div class="col-sm-4">
          <h2>Output</h2>
          <div id="event_output"></div>
        </div><!--/col-->
      </div><!--/row-->
      <div class="row">
        <div class="col-sm-4">
          <h2>JSON Data</h2>
          <div id="treeview6"></div>
        </div><!--/col-->
        <div class="col-sm-4">
          <h2>Checkboxes</h2>
          <div id="treeview7"></div>
        </div><!--/col-->
        <div class="col-sm-4">
          <h2>Hierarchal Checks</h2>
          <div id="treeview8"></div>
        </div><!--/col-->
      </div><!--/row-->
      <div class="row">
        <div class="col-sm-4">
          <h2>Highlight Select</h2>
          <div id="treeview9"></div>
        </div><!--/col-->
        <div class="col-sm-4">
          <h2>Lazy Load</h2>
          <div id="treeview10"></div>
        </div><!--/col-->
        <div class="col-sm-4">
          <h2>Hover and Select</h2>
          <div id="treeview13" class="treeview-pf-hover treeview-pf-select"></div>
        </div><!--/col-->
      </div>
      <div class="row">
        <div class="col-sm-4">
          <h2>Prevent Unselection</h2>
          <div id="treeview11" class="treeview-pf-select"></div>
        </div><!--/col-->
        <div class="col-sm-4">
          <h2>Disabled Nodes</h2>
          <div id="treeview12"></div>
        </div><!--/col-->
      </div><!--/row-->
      <script>
        $(function() {
          //icon options
          var collapseIcon = "fa fa-angle-down",
            expandIcon = "fa fa-angle-right",
            nodeIcon = "fa fa-folder",
            checkedIcon = "fa fa-check-square-o",
            uncheckedIcon = "fa fa-square-o",
            partiallyCheckedIcon = "fa fa-check-square",
            loadingIcon = "glyphicon glyphicon-hourglass";

          var defaultData = [
            {
              text: 'Parent 1',
              href: '#parent1',
              tags: ['4'],
              nodes: [
                {
                  text: 'Child 1',
                  href: '#child1',
                  tags: ['2'],
                  nodes: [
                    {
                      text: 'Grandchild 1',
                      href: '#grandchild1',
                      icon: 'fa fa-file-o',
                      tags: ['0']
                    },
                    {
                      text: 'Grandchild 2',
                      href: '#grandchild2',
                      icon: 'fa fa-file-o',
                      tags: ['0']
                    }
                  ]
                },
                {
                  text: 'Child 2',
                  href: '#child2',
                  icon: 'fa fa-file-o',
                  tags: ['0']
                }
              ]
            },
            {
              text: 'Parent 2',
              href: '#parent2',
              tags: ['0']
            },
            {
              text: 'Parent 3',
              href: '#parent3',
               tags: ['0']
            },
            {
              text: 'Parent 4',
              href: '#parent4',
              tags: ['0']
            },
            {
              text: 'Parent 5',
              href: '#parent5'  ,
              tags: ['0']
            }
          ];
          var json = '[' +
            '{' +
              '"text": "Parent 1",' +
              '"lazyLoad": true,' +
              '"nodes": [' +
                '{' +
                  '"text": "Child 1",' +
                  '"lazyLoad": true,' +
                  '"nodes": [' +
                    '{' +
                      '"icon": "fa fa-file-o",' +
                      '"text": "Grandchild 1"' +
                    '},' +
                    '{' +
                      '"icon": "fa fa-file-o",' +
                      '"text": "Grandchild 2"' +
                    '}' +
                  ']' +
                '},' +
                '{' +
                  '"icon": "fa fa-file-o",' +
                  '"text": "Child 2"' +
                '}' +
              ']' +
            '},' +
            '{' +
              '"text": "Parent 2"' +
            '},' +
            '{' +
              '"text": "Parent 3"' +
            '},' +
            '{' +
              '"text": "Parent 4"' +
            '},' +
            '{' +
              '"text": "Parent 5"' +
            '}' +
          ']';

          //Default
          $('#treeview1').treeview({
            collapseIcon: collapseIcon,
            data: defaultData,
            expandIcon: expandIcon,
            nodeIcon: nodeIcon,
            showBorder: false
          });

          //Collapsed
          $('#treeview2').treeview({
            collapseIcon: collapseIcon,
            data: defaultData,
            expandIcon: expandIcon,
            levels: 1,
            nodeIcon: nodeIcon,
            showBorder: false
          });

          //Expanded
          $('#treeview3').treeview({
            collapseIcon: collapseIcon,
            data: defaultData,
            expandIcon: expandIcon,
            levels: 99,
            nodeIcon: nodeIcon,
            showBorder: false
          });

          //Link Enabled
          $('#treeview4').treeview({
            collapseIcon: collapseIcon,
            data: defaultData,
            enableLinks: true,
            expandIcon: expandIcon,
            levels: 99,
            nodeIcon: nodeIcon,
            showBorder: false
          });

          //Events
          $('#treeview5').treeview({
            collapseIcon: collapseIcon,
            data: defaultData,
            expandIcon: expandIcon,
            levels: 99,
            nodeIcon: nodeIcon,
            showBorder: false,
            onNodeSelected: function(event, node) {
              $('#event_output').prepend('<p>You clicked ' + node.text + '</p>');
            }
          });

          //JSON Data
          $('#treeview6').treeview({
            collapseIcon: collapseIcon,
            data: json,
            expandIcon: expandIcon,
            levels: 99,
            nodeIcon: nodeIcon,
            showBorder: false
          });

          //Checkboxes
          $('#treeview7').treeview({
            collapseIcon: collapseIcon,
            data: json,
            expandIcon: expandIcon,
            levels: 99,
            nodeIcon: nodeIcon,
            checkedIcon: checkedIcon,
            uncheckedIcon: uncheckedIcon,
            partiallyCheckedIcon: partiallyCheckedIcon,
            showBorder: false,
            showCheckbox: true,
            checkboxFirst: true,
            wrapNodeText: true
          });

          //Hierarchal Checks
          $('#treeview8').treeview({
            collapseIcon: collapseIcon,
            data: json,
            expandIcon: expandIcon,
            levels: 99,
            nodeIcon: nodeIcon,
            checkedIcon: checkedIcon,
            uncheckedIcon: uncheckedIcon,
            partiallyCheckedIcon: partiallyCheckedIcon,
            showBorder: false,
            showCheckbox: true,
            hierarchicalCheck: true,
            checkboxFirst: true,
            wrapNodeText: true
          });

          //Highlight Select
          $('#treeview9').treeview({
            collapseIcon: collapseIcon,
            data: json,
            expandIcon: expandIcon,
            levels: 99,
            nodeIcon: nodeIcon,
            checkedIcon: checkedIcon,
            uncheckedIcon: uncheckedIcon,
            partiallyCheckedIcon: partiallyCheckedIcon,
            showBorder: false,
            showCheckbox: true,
            hierarchicalCheck: true,
            checkboxFirst: true,
            wrapNodeText: true,
            highlightChanges: true,
            changedNodeColor: $.pfPaletteColors.black900
          });

          //Lazy Load
          $('#treeview10').treeview({
            collapseIcon: collapseIcon,
            data: json,
            expandIcon: expandIcon,
            levels: 1,
            nodeIcon: nodeIcon,
            showBorder: false,
            wrapNodeText: true,
            loadingIcon: loadingIcon,
            lazyLoad: function(node, callback){
              setTimeout(function() {
                callback([]);
              }, 2000);
            }
          });

          //Prevent Unselection
          $('#treeview11').treeview({
            collapseIcon: collapseIcon,
            data: json,
            expandIcon: expandIcon,
            levels: 99,
            nodeIcon: nodeIcon,
            showBorder: false,
            preventUnselect: true
          });

          //Disabled Nodes
          var tree12 = $('#treeview12').treeview({
            collapseIcon: collapseIcon,
            data: json,
            expandIcon: expandIcon,
            levels: 99,
            nodeIcon: nodeIcon,
            showBorder: false,
            onInitialized: function() {
              tree12.treeview('disableAll');
            }
          });

          //Hover and Select
          $('#treeview13').treeview({
            collapseIcon: collapseIcon,
            data: defaultData,
            expandIcon: expandIcon,
            nodeIcon: nodeIcon,
            showBorder: false
          });

        });
      </script>