展开/折叠表中的行与嵌套行

我想创建一个具有以下结构的表：
ROW1 datacolumn1 datacolumn2 datacolumn2
SubRow1 datacolumn1 datacolumn2 datacolumn2
SubRow2 datacolumn1 datacolumn2 datacolumn2
SubRow3 datacolumn1 datacolumn2 datacolumn2
展开/折叠表中的行与嵌套行

我想让这些子箭头在点击时展开/折叠。我似乎不能使它与表格一起工作。我知道列表将是更好的选择，但表格更容易维护。

<tbody> 
    <tr class="row1 head1"> 
     <td>Cash and Equivalents</td> 
     <td>000,000</td> 
     <td>000,000</td> 

    </tr> 
    <tr class="row1 head2 closed"> 
     <td>Cash and Equivalents</td> 
     <td>000,000</td> 
     <td>000,000</td> 

    </tr> 
    <tr class="row1 head3"> 
     <td>Cash and Equivalents</td> 
     <td>000,000</td> 
     <td>000,000</td> 

    </tr> 
    <tr class="row1 head4"> 
     <td>Cash and Equivalents</td> 
     <td>000,000</td> 
     <td>000,000</td> 

    </tr> 
    <tr class="row1 head5"> 
     <td>Cash and Equivalents</td> 
     <td>000,000</td> 
     <td>000,000</td> 

    </tr> 
    <tr class="row2 head1"> 
     <td>Cash and Equivalents</td> 
     <td>000,000</td> 
     <td>000,000</td> 

    </tr> 

    <tr class="row2 head4"> 
     <td>Cash and Equivalents</td> 
     <td>000,000</td> 
     <td>000,000</td> 

    </tr> 
    <tr class="row2 head5"> 
     <td>Cash and Equivalents</td> 
     <td>000,000</td> 
     <td>000,000</td> 

    </tr> 
    <tr> 
     <td>Cash and Equivalents</td> 
     <td>000,000</td> 
     <td>000,000</td> 

    </tr> 
    <tr> 
     <td>Cash and Equivalents</td> 
     <td>000,000</td> 
     <td>000,000</td> 

    </tr> 

</tbody>

上排一下，我调用下面的函数：

holdingsTree: function(that){ 
    var stack = '', 
     classes = ba.splitClasses(that.attr('class')), 
     nextRow = ba.getClassNumber(classes[1], "head"); 

    if (that.next().hasClass('head'+nextRow)){ 
     if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){ 
      that.nextUntil('.head1').hide().addClass('closed').removeClass('open'); 
     } else if (that.next().hasClass(classes[0])){ 
      stack = that.nextUntil('.head1'); 
      $.each(stack, function(i, item){ if ($(item).hasClass('head' + (nextRow))){ $(this).show().addClass('open').removeClass('closed'); } }); 
     } 
    } else if (that.next().hasClass('head'+ (nextRow+1))){ 
     if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){ 
      that.nextUntil('.head1').hide().addClass('closed').removeClass('open'); 
     } else if (that.next().hasClass(classes[0])){ 
      stack = that.nextUntil('.head1'); 
      $.each(stack, function(i, item){ if ($(item).hasClass('head' + (nextRow+1))){ $(this).show().addClass('open').removeClass('closed'); } }); 
     } 
    } else if (that.next().hasClass('head'+ (nextRow+2))){ 
     if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){ 
      that.nextUntil('.head1').hide().addClass('closed').removeClass('open'); 
      return; 
     } else if (that.next().hasClass(classes[0])){ 
      stack = that.nextUntil('.head'+ (nextRow+3)); 
      $.each(stack, function(i, item){ if ($(item).hasClass('head' + (nextRow+2))){ $(this).show().addClass('open').removeClass('closed'); } }); 
      //stack.find('.head'+(nextRow+2)).show().addClass('open').removeClass('closed'); 
     } 
    } else if (that.next().hasClass('head'+ (nextRow+3))){ 
     if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){ 
      that.nextUntil('.head1').hide().addClass('closed').removeClass('open'); 
     } else if (that.next().hasClass(classes[0])){ 
      stack = that.nextUntil('.head1'); 
      $.each(stack, function(i, item){ if ($(item).hasClass('head' + (nextRow+3))){ $(this).show().addClass('open').removeClass('closed'); } }); 
     } 
    } else if (that.next().hasClass('head'+ (nextRow+4))){ 
     if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){ 
      that.nextUntil('.head1').hide().addClass('closed').removeClass('open'); 
     } else if (that.next().hasClass(classes[0])){ 
      that.nextUntil('.head1').show().addClass('open').removeClass('closed'); 
     } 
    } 

}, 

splitClasses: function(names){ 
    var names = names.split(' '); 
    return names; 
}, 

getClassNumber: function(name, pretext){ 
    var result = name.split(pretext); 
    console.log(parseInt(result[1]) + 1); 
    return parseInt(result[1]) + 1; 
}

它非常糟糕。我知道。 :)

来源

2012-07-20 amit

你可以有你父母打电话的行类，并为你呼儿行类，并切换其显示。

方法如下：

$(document).ready(function() { 

    function getChildren($row) { 
     var children = []; 
     while($row.next().hasClass('child')) { 
      children.push($row.next()); 
      $row = $row.next(); 
     }    
     return children; 
    }   

    $('.parent').on('click', function() { 

     var children = getChildren($(this)); 
     $.each(children, function() { 
      $(this).toggle(); 
     }) 
    }); 

})

检查这个捣鼓了完整的运行代码http://jsfiddle.net/T8t2r/3/ 请接受的答案，如果这能解决您的问题！

祝你好运！

编辑：在更多层次上工作一种方法是有一个级别属性。所以这里是更新后的版本，可以在任何级别上工作。http://jsfiddle.net/T8t2r/9/

$(document).ready(function() { 

    function getChildren($row) { 
     var children = [], level = $row.attr('data-level'); 
     while($row.next().attr('data-level') > level) { 
      children.push($row.next()); 
      $row = $row.next(); 
     }    
     return children; 
    }   

    $('.parent').on('click', function() { 

     var children = getChildren($(this)); 
     $.each(children, function() { 
      $(this).toggle(); 
     }) 
    }); 

})

来源

2012-07-20 07:31:44 Angel

除了切换，您可以使用fadeToggle（）或slideToggle（）来获得不同的效果。 – Angel 2012-07-20 07:38:19

只处理单层嵌套。我有多个嵌套级别照顾.. – amit 2012-07-22 22:04:26

更新了我的答案在任何级别上的工作。 – Angel 2012-07-23 07:12:34

-1

由于您已经在使用jQuery，因此您可以使用插件datatales。

正如您可以在页面的示例部分中看到的那样，您正在尝试使用代码实现的目标。

来源

2012-07-20 07:25:47 DKSan

从这个例子中很难确定你想要做什么。

你所要做的应该是相当简单 - 什么我做的是从头开始重写，使用以下概念：

给每个点击的项目（行）它自己的ID，但让他们全部在一个“可点击”类中
根据可点击的父级的ID为每个子行分配一个类，例如'[id] -sub'
在'clickable'类上设置点击事件，确定点击的物品ID，并使用它切换（隐藏/显示）所有具有'[点击ID]的子行'-sub'

这样做，你应该有更少的代码，它应该更具可读性。

希望这有助于...

来源

2012-07-20 07:26:57

啊，DKSan建议DataTables - 我实际上也使用过DataTables Details Row这类东西，但除非您需要其他DataTables用于其他目的，否则我个人建议避免它 - 它可以是很多痛苦让细节行工作正是你想要的。 – 2012-07-20 07:30:35

你可以这样做：

$('.mySelectorOfNOTSubRow').toggle(
    function(){ 
     $(this).nextUntil('.mySelectorOfNOTSubRow').show(); 
    }, function(){ 
     $(this).nextUntil('.mySelectorOfNOTSubRow').hide(); 
});

HTML：

<table> 
<tbody> 
<tr class="head"><td></td></tr> 
    <tr class="sub"><td></td></tr> 
    <tr class="sub"><td></td></tr> 
    <tr class="sub"><td></td></tr> 
<tr class="head"><td></td></tr> 
    <tr class="sub"><td></td></tr> 
    <tr class="sub"><td></td></tr> 
    <tr class="sub"><td></td></tr> 
<tr class="head"><td></td></tr> 
    <tr class="sub"><td></td></tr> 
    <tr class="sub"><td></td></tr> 
    <tr class="sub"><td></td></tr> 
... 
</tbody> 
</table>

CSS：

.sub{display: none;}

Fiddle

来源

2012-07-20 07:40:42

这只需要照顾一个级别的嵌套。我必须照顾多达5层的嵌套。 – amit 2012-07-22 22:03:20

展开/折叠表中的行与嵌套行

回答

相关问题