使用分层数据排序表

我有一个奇怪的情况，我有一个具有分层数据的HTML表，我需要提供排序数据的能力，但只有“父”行，而不是子节点。事实上，孩子们应该和父母保持联系，所以无论父母在哪里排序，孩子都应该跟随（但他们不必在内部排序）。例如：使用分层数据排序表

enter image description here

当我点击“等级”，它应该粗体的收视率和儿童（在这个例子中，杂草）排序应该只是去凑凑热闹。有没有一个神奇的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>

来源

2013-08-16 Rob Lauer

你能不能给我们的jsfiddle例子吗？或者至少给我们桌子的结构？ –

我继续添加表格本身的标记。 –

[在javascript中对每个第n个元素进行排序]的可能的重复（http://stackoverflow.com/questions/18053536/sorting-by-every-nth-element-in-javascript） – Bergi

如果您有任何说在这个问题上，要求有加入标记更多的结构/定义，这样就可以依靠数据，而不是呈现，以确定这些行是如何相关。

现在看来，您需要依赖演示文稿的某些元素。这可能会相当脆弱，因为任何稍后进入并更改演示文稿都会很快破坏您的逻辑。

这里我假设只有顶级行有<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);

来源

2013-08-16 16:43:09 dc5

哇，谢谢！这远远超出了我希望看到的！ –

使用分层数据排序表

回答

相关问题