Fancytree - Init from Ajax request
This sample includes all options (with their default values) to allow playing with them.
HTML
<link rel="stylesheet" href="https://rawgithub.com/mar10/fancytree/master/src/skin-win8/ui.fancytree.css">
<script src="https://rawgithub.com/mar10/fancytree/master/src/jquery.fancytree.js"></script>
<div id="tree"></div>
<div id="statusLine">-</div>
<button id="button1">Toggle item2</button>
JavaScript
/*
This test data is only used to mock-up the Ajax reuqest with jsFiddle's echo feature.
A real handler would return the equivalent JSON.
*/
var AJAX_RESPONSE = [
{title: "node 1", key: "id1"},
{title: "node 2", key: "id2"}
];
var FAKE_REQUEST = {
url: "/echo/json/",
type: "POST",type: "POST",
data: {
json: JSON.stringify(AJAX_RESPONSE),
delay: 1
}
};
/*
End of mock-up code
*/
$(function(){
// Initialize the tree from the <ul> tag inside <div id='tree'>
$("#tree").fancytree({
source: $.ajax(FAKE_REQUEST),
checkbox: true,
activate: function(e, data){
$("div#statusLine").text("Active node: " + data.node);
}
});
// Activate a node, on button click
$("button#button1").click(function(){
var tree = $("#tree").fancytree("getTree"),
node2 = tree.getNodeByKey("id2");
node2.toggleSelected();
});
});