jQuery TreeTable Add Node via ajax
Add Node via ajax with jQuery TreeTable.
HTML
<script src="http://ludo.cubicphuse.nl/jquery-treetable/jquery.treetable.js"></script>
<link rel="stylesheet" href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.css">
<link rel="stylesheet" href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.theme.default.css">
<div id="loadingImage" style="display: none">
<img src="//i.stack.imgur.com/FhHRx.gif" />
</div>
<table id="example-basic" >
<caption>
<a href="#" onclick="jQuery('#example-basic').treetable('expandAll'); return false;">Expand all</a>
<a href="#" onclick="jQuery('#example-basic').treetable('collapseAll'); return false;">Collapse all</a>
</caption>
<thead>
<tr>
<th>Tree column</th>
<th>Additional data</th>
</tr>
</thead>
<tbody>
<tr data-tt-id="1" data-tt-branch='true'>
<td>1: column 1</td>
<td>1: column 2</td>
</tr>
<tr data-tt-id="2" data-tt-branch='true'>
<td>2: column 1</td>
<td>2: column 2</td>
</tr>
<tr data-tt-id="3" data-tt-branch='true'>
<td>3: column 1</td>
<td>3: column 2</td>
</tr>
</tbody>
</table>
CSS
#loadingImage {
position:absolute;
width:48px; /*image width */
height:48px; /*image height */
left:50%;
top:75px;
margin-left:-24px; /*image width/2 */
margin-top:-24px; /*image height/2 */
}
JavaScript
/* This is an echo of some data sent back via ajax */
/* This data should be filtered by nodeID and return only childNodeID's. */
/* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv. */
var jsonData = {
"result": [
{
"name": ".",
"path": "/nowlanf",
"lastModified": "2018-11-14T10:00:19.000-06:00",
"length": 0,
"permissions": "READ",
"format": "folder",
"mimeType": "text/directory",
"type": "dir",
"system": "data.iplantcollaborative.org",
"_links": {
"self": {
"href": "https://agave.iplantc.org/files/v2/media/system/data.iplantcollaborative.org//nowlanf"
},
"system": {
"href": "https://agave.iplantc.org/systems/v2/data.iplantcollaborative.org"
},
"metadata": {
"href": "https://agave.iplantc.org/meta/v2/data?q=%7B%22associationIds%22%3A%223539671535384531432-242ac11e-0001-002%22%7D"
},
"history": {
"href": "https://agave.iplantc.org/files/v2/history/system/data.iplantcollaborative.org//nowlanf"
}
}
},
{
"name": "analyses",
"path": "/nowlanf/analyses",
"lastModified": "2018-11-15T13:49:57.000-06:00",
"length": 0,
"permissions": "READ",
"format": "folder",
"system": "data.iplantcollaborative.org",
"mimeType": "text/directory",
"type": "dir",
"_links": {
"self": {
"href": "https://agave.iplantc.org/files/v2/media/system/data.iplantcollaborative.org//nowlanf/analyses"
},
"system": {
"href": "https://agave.iplantc.org/systems/v2/data.iplantcollaborative.org"
...