Blame |
Last modification |
View Log
| Download
| RSS feed
<!-- BEGIN PAGE BREADCRUMB -->
<ul class="page-breadcrumb breadcrumb">
<li>
<a href="#">Home
</a><i class="fa fa-circle"></i>
</li>
<li>
<a href="#">jQuery Plugins
</a><i class="fa fa-circle"></i>
</li>
<li class="active">
Tree View
</li>
</ul>
<!-- END PAGE BREADCRUMB -->
<!-- BEGIN MAIN CONTENT -->
<div class="row">
<div class="col-md-6">
<div class="portlet light">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs font-green-sharp"></i>
<span class="caption-subject font-green-sharp bold uppercase">Default Tree
</span>
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<div id="tree_1" class="tree-demo">
<ul>
<li>
Root node 1
<ul>
<li data-jstree='{ "selected" : true }'>
<a href="javascript:;">
Initially selected
</a>
</li>
<li data-jstree='{ "icon" : "fa fa-briefcase icon-state-success " }'>
custom icon URL
</li>
<li data-jstree='{ "opened" : true }'>
initially open
<ul>
<li data-jstree='{ "disabled" : true }'>
Disabled Node
</li>
<li data-jstree='{ "type" : "file" }'>
Another node
</li>
</ul>
</li>
<li data-jstree='{ "icon" : "fa fa-warning icon-state-danger" }'>
Custom icon class (bootstrap)
</li>
</ul>
</li>
<li data-jstree='{ "type" : "file" }'>
<a href="http://www.jstree.com">
Clickanle link node
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="portlet light">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs font-green-sharp"></i>
<span class="caption-subject font-green-sharp bold uppercase">Checkable Tree
</span>
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<div id="tree_2" class="tree-demo">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="portlet light">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs font-green-sharp"></i>
<span class="caption-subject font-green-sharp bold uppercase">Contextual Menu with Drag
& Drop</span>
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<div id="tree_3" class="tree-demo">
</div>
<div class="alert alert-success no-margin margin-top-10">
Note! Opened and selected nodes will be saved in the user's browser, so when returning to the same tree the previous state will be restored.
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="portlet light">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs font-green-sharp"></i>
<span class="caption-subject font-green-sharp bold uppercase">Ajax Tree with Drag
& Drop</span>
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<div id="tree_4" class="tree-demo">
</div>
<div class="alert alert-info no-margin margin-top-10">
Note! The tree nodes are loaded from demo/jstree_ajax_data.php via ajax.
</div>
</div>
</div>
</div>
</div>
<!-- END MAIN CONTENT -->
<script>
UITree.init(); // init todo page
</script>