JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://flashjunior.ch/test/trees/jstree/jquery.jstree.js"></script>
<div id="tree"></div>
JavaScript
var data =[
{
"data" : "weekdasdaly",
"attr":{"rel":"directory"},
"children" : [ {"data":"w-file1","attr":{"rel":"file"}}, {"data":"w-file2","attr":{"rel":"disabled"}} ]
},
{
"data" : "daily",
"attr":{"rel":"directory"},
"children" : [ {"data":"d-file1","attr":{"rel":"file"}}, {"data":"d-file2","attr":{"rel":"file"}} ]
}
]
;
$(document).ready(function(){
$(":button, .run").click(function(){
var params = $(this).val();
document.getElementById("results").innerHTML+="<BR>number of checked: ";
checked = $("#tree").jstree("get_checked",null,true) ; document.getElementById("results").innerHTML+=checked.length+"";
checked.each(function () {
var node = $(this);
var name = node.children("a").text();
var rel = node.attr('rel');
document.getElementById("results").innerHTML+="<BR>"+name+": "+rel;
});
});
});
$("#tree").jstree({
plugins: ['themes', 'json_data', 'checkbox',"types"],
json_data: {data: data},
themes: {
theme: 'default'
},
checkbox: {
real_checkboxes: true,
two_state: true
},
"types":{
"types":{
"disabled" : {
"check_node" : false,
"uncheck_node" : false
} ,
"directory" : {
"check_node" : false,
"uncheck_node" : false
}
}
}
});