使用分层数据对表进行排序

Question

我有一个奇怪的情况，我有一个包含分层数据的 HTML 表，我需要提供对数据进行排序的能力，但只有“父”行，而不是子行。事实上，孩子应该保持依附于父母，所以无论父母被排序，孩子都应该跟随（但他们不必在内部排序）。例如：

当我点击“评分”时，它应该对粗体的评分进行排序，孩子们（本例中的杂草）应该只是顺其自然。是否有一个神奇的 jquery 插件可以为我做到这一点？ :)

EDIT 这是一个真正精简的渲染 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);