使用分層數據排序表

Question

我有一個奇怪的情況，我有一個具有分層數據的HTML表，我需要提供排序數據的能力，但只有「父」行，而不是子節點。事實上，孩子們應該和父母保持聯繫，所以無論父母在哪裏排序，孩子都應該跟隨（但他們不必在內部排序）。例如：

當我點擊「等級」，它應該粗體的收視率和兒童（在這個例子中，雜草）排序應該只是去湊湊熱鬧。有沒有一個神奇的jquery插件，將爲我做這個？ :)

編輯這是一個真正精簡的HTML版本。我對此有一定的控制，但並不多（標記來自遠程端點......）。

<table id="grid"> 
<thead> 
    <tr role="row"> 
     <th>Name</th> 
     <th>Rating</th> 
     <th>Timing</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td><b>Butyrac 200</b></td> 
     <td><b>8</b></td> 
     <td>POST</td> 
     <td>3</td> 
    </tr> 
    <tr> 
     <td>Common chickweed</td> 
     <td>4</td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>Common dandelion</td> 
     <td>4</td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td><b>Chateau</b></td> 
     <td><b>14</b></td> 
     <td>PRE</td> 
     <td>6</td> 
    </tr> 
    <tr> 
     <td>Common chickweed</td> 
     <td>10</td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>Common dandelion</td> 
     <td>4</td> 
     <td></td> 
     <td></td> 
    </tr> 
</tbody> 

Answer 1

如果您有任何說在這個問題上，要求有加入標記更多的結構/定義，這樣就可以依靠數據，而不是呈現，以確定這些行是如何相關。

現在看來，您需要依賴演示文稿的某些元素。這可能會相當脆弱，因爲任何稍後進入並更改演示文稿都會很快破壞您的邏輯。

這裏我假設只有頂級行有<b>標記 - 您可能需要根據您的確切要求進行調整。

Working Fiddle

這裏沒有魔法，只是有點苦勞：

var $tbody = $('#grid > tbody'); 
var topRows = []; 
var children = []; 
$tbody.find('tr').each(function (idx, ele) { 
    var $ele = $(ele); 

    if ($ele.find('td:eq(0) > b').length) { 
     // It's a parent 

     // Make new parent 
     var newParent = { ele: $ele, children: [] }; 
     topRows.push(newParent); 

     // Keep track of the children 
     children = newParent.children; 
    } else { 
     // It's a child 
     children.push($ele); 
    } 
}); 

// Sort the top level array by the value of the rating td 
topRows.sort(function(topA, topB) { 
    var valA = +topA.ele.find('td:eq(1) > b').text(); 
    var valB = +topB.ele.find('td:eq(1) > b').text(); 

    return valA - valB; 
}); 

// Detach it temporarily to avoid live DOM updates 
$tbody.detach().empty(); 

// Add the newly sorted parents back in along with their children 
$.each(topRows, function(topIdx, top) { 
    $tbody.append(top.ele); 
    $.each(top.children, function(childIdx, child) { 
     $tbody.append(child); 
    }); 
}); 

$('#grid').append($tbody);