帶有分層數據的排序表

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>標記-您可能需要根據實際要求進行調整。

工作小提琴

這里沒有魔術，只有一點肘油脂：

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);