Create Plain Checkbox Tree View Using jQuery Checktree Plugin

by

Here one more example of creating simple plain tree view for your application it is helpful to create a organisation chart that displays your organisation hierarchical data in a tree structure with checkboxes. It’ll display cool nice view for hierarchical data with checked all sub tree data see example below.
tree-view-checkbox


Create Plain Checkbox Tree View Using jQuery Checktree Plugin

Libraries

Include required libraries on page.

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="checktree.js"></script>

HTML

Markup HTML for tree view with selectable checkboxes feature.

<ul class="checktree">
				<li>
				<input id="administration" type="checkbox" /><label for="administration">Administration</label>
				<ul>
					<li>
						<input id="president" type="checkbox" /><label for="president">President</label>
						<ul>
							<li>
								<input id="manager1" type="checkbox" /><label for="manager1">Manager 1</label>
								<ul>
									<li><input id="assistantmanager1" type="checkbox" /><label for="assistantmanager1">Assistant Manager 1</label></li>
									<li><input id="assistantmanager2" type="checkbox" /><label for="assistantmanager2">Assistant Manager 2</label></li>
									<li><input id="assistantmanager3" type="checkbox" /><label for="assistantmanager3">Assistant Manager 3</label></li>
								</ul>
							</li>
							<li><input id="manager2" type="checkbox" /><label for="manager2">Manager 2</label></li>
							<li><input id="manager3" type="checkbox" /><label for="manager3">Manager 3</label></li>
						</ul>
					</li>
					<li>
						<input id="vicepresident" type="checkbox" /><label for="vicepresident">Vice President</label>
						<ul>
							<li><input id="manager4" type="checkbox" /><label for="manager4">Manager 4</label></li>
							<li><input id="manager5" type="checkbox" /><label for="manager5">Manager 5</label></li>
							<li><input id="manager6" type="checkbox" /><label for="manager6">Manager 6</label></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>



CSS

Styling tree view and checkboxes

<style>
body{
	width: 1100px;
	margin: 0 auto;
}
ul{
	list-style-type: none;
	margin: 3px;
}
ul.checktree li:before{
	height: 1em;
	width: 12px;
	border-bottom: 1px dashed;
	content: "";
	display: inline-block;
	top: -0.3em;
}
ul.checktree li{
	border-left: 1px dashed;
}
ul.checktree li:last-child:before {
	border-left: 1px dashed;
}
ul.checktree li:last-child{
	border-left: none;
}
</style>

JS

Finally call the plugin function on page to make it actionable.

<script>
	$(function(){
		$("ul.checktree").checktree();
	}); 
</script>

See demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates



Published by Rohit