jQuery TreeTable (cubicphase) - Как перейти от динамического добавления расширяющегося узла к статическому?

Question

Я хотел бы изменить jquery.TreeTable.js из ludo, чтобы использовать метод cell.find для настройки расширения.

Вот исходный источник:

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(); });

Вотчто бы я хотел (несколько):

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

Я думаю, что я близко, но не совсем там ...

Исходный файл: Jquery.TreeTable.js

Answer 1

<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');
     }
    });
   }
  }
 });

Answer 2

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

Требования:

Таблица должна иметь класс дерева Tr должен иметь класс child-of-node-nodeid

Вот и все.

:)

Ваш стол будет выглядеть так: Elementid как Bigint парентид как бигинт, название как varchar

1,0, родительский контент 2,1, Детский контент 3,2, Child of Child Content 4,2, Child of Child Content 5,4, Child of Child of Content

Простой пример.

Answer 3

Ответ состоял в том, чтобы переписать всю библиотеку ... с нуля, поскольку древовидная таблица cubicPhase оказалась ограниченной по ряду причин.На данный момент у меня есть свои собственные запеченные решения, которые работают довольно хорошо.

Пример скрипта:

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');
                }
            });
        }