Question

我想从ludo修改jquery.TreeTable.js以使用设置扩展的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

答案是重写整个图书馆......从头开始，由于各种原因，立方体的treetable最终被限制。在这一点上，我有自己的烘焙解决方案，效果很好。

脚本示例：

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

<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 3

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

要求：

表必须有一类树 Tr必须有一类child-of-node-nodeid

这就是它。

:)

你的桌子看起来像： elementid as bigint parentid as bigint，标题为varchar

1,0，家长内容 2,1，儿童内容 3,2，儿童内容 4,2，儿童内容 5,4，儿童内容的孩子

简单示例。

jQuery TreeTable（cubicphase） - 如何从动态添加扩展节点切换到静态？

3 个答案: