Basic Example 1
- xhtml
- css
- icons
- avasta
- feather
- flaticon
- font-awesome-old
- helveticaNeue
- icomoon
- line-awesome
- material-design-iconic-font
- simple-line-icons
- themify-icons
- images
- avatar
- big
- card
- product
- profile
- tab
- js
- dashboard
- plugins-init
- scss
- abstracts
- base
- components
- app
- charts
- forms
- ico
- map
- tables
- uc
- ui
- widget
- layout
- footer
- header
- rtl
- sidebar
- theme
- typography
- version-dark
- version-transparent
- pages
- vendor
- amcharts
- animate
- aos
- apexchart
- bootstrap
- bootstrap4-notify
- bootstrap-daterangepicker
- bootstrap-material-datetimepicker
- bootstrap-multiselect
- bootstrap-select
- bootstrap-tagsinput
- bootstrap-touchspin
- bootstrap-v4-rtl
- chart.js
- chartist
- chartist-plugin-tooltips
- clockpicker
- datatables
- dropzone
- flot
- flot-spline
- fullcalendar
- global
- highlightjs
- jquery
- jquery-asColor
- jquery-asColorPicker
- jquery-asGradient
- jquery-sparkline
- jquery-steps
- jqueryui
- jquery-validation
- jqvmap
- metismenu
- moment
- morris
- nestable2
- nouislider
- peity
- perfect-scrollbar
- pickadate
- raphael
- select2
- summernote
- svganimation
- sweetalert2
- toastr
- wnumb
- index.html
- index-2.html
- market.html
- coin-details.html
- portofolio.html
- .....
<div id="dz_tree" class="tree-demo">
<ul>
<li data-jstree='{ "opened" : true }'>xhtml
<ul>
<li data-jstree='{ "selected" : false }'>css</li>
<li data-jstree='{ "selected" : false }'>icons
<ul>
<li data-jstree='{ "opened" : true }'>avasta</li>
<li data-jstree='{ "opened" : true }'>feather</li>
<li data-jstree='{ "opened" : true }'>flaticon</li>
<li data-jstree='{ "opened" : true }'>font-awesome-old</li>
<li data-jstree='{ "opened" : true }'>helveticaNeue</li>
<li data-jstree='{ "opened" : true }'>icomoon</li>
<li data-jstree='{ "opened" : true }'>line-awesome</li>
<li data-jstree='{ "opened" : true }'>material-design-iconic-font</li>
<li data-jstree='{ "opened" : true }'>simple-line-icons</li>
<li data-jstree='{ "opened" : true }'>themify-icons</li>
</ul>
</li>
<li data-jstree='{ "selected" : false }'>images
<ul>
<li data-jstree='{ "opened" : true }'>avatar</li>
<li data-jstree='{ "opened" : true }'>big</li>
<li data-jstree='{ "opened" : true }'>card</li>
<li data-jstree='{ "opened" : true }'>product</li>
<li data-jstree='{ "opened" : true }'>profile</li>
<li data-jstree='{ "opened" : true }'>tab</li>
</ul>
</li>
<li data-jstree='{ "selected" : false }'>js
<ul>
<li data-jstree='{ "opened" : true }'>dashboard</li>
<li data-jstree='{ "opened" : true }'>plugins-init</li>
</ul>
</li>
<li data-jstree='{ "selected" : false }'>scss
<ul>
<li data-jstree='{ "opened" : true }'>abstracts</li>
<li data-jstree='{ "opened" : true }'>base</li>
<li data-jstree='{ "selected" : false }'>components
<ul>
<li data-jstree='{ "opened" : true }'>app</li>
<li data-jstree='{ "opened" : true }'>charts</li>
<li data-jstree='{ "opened" : true }'>forms</li>
<li data-jstree='{ "opened" : true }'>ico</li>
<li data-jstree='{ "opened" : true }'>map</li>
<li data-jstree='{ "opened" : true }'>tables</li>
<li data-jstree='{ "opened" : true }'>uc</li>
<li data-jstree='{ "opened" : true }'>ui</li>
<li data-jstree='{ "opened" : true }'>widget</li>
</ul>
</li>
<li data-jstree='{ "selected" : false }'>layout
<ul>
<li data-jstree='{ "opened" : true }'>footer</li>
<li data-jstree='{ "opened" : true }'>header</li>
<li data-jstree='{ "opened" : true }'>rtl</li>
<li data-jstree='{ "opened" : true }'>sidebar</li>
<li data-jstree='{ "opened" : true }'>theme</li>
<li data-jstree='{ "opened" : true }'>typography</li>
<li data-jstree='{ "opened" : true }'>version-dark</li>
<li data-jstree='{ "opened" : true }'>version-transparent</li>
</ul>
</li>
<li data-jstree='{ "opened" : true }'>pages</li>
</ul>
</li>
<li data-jstree='{ "selected" : false }'>vendor
<ul>
<li data-jstree='{ "opened" : true }'>amcharts</li>
<li data-jstree='{ "opened" : true }'>animate</li>
<li data-jstree='{ "opened" : true }'>aos</li>
<li data-jstree='{ "opened" : true }'>apexchart</li>
<li data-jstree='{ "opened" : true }'>bootstrap</li>
<li data-jstree='{ "opened" : true }'>bootstrap4-notify</li>
<li data-jstree='{ "opened" : true }'>bootstrap-daterangepicker</li>
<li data-jstree='{ "opened" : true }'>bootstrap-material-datetimepicker</li>
<li data-jstree='{ "opened" : true }'>bootstrap-multiselect</li>
<li data-jstree='{ "opened" : true }'>bootstrap-select</li>
<li data-jstree='{ "opened" : true }'>bootstrap-tagsinput</li>
<li data-jstree='{ "opened" : true }'>bootstrap-touchspin</li>
<li data-jstree='{ "opened" : true }'>bootstrap-v4-rtl</li>
<li data-jstree='{ "opened" : true }'>chart.js</li>
<li data-jstree='{ "opened" : true }'>chartist</li>
<li data-jstree='{ "opened" : true }'>chartist-plugin-tooltips</li>
<li data-jstree='{ "opened" : true }'>clockpicker</li>
<li data-jstree='{ "opened" : true }'>datatables</li>
<li data-jstree='{ "opened" : true }'>dropzone</li>
<li data-jstree='{ "opened" : true }'>flot</li>
<li data-jstree='{ "opened" : true }'>flot-spline</li>
<li data-jstree='{ "opened" : true }'>fullcalendar</li>
<li data-jstree='{ "opened" : true }'>global</li>
<li data-jstree='{ "opened" : true }'>highlightjs</li>
<li data-jstree='{ "opened" : true }'>jquery</li>
<li data-jstree='{ "opened" : true }'>jquery-asColor</li>
<li data-jstree='{ "opened" : true }'>jquery-asColorPicker</li>
<li data-jstree='{ "opened" : true }'>jquery-asGradient</li>
<li data-jstree='{ "opened" : true }'>jquery-sparkline</li>
<li data-jstree='{ "opened" : true }'>jquery-steps</li>
<li data-jstree='{ "opened" : true }'>jqueryui</li>
<li data-jstree='{ "opened" : true }'>jquery-validation</li>
<li data-jstree='{ "opened" : true }'>jqvmap</li>
<li data-jstree='{ "opened" : true }'>metismenu</li>
<li data-jstree='{ "opened" : true }'>moment</li>
<li data-jstree='{ "opened" : true }'>morris</li>
<li data-jstree='{ "opened" : true }'>nestable2</li>
<li data-jstree='{ "opened" : true }'>nouislider</li>
<li data-jstree='{ "opened" : true }'>peity</li>
<li data-jstree='{ "opened" : true }'>perfect-scrollbar</li>
<li data-jstree='{ "opened" : true }'>pickadate</li>
<li data-jstree='{ "opened" : true }'>raphael</li>
<li data-jstree='{ "opened" : true }'>select2</li>
<li data-jstree='{ "opened" : true }'>summernote</li>
<li data-jstree='{ "opened" : true }'>svganimation</li>
<li data-jstree='{ "opened" : true }'>sweetalert2</li>
<li data-jstree='{ "opened" : true }'>toastr</li>
<li data-jstree='{ "opened" : true }'>wnumb</li>
</ul>
</li>
<li data-jstree='{ "type" : "file" }'>index.html</li>
<li data-jstree='{ "type" : "file" }'>index-2.html</li>
<li data-jstree='{ "type" : "file" }'>market.html</li>
<li data-jstree='{ "type" : "file" }'>coin-details.html</li>
<li data-jstree='{ "type" : "file" }'>portofolio.html</li>
<li data-jstree='{ "type" : "file" }'>.....</li>
</ul>
</li>
</ul>
</div>
<script>
$("#dz_tree").jstree({
"core": {
"themes": {
"responsive": false
}
},
"types": {
"default": {
"icon": "fa fa-folder"
},
"file": {
"icon": "fa fa-file-text"
}
},
"plugins": ["types"]
});
</script>
/* Code */
.code{
padding: 6px 12px;
background-color: #232323;
margin: 10px 0;
display: block;
color: #fff;
}
.jstree-default .jstree-anchor {
color: #3F4254;
padding: 0 8px 0 4px;
}
.jstree-default .jstree-icon {
color: #ffad0e;
font-size: 1.3rem;
}
.jstree-default .jstree-icon.fa {
font-size: 1.2rem;
}
.jstree-default .jstree-icon.la {
font-size: 1.5rem;
}
.jstree-default .jstree-disabled {
line-height: auto;
opacity: 0.7;
height: auto;
cursor: not-allowed;
}
.jstree-default .jstree-disabled .jstree-icon {
color: #3F4254;
}
.jstree-default .fa-file-text {
color: #969696;
}
.jstree-default .jstree-clicked {
border: 0;
box-shadow: none;
background: #F3F6F9;
-webkit-box-shadow: none;
}
.jstree-default .jstree-hovered {
box-shadow: none;
border: 0;
background-color: var(--light);
-webkit-box-shadow: none;
}
.jstree-default .jstree-wholerow-clicked,
.jstree-default .jstree-wholerow-clicked {
box-shadow: none;
background: #EBEDF3;
-webkit-box-shadow: none;
}
.jstree-default .jstree-wholerow-hovered,
.jstree-default.jstree-wholerow .jstree-wholerow-hovered {
border: 0;
box-shadow: none;
-webkit-box-shadow: none;
background-color: #F3F6F9;
}
.jstree-open > .jstree-anchor > .fa-folder:before {
content: "\f07c";
color:#ffad0e;
margin-left: 2px;
}
.jstree-open > .jstree-anchor > .la-folder:before {
margin-left: 2px;
color:#ffad0e;
content: "\f200";
}
.jstree-default .jstree-clicked{
background: transparent;
}
.jstree-anchor{
background: transparent;
margin: 0!important;
padding: 0!important;
color: var(--text-dark)!important;
}
Basic Example 2
- One
- Two
- Three
- Second-one
- Second-two
- Second-three
- Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
- Third-three
- Fourth-one
- Fourth-two
- Fourth-three
- Third-one
<div id="dz_tree-1">
<ul>
<li data-jstree='{ "opened" : true }'>One</li>
<li data-jstree='{ "opened" : true }'>Two</li>
<li data-jstree='{ "opened" : true }'>Three
<ul>
<li data-jstree='{ "opened" : true }'>Second-one</li>
<li data-jstree='{ "opened" : true }'>Second-two</li>
<li data-jstree='{ "opened" : true }'>Second-three
<ul>
<li data-jstree='{ "opened" : true }'>Third-one
<ul>
<li data-jstree='{ "opened" : true }'>Fourth-one</li>
<li data-jstree='{ "opened" : true }'>Fourth-two</li>
<li data-jstree='{ "opened" : true }'>Fourth-three</li>
</ul>
</li>
<li data-jstree='{ "opened" : true }'>Third-two</li>
<li data-jstree='{ "opened" : true }'>Third-three
<ul>
<li data-jstree='{ "opened" : true }'>Fourth-one</li>
<li data-jstree='{ "opened" : true }'>Fourth-two</li>
<li data-jstree='{ "opened" : true }'>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$('#dz_tree-1').jstree();
});
</script>
/* Code */
.code{
padding: 6px 12px;
background-color: #232323;
margin: 10px 0;
display: block;
color: #fff;
}
.jstree-default .jstree-anchor {
color: #3F4254;
padding: 0 8px 0 4px;
}
.jstree-default .jstree-icon {
color: #ffad0e;
font-size: 1.3rem;
}
.jstree-default .jstree-icon.fa {
font-size: 1.2rem;
}
.jstree-default .jstree-icon.la {
font-size: 1.5rem;
}
.jstree-default .jstree-disabled {
line-height: auto;
opacity: 0.7;
height: auto;
cursor: not-allowed;
}
.jstree-default .jstree-disabled .jstree-icon {
color: #3F4254;
}
.jstree-default .fa-file-text {
color: #969696;
}
.jstree-default .jstree-clicked {
border: 0;
box-shadow: none;
background: #F3F6F9;
-webkit-box-shadow: none;
}
.jstree-default .jstree-hovered {
box-shadow: none;
border: 0;
background-color: var(--light);
-webkit-box-shadow: none;
}
.jstree-default .jstree-wholerow-clicked,
.jstree-default .jstree-wholerow-clicked {
box-shadow: none;
background: #EBEDF3;
-webkit-box-shadow: none;
}
.jstree-default .jstree-wholerow-hovered,
.jstree-default.jstree-wholerow .jstree-wholerow-hovered {
border: 0;
box-shadow: none;
-webkit-box-shadow: none;
background-color: #F3F6F9;
}
.jstree-open > .jstree-anchor > .fa-folder:before {
content: "\f07c";
color:#ffad0e;
margin-left: 2px;
}
.jstree-open > .jstree-anchor > .la-folder:before {
margin-left: 2px;
color:#ffad0e;
content: "\f200";
}
.jstree-default .jstree-clicked{
background: transparent;
}
.jstree-anchor{
background: transparent;
margin: 0!important;
padding: 0!important;
color: var(--text-dark)!important;
}
Basic Example 3
- One
- Two
- Three
- Second-one
- Second-two
- Second-three
- Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
- Third-three
- Fourth-one
- Fourth-two
- Fourth-three
- Third-one
<div id="dz_tree-2">
<ul>
<li data-jstree='{ "opened" : true }'>One</li>
<li data-jstree='{ "opened" : true }'>Two</li>
<li data-jstree='{ "opened" : true }'>Three
<ul>
<li data-jstree='{ "opened" : true }'>Second-one</li>
<li data-jstree='{ "opened" : true }'>Second-two</li>
<li data-jstree='{ "opened" : true }'>Second-three
<ul>
<li data-jstree='{ "opened" : true }'>Third-one
<ul>
<li data-jstree='{ "opened" : true }'>Fourth-one</li>
<li data-jstree='{ "opened" : true }'>Fourth-two</li>
<li data-jstree='{ "opened" : true }'>Fourth-three</li>
</ul>
</li>
<li data-jstree='{ "opened" : true }'>Third-two</li>
<li data-jstree='{ "opened" : true }'>Third-three
<ul>
<li data-jstree='{ "opened" : true }'>Fourth-one</li>
<li data-jstree='{ "opened" : true }'>Fourth-two</li>
<li data-jstree='{ "opened" : true }'>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script>
$('#dz_tree-2').jstree({
"plugins": ["checkbox"],
"checkbox": {
"three_state": false,
"cascade": "down"
},
"core": {
"themes": {
"responsive": false
}
}
});
</script>
/* Code */
.code{
padding: 6px 12px;
background-color: #232323;
margin: 10px 0;
display: block;
color: #fff;
}
.jstree-default .jstree-anchor {
color: #3F4254;
padding: 0 8px 0 4px;
}
.jstree-default .jstree-icon {
color: #ffad0e;
font-size: 1.3rem;
}
.jstree-default .jstree-icon.fa {
font-size: 1.2rem;
}
.jstree-default .jstree-icon.la {
font-size: 1.5rem;
}
.jstree-default .jstree-disabled {
line-height: auto;
opacity: 0.7;
height: auto;
cursor: not-allowed;
}
.jstree-default .jstree-disabled .jstree-icon {
color: #3F4254;
}
.jstree-default .fa-file-text {
color: #969696;
}
.jstree-default .jstree-clicked {
border: 0;
box-shadow: none;
background: #F3F6F9;
-webkit-box-shadow: none;
}
.jstree-default .jstree-hovered {
box-shadow: none;
border: 0;
background-color: var(--light);
-webkit-box-shadow: none;
}
.jstree-default .jstree-wholerow-clicked,
.jstree-default .jstree-wholerow-clicked {
box-shadow: none;
background: #EBEDF3;
-webkit-box-shadow: none;
}
.jstree-default .jstree-wholerow-hovered,
.jstree-default.jstree-wholerow .jstree-wholerow-hovered {
border: 0;
box-shadow: none;
-webkit-box-shadow: none;
background-color: #F3F6F9;
}
.jstree-open > .jstree-anchor > .fa-folder:before {
content: "\f07c";
color:#ffad0e;
margin-left: 2px;
}
.jstree-open > .jstree-anchor > .la-folder:before {
margin-left: 2px;
color:#ffad0e;
content: "\f200";
}
.jstree-default .jstree-clicked{
background: transparent;
}
.jstree-anchor{
background: transparent;
margin: 0!important;
padding: 0!important;
color: var(--text-dark)!important;
}
Basic Example 4
- One
- Two
- Three
- Second-one
- Second-two
- Second-three
- Third-one
- Third-two
- Third-three
- Fourth-one
- Fourth-two
- Fourth-three
<div id="dz_tree-3">
<ul>
<li data-jstree='{ "opened" : true }'>One</li>
<li data-jstree='{ "opened" : true }'>Two</li>
<li data-jstree='{ "opened" : true }'>Three
<ul>
<li data-jstree='{ "opened" : true }'>Second-one</li>
<li data-jstree='{ "opened" : true }'>Second-two</li>
<li data-jstree='{ "opened" : true }'>Second-three
<ul>
<li data-jstree='{ "opened" : true }'>Third-one
<ul>
<li data-jstree='{ "opened" : true }'>Fourth-one</li>
<li data-jstree='{ "opened" : true }'>Fourth-two</li>
<li data-jstree='{ "opened" : true }'>Fourth-three</li>
</ul>
</li>
<li data-jstree='{ "opened" : true }'>Third-two</li>
<li data-jstree='{ "opened" : true }'>Third-three
<ul>
<li data-jstree='{ "opened" : true }'>Fourth-one</li>
<li data-jstree='{ "opened" : true }'>Fourth-two</li>
<li data-jstree='{ "opened" : true }'>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script>
$('#dz_tree-3').jstree({
"core": {
"themes": {
"responsive": false
}
}
});
</script>