jQuery Treetable ft. jQuery ContextMenu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-treetable/3.2.0/jquery.treetable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.1.1/jquery.contextMenu.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.1.1/jquery.contextMenu.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-treetable/3.2.0/css/jquery.treetable.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-treetable/3.2.0/css/jquery.treetable.theme.default.min.css">
<ul id="the-node">
  <li><span class="context-menu-one btn btn-info">right click me 1</span></li>
  <li><span class="context-menu-one btn btn-danger">right click me 2</span></li>
  <li>right click me 3</li>
  <li>right click me 4</li>
</ul>

<table id="example-basic">
  <caption>Basic jQuery treetable Example</caption>
  <thead>
    <tr>
      <th>Tree column</th>
      <th>Additional data</th>
    </tr>
  </thead>
  <tbody>
    <tr data-tt-id="1" id='p1'>
      <td>Node 1: Click on the icon in front of me to expand this branch.</td>
      <td>I live in the second column.</td>
    </tr>
    <tr data-tt-id="1.1" data-tt-parent-id="1">
      <td>Node 1.1: Look, I am a table row <em>and</em> I am part of a tree!</td>
      <td>Interesting.</td>
    </tr>
    <tr data-tt-id="1.1.1" data-tt-parent-id="1.1" id='xxx'>
      <td>Node 1.1.1: I am part of the tree too!</td>
      <td>That's it!</td>
    </tr>
    <tr data-tt-id="2">
      <td>Node 2: I am another root node, but without children</td>
      <td>Hurray!</td>
    </tr>
  </tbody>
</table>

JavaScript

$(function() {
  $table = $("#example-basic");
  $table.contextMenu({
    selector: 'tr',
    callback: function(key, options) {
      var m = "clicked: " + key + " on " + $(this).text();

      window.console && console.log(m);
    },
    items: {
      "edit": {
        name: "Edit",
        icon: "edit"
      },
      "cut": {
        name: "Cut",
        icon: "cut"
      },
      "create": {
        name: "Create",
        icon: "copy",
        callback: function(key, options) {
          var row = '<tr data-tt-id="1.2" data-tt-parent-id="1" id="yyy"><td>Node 1.2</td><td>Awesome</td></tr>';
          // data-tt-id of target parent
          var parentTtId = "1";
          var node = $table.treetable("node", parentTtId);
          $table.treetable("loadBranch", node, row);
        }
      },
      "paste": {
        name: "Paste",
        icon: "paste"
      },
      "delete": {
        name: "Delete",
        icon: "delete"
      },
      "sep1": "---------",
      "quit": {
        name: "Quit",
        icon: function($element, key, item) {
          return 'context-menu-icon context-menu-icon-quit';
        }
      }
    }
  });
  $table.treetable({
    expandable: true
  });
});