YUI TreeView

As usual, it’s quiet around here because my life hasn’t been so quiet lately.  Lots happening at work and lots happening at home.  And I still don’t have my lawn mowed.

And one of my things I seem to be lacking on blogging is JavaScript. But that doesn’t mean I haven’t been using it!  No, I devote many hours a day with it.  I’ve been using the YUI components heavily and they are oh-so-pleasant to use.  They really take over the low-level work and let you concentrate on the important stuff.

Example: today I was playing with a TreeView object and making the leaves of the tree appear in a table when clicked. This is easier than I ever thought it would be.

First, I saved the leaf node with an ID and a label, because I wanted them both in the same row but different cells. I also wanted the row to be able to match to the ID so I could get to that row easily if need be. This is how I saved the node:

var nodeData = {label: mylabel id: myId} 
 var txtNode = new YAHOO.widget.TextNode(nodeData, node ,false);

And this is how I took that data from the tree node and put it in the table:

     tree.subscribe("labelClick",function(node) {

            // if it doesn't have children, then it must be the text
            // of a rule
            if ( ! node.hasChildren() ) {
                // we are only going to add it once
               if (document.getElementById(node.data.id)!=null) {
                   return ; 
                }
                var myTable = document.getElementById("tableID");

                var numRows = ruleTable.rows.length;

                var row = ruleTable.insertRow(numRows)

                row.id=node.data.id;

                var idCell = row.insertCell(0);
                idCell.innerHTML=node.data.id;

               var txtCell = row.insertCell(1);
               txtCell.innerHTML=node.data.label;

         }
       })

And that was that.

Powered by ScribeFire.

Leave a Reply

You must be logged in to post a comment.