Tablolar, alt grup sıralama

Question

Bir grup sırayı bir tabloda ayrı ayrı sıralayabilen ve aynı zamanda satır grubunu "gruplandırılmış satırlarla" yapıştırabilen bir pencere öğesi oluşturmaya çalıştım. Ben ...

EDIT bu sorunu yaklaşım nasıl bilemiyorum: Ben sigara colspan sütunlarda sıralamak istiyorum. Her grup bir alt tablo olarak jsfiddle içinde

Temel kurulum davranması gerektiğini herkes bana doğru yönde zorlayabilir?

DÜZENLEME: Yeni jsfiddle İşte http://jsfiddle.net/L8bwW/28/

Answer 1

tablesorter kullanmayan bir Working example olduğunu.

anahtar grubuna Satırlarınızı tbody elemanı kullanmaktır. Sonra her teki içindeki tüm satırları ama sonuncuları sıralayın.

tablo şöyle olabilir:

<table class="sortable"> 
    <thead> 
     <tr> <th></th> <th>A-head</th> <th>B-head</th> <th>C-head</th> </tr> 
    </thead> 
    <tfoot> 
     <tr> <td></td> <td>A-foot</td> <td>B-foot</td> <td>C-foot</td></tr> 
    </tfoot> 

    <tbody class='sortable'> 
     <tr> <td>DDD</td><td> r1c1</td> <td>r1c2</td> <td>r1c3</td> </tr> 
     <tr> <td>AAA</td><td> r2c1</td> <td>r2c2</td> <td>r2c3</td> </tr> 
     <tr> <td>CCC</td><td> r3c1</td> <td>r3c2</td> <td>r3c3</td> </tr> 
     <tr> <td>BBB</td><td> r4c1</td> <td>r4c2</td> <td>r4c3</td> </tr> 
     <tr> <td colspan="4">summary info for the first group of rows</td> </tr> 
    </tbody> 

    <tbody class='sortable'> 
     <tr> <td>Zorro</td><td> r5c1</td> <td>r5c2</td> <td>r5c3</td> </tr> 
     <tr> <td>Caleb</td><td> r6c1</td> <td>r6c2</td> <td>r6c3</td> </tr> 
     <tr> <td>Momo</td><td> r7c1</td> <td>r7c2</td> <td>r7c3</td> </tr> 
     <tr> <td>Wolfie</td><td> r8c1</td> <td>r8c2</td> <td>r8c3</td> </tr> 
     <tr> <td colspan="4">summary info for rowgroup #2</td> </tr> 
    </tbody> 
    ... 

Ve bunun için fn bir çeşit şöyle olabilir:

function SortIt() { 
     jQuery('table.sortable > tbody.sortable').each(function(index,tbody) { 
     var $rowGroup = jQuery(tbody); 

     // select all but the last row in the tbody 
     var rows = $rowGroup.find('tr:not(last-child)').get(); 

     var sortDirection = $rowGroup.is('.sorted-asc') ? -1 : 1; 

     // Set a custom property on each row - 'sortKey', the key to sort. 
     // This example uses the text in the first column. It could use 
     // any column, or any content in the row. 
     jQuery.each(rows, function(index, row) { 
      row.sortKey = jQuery(row).children('td').first().text(); 
     }); 

     // actually sort the rows 
     rows.sort(function(a, b) { 
      if (a.sortKey < b.sortKey) return -sortDirection; 
      if (a.sortKey > b.sortKey) return sortDirection; 
      return 0; 
     }); 

     // retain the summary row - the last one 
     var summaryRow = $rowGroup.find("tr:last-child"); 

     // remove all the rows from the tbody 
     $rowGroup.find("tr").remove(); 

     // append the rows in sorted order 
     jQuery.each(rows, function(index, row) { 
      $rowGroup.append(row); 
      row.sortKey = null; 
     }); 

     // append the final row 
     $rowGroup.append(summaryRow); 

     if (sortDirection == 1) { $rowGroup.addClass('sorted-asc'); } 
     else {$rowGroup.removeClass('sorted-asc'); } 

     }); 
    }