代码之家 › 专栏 › 技术社区 › Joe Garrett

jquery treetable(cubicphase)-如何从扩展节点的动态添加切换到静态?

jquery-plugins jquery-ui jquery

Joe Garrett · 技术社区 · 15 年前

我想修改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

3 回复 | 直到 15 年前

Joe Garrett 15 年前

答案是重写整个库…从零开始,因为cubicphase-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');
                }
            });
        }

Joe Garrett 15 年前

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

Joe Garrett 15 年前

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

要求:

表必须具有树类 tr必须具有节点nodeid的子类

差不多就是这样。

您的桌子应该是: 元素ID为bigint parentID为bigint, 标题为varchar

1,0,父内容 2,1,儿童内容 3,2,儿童内容 4,2,儿童内容 5,4,儿童内容的儿童

简单的例子。