Checkable And Collapsible jQuery Tree View Plugin - Treeview

Yet another jQuery tree view plugin which converts a nested html list into an animated, collapsible tree structure with support for checkboxes and auto expanding.

How to use it:

1. Include the required Font Awesome 4 and Bootstrap's stylehsheet in the head section of your webpage.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/bfont-awesome.min.css">

2. Create a basic tree view from nested html lists as follows:

<div id="treeview-container">
  <ul>
    <li>Item 1</li>
    <li>Item 2
      <ul>
        <li>Item 2.1</li>
        <li>Item 2.2
          <ul>
            <li data-value="2.2.1">Item 2.2.1</li>
            <li data-value="2.2.2">Item 2.2.2</li>
            <li data-value="2.2.3">Item 2.2.3</li>
          </ul>
        </li>
          <li>Item 2.3</li>
      </ul>
    </li>
    <li>Item 3
      <ul>
        <li data-value="3.1">Item 3.1</li>
        <li data-value="3.2">Item 3.2</li>
      </ul>
    </li>
  </ul>
</div>

3. Include jQuery library and other required resources at the bottom of the webpage.

<script src="/path/to/jquery.min.js"></script>
<script src="src/logger.min.js"></script>
<script src="src/treeview.min.js"></script>

4. Initialize the plugin and specify the pre-checked values.

$('#treeview-container').treeview({
  data : ['3.2', '2.2.3']
});

5. Output the selected values.

$('#output').text(
  $('#treeview-container').treeview('selectedValues')
);

---

This awesome jQuery plugin is developed by javiertrejo. For more Advanced Usages, please check the demo page or visit the official website.