causeway-standard-theme/causeway/docs/components/treelist.html

<div class="container page shell-left-navigation">
  <div class="navigation-pane-left">
    <div class="navigation-content-wrapper">
      <div class="navigation-header">
        <h2>Tree View</h2>
      </div>
      <div class="navigation-content">
        <div class="tree-view">
          <ul>
            <li><a href="#">Goes somewhere</a></li>
            <li class="parent_li">
              <div class="leaf-content" href="#">
                <span class="text">Goes somewhere Goes somewhere Goes somewhere Goes somewhere Goes somewhere</span>
                <span class="glyphicon glyphicon-user"></span>
                <span class="glyphicon glyphicon-remove-circle"></span>
              </div>
              <ul>
                <li>
                  <a href="#">Goes somewhere</a>
                </li>
              </ul>
            </li>
            <li class="parent_li">
              <a href="#">Goes somewhere</a>
              <ul>
                <li class="parent_li">
                  <a href="#">Goes somewhere</a>
                  <ul>
                    <li>
                      <a href="#">Goes somewhere</a>
                    </li>
                  </ul>
                </li>
                <li class="parent_li">
                  <a href="#">Goes somewhere</a>
                  <ul>
                    <li class="active">
                      <a href="#">Goes somewhere Goes somewhere Goes somewhere Goes somewhere Goes somewhere Goes somewhere </a>
                    </li>
                    <li class="parent_li">
                      <a href="#">Goes somewhere</a>
                      <ul>
                        <li class="parent_li">
                          <a href="#">Goes somewhere</a>
                          <ul>
                            <li>
                              <a href="#">Goes somewhere</a>
                            </li>
                            <li>
                              <a href="#">Goes somewhere</a>
                            </li>
                          </ul>
                        </li>
                        <li>
                          <a href="#">Goes somewhere</a>
                        </li>
                        <li>
                          <a href="#">Goes somewhere</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <div class="leaf-content" href="#">
                        <span class="text">Goes somewhere Goes somewhere Goes somewhere Goes somewhere Goes somewhere</span>
                        <span class="impend">7</span>
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="parent_li">
              <a href="">Goes somewhere</a>
              <ul>
                <li>
                  <a href="#">Goes somewhere</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="divider divider-navigation"></div>
  <div class="navigation-pane-right">
    <div class="pane">
      <a id="treelist"></a>

      <header class="content-header">
        <h1 class="title">Tree List</h1>
      </header>
      <div id="tl1" class="tree-list" data-treelist-buttons="true"></div>
      <div id="tl2" class="tree-list" data-treelist-buttons="true"></div>
      <div id="tl3" class="tree-list" data-treelist-buttons="true"></div>
      <h1 class="title">Code:</h1>
      <pre><code>
        &lt;div id=&quot;tl1&quot; class=&quot;tree-list&quot; data-treelist-buttons=&quot;true&quot;&gt;

        &lt;/div&gt;

        &lt;!-- Initialize --&gt;
        window.Causeway.treeList.init('#tl1', data, Options);
        Options object is optional.

        &lt;!--To get the updated JSON--&gt;
        window.Causeway.treeList.toJson('#tl1'); // This will return JSON Data
      </code></pre>
    </div>
  </div>
</div>