Programmable API

EasyTree provides a number of functions that allow external code to access internal state, more details can be found in the global function pages. The demo below gives some examples of how the API can be used

Programmable Interface
Node Text

Is Folder




 <div class="box" style="float:left; width:335px; margin-left:30px">
     <div class="box_title">Programmable Interface</div>
     <div class="box_content">
         <input type="text" value="New Node" style="width:200px" id="nodeText" /> Node Text
         <br /><br />
         <input type="checkbox" id="nodeIsFolder" /> Is Folder
         <br /><br />
         <select id="lstNodes"></select>
         <br /><br />
         <button onclick="addNode(); return false;">Add</button>
         <button onclick="removeNodeX(); return false;">Remove</button>
         <button onclick="activateNode(); return false;">Activate</button><br />
         <button onclick="toggleNode(); return false;">Toggle</button>
         <button onclick="openNode(); return false;">Open</button>
         <button onclick="closeNode(); return false;">Close</button>
     </div>
 </div>
 <script>
     function addNode() {
         var sourceNode = {};
         sourceNode.text = $('#nodeText').val();
         sourceNode.isFolder = $('#nodeIsFolder').is(":checked");
         var targetId = $('#lstNodes :selected').val();

         easytree.addNode(sourceNode, targetId);
         easytree.rebuildTree();
         loadSelectBox();
     }
     function removeNodeX() {
         var currentlySelected = $('#lstNodes :selected').val();
         var node = easytree.getNode(currentlySelected);
         if (!node) { return; }

         easytree.removeNode(node.id);
         easytree.rebuildTree();
         loadSelectBox();
     }
     function activateNode() {
         var currentlySelected = $('#lstNodes :selected').val();
         var node = easytree.getNode(currentlySelected);
         if (!node)
         {
             easytree.activateNode(''); // unactivate all nodes
             return;
         }
         easytree.activateNode(node.id);
     }
     function toggleNode() {
         var currentlySelected = $('#lstNodes :selected').val();
         easytree.toggleNode(currentlySelected);
         loadSelectBox();
     }
     function openNode() {
         var currentlySelected = $('#lstNodes :selected').val();
         var node = easytree.getNode(currentlySelected);
         if (!node) { return; }

         node.isExpanded = true;
         easytree.rebuildTree();
         loadSelectBox();
     }
     function closeNode() {
         var currentlySelected = $('#lstNodes :selected').val();
         var node = easytree.getNode(currentlySelected);
         if (!node) { return; }

         node.isExpanded = false;
         easytree.rebuildTree();
         loadSelectBox();
     }

     // we have to reload selected box at the end of each function to ensure it is always up to date
     function loadSelectBox() { 
         var select = $('#lstNodes')[0];
         var currentlySelected = $('#lstNodes :selected').val();

         select.length = 0; // clear select box

         var root = new Option();
         root.text = 'Root';
         root.value = '';
         select.add(root);

         var allNodes = easytree.getAllNodes();
         addOptions(allNodes, select, '-', currentlySelected);
     }
     function addOptions(nodes, select, prefix, currentlySelected) {
         var i = 0;
         for (i = 0; i < nodes.length; i++) {

             var option = new Option();
             option.text = prefix + ' ' + nodes[i].text;
             option.value = nodes[i].id;
             option.selected = currentlySelected == nodes[i].id;
             select.add(option);

             if (nodes[i].children && nodes[i].children.length > 0) {
                 addOptions(nodes[i].children, select, prefix + '-', currentlySelected);
             }
         }
     }

     var easytree = $('#demo_menu').easytree();
     $(document).ready(function () {
         loadSelectBox();
     });
 </script>