jQuery TreeTable Add Node via ajax

Add Node via ajax with jQuery TreeTable.

by ronnjoe

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 = {
  "nodeID": {
    "1": [
      
       {"ID": "1.1",
        "childNodeType": "branch",
        "childData": [
          "1.1: column 1",
          "1.1: column 2"
          ]
      },
      {"ID": "1.2",
        "childNodeType": "leaf",
        "childData": [
          "1.2: column 1",
          "1.2: column 2"
          ]
      },
      {"ID":"1.3",
        "childNodeType": "leaf",
        "childData": [
          "1.3: column 1",
          "1.3: column 2"
          ]
      }
      
    ],
    "1.1": [

        {"ID":"1.1.1",
          "childNodeType": "leaf",
          "childData": [
            "1.1.1: column 1",
            "1.1.1: column 2"
            ]
        },
        {"ID":"1.1.2",
          "childNodeType": "leaf",
          "childData": [
            "1.1.2: column 1",
            "1.1.2: column 2"
            ]
        }
 
    ],
    "2": [

        {"ID":"2.1",
          "childNodeType": "leaf",
          "childData": [
            "2.1: column 1",
            "2.1: column 2"
            ]
        },
        {"ID":"2.2",
          "childNodeType": "leaf",
          "childData": [
            "2.2: column 1",
            "2.2: column 2"
            ]
        },
        {"ID":"2.3",
          "childNodeType": "leaf",
          "childData": [
            "2.3: column 1",
            "2.3: column 2"
            ]
        }

    ],
    "3": [

        {"ID":"3.1",
          "childNodeType": "leaf",
          "childData": [
            "3.1: column 1",
            "3.1: column 2"
            ]
        },
        {"ID":"3.2",
          "childNodeType": "leaf",
          "childData": [
            "3.2: column 1",
            "3.2: column 2"
            ]
        },
        {"ID":"3.3",
          "childNodeType":...