How to refresh `ajax` node on click?
There are some nodes that get data from AJAX call in my jsTree.
How can I refresh the data and NOT by reloading the whole tree?
- the best would be simple click on开发者_StackOverflow the node I wish to refresh
- context menu is ok too
How about this?
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jstree.js"></script>
<script>
var treeConfig = {
"json_data" : {
"data" : [{
"data" : "Root",
"state" : "closed",
"children" : ""
}],
"ajax" : {
"url" : "http://localhost/tree.json",
"data" : function (node) {
return { query : "Value" };
}
}
},
"plugins" : [ "themes", "json_data", "ui" ],
};
$(document).ready(function(){
$("#treeContainer").jstree(treeConfig);
$('#treeContainer a').live('click',function(){
var tree = jQuery.jstree._reference("#treeContainer");
var currentNode = tree._get_node(null, false);
tree.refresh(currentNode);
});
});
</script>
</head>
<body>
<div id="treeContainer"></div>
</body>
</html>
Here's what I'm doing:
- using the JSON data plugin (but the concept is similar for HTML and XML plugins)
- loading the initial tree node ("Root") from the data config object
- setting the AJAX config object so all other nodes request their child data via ajax, when initially opened (applies to any node where 'state' is 'closed' and 'children' is 'empty')
- using the AJAX data function to pass the correct query string to get relevant data for the node being opened. My example always fetches http://localhost/tree.json?query=Value but you probably want to do something like set Value to the node id so the server sends back relevant data.
So far this makes an ajax request for the node data only the first time the node is opened. The final step is:
- create a click function which causes a single node to refresh its data every time it is clicked
加载中,请稍侯......
精彩评论