jquery.listtree.js

by edgardleal

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.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

/*!
 * jQuery Tree View Plugin
 *
 */

(function ($) {
    var template = '\
    	<% var cont = 0; %>\
    	<ul>\
			<table border="0" width="100%" style="background-color: lightgray;">\
				<tr style="font-weight: bold;">\
					<td width="2%">&nbsp;</td>\
					<td width="18%">Coluna1</td>\
					<td width="10%">Coluna2</td>\
					<td width="40%">Coluna3</td>\
					<td width="20%">Coluna4</td>\
					<td width="10%">&nbsp;</td>\
				</tr>\
			</table>\
            <% _.each(context, function(parent, index) { %>\
            <li>\
                <span><table border="0" width="100%" style="font-weight: normal;"><tr><td width="2%"><input type="checkbox" \
                <% var ps; %>\
                <% if ( !_.isUndefined(ps = _.find(options.selected, function(elem) { return elem.key === this.key; }, parent)) ) { %>\
                <% } %> value="<%= parent.key %>" /> <%= parent.key %></td><td width="10%"><i class="icon-chevron-up icon-black"></i></td></tr></table></span>\
                <% if (options.startCollapsed) { %>\
					<ul style="display: none;">\
                <% } else { %>\
					<ul>\
                <% } %>\
					<table border="0" width="100%">\
						<tr style="font-weight: bold;">\
							<td width="2%">&nbsp;</td>\
							<td width="12%">&nbsp;&nbsp;&nbsp;&nbsp;Pedido</td>\
							<td width="12%">&nbsp;&nbsp;&nbsp;CEP</td>\
							<td width="12%">&nbsp;&nbsp;Bairro</td>\
							<td width="40%">&nbsp;Ocupacao</td>\
							<td width="12%">Data</td>\
    						<td width="10%">&nbsp;</td>\
						</tr>\
			    	</table>\
					<% _.each(parent.values, function(child, index) { %>\
					<li>\
						<span><table border="0" width="100%"><tr><td width="2%"><input type="checkbox" \
						<% var ps1; %>\
						<% if ( !_.isUndefined(ps1 = _.find(options.selected, function(elem) { return elem.key === this.key; }, child)) ) { %>\
						<% } %> value="<%= child.key %>" /></td> <%= child.key %><td width="10%"><i class="icon-chevron-up...