I created a diagram of a tree in jstree. Because I have a lot of nodes data I want the load to be lazy. How is it possible that with every click on a parent there will be a call to mysql database and the children's will be retrieved?
Like this idea: How to only display a TreeView expand sign [+] if children exist
Thank you!
$('#tree').jstree({
'core': {
'data': {
// This is the API URL for processing child nodes
'url': '/get/children/',
// This method is used to to prepare query data
'data': function (node) {
// This will add a query `?id=node_id_value`
// Add your own query data as per the requirement of API endpoint for processing
return { 'id': node.id };
}
}
}
});
The url
property is to mention the URL to contact for children nodes, and the data
function which runs over a clicked tree node to prepare query data to pass with URL.
Below are demo API endpoints from JSTREE for lazy loading
API endpoint: https://www.jstree.com/fiddle/?lazy&id=%23
[
{
"id": 1,
"text": "Root node",
// Children of root node
"children": [
{
"id": 2,
"text": "Child node 1",
"children": true // Child node 1 still has to be loaded lazily
},
{
"id": 3,
"text": "Child node 2"
}
]
}
]
API endpoint: https://www.jstree.com/fiddle/?lazy&id=2
This will load the children node details, as the id 2
is of Child node 1
children
property is considered as the final node in the tree branch.children
property of a node is either an array of nodes to render child nodes immediately or, a boolean true
for loading children lazily.id
which is to be unique per node, so that the node id could be used at API endpoint for processing respective child nodes. Added a sample snippet to identify whether the selected node has children or not with event changed.jstree
$(function () { $('#lazy').jstree({ 'core': { 'data': { "url": "//www.jstree.com/fiddle/?lazy", "data": function (node) { return { "id": node.id, "noCache": Date.now() }; } } } }); $('#lazy').on('changed.jstree', function (e, data) { if (data.selected.length) { var selected = data.instance.get_node(data.selected[0]); var hasChildren =.selected.state.loaded || selected.children;length > 0. console.log(`Selected = ${selected,text}; hasChildren = ${hasChildren}`); } }) });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/jstree.min.js" integrity="sha512-bU6dl4fd2XN3Do3aWypPP2DcKywDyR3YlyszV+rOw9OpglrGyBs6TyTsbglf9umgE+sy+dKm1UHhi07Lv+Vtfg==" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/themes/default/style.min.css" integrity="sha512-P8BwDSUInKMA7I116Z1RFg/Dfk85uFdliEUYO7vQlwtxLVMNvZimfMAQsaf++9EhlAGOVX6yhDQAIY3/70jDUg==" crossorigin="anonymous" /> <div id="lazy" class="demo"></div>
Hope that this information helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.