jQuery TreeTable (cubicphase) - How to switch from dynamic adding of expanding node to static?

I would like to modify jquery.TreeTable.js from ludo to use cell.find method of setting up the expand.

Here is the original Source:

if(options.expandable) {
      cell.prepend(开发者_运维百科'<span style="margin-left: -' + options.indent + 'px; padding-left: ' + options.indent + 'px" class="expander"></span>');
      $(cell[0].firstChild).click(function() { node.toggleBranch(); });

Here is what I'd like (somewhat):

        if(options.expandable) {
      cell.find('.expander').click(function(){
          node.toggleBranch();
        });

I think I am close however not quite there...

The original source file:Jquery.TreeTable.js

The answer was to rewrite the entire library...from scratch as the cubicPhase treetable ended up being to limited for a variety of reasons. At this point I have my own baked solutions that works quite well.

Example of Script:

if (children <= 0) {
        $(this).addClass('no-children');
    } else {
        if ($(this).hasClass('expander')) {
            $(this).bind('click',function() {
                if ($(this).hasClass('collapsed')) {
                    expandchildrenbranches($(this));
                    $(this).removeClass('collapsed');
                } else {
                    collapsechildrenbranches($(this));
                    $(this).addClass('collapsed');
                }
            });

        } else {
            $(this).find('.expander').bind('click',function() {
                var row = $(this).parents('tr:first');

                if (row.hasClass('collapsed')) {
                    expandchildrenbranches(row);
                    row.removeClass('collapsed');
                } else {
                    collapsechildrenbranches(row);
                    row.addClass('collapsed');
                }
            });
        }

<table id="tree" class="tree">
 <tr id="node-71" class="parent pnode">
  <td class="icons">Imgs</td>
  <td class="content">Help System</td>
 </tr>
 <tr id="node-72" class="child-of-node-71 cnode">
  <td class="icons">Imgs</td>
  <td class="content">Other Data</td>
 </tr></table>

function getbranchlevel (c) {
  var c = c.split(' ');

  for (i = 0; i < c.length; i++) {
   if (c[i].indexOf('level-') == 0) {
    return Number(c[i].replace('level-',''));
   }
  }

  return 0;
 }
 function getbranchid(c) {
  return c.replace('node-','');
 }

 function collapsechildrenbranches(p) {
  var id = getbranchid(p.attr('id'));
  $('table.tree tr.child-of-node-'+id).each (function () {
   $(this).css('display','none');
   collapsechildrenbranches($(this));
  });
 }

 function expandchildrenbranches(p) {
  var id = getbranchid(p.attr('id'));
  $('table.tree tr.child-of-node-'+id).each (function () {
   $(this).css('display','table-row');

   if (!$(this).hasClass('collapsed')) {
    expandchildrenbranches($(this));
   }
  });
 }

 $('table.tree tbody tr').each (function () {
  var id   = getbranchid($(this).attr('id'));
  var children = 0;
  var level  = getbranchlevel($(this).attr('class'));

  $(this).addClass('level-'+level);

  $('table.tree tr.child-of-node-'+id).each (function () {
   $(this).addClass('level-'+(level+1));
   $(this).find('td.indent').css('padding-left',((level+1)*30)+'px');
   children++;
  });

  if (children <= 0) {
   $(this).addClass('no-children');
  } else {
   if ($(this).hasClass('expander')) {
    $(this).bind('click',function() {
     if ($(this).hasClass('collapsed')) {
      expandchildrenbranches($(this));
      $(this).removeClass('collapsed');
     } else {
      collapsechildrenbranches($(this));
      $(this).addClass('collapsed');
     }
    });

   } else {
    $(this).find('.expander').bind('click',function() {
     var row = $(this).parents('tr:first');

     if (row.hasClass('collapsed')) {
      expandchildrenbranches(row);
      row.removeClass('collapsed');
     } else {
      collapsechildrenbranches(row);
      row.addClass('collapsed');
     }
    });
   }
  }
 });

The Above Code is the solution that I cam up with.

Requirements:

Table must have a class of tree Tr must have a class of child-of-node-nodeid

This is pretty much it.

:)

Your table would look like: elementid as bigint parentid as bigint, title as varchar

1,0,Parent Content 2,1,Child Content 3,2,Child of Child Content 4,2,Child of Child Content 5,4,Child of Child of Child Content

Simple Example.