jsTree & ajax json call
how to set up ajax call to get data for results nodes
by masteram
HTML
<script src=" <script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.js"></script> <script type="text/javascript" src="http://static.jstree.com/v.1.0pre/_docs/syntax/!script.js"></script> <script type="text/javascript" src="http://static.jstree.c"></script>
<script src="http://static.jstree.com/v.1.0pre/jquery.hotkeys.js"></script>
<script src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div>
<input type="text" id="searchtext" value="" size="5" />
<button id="filter" class="button">filter</button>
<button id="reset" class="button">reset</button>
<button id="checked" class="button">checked</button>
</div>
<div id="jstree"></div>
JavaScript
data = [{
"data": "Basics",
"state": "closed",
"children": [{
"data": "login",
"state": "closed",
"children": ["login", {
"data": "results",
"state": "closed"
}]
},
{
"data": "Basics",
"state": "closed",
"children": ["login", "something", {
"data": "results",
"state": "closed"
}]
}]
}, {
"data": "All",
"state": "closed",
"children": [{
"data": "AddCustomer",
"state": "closed",
"children": ["login", "Add", {
"data": "results",
"state": "closed"
}]
}]
}]
myTree = $("#jstree").jstree({
"json_data": {
"data": data
},
"plugins": ["themes", "json_data", "ui", "search", "core", "hotkeys", "adv_search", 'checkbox', 'crrm'],
"search": {
"case_insensitive": true,
"show_only_matches": true
},
"ui": {
"select_limit": 1,
},
'hotkeys': {
'down': function () {
var o = this.data.ui.hovered || this.data.ui.last_selected || -1,
node = this._get_next(o);
this.hover_node(node);
if (node && node.is(':hidden')) arguments.callee.call(this);
return false;
}
}
}).bind("select_node.jstree", function (e, data) {
var isOpen = data.rslt.obj.hasClass("jstree-open");
console.log(data, 'selection is ' + (isOpen ? 'open' : 'closed'));
});
$("#reset").click(function () {
$("#jstree").jstree("clear_search");
});
$("#filter").click(function () {
$("#jstree").jstree("search", $("#searchtext").val());
});
$("#checked").click(function () {
console.log($.jstree.get_checked("#jstree", true));
});
/*
$(function () {
$("#tree").jstree({
"json_data" : {
"data" : [
{
data : "/",
...