jstree inline HTML demo
HTML
<script src="https://static.jstree.com/latest/assets/dist/jstree.min.js"></script>
<link rel="stylesheet" href="https://static.jstree.com/latest/assets/dist/themes/default/style.min.css">
<div id="container">
</div>
JavaScript
let menus = [
{
'text' : 'node1',
'state' : {
'selected' : true
}
},
{
'text' : 'node2',
'state' : {
'opened' : true,
'selected' : true
},
'children' : [
{ 'text' : 'Child 1' },
'Child 2'
]
},
{
'text' : 'node3',
'state' : {
'selected' : true
}
},
{
'text' : 'node4',
'state' : {
'selected' : true
}
},
{
'text' : 'node5',
'state' : {
'selected' : true
}
},
{
'text' : 'node6',
'state' : {
'selected' : true
}
},
{
'text' : 'node7',
'state' : {
'selected' : true
}
},
{
'text' : 'node8',
'state' : {
'selected' : true
}
},
{
'text' : 'node9',
'state' : {
'selected' : true
}
},
{
'text' : 'node10',
'state' : {
'selected' : true
}
},
{
'text' : 'node11',
'state' : {
'selected' : true
}
},
{
'text' : 'node12',
'state' : {
'selected' : true
}
},
{
'text' : 'node13',
'state' : {
'selected' : true
}
},
];
$('#container').jstree({
"plugins" : ["checkbox"],
"core":{
data: menus
}
});