Select channel - jsTree checkbox
Using jQuery 2.1.0 and jsTree 3.1.0 to dynamically add nodes to a tree after the 'ready.jstree' event.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.0/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.0/themes/default/style.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<div class="dropdown btn-group"> <a class="btn dropdown-toggle btn-primary" data-toggle="dropdown" href="#">
Chuyên mục
<span class="caret"></span>
</a>
<div class="keep-open dropdown-menu ">
<div class="container scrollable-menu">
<div id="jstree"></div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<button id="apply" class="btn btn-sm btn-block">Apply</button>
</div>
</div>
</div>
</div>
<div class="container" style="margin-top: 300px;">
<button id="enable-btn">Enable tree</button>
<button id="disable-btn">Disable tree (2 level)</button>
</div>
CSS
#jstree {
min-height: 200px;
min-width: 200px;
}
.scrollable-menu {
width: 250px;
}
.dropdown-menu {
padding-bottom: 0px;
}
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
JavaScript
// Setup the jsTree.
$(function () {
$(document).on('click', '.dropdown-menu', function (e) {
$(this).hasClass('keep-open') && e.stopPropagation(); // This replace if conditional.
});
$('#enable-btn').click(function(e) {
$('i.jstree-ocl').show();
$('.dropdown-menu').hasClass('keep-open') && e.stopPropagation(); // This replace if conditional.
});
$('#disable-btn').click(function(e) {
$('i.jstree-ocl').hide();
$('.dropdown-menu').hasClass('keep-open') && e.stopPropagation(); // This replace if conditional.
});
$('#apply').on('click', function (e) {
var ids = $('#jstree').jstree("get_selected");
console.log(JSON.stringify(ids));
});
var jstree = $('#jstree').jstree({
"checkbox": {
"keep_selected_style": false
},
'plugins': ["checkbox"],
'core': {
'dblclick_toggle': false,
"themes": {
"theme": "classic",
"dots": false,
//"variant": "small",
"icons": false,
},
'data': [{
"id": "channel_0",
"state": {
"opened": true
},
"text": "Phim truyện",
"children": [{
"text": "Hài",
"id": "sub_0_0"
}, {
"text": "Tâm lý",
"id": "sub_0_1"
}, {
"text": "Phim bộ",
"id": "sub_0_2",
"children": [{
"text": "Hàn Quốc",
"id": "sub_0_2_0"
}, {
"text": "Nhật Bản",
"id": "sub_0_2_1"
}]
}]
}, {
"id": "channel_1",
"state":...