展開/摺疊表中的行與嵌套行

我想創建一個具有以下結構的表：
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

展開/摺疊表中的行與嵌套行

回答

相關問題