jQuery / Twitter Bootstrap List Tree Plugin

https://gist.github.com/3317341

by Reusablecode

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="http://underscorejs.org/underscore-min.js"></script>
<div id="content">
    <div class="listTree"></div>
    <button class="btn btn-success">Check All</button>
    <button class="btn btn-danger">Un-Check All</button>
    <button class="btn btn-info">Expand All</button>
    <button class="btn btn-warning">Collapse All</button>
    <button class="btn btn-inverse">Change Data</button>

    <br /><br />
    
    <h4>Selection JSON:</h4>
    <pre id="selectionJson"></pre>
    <button class="btn btn-primary">Get JSON for selected nodes</button>
</div>

CSS

/* Don't mind me... */
#content {
    margin: 20px;
}

/* Relevant to the plugin. */
.listTree {
    margin-bottom: 18px;
}

.listTree ul {
    margin: 0;
}

.listTree li {
    list-style-type: none;
}

.listTree > ul > li {
    background-color: #eee;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #ddd;
}

.listTree > ul > li:first-child {
    border-width: 1px 1px 0 1px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.listTree > ul > li:last-child {
    border-width: 1px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.listTree > ul > li:last-child > ul > li:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.listTree span {
    display: inline-block;
    width: 100%;
    padding: 5px;
}

.listTree > ul > li > span {
    font-weight: bold;
}

.listTree > ul > li > ul > li {
    background-color: #fff;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #ddd;
    padding-left: 10px;
}

.listTree > ul > li > ul > li:first-child {
    border-width: 1px 0 0 0;
}

.listTree > ul > li > ul > li:last-child {
    border-width: 1px 0 0 0;
}

.listTree i {
    float: right;
    margin-right: 15px;
}

JavaScript

(function($) {
    var template = '\
        <ul>\
            <% _.each(context, function(parent, index) { %>\
            <li>\
                <span><input type="checkbox" \
                <% var ps; %>\
                <% if ( !_.isUndefined(ps = _.find(options.selected, function(elem) { return elem.key === this.key; }, parent)) ) { %>\
                checked="checked"\
                <% } %> value="<%= parent.key %>" /> <%= parent.key %><i class="icon-chevron-up icon-black"></i></span>\
                <% if (options.startCollapsed) { %>\
                <ul style="display: none;">\
                <% } else { %>\
                <ul>\
                <% } %>\
                    <% _.each(parent.values, function(child, index) { %>\
                    <li>\
                        <span><input type="checkbox" \
                        <% if ( !_.isUndefined(this) && !_.isUndefined(_.find(this.values, function(elem) { return elem.key === this.key; }, child)) ) { %>\
                        checked="checked"\
                        <% } %> value="<%= child.key %>" /> <%= child.key %></span>\
                    </li>\
                    <% }, ps); %>\
                </ul>\
            </li>\
            <% }); %>\
        </ul>';
    
    /** Check all child checkboxes.
     * @param jQElement The parent <li>.
     */
    function _selectAllChildren(jQElement) {
        jQElement.find('ul > li > span > input[type="checkbox"]')
            .each(function() {
                $(this).prop('checked', true);
            });
    }
    
    /** Uncheck all child checkboxes.
     * @param jQElement The parent <li>.
     */
    function _deselectAllChildren(jQElement) {
        jQElement.find('ul > li > span > input[type="checkbox"]')
            .each(function() {
                $(this).prop('checked', false);
            });
    }
    
    /** Toggle all checkboxes.
     * @param[in] jQElement The root <ul> of the list.
     */
    function...