带有分层数据的排序表

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