2012-09-19 79 views
5

http://jsfiddle.net/9sKwJ/66/排序行對與的tablesorter

tr.spacer { height: 40px; } 
$.tablesorter.addWidget({ 
    id: 'spacer', 
    format: function(table) { 
     var c = table.config, 
     $t = $(table), 
     $r = $t.find('tbody').find('tr'), 
     i, l, last, col, rows, spacers = []; 
     if (c.sortList && c.sortList[0]) { 
      $t.find('tr.spacer').removeClass('spacer'); 
      col = c.sortList[0][0]; // first sorted column 
      rows = table.config.cache.normalized; 
      last = rows[0][col]; // text from first row 
      l = rows.length; 
      for (i=0; i < l; i++) { 
       // if text from row doesn't match last row, 
       // save it to add a spacer 
       if (rows[i][col] !== last) { 
        spacers.push(i-1); 
        last = rows[i][col]; 
       } 
      } 
      // add spacer class to the appropriate rows 
      for (i=0; i<spacers.length; i++){ 
       $r.eq(spacers[i]).addClass('spacer'); 
      } 
     } 
    } 
}); 


$('table').tablesorter({ 
    widgets : ['spacer'] 
}); 
<table id="test"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Number</th> 
     <th>Another Example</th> 
    </tr> 
    </thead> 
<tbody> 

    <tr> 
    <td>Test4</td> 
    <td>4</td> 
    <td>Hello4</td> 
    </tr>   

    <tr> 
    <td colspan="3">Test4</td> 
    </tr> 

    <tr> 
    <td>Test3</td> 
    <td>3</td> 
    <td>Hello3</td> 
    </tr>   

    <tr> 
    <td colspan="3">Test3</td> 
    </tr> 

    <tr> 
    <td>Test2</td> 
    <td>2</td> 
    <td>Hello2</td> 
    </tr>   

    <tr> 
    <td colspan="3">Test2</td> 
    </tr> 

    <tr> 
    <td>Test1</td> 
    <td>1</td> 
    <td>Hello1</td> 
    </tr>   

    <tr> 
    <td colspan="3">Test1</td> 
    </tr> 
</tbody> 
</table> 

此排序只是我想,如果你在第一列進行排序的方式,但其他兩列別我不會保持同樣的配對'tr'排序即時尋找。

對此有何幫助?

+0

我更新了小提琴鏈接incase你去了第一個,再次檢查。 – user1659043

回答

6

每個重複行,可使用expand-child類名稱:

<tr> 
    <td>Test3</td> 
    <td>3</td> 
    <td>Hello3</td> 
</tr>   

<tr class="expand-child"> 
    <td colspan="3">Test3</td> 
</tr> 

它是由cssChildRow選項定義:

$('table').tablesorter({ 
    cssChildRow: "expand-child" 
});​ 

這裏是行動的它a demo

+0

非常有用。非常感謝! :) –

+0

太好了。這應該是一個答案。 – Zaimatsu