jsTree & ajax json call
how to set up ajax call to get data for results nodes
by axman
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.0/jstree.min.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>
<label>View</label>
<div id="filterDisplay">
<input type="checkbox" name="toc" value="toc" checked="checked" />Toc
<br/>
<input type="checkbox" name="name" value="name" checked="checked" />Name
<br/>
<input type="checkbox" name="keywords" value="keywords" />Keywords
<br/>
</div>
</div>
<div id="jstree"></div>
JavaScript
data = [{
"data": "Basics",
"state": "closed",
"children": [{
"data": "Fire",
"state": "closed",
"children": ["login", {
"data": "alarm fire",
"attr": {
'data-filter': 'sam alarm fire',
'data-name': 'alarm fire',
'data-keywords': 'sam',
'data-toc': '1.58'
},
"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"
}]
}]
}]
$.expr[':'].jstree_contains_all = function (a, i, m) {
console.log($(a).parent().data('filter'))
var word, words = [];
var searchFor = m[3].toLowerCase().replace(/^\s+/g, '').replace(/\s+$/g, '');
if (searchFor.indexOf(' ') >= 0) {
words = searchFor.split(' ');
} else {
words = [searchFor];
}
return true;
};
$.expr[':'].jstree_contains_any = function (a, i, m) {
var word, words = [];
var searchFor = m[3].toLowerCase().replace(/^\s+/g, '').replace(/\s+$/g, '');
if (searchFor.indexOf(' ') >= 0) {
words = searchFor.split(' ');
} else {
...